# 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-26 (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; }
}
```

---
## 20 CSS Animated Buttons

URL: https://codefronts.com/motion/css-animated-buttons/
Description: 20 hand-coded CSS animated buttons — neon glow, ripple, 3D press, liquid fill, jelly bounce, shine sweep, animated border, moving gradient CTA, text flip, submit success state, add-to-cart progress, download icon, hamburger-to-close, toggle switch, loading spinner inside button, next/prev arrow nav, and ghost button background reveal. Half pure CSS, half lightweight JS for production interactions.
Demo count: 20

### 01. CSS Neon Glow Button

**Type:** Pure CSS
**Description:** A neon-lit CTA button with a pulsing glow halo and colour-shifting outline, built entirely with CSS box-shadow animations and no JavaScript.

**HTML:**
```html
<div class="ab-01">
  <div class="ab-01__scene">
    <p class="ab-01__label">Premium SaaS — Launch Your Project</p>
    <h2 class="ab-01__headline">Build faster.<br>Ship smarter.</h2>
    <p class="ab-01__sub">Join 50,000+ developers already on the platform.</p>
    <button class="ab-01__btn">Get Started Free</button>
    <p class="ab-01__hint">No credit card required · Cancel anytime</p>
  </div>
</div>
```

**CSS:**
```css
.ab-01,.ab-01 *,.ab-01 *::before,.ab-01 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-01 ::selection{background:#b829ff;color:#fff}
.ab-01{
  --neon:#b829ff;
  --neon-dim:rgba(184,41,255,.35);
  --bg:#0a0010;
  --text:#e8d5ff;
  font-family:system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ab-01__scene{
  text-align:center;
  padding:2.5rem 2rem;
  max-width:520px;
}
.ab-01__label{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--neon);
  margin-bottom:.75rem;
  opacity:.8;
}
.ab-01__headline{
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:800;
  color:#fff;
  line-height:1.15;
  margin-bottom:.75rem;
}
.ab-01__sub{
  font-size:.95rem;
  color:var(--text);
  opacity:.7;
  margin-bottom:2rem;
}
.ab-01__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 2.4rem;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  background:transparent;
  border:2px solid var(--neon);
  border-radius:8px;
  cursor:pointer;
  outline:none;
  text-transform:uppercase;
  transition:color .3s,background .3s,border-color .3s,box-shadow .3s;
  box-shadow:0 0 8px var(--neon-dim),0 0 20px var(--neon-dim),inset 0 0 10px rgba(184,41,255,.08);
  animation:ab-01-pulse 2s ease-in-out infinite;
  will-change:box-shadow;
  text-shadow:0 0 8px rgba(184,41,255,.6);
}
.ab-01__btn:hover{
  background:var(--neon);
  color:#fff;
  box-shadow:0 0 16px var(--neon),0 0 40px var(--neon),0 0 80px var(--neon-dim),inset 0 0 16px rgba(255,255,255,.15);
  text-shadow:none;
  animation-play-state:paused;
}
.ab-01__btn:active{
  transform:scale(.97);
}
@keyframes ab-01-pulse{
  0%,100%{box-shadow:0 0 8px var(--neon-dim),0 0 20px var(--neon-dim),inset 0 0 10px rgba(184,41,255,.08)}
  50%{box-shadow:0 0 14px var(--neon),0 0 36px var(--neon-dim),0 0 60px rgba(184,41,255,.15),inset 0 0 16px rgba(184,41,255,.12)}
}
.ab-01__hint{
  margin-top:1rem;
  font-size:.78rem;
  color:var(--text);
  opacity:.45;
}
@media(prefers-reduced-motion:reduce){
  .ab-01__btn{animation:none}
}
```

### 02. CSS Background Slide Hover Button

**Type:** Pure CSS
**Description:** Four directional background-slide hover buttons — left, right, top, and bottom — where a solid fill sweeps across the button face on hover using CSS pseudo-element transforms.

**HTML:**
```html
<div class="ab-02">
  <p class="ab-02__title">Background Slide Directions</p>
  <div class="ab-02__grid">
    <button class="ab-02__btn ab-02__btn--left"><span>Slide Left</span></button>
    <button class="ab-02__btn ab-02__btn--right"><span>Slide Right</span></button>
    <button class="ab-02__btn ab-02__btn--top"><span>Slide Top</span></button>
    <button class="ab-02__btn ab-02__btn--bottom"><span>Slide Bottom</span></button>
  </div>
</div>
```

**CSS:**
```css
.ab-02,.ab-02 *,.ab-02 *::before,.ab-02 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-02 ::selection{background:#6c63ff;color:#fff}
.ab-02{
  --fill:#6c63ff;
  --text:#1a1a2e;
  --border:#6c63ff;
  font-family:system-ui,sans-serif;
  background:#f0eeff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-02__title{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6c63ff;
  opacity:.7;
}
.ab-02__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.ab-02__btn{
  position:relative;
  overflow:hidden;
  padding:.8rem 2rem;
  font-size:.95rem;
  font-weight:700;
  color:var(--fill);
  background:transparent;
  border:2px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  outline:none;
  transition:color .35s;
  letter-spacing:.03em;
}
.ab-02__btn span{
  position:relative;
  z-index:1;
}
.ab-02__btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--fill);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.ab-02__btn:hover{color:#fff}
.ab-02__btn--left::before{transform:translateX(-100%)}
.ab-02__btn--left:hover::before{transform:translateX(0)}
.ab-02__btn--right::before{transform:translateX(100%)}
.ab-02__btn--right:hover::before{transform:translateX(0)}
.ab-02__btn--top::before{transform:translateY(-100%)}
.ab-02__btn--top:hover::before{transform:translateY(0)}
.ab-02__btn--bottom::before{transform:translateY(100%)}
.ab-02__btn--bottom:hover::before{transform:translateY(0)}
.ab-02__btn:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
  .ab-02__btn::before{transition:none}
  .ab-02__btn{transition:none}
}
```

### 03. CSS Pure CSS Ripple Effect Button

**Type:** Pure CSS
**Description:** A Material Design-inspired ripple effect on button click, achieved entirely with CSS pseudo-elements and the :active state — no JavaScript required.

**HTML:**
```html
<div class="ab-03">
  <p class="ab-03__label">Click or tap to trigger</p>
  <div class="ab-03__row">
    <button class="ab-03__btn ab-03__btn--violet">Get Started</button>
    <button class="ab-03__btn ab-03__btn--teal">Learn More</button>
    <button class="ab-03__btn ab-03__btn--rose">Subscribe</button>
  </div>
</div>
```

**CSS:**
```css
.ab-03,.ab-03 *,.ab-03 *::before,.ab-03 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-03 ::selection{background:#7c3aed;color:#fff}
.ab-03{
  font-family:system-ui,sans-serif;
  background:#0f0c1a;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-03__label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a78bfa;
  opacity:.6;
}
.ab-03__row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-03__btn{
  position:relative;
  overflow:hidden;
  padding:.85rem 2rem;
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  letter-spacing:.03em;
  transition:filter .2s;
}
.ab-03__btn:hover{filter:brightness(1.1)}
.ab-03__btn:active{filter:brightness(.9)}
.ab-03__btn--violet{background:#7c3aed}
.ab-03__btn--teal{background:#0d9488}
.ab-03__btn--rose{background:#e11d48}
.ab-03__btn::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  background:rgba(255,255,255,.4);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
}
.ab-03__btn:active::after{
  animation:ab-03-ripple .6s linear forwards;
}
@keyframes ab-03-ripple{
  0%{width:0;height:0;opacity:.4}
  80%{width:400%;height:400%;opacity:.1}
  100%{width:500%;height:500%;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .ab-03__btn:active::after{animation:none}
}
```

### 04. CSS Animated Border Draw Button

**Type:** Pure CSS
**Description:** Hover triggers a border that draws itself clockwise around the button perimeter using CSS clip-path transitions on pseudo-elements — no SVG required.

**HTML:**
```html
<div class="ab-04">
  <p class="ab-04__label">Hover to draw the border</p>
  <div class="ab-04__row">
    <button class="ab-04__btn"><span>Explore Docs</span></button>
    <button class="ab-04__btn ab-04__btn--green"><span>Start Building</span></button>
    <button class="ab-04__btn ab-04__btn--rose"><span>Contact Sales</span></button>
  </div>
</div>
```

**CSS:**
```css
.ab-04,.ab-04 *,.ab-04 *::before,.ab-04 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-04 ::selection{background:#6366f1;color:#fff}
.ab-04{
  --accent:#6366f1;
  --fill-bg:#6366f1;
  font-family:system-ui,sans-serif;
  background:#09090f;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  padding:2rem;
}
.ab-04__label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#818cf8;
  opacity:.65;
}
.ab-04__row{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-04__btn{
  position:relative;
  padding:.85rem 2.2rem;
  font-size:.95rem;
  font-weight:700;
  color:#c7d2fe;
  background:transparent;
  border:none;
  outline:none;
  cursor:pointer;
  letter-spacing:.04em;
  transition:color .4s,background .4s;
}
.ab-04__btn--green{--accent:#10b981;--fill-bg:#10b981;color:#6ee7b7}
.ab-04__btn--rose{--accent:#f43f5e;--fill-bg:#f43f5e;color:#fda4af}
.ab-04__btn span{position:relative;z-index:1}
.ab-04__btn::before,.ab-04__btn::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* top + right */
.ab-04__btn::before{
  border-top:2px solid var(--accent);
  border-right:2px solid var(--accent);
  width:0;height:0;
  transition:width .2s ease,height .2s ease .2s;
}
/* bottom + left */
.ab-04__btn::after{
  border-bottom:2px solid var(--accent);
  border-left:2px solid var(--accent);
  width:0;height:0;
  top:auto;left:auto;
  right:0;bottom:0;
  transition:width .2s ease .4s,height .2s ease .2s;
}
.ab-04__btn:hover::before{width:100%;height:100%}
.ab-04__btn:hover::after{width:100%;height:100%}
.ab-04__btn:hover{color:#fff;background:rgba(99,102,241,.12)}
.ab-04__btn--green:hover{background:rgba(16,185,129,.12)}
.ab-04__btn--rose:hover{background:rgba(244,63,94,.12)}
@media(prefers-reduced-motion:reduce){
  .ab-04__btn::before,.ab-04__btn::after{transition:none;width:100%;height:100%}
}
```

### 05. CSS 3D Press Effect Button

**Type:** Pure CSS
**Description:** A tactile 3D button that physically sinks into its own raised platform on click, simulating a keycap-style press using CSS transforms and layered box-shadows.

**HTML:**
```html
<div class="ab-05">
  <p class="ab-05__label">Click or tap the buttons</p>
  <div class="ab-05__row">
    <button class="ab-05__btn ab-05__btn--indigo">Purchase Now</button>
    <button class="ab-05__btn ab-05__btn--emerald">Download App</button>
    <button class="ab-05__btn ab-05__btn--rose">Delete File</button>
  </div>
</div>
```

**CSS:**
```css
.ab-05,.ab-05 *,.ab-05 *::before,.ab-05 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-05 ::selection{background:#4338ca;color:#fff}
.ab-05{
  font-family:system-ui,sans-serif;
  background:#f8fafc;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  padding:2rem;
}
.ab-05__label{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
}
.ab-05__row{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-05__btn{
  --face:#6366f1;
  --depth:#3730a3;
  position:relative;
  padding:.85rem 2.2rem;
  font-size:1rem;
  font-weight:800;
  color:#fff;
  background:var(--face);
  border:none;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  letter-spacing:.03em;
  box-shadow:0 6px 0 var(--depth),0 8px 12px rgba(0,0,0,.18);
  transition:transform .08s,box-shadow .08s;
  will-change:transform;
  user-select:none;
}
.ab-05__btn--indigo{--face:#6366f1;--depth:#3730a3}
.ab-05__btn--emerald{--face:#10b981;--depth:#065f46}
.ab-05__btn--rose{--face:#f43f5e;--depth:#9f1239}
.ab-05__btn:hover{filter:brightness(1.05)}
.ab-05__btn:active{
  transform:translateY(4px);
  box-shadow:0 2px 0 var(--depth),0 4px 6px rgba(0,0,0,.12);
}
@media(prefers-reduced-motion:reduce){
  .ab-05__btn{transition:none}
}
```

### 06. CSS Liquid Fill Button Animation

**Type:** Pure CSS
**Description:** A button whose interior fills with a rising liquid wave on hover, created entirely with a CSS pseudo-element, SVG-like border-radius shaping, and a translateY animation.

**HTML:**
```html
<div class="ab-06">
  <p class="ab-06__label">Hover to fill</p>
  <div class="ab-06__row">
    <button class="ab-06__btn ab-06__btn--cyan"><span>Explore</span></button>
    <button class="ab-06__btn ab-06__btn--violet"><span>Subscribe</span></button>
    <button class="ab-06__btn ab-06__btn--amber"><span>Upgrade</span></button>
  </div>
</div>
```

**CSS:**
```css
.ab-06,.ab-06 *,.ab-06 *::before,.ab-06 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-06 ::selection{background:#0891b2;color:#fff}
.ab-06{
  font-family:system-ui,sans-serif;
  background:#0f172a;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  padding:2rem;
}
.ab-06__label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#94a3b8;
  opacity:.6;
}
.ab-06__row{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-06__btn{
  --liquid:#0891b2;
  --border-col:#0891b2;
  position:relative;
  overflow:hidden;
  padding:.85rem 2.2rem;
  font-size:1rem;
  font-weight:700;
  color:#e2e8f0;
  background:transparent;
  border:2px solid var(--border-col);
  border-radius:10px;
  cursor:pointer;
  outline:none;
  letter-spacing:.03em;
  transition:color .4s;
}
.ab-06__btn--cyan{--liquid:#0891b2;--border-col:#22d3ee;color:#67e8f9}
.ab-06__btn--violet{--liquid:#7c3aed;--border-col:#a78bfa;color:#c4b5fd}
.ab-06__btn--amber{--liquid:#d97706;--border-col:#fbbf24;color:#fde68a}
.ab-06__btn span{position:relative;z-index:1}
.ab-06__btn::before{
  content:'';
  position:absolute;
  bottom:0;left:-25%;
  width:150%;height:200%;
  background:var(--liquid);
  border-radius:45% 55% 0 0 / 25% 25% 0 0;
  transform:translateY(100%);
  transition:transform .65s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.ab-06__btn:hover::before{
  transform:translateY(5%);
  animation:ab-06-wave 2.5s ease-in-out infinite .65s;
}
.ab-06__btn:hover{color:#fff}
@keyframes ab-06-wave{
  0%,100%{border-radius:45% 55% 0 0 / 25% 25% 0 0}
  50%{border-radius:55% 45% 0 0 / 20% 30% 0 0}
}
@media(prefers-reduced-motion:reduce){
  .ab-06__btn::before{transition:none}
  .ab-06__btn:hover::before{animation:none}
}
```

### 07. CSS Moving Gradient CTA Button

**Type:** Pure CSS
**Description:** An eye-catching call-to-action button with an infinite colour-cycling gradient background that shifts through violet, cyan, and rose — no JavaScript, no images.

**HTML:**
```html
<div class="ab-07">
  <div class="ab-07__card">
    <p class="ab-07__eyebrow">Limited Time Offer</p>
    <h2 class="ab-07__heading">Start Your Free Trial</h2>
    <p class="ab-07__body">14 days free, no credit card required. Cancel anytime with one click.</p>
    <button class="ab-07__btn">Claim Your Free Trial →</button>
  </div>
</div>
```

**CSS:**
```css
.ab-07,.ab-07 *,.ab-07 *::before,.ab-07 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-07 ::selection{background:#7c3aed;color:#fff}
.ab-07{
  font-family:system-ui,sans-serif;
  background:#0a0a14;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.ab-07__card{
  background:#13131f;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:2.5rem 2rem;
  max-width:440px;
  text-align:center;
}
.ab-07__eyebrow{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a78bfa;
  margin-bottom:.75rem;
}
.ab-07__heading{
  font-size:1.8rem;
  font-weight:800;
  color:#f1f5f9;
  margin-bottom:.75rem;
}
.ab-07__body{
  font-size:.9rem;
  color:#94a3b8;
  margin-bottom:1.75rem;
  line-height:1.6;
}
.ab-07__btn{
  display:inline-block;
  padding:.9rem 2.4rem;
  font-size:1rem;
  font-weight:800;
  color:#fff;
  background:linear-gradient(90deg,#7c3aed,#06b6d4,#f43f5e,#7c3aed);
  background-size:300% 300%;
  border:none;
  border-radius:12px;
  cursor:pointer;
  outline:none;
  letter-spacing:.03em;
  animation:ab-07-shift 4s ease infinite;
  will-change:background-position;
  box-shadow:0 4px 20px rgba(124,58,237,.4);
  transition:filter .2s,box-shadow .2s,transform .15s;
}
.ab-07__btn:hover{
  filter:brightness(1.12);
  box-shadow:0 6px 32px rgba(124,58,237,.6);
  transform:translateY(-2px);
}
.ab-07__btn:active{transform:translateY(0);filter:brightness(.95)}
@keyframes ab-07-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media(prefers-reduced-motion:reduce){
  .ab-07__btn{animation:none;background:linear-gradient(90deg,#7c3aed,#06b6d4)}
}
```

### 08. CSS Shine Sweep Hover Button

**Type:** Pure CSS
**Description:** A metallic light-streak sweeps diagonally across the button surface on hover, simulating a premium gloss reflection using a CSS pseudo-element gradient and translate animation.

**HTML:**
```html
<div class="ab-08">
  <p class="ab-08__label">Hover over the buttons</p>
  <div class="ab-08__row">
    <button class="ab-08__btn ab-08__btn--dark">Pro Features</button>
    <button class="ab-08__btn ab-08__btn--gold">Upgrade Now</button>
    <button class="ab-08__btn ab-08__btn--violet">Get Premium</button>
  </div>
</div>
```

**CSS:**
```css
.ab-08,.ab-08 *,.ab-08 *::before,.ab-08 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-08 ::selection{background:#1e293b;color:#fff}
.ab-08{
  font-family:system-ui,sans-serif;
  background:#f1f5f9;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-08__label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#64748b;
}
.ab-08__row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-08__btn{
  position:relative;
  overflow:hidden;
  padding:.85rem 2.2rem;
  font-size:.95rem;
  font-weight:700;
  border:none;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  letter-spacing:.04em;
  transition:filter .2s,transform .15s;
}
.ab-08__btn--dark{background:#1e293b;color:#e2e8f0}
.ab-08__btn--gold{background:linear-gradient(135deg,#b45309,#d97706,#fbbf24);color:#fff}
.ab-08__btn--violet{background:linear-gradient(135deg,#4c1d95,#7c3aed,#a78bfa);color:#fff}
.ab-08__btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.ab-08__btn:active{transform:translateY(0);filter:brightness(.95)}
.ab-08__btn::before{
  content:'';
  position:absolute;
  top:-10%;left:-20%;
  width:60%;height:120%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-100%) skewX(-15deg);
  pointer-events:none;
}
.ab-08__btn:hover::before{
  animation:ab-08-shine .55s ease-in-out forwards;
}
@keyframes ab-08-shine{
  0%{transform:translateX(-100%) skewX(-15deg)}
  100%{transform:translateX(400%) skewX(-15deg)}
}
@media(prefers-reduced-motion:reduce){
  .ab-08__btn:hover::before{animation:none}
}
```

### 09. CSS Jelly Bounce Button Animation

**Type:** Pure CSS
**Description:** Playful elastic micro-interaction buttons that wobble with a jelly-like spring on hover and snap back with an overshoot settle using CSS scale and skew keyframes.

**HTML:**
```html
<div class="ab-09">
  <p class="ab-09__label">Hover for jelly effect</p>
  <div class="ab-09__row">
    <button class="ab-09__btn ab-09__btn--pink">Subscribe!</button>
    <button class="ab-09__btn ab-09__btn--lime">Let's Go!</button>
    <button class="ab-09__btn ab-09__btn--sky">Join Now!</button>
  </div>
</div>
```

**CSS:**
```css
.ab-09,.ab-09 *,.ab-09 *::before,.ab-09 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-09 ::selection{background:#ec4899;color:#fff}
.ab-09{
  font-family:system-ui,sans-serif;
  background:#fdf2ff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-09__label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a855f7;
  opacity:.6;
}
.ab-09__row{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-09__btn{
  --c:#ec4899;
  padding:.85rem 2.2rem;
  font-size:1.05rem;
  font-weight:800;
  color:#fff;
  background:var(--c);
  border:none;
  border-radius:50px;
  cursor:pointer;
  outline:none;
  letter-spacing:.03em;
  transform-origin:center;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  will-change:transform;
}
.ab-09__btn--pink{--c:#ec4899}
.ab-09__btn--lime{--c:#16a34a}
.ab-09__btn--sky{--c:#0284c7}
.ab-09__btn:hover{animation:ab-09-jelly .7s cubic-bezier(.4,0,.2,1) both}
@keyframes ab-09-jelly{
  0%{transform:scale(1)}
  10%{transform:scaleX(1.2) scaleY(.85)}
  25%{transform:scaleX(.85) scaleY(1.15)}
  40%{transform:scaleX(1.1) scaleY(.92)}
  55%{transform:scaleX(.95) scaleY(1.05)}
  70%{transform:scaleX(1.03) scaleY(.98)}
  85%{transform:scaleX(.99) scaleY(1.01)}
  100%{transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .ab-09__btn:hover{animation:none;transform:scale(1.04)}
}
```

### 10. CSS Text Flip Button Hover

**Type:** Pure CSS
**Description:** Button labels flip vertically on hover to reveal a secondary message — built with CSS 3D perspective transforms on stacked spans, no JavaScript required.

**HTML:**
```html
<div class="ab-10">
  <p class="ab-10__label">Hover to flip text</p>
  <div class="ab-10__row">
    <button class="ab-10__btn ab-10__btn--indigo">
      <span class="ab-10__inner">
        <span class="ab-10__front">View Pricing</span>
        <span class="ab-10__back">From $9/mo →</span>
      </span>
    </button>
    <button class="ab-10__btn ab-10__btn--teal">
      <span class="ab-10__inner">
        <span class="ab-10__front">Follow Us</span>
        <span class="ab-10__back">@codefronts</span>
      </span>
    </button>
    <button class="ab-10__btn ab-10__btn--rose">
      <span class="ab-10__inner">
        <span class="ab-10__front">Join Beta</span>
        <span class="ab-10__back">Spots Left: 3</span>
      </span>
    </button>
  </div>
</div>
```

**CSS:**
```css
.ab-10,.ab-10 *,.ab-10 *::before,.ab-10 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-10 ::selection{background:#4f46e5;color:#fff}
.ab-10{
  font-family:system-ui,sans-serif;
  background:#0f0c1f;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-10__label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#818cf8;
  opacity:.6;
}
.ab-10__row{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-10__btn{
  --c:#4f46e5;
  padding:0;
  background:var(--c);
  border:none;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  perspective:600px;
}
.ab-10__btn--indigo{--c:#4f46e5}
.ab-10__btn--teal{--c:#0d9488}
.ab-10__btn--rose{--c:#e11d48}
.ab-10__inner{
  position:relative;
  display:block;
  padding:.85rem 2rem;
  width:9rem;
  height:3.1rem;
  overflow:hidden;
  transform-style:preserve-3d;
}
.ab-10__front,.ab-10__back{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.04em;
  white-space:nowrap;
  backface-visibility:hidden;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.ab-10__front{transform:translateY(0) rotateX(0)}
.ab-10__back{transform:translateY(100%) rotateX(-90deg)}
.ab-10__btn:hover .ab-10__front{transform:translateY(-100%) rotateX(90deg)}
.ab-10__btn:hover .ab-10__back{transform:translateY(0) rotateX(0)}
@media(prefers-reduced-motion:reduce){
  .ab-10__front,.ab-10__back{transition:none}
  .ab-10__btn:hover .ab-10__front{transform:none;opacity:0}
  .ab-10__btn:hover .ab-10__back{transform:none;opacity:1}
}
```

### 11. CSS Animated CTA Hero Button

**Type:** CSS + JS
**Description:** A hero-section CTA button with a pulsing ring beacon, gradient text label, and particle burst on click — combining CSS animations with a lightweight JS particle emitter.

**HTML:**
```html
<div class="ab-11">
  <div class="ab-11__hero">
    <p class="ab-11__eyebrow">✦ Now in public beta</p>
    <h1 class="ab-11__title">The dev platform<br>built for speed.</h1>
    <p class="ab-11__sub">Deploy anywhere. Scale effortlessly. Ship today.</p>
    <div class="ab-11__wrap" id="ab-11-wrap">
      <button class="ab-11__btn" id="ab-11-btn">Start Building Free</button>
    </div>
    <p class="ab-11__note">No credit card · 50k free API calls included</p>
  </div>
</div>
```

**CSS:**
```css
.ab-11,.ab-11 *,.ab-11 *::before,.ab-11 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-11 ::selection{background:#7c3aed;color:#fff}
.ab-11{
  --beacon:#a78bfa;
  font-family:system-ui,sans-serif;
  background:#050510;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.ab-11__hero{text-align:center;max-width:520px}
.ab-11__eyebrow{font-size:.8rem;letter-spacing:.16em;color:#a78bfa;margin-bottom:1rem;text-transform:uppercase}
.ab-11__title{font-size:clamp(2rem,5vw,3rem);font-weight:900;color:#fff;line-height:1.1;margin-bottom:1rem}
.ab-11__sub{font-size:1rem;color:#94a3b8;margin-bottom:2rem;line-height:1.6}
.ab-11__wrap{
  position:relative;
  display:inline-block;
  margin-bottom:1rem;
}
.ab-11__wrap::before,.ab-11__wrap::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:16px;
  border:2px solid var(--beacon);
  opacity:0;
  animation:ab-11-beacon 2s ease-out infinite;
}
.ab-11__wrap::after{animation-delay:.7s}
.ab-11__btn{
  position:relative;
  z-index:1;
  padding:.95rem 2.6rem;
  font-size:1.05rem;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  border:none;
  border-radius:12px;
  cursor:pointer;
  outline:none;
  letter-spacing:.03em;
  box-shadow:0 4px 24px rgba(124,58,237,.45);
  transition:filter .2s,transform .15s;
}
.ab-11__btn:hover{filter:brightness(1.12);transform:translateY(-2px)}
.ab-11__btn:active{transform:translateY(0)}
.ab-11__note{font-size:.75rem;color:#475569;margin-top:.5rem}
@keyframes ab-11-beacon{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.5);opacity:0}
}
.ab-11__particle{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  pointer-events:none;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:ab-11-burst .7s ease-out forwards;
  will-change:transform,opacity;
}
@keyframes ab-11-burst{
  0%{transform:translate(-50%,-50%) translate(0,0) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(0);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .ab-11__wrap::before,.ab-11__wrap::after{animation:none}
}
```

**JS:**
```js
(function(){
  var wrap=document.getElementById('ab-11-wrap');
  var btn=document.getElementById('ab-11-btn');
  if(!btn||!wrap)return;
  var colours=['#a78bfa','#60a5fa','#34d399','#f472b6','#fbbf24','#fff'];
  var COUNT=12;
  btn.addEventListener('click',function(e){
    for(var i=0;i<COUNT;i++){
      var p=document.createElement('span');
      p.className='ab-11__particle';
      var angle=Math.random()*Math.PI*2;
      var dist=40+Math.random()*40;
      p.style.setProperty('--dx',Math.cos(angle)*dist+'px');
      p.style.setProperty('--dy',Math.sin(angle)*dist+'px');
      p.style.background=colours[Math.floor(Math.random()*colours.length)];
      p.style.left=e.offsetX+'px';
      p.style.top=e.offsetY+'px';
      wrap.appendChild(p);
      p.addEventListener('animationend',function(){this.remove()});
    }
  });
})();
```

### 12. CSS Submit Button Success State

**Type:** CSS + JS
**Description:** A form submit button that morphs into a checkmark success state with a width collapse animation and icon draw, then resets — all styled with CSS transitions and driven by a JS class toggle.

**HTML:**
```html
<div class="ab-12">
  <div class="ab-12__card">
    <h2 class="ab-12__title">Contact Us</h2>
    <p class="ab-12__sub">We'll get back to you within 24 hours.</p>
    <div class="ab-12__field"><input class="ab-12__input" type="text" placeholder="Your name" /></div>
    <div class="ab-12__field"><input class="ab-12__input" type="email" placeholder="Email address" /></div>
    <button class="ab-12__btn" id="ab-12-btn">
      <span class="ab-12__text" id="ab-12-text">Send Message</span>
      <svg class="ab-12__check" id="ab-12-check" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <polyline points="20 6 9 17 4 12" pathLength="30"></polyline>
      </svg>
    </button>
  </div>
</div>
```

**CSS:**
```css
.ab-12,.ab-12 *,.ab-12 *::before,.ab-12 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-12 ::selection{background:#10b981;color:#fff}
.ab-12{
  --success:#10b981;
  --primary:#4f46e5;
  font-family:system-ui,sans-serif;
  background:#f8fafc;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.ab-12__card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  padding:2rem 2rem 2rem;
  width:100%;max-width:380px;
}
.ab-12__title{font-size:1.4rem;font-weight:800;color:#1e293b;margin-bottom:.4rem}
.ab-12__sub{font-size:.88rem;color:#64748b;margin-bottom:1.5rem;line-height:1.5}
.ab-12__field{margin-bottom:.9rem}
.ab-12__input{
  width:100%;
  padding:.7rem 1rem;
  border:1.5px solid #e2e8f0;
  border-radius:8px;
  font-size:.9rem;
  color:#1e293b;
  outline:none;
  transition:border-color .2s;
  background:#f8fafc;
}
.ab-12__input:focus{border-color:var(--primary)}
.ab-12__btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:48px;
  padding:0 1.5rem;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  background:var(--primary);
  border:none;
  border-radius:50px;
  cursor:pointer;
  outline:none;
  overflow:hidden;
  transition:width .4s cubic-bezier(.4,0,.2,1),background .4s,box-shadow .3s;
  box-shadow:0 4px 16px rgba(79,70,229,.3);
  margin-top:.25rem;
  will-change:width;
}
.ab-12__btn:hover:not(.is-success){filter:brightness(1.08)}
.ab-12__btn.is-success{
  width:48px;
  background:var(--success);
  box-shadow:0 4px 16px rgba(16,185,129,.35);
}
.ab-12__text{
  transition:opacity .2s,transform .2s;
  white-space:nowrap;
}
.ab-12__btn.is-success .ab-12__text{opacity:0;transform:scale(.6);position:absolute}
.ab-12__check{
  position:absolute;
  width:24px;height:24px;
  opacity:0;
  transform:scale(.6);
  transition:opacity .2s .35s,transform .3s .35s;
}
.ab-12__check polyline{
  stroke-dasharray:30;
  stroke-dashoffset:30;
}
.ab-12__btn.is-success .ab-12__check{opacity:1;transform:scale(1)}
.ab-12__btn.is-success .ab-12__check polyline{
  animation:ab-12-draw .4s ease .4s forwards;
}
@keyframes ab-12-draw{
  to{stroke-dashoffset:0}
}
@media(prefers-reduced-motion:reduce){
  .ab-12__btn,.ab-12__check,.ab-12__text{transition:none}
  .ab-12__btn.is-success .ab-12__check polyline{animation:none;stroke-dashoffset:0}
}
```

**JS:**
```js
(function(){
  var btn=document.getElementById('ab-12-btn');
  if(!btn)return;
  var timer=null;
  btn.addEventListener('click',function(){
    if(btn.classList.contains('is-success'))return;
    btn.classList.add('is-success');
    btn.disabled=true;
    clearTimeout(timer);
    timer=setTimeout(function(){
      btn.classList.remove('is-success');
      btn.disabled=false;
    },2500);
  });
})();
```

### 13. CSS Animated Download Button

**Type:** CSS + JS
**Description:** A download CTA button where clicking triggers a bouncing arrow animation, a progress bar fill, and a completion state — all using CSS transitions and keyframes toggled by JS class changes.

**HTML:**
```html
<div class="ab-13">
  <p class="ab-13__label">Click the button to download</p>
  <button class="ab-13__btn" id="ab-13-btn">
    <svg class="ab-13__icon" id="ab-13-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
      <polyline points="7 10 12 15 17 10"/>
      <line x1="12" y1="15" x2="12" y2="3"/>
    </svg>
    <span class="ab-13__text" id="ab-13-text">Download v2.4.1</span>
  </button>
  <p class="ab-13__size">macOS · 48.2 MB</p>
</div>
```

**CSS:**
```css
.ab-13,.ab-13 *,.ab-13 *::before,.ab-13 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-13 ::selection{background:#2563eb;color:#fff}
.ab-13{
  font-family:system-ui,sans-serif;
  background:#f0f4ff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  padding:2rem;
}
.ab-13__label,.ab-13__size{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#64748b;
}
.ab-13__btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.9rem 2.4rem;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  background:#2563eb;
  border:none;
  border-radius:12px;
  cursor:pointer;
  outline:none;
  transition:background .3s,box-shadow .3s,transform .15s;
  box-shadow:0 4px 16px rgba(37,99,235,.4);
}
.ab-13__btn:hover:not(.is-downloading):not(.is-done){
  filter:brightness(1.08);
  transform:translateY(-2px);
}
.ab-13__btn:active{transform:translateY(0)}
.ab-13__btn::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:100%;height:3px;
  background:rgba(255,255,255,.55);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 2s linear;
  pointer-events:none;
}
.ab-13__btn.is-downloading{background:#1d4ed8;cursor:not-allowed}
.ab-13__btn.is-downloading::after{transform:scaleX(1)}
.ab-13__btn.is-done{background:#059669;box-shadow:0 4px 16px rgba(5,150,105,.4)}
.ab-13__icon{
  width:20px;height:20px;
  flex-shrink:0;
  transition:transform .2s;
}
.ab-13__btn.is-downloading .ab-13__icon{
  animation:ab-13-bounce .6s ease-in-out infinite;
}
.ab-13__btn.is-done .ab-13__icon{
  animation:none;
  transform:rotate(0);
}
@keyframes ab-13-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}
@media(prefers-reduced-motion:reduce){
  .ab-13__btn.is-downloading .ab-13__icon{animation:none}
  .ab-13__btn::after{transition:none}
}
```

**JS:**
```js
(function(){
  var btn=document.getElementById('ab-13-btn');
  var txt=document.getElementById('ab-13-text');
  var icon=document.getElementById('ab-13-icon');
  if(!btn||!txt)return;
  var CHECK='<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"/>';
  var DONE_ICON='<polyline points="20 6 9 17 4 12"/>';
  var orig=icon.innerHTML;
  var downloading=false;
  btn.addEventListener('click',function(){
    if(downloading||btn.classList.contains('is-done'))return;
    downloading=true;
    btn.classList.add('is-downloading');
    txt.textContent='Downloading…';
    setTimeout(function(){
      btn.classList.remove('is-downloading');
      btn.classList.add('is-done');
      icon.innerHTML=DONE_ICON;
      txt.textContent='Downloaded!';
      setTimeout(function(){
        btn.classList.remove('is-done');
        icon.innerHTML=orig;
        txt.textContent='Download v2.4.1';
        downloading=false;
      },2000);
    },2200);
  });
})();
```

### 14. CSS Hamburger To Close Button

**Type:** CSS + JS
**Description:** The classic three-line hamburger menu icon morphs smoothly into an × close icon via CSS transform transitions — no SVG swaps, just rotating and fading three spans.

**HTML:**
```html
<div class="ab-14">
  <div class="ab-14__nav">
    <span class="ab-14__brand">MyApp</span>
    <button class="ab-14__btn" id="ab-14-btn" aria-label="Toggle navigation" aria-expanded="false">
      <span class="ab-14__bar"></span>
      <span class="ab-14__bar"></span>
      <span class="ab-14__bar"></span>
    </button>
  </div>
  <div class="ab-14__menu" id="ab-14-menu" aria-hidden="true">
    <a class="ab-14__link" href="#">Home</a>
    <a class="ab-14__link" href="#">Features</a>
    <a class="ab-14__link" href="#">Pricing</a>
    <a class="ab-14__link" href="#">Docs</a>
  </div>
</div>
```

**CSS:**
```css
.ab-14,.ab-14 *,.ab-14 *::before,.ab-14 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-14 ::selection{background:#7c3aed;color:#fff}
.ab-14{
  font-family:system-ui,sans-serif;
  background:#0f172a;
  min-height:100vh;
}
.ab-14__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ab-14__brand{
  font-size:1.1rem;
  font-weight:800;
  color:#f1f5f9;
  letter-spacing:-.01em;
}
.ab-14__btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:40px;height:40px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  cursor:pointer;
  outline:none;
  align-items:center;
  transition:background .25s;
}
.ab-14__btn:hover{background:rgba(255,255,255,.1)}
.ab-14__btn.is-open{background:rgba(124,58,237,.2);border-color:rgba(124,58,237,.4)}
.ab-14__bar{
  display:block;
  width:22px;height:2px;
  background:#e2e8f0;
  border-radius:2px;
  transform-origin:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s,background .3s;
}
.ab-14__btn.is-open .ab-14__bar:nth-child(1){transform:translateY(8px) rotate(45deg);background:#a78bfa}
.ab-14__btn.is-open .ab-14__bar:nth-child(2){opacity:0;transform:scaleX(0)}
.ab-14__btn.is-open .ab-14__bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);background:#a78bfa}
.ab-14__menu{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  max-height:0;
  transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;
  opacity:0;
  padding:0 1.5rem;
}
.ab-14__menu.is-open{max-height:200px;opacity:1;padding:1rem 1.5rem}
.ab-14__link{
  display:block;
  padding:.6rem 0;
  font-size:.95rem;
  font-weight:600;
  color:#94a3b8;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:color .2s;
}
.ab-14__link:last-child{border-bottom:none}
.ab-14__link:hover{color:#f1f5f9}
@media(prefers-reduced-motion:reduce){
  .ab-14__bar,.ab-14__menu{transition:none}
}
```

**JS:**
```js
(function(){
  var btn=document.getElementById('ab-14-btn');
  var menu=document.getElementById('ab-14-menu');
  if(!btn||!menu)return;
  btn.addEventListener('click',function(){
    var open=btn.classList.toggle('is-open');
    menu.classList.toggle('is-open',open);
    btn.setAttribute('aria-expanded',open.toString());
    menu.setAttribute('aria-hidden',(!open).toString());
  });
})();
```

### 15. CSS Add To Cart Button Animation

**Type:** CSS + JS
**Description:** An e-commerce add-to-cart button that animates a product dot flying into a cart icon badge on click, with a count increment and brief success flash.

**HTML:**
```html
<div class="ab-15">
  <div class="ab-15__card">
    <div class="ab-15__product">
      <div class="ab-15__img"></div>
      <div class="ab-15__info">
        <p class="ab-15__name">Mechanical Keyboard Pro</p>
        <p class="ab-15__price">$149.00</p>
      </div>
    </div>
    <div class="ab-15__actions">
      <button class="ab-15__btn" id="ab-15-btn">
        <svg class="ab-15__cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
        </svg>
        <span>Add to Cart</span>
        <span class="ab-15__badge" id="ab-15-badge">0</span>
      </button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ab-15,.ab-15 *,.ab-15 *::before,.ab-15 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-15 ::selection{background:#f59e0b;color:#fff}
.ab-15{
  --dot-color:#f59e0b;
  font-family:system-ui,sans-serif;
  background:#fff7ed;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.ab-15__card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  padding:1.5rem;
  width:100%;max-width:360px;
}
.ab-15__product{display:flex;gap:1rem;margin-bottom:1.25rem;align-items:center}
.ab-15__img{
  width:72px;height:72px;flex-shrink:0;
  background:linear-gradient(135deg,#fde68a,#f59e0b);
  border-radius:10px;
}
.ab-15__name{font-size:.95rem;font-weight:700;color:#1e293b;margin-bottom:.35rem}
.ab-15__price{font-size:1.15rem;font-weight:800;color:#f59e0b}
.ab-15__actions{position:relative}
.ab-15__btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  width:100%;
  padding:.85rem 1.5rem;
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  background:#1e293b;
  border:none;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  transition:background .3s,transform .15s;
  overflow:visible;
}
.ab-15__btn:hover{background:#334155;transform:translateY(-1px)}
.ab-15__btn.is-added{background:#059669}
.ab-15__btn:active{transform:translateY(0)}
.ab-15__cart-icon{width:20px;height:20px;flex-shrink:0}
.ab-15__badge{
  position:absolute;
  top:-8px;right:-8px;
  min-width:20px;height:20px;
  padding:0 5px;
  background:#f59e0b;
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.ab-15__badge.pop{animation:ab-15-pop .3s ease both}
@keyframes ab-15-pop{
  0%{transform:scale(1)}
  50%{transform:scale(1.5)}
  100%{transform:scale(1)}
}
.ab-15__dot{
  position:fixed;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--dot-color,#f59e0b);
  pointer-events:none;
  z-index:9999;
  animation:ab-15-fly .65s cubic-bezier(.4,0,.2,1) forwards;
  will-change:transform,opacity;
}
@keyframes ab-15-fly{
  0%{transform:translate(0,0) scale(1);opacity:1}
  50%{transform:translate(calc(var(--tx)*.5),calc(var(--ty)*.5 - 40px)) scale(.8);opacity:.9}
  100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .ab-15__dot{animation:none;opacity:0}
  .ab-15__badge.pop{animation:none}
}
```

**JS:**
```js
(function(){
  var btn=document.getElementById('ab-15-btn');
  var badge=document.getElementById('ab-15-badge');
  if(!btn||!badge)return;
  var count=0;
  function flyDot(e){
    var br=btn.getBoundingClientRect();
    var bbr=badge.getBoundingClientRect();
    var startX=e.clientX-5;
    var startY=e.clientY-5;
    var endX=bbr.left+bbr.width/2-5;
    var endY=bbr.top+bbr.height/2-5;
    var dot=document.createElement('div');
    dot.className='ab-15__dot';
    dot.style.left=startX+'px';
    dot.style.top=startY+'px';
    dot.style.setProperty('--tx',(endX-startX)+'px');
    dot.style.setProperty('--ty',(endY-startY)+'px');
    document.body.appendChild(dot);
    dot.addEventListener('animationend',function(){
      dot.remove();
      count++;
      badge.textContent=count;
      badge.classList.remove('pop');
      void badge.offsetWidth;
      badge.classList.add('pop');
    });
  }
  btn.addEventListener('click',function(e){
    btn.classList.add('is-added');
    setTimeout(function(){btn.classList.remove('is-added')},800);
    flyDot(e);
  });
})();
```

### 16. CSS Social Share Buttons Hover

**Type:** CSS + JS
**Description:** A row of social share icon buttons with brand-colour reveals, floating tooltips, and a URL-copy button that flashes a "Copied!" confirmation on click.

**HTML:**
```html
<div class="ab-16">
  <p class="ab-16__label">Share this article</p>
  <div class="ab-16__row">
    <button class="ab-16__btn" style="--brand:#1d9bf0" data-tooltip="Twitter / X" aria-label="Share on Twitter">
      <svg viewBox="0 0 24 24" fill="currentColor" 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.747l7.73-8.835L1.254 2.25H8.08l4.26 5.638zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
    </button>
    <button class="ab-16__btn" style="--brand:#0a66c2" data-tooltip="LinkedIn" aria-label="Share on LinkedIn">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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 0 1-2.063-2.065 2.064 2.064 0 1 1 2.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>
    <button class="ab-16__btn" style="--brand:#24292f" data-tooltip="GitHub" aria-label="Share on GitHub">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
    </button>
    <button class="ab-16__btn ab-16__copy" id="ab-16-copy" style="--brand:#7c3aed" data-tooltip="Copy Link" aria-label="Copy link">
      <svg class="ab-16__copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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>
  </div>
</div>
```

**CSS:**
```css
.ab-16,.ab-16 *,.ab-16 *::before,.ab-16 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-16 ::selection{background:#7c3aed;color:#fff}
.ab-16{
  font-family:system-ui,sans-serif;
  background:#f8fafc;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding:2rem;
}
.ab-16__label{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
}
.ab-16__row{
  display:flex;
  gap:.75rem;
}
.ab-16__btn{
  --brand:#1e293b;
  position:relative;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:#1e293b;
  color:#e2e8f0;
  border:none;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  transition:background .25s,color .25s,transform .2s,box-shadow .25s;
}
.ab-16__btn svg{width:18px;height:18px;pointer-events:none}
.ab-16__btn:hover{
  background:var(--brand);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.ab-16__btn:active{transform:translateY(0)}
.ab-16__btn::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;transform:translateX(-50%) translateY(4px);
  background:#1e293b;
  color:#f1f5f9;
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
  padding:.3rem .6rem;
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s,transform .2s;
}
.ab-16__btn:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.ab-16__copy.is-copied{background:#059669 !important;color:#fff;transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){
  .ab-16__btn{transition:background .1s,color .1s}
  .ab-16__btn::after{transition:none}
}
```

**JS:**
```js
(function(){
  var copyBtn=document.getElementById('ab-16-copy');
  if(!copyBtn)return;
  copyBtn.addEventListener('click',function(){
    var url=window.location.href;
    if(navigator.clipboard){
      navigator.clipboard.writeText(url).then(showCopied).catch(function(){fallbackCopy(url)});
    }else{fallbackCopy(url)}
  });
  function showCopied(){
    copyBtn.classList.add('is-copied');
    copyBtn.dataset.tooltip='Copied!';
    setTimeout(function(){
      copyBtn.classList.remove('is-copied');
      copyBtn.dataset.tooltip='Copy Link';
    },1500);
  }
  function fallbackCopy(url){
    var t=document.createElement('textarea');
    t.value=url;t.style.position='fixed';t.style.opacity='0';
    document.body.appendChild(t);t.select();
    try{document.execCommand('copy');showCopied();}catch(e){}
    document.body.removeChild(t);
  }
})();
```

### 17. CSS Animated Toggle Switch Button

**Type:** CSS + JS
**Description:** A collection of iOS-style animated toggle switches for dark mode, notifications, and auto-save — styled with pure CSS and driven by accessible checkbox inputs.

**HTML:**
```html
<div class="ab-17">
  <p class="ab-17__heading">Preferences</p>
  <div class="ab-17__list">
    <div class="ab-17__row" id="ab-17-row-0">
      <div class="ab-17__info">
        <p class="ab-17__title">Dark Mode</p>
        <p class="ab-17__status" id="ab-17-s0">Off</p>
      </div>
      <div class="ab-17__toggle" style="--on-color:#7c3aed">
        <input class="ab-17__input" type="checkbox" id="ab-17-t0" />
        <label class="ab-17__track" for="ab-17-t0"><span class="ab-17__knob"></span></label>
      </div>
    </div>
    <div class="ab-17__row" id="ab-17-row-1">
      <div class="ab-17__info">
        <p class="ab-17__title">Push Notifications</p>
        <p class="ab-17__status" id="ab-17-s1">Off</p>
      </div>
      <div class="ab-17__toggle" style="--on-color:#0891b2">
        <input class="ab-17__input" type="checkbox" id="ab-17-t1" />
        <label class="ab-17__track" for="ab-17-t1"><span class="ab-17__knob"></span></label>
      </div>
    </div>
    <div class="ab-17__row" id="ab-17-row-2">
      <div class="ab-17__info">
        <p class="ab-17__title">Auto-Save</p>
        <p class="ab-17__status" id="ab-17-s2">Off</p>
      </div>
      <div class="ab-17__toggle" style="--on-color:#059669">
        <input class="ab-17__input" type="checkbox" id="ab-17-t2" checked />
        <label class="ab-17__track" for="ab-17-t2"><span class="ab-17__knob"></span></label>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ab-17,.ab-17 *,.ab-17 *::before,.ab-17 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-17 ::selection{background:#7c3aed;color:#fff}
.ab-17{
  font-family:system-ui,sans-serif;
  background:#f8fafc;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.ab-17__heading{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:1.25rem;
  align-self:flex-start;
  max-width:380px;
  width:100%;
}
.ab-17__list{width:100%;max-width:380px;display:flex;flex-direction:column;gap:.5rem}
.ab-17__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem;
  background:#fff;
  border-radius:12px;
  border:1.5px solid #e2e8f0;
  transition:border-color .3s,background .3s;
}
.ab-17__row.is-active{border-color:rgba(124,58,237,.3);background:#faf7ff}
.ab-17__title{font-size:.93rem;font-weight:600;color:#1e293b}
.ab-17__status{font-size:.78rem;color:#94a3b8;margin-top:.15rem}
.ab-17__toggle{position:relative}
.ab-17__input{
  position:absolute;
  opacity:0;
  width:0;height:0;
}
.ab-17__track{
  --on-color:#7c3aed;
  display:flex;
  align-items:center;
  width:50px;height:28px;
  background:#cbd5e1;
  border-radius:50px;
  cursor:pointer;
  transition:background .3s;
  padding:3px;
}
.ab-17__input:checked+.ab-17__track{background:var(--on-color)}
.ab-17__knob{
  width:22px;height:22px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.ab-17__input:checked+.ab-17__track .ab-17__knob{transform:translateX(22px)}
.ab-17__input:focus-visible+.ab-17__track{outline:2px solid #7c3aed;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .ab-17__knob,.ab-17__track,.ab-17__row{transition:none}
}
```

**JS:**
```js
(function(){
  var ids=[0,1,2];
  ids.forEach(function(i){
    var inp=document.getElementById('ab-17-t'+i);
    var status=document.getElementById('ab-17-s'+i);
    var row=document.getElementById('ab-17-row-'+i);
    if(!inp||!status||!row)return;
    function update(){
      var on=inp.checked;
      status.textContent=on?'On':'Off';
      row.classList.toggle('is-active',on);
    }
    update();
    inp.addEventListener('change',update);
  });
})();
```

### 18. CSS Loading Spinner Inside Button

**Type:** CSS + JS
**Description:** A button that reveals a micro-spinner overlay and transitions to a disabled loading state on click, then resolves to success — all using CSS transitions and a JS state machine.

**HTML:**
```html
<div class="ab-18">
  <p class="ab-18__label">Click to simulate a request</p>
  <div class="ab-18__group">
    <button class="ab-18__btn" id="ab-18-btn">
      <span class="ab-18__text" id="ab-18-text">Save Changes</span>
      <svg class="ab-18__check" viewBox="0 0 20 20" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <polyline points="16 5 8 14 4 10" pathLength="24"/>
      </svg>
    </button>
    <button class="ab-18__btn ab-18__btn--outline" id="ab-18-btn2">
      <span class="ab-18__text" id="ab-18-text2">Subscribe</span>
      <svg class="ab-18__check" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <polyline points="16 5 8 14 4 10" pathLength="24"/>
      </svg>
    </button>
  </div>
</div>
```

**CSS:**
```css
.ab-18,.ab-18 *,.ab-18 *::before,.ab-18 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-18 ::selection{background:#4f46e5;color:#fff}
.ab-18{
  font-family:system-ui,sans-serif;
  background:#f1f5f9;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-18__label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#64748b}
.ab-18__group{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.ab-18__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 2rem;
  min-width:160px;
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  background:#4f46e5;
  border:2px solid #4f46e5;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  transition:background .3s,border-color .3s,transform .15s;
  overflow:hidden;
}
.ab-18__btn--outline{background:transparent;color:#4f46e5}
.ab-18__btn:hover:not([disabled]){filter:brightness(1.08);transform:translateY(-1px)}
.ab-18__btn:active:not([disabled]){transform:translateY(0)}
.ab-18__btn[disabled]{cursor:not-allowed;opacity:.85}
.ab-18__text{transition:opacity .25s;display:block}
.ab-18__check{
  position:absolute;
  width:20px;height:20px;
  opacity:0;
  transform:scale(.5);
  transition:opacity .3s .2s,transform .3s .2s;
}
.ab-18__check polyline{stroke-dasharray:24;stroke-dashoffset:24}
/* spinner */
.ab-18__btn::after{
  content:'';
  position:absolute;
  width:18px;height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  opacity:0;
  transform:scale(0);
  transition:opacity .2s,transform .2s;
  pointer-events:none;
}
.ab-18__btn--outline::after{border:2px solid rgba(79,70,229,.3);border-top-color:#4f46e5}
/* loading state */
.ab-18__btn.is-loading .ab-18__text{opacity:0}
.ab-18__btn.is-loading::after{
  opacity:1;transform:scale(1);
  animation:ab-18-spin .8s linear infinite;
}
/* success state */
.ab-18__btn.is-success{background:#059669;border-color:#059669}
.ab-18__btn.is-success .ab-18__text{opacity:0}
.ab-18__btn.is-success .ab-18__check{opacity:1;transform:scale(1)}
.ab-18__btn.is-success .ab-18__check polyline{animation:ab-18-draw .4s ease .1s forwards}
@keyframes ab-18-spin{to{transform:scale(1) rotate(360deg)}}
@keyframes ab-18-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .ab-18__btn.is-loading::after{animation:none}
  .ab-18__btn.is-success .ab-18__check polyline{animation:none;stroke-dashoffset:0}
  .ab-18__text,.ab-18__check{transition:none}
}
```

**JS:**
```js
(function(){
  function makeBtn(id,txtId){
    var btn=document.getElementById(id);
    var txt=document.getElementById(txtId);
    if(!btn||!txt)return;
    var orig=txt.textContent;
    var busy=false;
    btn.style.width=btn.offsetWidth+'px';
    btn.addEventListener('click',function(){
      if(busy)return;busy=true;
      btn.classList.add('is-loading');
      btn.disabled=true;
      setTimeout(function(){
        btn.classList.remove('is-loading');
        btn.classList.add('is-success');
        setTimeout(function(){
          btn.classList.remove('is-success');
          btn.disabled=false;
          busy=false;
        },1800);
      },2000);
    });
  }
  makeBtn('ab-18-btn','ab-18-text');
  makeBtn('ab-18-btn2','ab-18-text2');
})();
```

### 19. CSS Next Prev Arrow Button Hover

**Type:** CSS + JS
**Description:** Pagination and slider navigation controls where arrow icons slide subtly forward or backward on hover, with a functional slide counter driven by JS.

**HTML:**
```html
<div class="ab-19">
  <div class="ab-19__slides">
    <div class="ab-19__slide is-active" id="ab-19-slide">
      <p class="ab-19__slide-label">Slide 1 of 5</p>
      <h3 class="ab-19__slide-title">Effortless Deployment</h3>
      <p class="ab-19__slide-body">Push your code and watch it go live in seconds. Zero config, zero downtime.</p>
    </div>
  </div>
  <div class="ab-19__nav">
    <button class="ab-19__arrow ab-19__arrow--prev is-disabled" id="ab-19-prev" aria-label="Previous slide">
      <span class="ab-19__arrow-inner">
        <svg class="ab-19__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
        <svg class="ab-19__icon ab-19__icon--ghost" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
      </span>
    </button>
    <span class="ab-19__counter" id="ab-19-counter">01 / 05</span>
    <button class="ab-19__arrow ab-19__arrow--next" id="ab-19-next" aria-label="Next slide">
      <span class="ab-19__arrow-inner">
        <svg class="ab-19__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
        <svg class="ab-19__icon ab-19__icon--ghost" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
      </span>
    </button>
  </div>
</div>
```

**CSS:**
```css
.ab-19,.ab-19 *,.ab-19 *::before,.ab-19 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-19 ::selection{background:#6366f1;color:#fff}
.ab-19{
  font-family:system-ui,sans-serif;
  background:#0f172a;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-19__slides{
  width:100%;max-width:480px;
  background:#1e293b;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:2rem;
  min-height:130px;
}
.ab-19__slide-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#475569;margin-bottom:.6rem}
.ab-19__slide-title{font-size:1.3rem;font-weight:800;color:#f1f5f9;margin-bottom:.5rem}
.ab-19__slide-body{font-size:.88rem;color:#94a3b8;line-height:1.6}
.ab-19__nav{display:flex;align-items:center;gap:1.25rem}
.ab-19__counter{
  font-size:.85rem;
  font-weight:700;
  color:#94a3b8;
  letter-spacing:.08em;
  min-width:60px;
  text-align:center;
  transition:transform .2s;
}
.ab-19__counter.tick{animation:ab-19-countup .25s ease both}
@keyframes ab-19-countup{0%{transform:scale(1.3)}100%{transform:scale(1)}}
.ab-19__arrow{
  position:relative;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:#1e293b;
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:10px;
  cursor:pointer;
  outline:none;
  color:#e2e8f0;
  transition:background .2s,border-color .2s,transform .15s;
  overflow:hidden;
}
.ab-19__arrow:hover:not(.is-disabled){background:#334155;border-color:rgba(99,102,241,.5);transform:scale(1.06)}
.ab-19__arrow.is-disabled{opacity:.35;cursor:not-allowed}
.ab-19__arrow-inner{
  display:flex;align-items:center;justify-content:center;
  position:relative;width:24px;height:24px;overflow:hidden;
}
.ab-19__icon{
  position:absolute;
  width:22px;height:22px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.ab-19__icon--ghost{
  opacity:0;
  pointer-events:none;
}
/* next arrow hover */
.ab-19__arrow--next:hover:not(.is-disabled) .ab-19__icon:not(.ab-19__icon--ghost){transform:translateX(120%)}
.ab-19__arrow--next .ab-19__icon--ghost{transform:translateX(-120%);opacity:1}
.ab-19__arrow--next:hover:not(.is-disabled) .ab-19__icon--ghost{transform:translateX(0)}
/* prev arrow hover */
.ab-19__arrow--prev:hover:not(.is-disabled) .ab-19__icon:not(.ab-19__icon--ghost){transform:translateX(-120%)}
.ab-19__arrow--prev .ab-19__icon--ghost{transform:translateX(120%);opacity:1}
.ab-19__arrow--prev:hover:not(.is-disabled) .ab-19__icon--ghost{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
  .ab-19__icon,.ab-19__counter{transition:none}
  .ab-19__counter.tick{animation:none}
}
```

**JS:**
```js
(function(){
  var prev=document.getElementById('ab-19-prev');
  var next=document.getElementById('ab-19-next');
  var counter=document.getElementById('ab-19-counter');
  var slide=document.getElementById('ab-19-slide');
  if(!prev||!next||!counter||!slide)return;
  var TOTAL=5;
  var idx=0;
  var TITLES=['Effortless Deployment','Instant Scaling','Built-in Observability','Zero Config Security','Global Edge Network'];
  var BODIES=[
    'Push your code and watch it go live in seconds. Zero config, zero downtime.',
    'Handle millions of requests without touching infrastructure settings.',
    'Real-time logs, traces, and metrics out of the box.',
    'Automatic TLS, DDoS protection, and secrets management included.',
    'Your app served from 300+ PoPs worldwide, under 20ms latency.'
  ];
  function pad(n){return n<10?'0'+n:String(n)}
  function update(){
    slide.querySelector('.ab-19__slide-label').textContent='Slide '+(idx+1)+' of '+TOTAL;
    slide.querySelector('.ab-19__slide-title').textContent=TITLES[idx];
    slide.querySelector('.ab-19__slide-body').textContent=BODIES[idx];
    counter.textContent=pad(idx+1)+' / '+pad(TOTAL);
    counter.classList.remove('tick');
    void counter.offsetWidth;
    counter.classList.add('tick');
    prev.classList.toggle('is-disabled',idx===0);
    next.classList.toggle('is-disabled',idx===TOTAL-1);
  }
  prev.addEventListener('click',function(){if(idx>0){idx--;update()}});
  next.addEventListener('click',function(){if(idx<TOTAL-1){idx++;update()}});
})();
```

### 20. CSS Ghost Button Background Reveal

**Type:** CSS + JS
**Description:** Transparent ghost buttons that elegantly fill with a solid colour or gradient on hover, with JS-powered ripple origin tracking so the fill emanates from the exact cursor position.

**HTML:**
```html
<div class="ab-20">
  <p class="ab-20__label">Hover from any direction</p>
  <div class="ab-20__row">
    <button class="ab-20__btn ab-20__btn--violet">
      <span class="ab-20__fill"></span>
      <span class="ab-20__label-inner">Get Started</span>
    </button>
    <button class="ab-20__btn ab-20__btn--cyan">
      <span class="ab-20__fill"></span>
      <span class="ab-20__label-inner">View Docs</span>
    </button>
    <button class="ab-20__btn ab-20__btn--rose">
      <span class="ab-20__fill"></span>
      <span class="ab-20__label-inner">Contact Us</span>
    </button>
  </div>
</div>
```

**CSS:**
```css
.ab-20,.ab-20 *,.ab-20 *::before,.ab-20 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-20 ::selection{background:#7c3aed;color:#fff}
.ab-20{
  font-family:system-ui,sans-serif;
  background:#0a0a14;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-20__label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#475569}
.ab-20__row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.ab-20__btn{
  --fill-color:#7c3aed;
  position:relative;
  overflow:hidden;
  padding:.85rem 2.2rem;
  font-size:.95rem;
  font-weight:700;
  color:#e2e8f0;
  background:transparent;
  border:2px solid rgba(255,255,255,.2);
  border-radius:10px;
  cursor:pointer;
  outline:none;
  transition:color .35s,border-color .35s;
}
.ab-20__btn--violet{--fill-color:#7c3aed;color:#c4b5fd;border-color:#7c3aed}
.ab-20__btn--cyan{--fill-color:#0891b2;color:#67e8f9;border-color:#0891b2}
.ab-20__btn--rose{--fill-color:#e11d48;color:#fda4af;border-color:#e11d48}
.ab-20__btn.is-hovered{color:#fff;border-color:transparent}
.ab-20__fill{
  position:absolute;
  border-radius:50%;
  background:var(--fill-color);
  left:var(--rx,50%);
  top:var(--ry,50%);
  width:0;height:0;
  transform:translate(-50%,-50%);
  transition:width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:0;
}
.ab-20__btn.is-hovered .ab-20__fill{
  width:var(--size,400px);
  height:var(--size,400px);
}
.ab-20__label-inner{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){
  .ab-20__fill{transition:none}
  .ab-20__btn.is-hovered .ab-20__fill{width:100%;height:100%;border-radius:0}
}
```

**JS:**
```js
(function(){
  var btns=document.querySelectorAll('.ab-20__btn');
  btns.forEach(function(btn){
    var fill=btn.querySelector('.ab-20__fill');
    if(!fill)return;
    var diag=Math.sqrt(Math.pow(btn.offsetWidth,2)+Math.pow(btn.offsetHeight,2));
    btn.style.setProperty('--size',diag*3+'px');
    btn.addEventListener('mouseenter',function(e){
      fill.style.setProperty('--rx',e.offsetX+'px');
      fill.style.setProperty('--ry',e.offsetY+'px');
      btn.classList.add('is-hovered');
    });
    btn.addEventListener('mouseleave',function(e){
      fill.style.setProperty('--rx',e.offsetX+'px');
      fill.style.setProperty('--ry',e.offsetY+'px');
      btn.classList.remove('is-hovered');
    });
  });
})();
```

---
## 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: 100vh;
  align-items: center;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
}
.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: 100vh;
  align-items: center;
  justify-content: center;
}
.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: 100vh;
}
.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: 100vh;
  align-items: center;
  justify-content: center;
}
.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: 100vh;
}
.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: 100vh;
  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: 100vh;
  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: 100vh;
  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: 100vh;
}
.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: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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: 100vh;
  max-width: 240px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}
.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: 100vh;
  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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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: 100vh;
  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;
      });
    });
  });
})();
```

---
## 23 CSS Flip Cards

URL: https://codefronts.com/components/css-flip-cards/
Description: 23 production-ready CSS 3D flip cards — product feature comparison, e-commerce pricing plans, gift card coupon reveal, bi-fold event ticket, team bio, skill rating, language flashcards, trivia Q&A, gaming trading cards, photo gallery overlay, video playlist thumbnails, testimonial reviews, digital business vCard, restaurant menu recipe, step-by-step process map, vertical rotateX flip, click-to-flip JavaScript toggle, dynamic-height auto-resize, responsive CSS Grid flip card matrix, luxury cube-unfold book-open flip, diagonal rotate3d travel postcard, clip-path iris aperture album reveal, and a clip-path diagonal peel scratch-card reward reveal. 21 pure CSS + 2 CSS + JS — copy, paste, ship.
Demo count: 23

### 01. Luxury Product Card with 3D Cube Unfold Flip

**Type:** Pure CSS
**Description:** A luxury watch product card that opens like a book — the back face hinges in from the right edge rather than the conventional spin-around-center flip.

**HTML:**
```html
<div class="fc-19">
  <div class="fc-19__scene">
    <div class="fc-19__card">
      <div class="fc-19__front">
        <div class="fc-19__brand-row">
          <span class="fc-19__brand-mark">M</span>
          <span class="fc-19__brand-text">MERIDIAN</span>
        </div>
        <div class="fc-19__watch">
          <svg width="180" height="180" viewBox="0 0 200 200" fill="none">
            <defs>
              <linearGradient id="fc-19-bezel" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#fef3c7"/>
                <stop offset="50%" stop-color="#d4af37"/>
                <stop offset="100%" stop-color="#8c6917"/>
              </linearGradient>
              <radialGradient id="fc-19-dial" cx="0.5" cy="0.5" r="0.6">
                <stop offset="0%" stop-color="#1c1c1c"/>
                <stop offset="80%" stop-color="#0a0a0a"/>
              </radialGradient>
            </defs>
            <circle cx="100" cy="100" r="90" fill="url(#fc-19-bezel)"/>
            <circle cx="100" cy="100" r="78" fill="url(#fc-19-dial)"/>
            <circle cx="100" cy="100" r="76" fill="none" stroke="#d4af37" stroke-width="0.5" opacity="0.4"/>
            <g stroke="#d4af37" stroke-width="2" stroke-linecap="round">
              <line x1="100" y1="32" x2="100" y2="42"/>
              <line x1="100" y1="158" x2="100" y2="168"/>
              <line x1="32" y1="100" x2="42" y2="100"/>
              <line x1="158" y1="100" x2="168" y2="100"/>
            </g>
            <g stroke="#fef3c7" stroke-width="1.2" stroke-linecap="round" opacity="0.7">
              <line x1="151" y1="65" x2="146" y2="69"/>
              <line x1="151" y1="135" x2="146" y2="131"/>
              <line x1="49" y1="65" x2="54" y2="69"/>
              <line x1="49" y1="135" x2="54" y2="131"/>
            </g>
            <line x1="100" y1="100" x2="100" y2="50" stroke="#fef3c7" stroke-width="2.4" stroke-linecap="round"/>
            <line x1="100" y1="100" x2="138" y2="120" stroke="#fef3c7" stroke-width="2" stroke-linecap="round"/>
            <line x1="100" y1="100" x2="80" y2="124" stroke="#d4af37" stroke-width="1" stroke-linecap="round"/>
            <circle cx="100" cy="100" r="3" fill="#d4af37"/>
            <text x="100" y="148" text-anchor="middle" font-family="serif" font-size="7" fill="#d4af37" letter-spacing="2">MERIDIAN</text>
          </svg>
        </div>
        <div class="fc-19__model-label">Heritage Chronograph 1957</div>
        <div class="fc-19__price-row">
          <span class="fc-19__price-amt">$12,400</span>
          <span class="fc-19__price-sub">Limited release</span>
        </div>
        <div class="fc-19__hint">Hover to open ›</div>
      </div>
      <div class="fc-19__back">
        <div class="fc-19__back-tag">Specifications</div>
        <div class="fc-19__back-title">Heritage Chronograph 1957</div>
        <div class="fc-19__spec-grid">
          <div class="fc-19__spec"><span class="fc-19__spec-key">Case</span><span class="fc-19__spec-val">18k Rose Gold · 40 mm</span></div>
          <div class="fc-19__spec"><span class="fc-19__spec-key">Movement</span><span class="fc-19__spec-val">Caliber M-29 Automatic</span></div>
          <div class="fc-19__spec"><span class="fc-19__spec-key">Reserve</span><span class="fc-19__spec-val">72-hour power reserve</span></div>
          <div class="fc-19__spec"><span class="fc-19__spec-key">Water</span><span class="fc-19__spec-val">100 m · screw-down crown</span></div>
          <div class="fc-19__spec"><span class="fc-19__spec-key">Crystal</span><span class="fc-19__spec-val">Domed sapphire · AR coated</span></div>
          <div class="fc-19__spec"><span class="fc-19__spec-key">Strap</span><span class="fc-19__spec-val">Alligator · pin buckle</span></div>
        </div>
        <a class="fc-19__cta" href="#">Reserve this piece ›</a>
        <div class="fc-19__back-foot">12 / 200 cast · made in Switzerland</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-19,.fc-19 *,.fc-19 *::before,.fc-19 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-19 ::selection{background:#d4af37;color:#0a0a0a}
.fc-19{
  --bg:#080806;--gold:#d4af37;--gold-light:#fef3c7;--ivory:#f5f1e8;
  --card-w:360px;--card-h:500px;
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  background:radial-gradient(ellipse at 50% 30%,#1a1610,#080806 70%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--ivory);
}
.fc-19__scene{width:var(--card-w);height:var(--card-h);perspective:1600px}
.fc-19__card{width:100%;height:100%;position:relative}
.fc-19__front,.fc-19__back{
  position:absolute;inset:0;border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:36px 32px;
}
.fc-19__front{
  background:linear-gradient(160deg,#1a1610 0%,#0c0a07 100%);
  border:1px solid rgba(212,175,55,.25);
  box-shadow:inset 0 1px 0 rgba(254,243,199,.06),0 12px 30px rgba(0,0,0,.5);
  transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.fc-19__back{
  background:linear-gradient(160deg,#15110b 0%,#0a0805 100%);
  border:1px solid rgba(212,175,55,.4);
  box-shadow:0 16px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(254,243,199,.1);
  transform:rotateY(-90deg);
  transform-origin:left center;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  transition:transform .9s cubic-bezier(.4,0,.2,1);
  z-index:2;
}
.fc-19__scene:hover .fc-19__back{transform:rotateY(0deg)}
.fc-19__scene:hover .fc-19__front{opacity:.5;transform:translateX(-3%)}
/* FRONT styling */
.fc-19__brand-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fc-19__brand-mark{
  width:32px;height:32px;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:serif;font-size:18px;color:var(--gold);font-weight:600;
}
.fc-19__brand-text{font-size:11px;letter-spacing:.45em;color:var(--gold);font-family:serif;font-weight:500}
.fc-19__watch{margin:4px 0 16px}
.fc-19__model-label{font-size:18px;color:var(--ivory);text-align:center;font-style:italic;letter-spacing:.02em}
.fc-19__price-row{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px}
.fc-19__price-amt{font-size:28px;font-weight:500;color:var(--gold);letter-spacing:.04em;font-family:serif}
.fc-19__price-sub{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,241,232,.4)}
.fc-19__hint{margin-top:auto;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:rgba(212,175,55,.5);font-family:system-ui,sans-serif}
/* BACK styling */
.fc-19__back-tag{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-family:system-ui,sans-serif;font-weight:600;margin-bottom:8px}
.fc-19__back-title{font-size:20px;font-style:italic;color:var(--ivory);text-align:center;margin-bottom:18px;line-height:1.2}
.fc-19__spec-grid{display:flex;flex-direction:column;gap:10px;width:100%;margin-bottom:18px}
.fc-19__spec{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid rgba(212,175,55,.12)}
.fc-19__spec:last-child{border-bottom:none}
.fc-19__spec-key{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(212,175,55,.55);font-family:system-ui,sans-serif;font-weight:600}
.fc-19__spec-val{font-size:13px;color:var(--ivory);font-family:serif}
.fc-19__cta{
  display:block;width:100%;padding:13px 0;text-align:center;
  background:linear-gradient(135deg,#d4af37,#b8941f);color:#0a0a0a;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;
  font-family:system-ui,sans-serif;text-decoration:none;
  transition:filter .2s,box-shadow .2s;
  box-shadow:0 6px 18px rgba(212,175,55,.25);
}
.fc-19__cta:hover{filter:brightness(1.1);box-shadow:0 10px 28px rgba(212,175,55,.4)}
.fc-19__back-foot{margin-top:14px;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(245,241,232,.3);font-family:system-ui,sans-serif;text-align:center}
@media(prefers-reduced-motion:reduce){
  .fc-19__front,.fc-19__back{transition:none}
}
```

### 02. Product Feature Comparison Flip Card

**Type:** Pure CSS
**Description:** Front shows a styled product render; back reveals a full technical specification grid with an Add to Cart CTA.

**HTML:**
```html
<div class="fc-01">
  <div class="fc-01__scene">
    <div class="fc-01__card">
      <div class="fc-01__front">
        <div class="fc-01__badge">New 2025</div>
        <div class="fc-01__img">
          <svg class="fc-01__product-svg" width="140" height="140" viewBox="0 0 140 140" fill="none">
            <rect x="30" y="50" width="80" height="60" rx="8" fill="url(#g1)" opacity=".9"/>
            <rect x="38" y="58" width="64" height="44" rx="4" fill="#0a0a1a"/>
            <rect x="40" y="60" width="60" height="40" rx="3" fill="url(#g2)" opacity=".8"/>
            <circle cx="70" cy="80" r="10" fill="none" stroke="#7c3aed" stroke-width="2"/>
            <circle cx="70" cy="80" r="4" fill="#06b6d4"/>
            <line x1="55" y1="115" x2="85" y2="115" stroke="#7c3aed" stroke-width="3" stroke-linecap="round"/>
            <rect x="62" y="110" width="16" height="5" rx="2" fill="#1a1a2e"/>
            <defs>
              <linearGradient id="g1" x1="30" y1="50" x2="110" y2="110" gradientUnits="userSpaceOnUse">
                <stop stop-color="#2d1b69"/>
                <stop offset="1" stop-color="#0e7490"/>
              </linearGradient>
              <linearGradient id="g2" x1="40" y1="60" x2="100" y2="100" gradientUnits="userSpaceOnUse">
                <stop stop-color="#7c3aed" stop-opacity=".3"/>
                <stop offset="1" stop-color="#06b6d4" stop-opacity=".2"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="fc-01__info">
          <div class="fc-01__brand">NovaTech</div>
          <div class="fc-01__name">ProVision X7 Monitor</div>
          <div class="fc-01__price">$649 <span>/ unit</span></div>
          <div class="fc-01__hint">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            Hover to view specs
          </div>
        </div>
      </div>
      <div class="fc-01__back">
        <div class="fc-01__back-title">Technical Specifications</div>
        <div class="fc-01__spec">
          <div class="fc-01__spec-item"><div class="fc-01__spec-label">Display</div><div class="fc-01__spec-val">27" IPS</div></div>
          <div class="fc-01__spec-item"><div class="fc-01__spec-label">Resolution</div><div class="fc-01__spec-val">4K UHD</div></div>
          <div class="fc-01__spec-item"><div class="fc-01__spec-label">Refresh Rate</div><div class="fc-01__spec-val fc-01__spec-val--accent">165 Hz</div></div>
          <div class="fc-01__spec-item"><div class="fc-01__spec-label">Response</div><div class="fc-01__spec-val">1 ms GTG</div></div>
          <div class="fc-01__spec-item"><div class="fc-01__spec-label">Panel</div><div class="fc-01__spec-val">Nano IPS</div></div>
          <div class="fc-01__spec-item"><div class="fc-01__spec-label">Ports</div><div class="fc-01__spec-val">2× DP 1.4</div></div>
          <div class="fc-01__spec-item"><div class="fc-01__spec-label">HDR</div><div class="fc-01__spec-val fc-01__spec-val--accent">HDR 600</div></div>
          <div class="fc-01__spec-item"><div class="fc-01__spec-label">Coverage</div><div class="fc-01__spec-val">98% DCI-P3</div></div>
        </div>
        <button class="fc-01__cta">Add to Cart</button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-01,.fc-01 *,.fc-01 *::before,.fc-01 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-01 ::selection{background:#6c63ff;color:#fff}
.fc-01{
  --bg:#0d0d14;--accent:#7c3aed;--accent2:#06b6d4;--gold:#f59e0b;--white:#f1f5f9;--card-w:340px;--card-h:480px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;
  color:var(--white);
}
.fc-01__scene{width:var(--card-w);height:var(--card-h);perspective:1200px}
.fc-01__card{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.fc-01__scene:hover .fc-01__card{transform:rotateY(180deg)}
.fc-01__front,.fc-01__back{
  position:absolute;inset:0;border-radius:20px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
}
.fc-01__front{
  background:linear-gradient(145deg,#1a1a2e,#16213e);
  border:1px solid rgba(124,58,237,.3);
  display:flex;flex-direction:column;
}
.fc-01__back{
  background:linear-gradient(145deg,#0f172a,#1e1b4b);
  border:1px solid rgba(6,182,212,.3);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:28px;
}
/* front */
.fc-01__badge{
  position:absolute;top:16px;right:16px;
  background:var(--gold);color:#000;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;
}
.fc-01__img{
  height:220px;background:linear-gradient(135deg,#1a0533,#0c1a4f);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;position:relative;
}
.fc-01__img::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 70%,rgba(124,58,237,.4),transparent 70%);
}
.fc-01__product-svg{position:relative;z-index:1}
.fc-01__info{padding:24px;flex:1;display:flex;flex-direction:column;gap:10px}
.fc-01__brand{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent2);font-weight:600}
.fc-01__name{font-size:22px;font-weight:700;color:var(--white);line-height:1.2}
.fc-01__price{font-size:28px;font-weight:800;color:var(--accent)}
.fc-01__price span{font-size:14px;font-weight:400;color:rgba(241,245,249,.5)}
.fc-01__hint{margin-top:auto;font-size:11px;color:rgba(241,245,249,.35);letter-spacing:.08em;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.fc-01__hint svg{opacity:.5}
/* back */
.fc-01__back-title{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);margin-bottom:16px}
.fc-01__spec{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1}
.fc-01__spec-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px}
.fc-01__spec-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(241,245,249,.4);margin-bottom:4px}
.fc-01__spec-val{font-size:15px;font-weight:600;color:var(--white)}
.fc-01__spec-val--accent{color:var(--gold)}
.fc-01__cta{
  margin-top:20px;width:100%;padding:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;
  border:none;border-radius:12px;cursor:pointer;
  transition:opacity .2s;
}
.fc-01__cta:hover{opacity:.85}
@media(prefers-reduced-motion:reduce){.fc-01__card{transition:none}}
```

### 03. E-commerce Pricing Plan Card

**Type:** Pure CSS
**Description:** Front displays tier name and monthly price with gradient text; back reveals the complete feature breakdown and a CTA button.

**HTML:**
```html
<div class="fc-02">
  <div class="fc-02__scene">
    <div class="fc-02__card">
      <div class="fc-02__front">
        <div class="fc-02__front-glow"></div>
        <div class="fc-02__front-head">
          <div class="fc-02__tier-icon">🚀</div>
          <div class="fc-02__tier">Pro Plan</div>
          <div class="fc-02__price-wrap">
            <span class="fc-02__price-cur">$</span>
            <span class="fc-02__price-num">49</span>
          </div>
          <div class="fc-02__price-per">per month, billed annually</div>
        </div>
        <div class="fc-02__divider"></div>
        <div class="fc-02__preview">
          <div class="fc-02__preview-label">Includes</div>
          <div class="fc-02__dot-list">
            <div class="fc-02__dot">Unlimited projects</div>
            <div class="fc-02__dot">Advanced analytics</div>
            <div class="fc-02__dot">Priority support</div>
            <div class="fc-02__dot">Custom domains</div>
          </div>
        </div>
        <div class="fc-02__hint">Hover for full feature breakdown</div>
      </div>
      <div class="fc-02__back">
        <div class="fc-02__back-title">Everything in Pro</div>
        <div class="fc-02__feature-list">
          <div class="fc-02__feature"><span class="fc-02__feature-check"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Unlimited projects & workspaces</div>
          <div class="fc-02__feature"><span class="fc-02__feature-check"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Advanced real-time analytics</div>
          <div class="fc-02__feature"><span class="fc-02__feature-check"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Custom domain mapping</div>
          <div class="fc-02__feature"><span class="fc-02__feature-check"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>API access (10k req/day)</div>
          <div class="fc-02__feature"><span class="fc-02__feature-check"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Priority 4h support SLA</div>
          <div class="fc-02__feature fc-02__feature--gold"><span class="fc-02__feature-check"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>AI content generation (50/mo)</div>
          <div class="fc-02__feature fc-02__feature--gold"><span class="fc-02__feature-check"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>White-label exports</div>
        </div>
        <button class="fc-02__cta">Get Started — $49/mo</button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-02,.fc-02 *,.fc-02 *::before,.fc-02 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-02 ::selection{background:#10b981;color:#000}
.fc-02{
  --bg:#050d0a;--accent:#10b981;--accent2:#f59e0b;--purple:#8b5cf6;--white:#f0fdf4;
  --card-w:320px;--card-h:460px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 0%,#0a2e1e,#050d0a 70%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;gap:32px;flex-wrap:wrap;color:var(--white);
}
/* scene */
.fc-02__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-02__card{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transform-origin:center bottom;
  transition:transform .85s cubic-bezier(.34,1.2,.4,1);
}
/* Flip-UP from the base — the card's top edge appears to lift toward the
   camera while the bottom edge stays anchored. Rotating around the bottom
   would normally push the rendered card downward by its full height
   (because the top swings into the space below); the translateY(-100%)
   at the end keeps the visual position fixed by counter-translating the
   card by exactly its height. Reads as "lifting the curtain on the plan." */
.fc-02__scene:hover .fc-02__card{transform:translateY(-100%) rotateX(180deg)}
.fc-02__front,.fc-02__back{
  position:absolute;inset:0;border-radius:24px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
}
/* FRONT */
.fc-02__front{
  background:linear-gradient(160deg,#071a12,#0a2e1e);
  border:1px solid rgba(16,185,129,.25);
  display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(16,185,129,.08);
}
.fc-02__front-glow{
  position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(16,185,129,.25),transparent 70%);
  pointer-events:none;
}
.fc-02__front-head{padding:32px 28px 24px;text-align:center;position:relative}
.fc-02__tier-icon{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.05));
  border:1px solid rgba(16,185,129,.3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;font-size:24px;
}
.fc-02__tier{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.fc-02__price-wrap{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:4px}
.fc-02__price-cur{font-size:20px;font-weight:700;color:rgba(240,253,244,.6);margin-top:6px}
.fc-02__price-num{font-size:52px;font-weight:900;background:linear-gradient(135deg,#10b981,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.fc-02__price-per{font-size:13px;color:rgba(240,253,244,.4);margin-top:6px}
.fc-02__divider{height:1px;background:linear-gradient(90deg,transparent,rgba(16,185,129,.2),transparent);margin:0 28px}
.fc-02__preview{padding:24px 28px;flex:1}
.fc-02__preview-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,253,244,.35);margin-bottom:14px}
.fc-02__dot-list{display:flex;flex-direction:column;gap:10px}
.fc-02__dot{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(240,253,244,.6)}
.fc-02__dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.fc-02__hint{padding:0 28px 24px;text-align:center;font-size:11px;color:rgba(240,253,244,.25);letter-spacing:.08em}
/* BACK */
.fc-02__back{
  background:linear-gradient(160deg,#0a0a1e,#0d1533);
  border:1px solid rgba(139,92,246,.25);
  /* Pre-rotated on X so the upward flip-from-base brings it forward. */
  transform:rotateX(180deg);
  display:flex;flex-direction:column;padding:28px;
  box-shadow:0 0 40px rgba(139,92,246,.08);
}
.fc-02__back-title{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:20px}
.fc-02__feature-list{display:flex;flex-direction:column;gap:11px;flex:1}
.fc-02__feature{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:13px;color:rgba(240,253,244,.8)}
.fc-02__feature-check{
  width:20px;height:20px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);
}
.fc-02__feature-check svg{width:11px;height:11px;stroke:var(--accent);stroke-width:2.5;fill:none}
.fc-02__feature--gold .fc-02__feature-check{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.3)}
.fc-02__feature--gold .fc-02__feature-check svg{stroke:var(--accent2)}
.fc-02__cta{
  margin-top:20px;width:100%;padding:14px;
  background:linear-gradient(135deg,var(--accent),#059669);
  color:#000;font-size:14px;font-weight:800;letter-spacing:.04em;
  border:none;border-radius:12px;cursor:pointer;transition:transform .15s;
}
.fc-02__cta:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.fc-02__card{transition:none}}
```

### 04. Interactive Gift Card Coupon Reveal

**Type:** CSS + JS
**Description:** Front displays a festive holiday gift card graphic with animated snowflakes; back reveals a copyable coupon code via the Clipboard API.

**HTML:**
```html
<div class="fc-03">
  <div class="fc-03__scene">
    <div class="fc-03__card">
      <div class="fc-03__front">
        <span class="fc-03__flake">❄</span>
        <span class="fc-03__flake">✦</span>
        <span class="fc-03__flake">❄</span>
        <span class="fc-03__flake">✦</span>
        <div class="fc-03__logo">Nova Store</div>
        <div class="fc-03__gift-title">Holiday Gift Card</div>
        <div class="fc-03__amount">$50</div>
        <div class="fc-03__front-hint">Hover to reveal →</div>
      </div>
      <div class="fc-03__back">
        <div class="fc-03__back-label">Your Exclusive Coupon Code</div>
        <div class="fc-03__code-box" title="Click to copy">NOVA-XMAS-2025</div>
        <div class="fc-03__copy-tip">Click code to copy</div>
        <div class="fc-03__expiry">Expires <span>December 31, 2025</span></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-03,.fc-03 *,.fc-03 *::before,.fc-03 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-03 ::selection{background:#ec4899;color:#fff}
.fc-03{
  --bg:#0c0510;--pink:#ec4899;--gold:#f59e0b;--rose:#fb7185;--white:#fff1f5;
  --card-w:380px;--card-h:240px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 30% 50%,#1a0520,#0c0510 70%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);
}
.fc-03__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-03__card{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.fc-03__scene:hover .fc-03__card{transform:rotateY(180deg)}
.fc-03__front,.fc-03__back{
  position:absolute;inset:0;border-radius:20px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
}
/* FRONT — holiday gift card */
.fc-03__front{
  background:linear-gradient(135deg,#3b0764,#831843,#7c2d12);
  border:1px solid rgba(236,72,153,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.fc-03__front::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 30%,rgba(245,158,11,.15),transparent 60%),
             radial-gradient(ellipse at 30% 80%,rgba(236,72,153,.2),transparent 50%);
}
/* snowflake decorations */
.fc-03__flake{
  position:absolute;font-size:20px;opacity:.25;animation:fc-03-drift 4s ease-in-out infinite;
}
.fc-03__flake:nth-child(1){top:10%;left:8%;animation-delay:0s}
.fc-03__flake:nth-child(2){top:20%;right:10%;font-size:14px;animation-delay:.8s}
.fc-03__flake:nth-child(3){bottom:15%;left:12%;font-size:16px;animation-delay:1.6s}
.fc-03__flake:nth-child(4){bottom:10%;right:8%;animation-delay:2.4s}
@keyframes fc-03-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(15deg)}}
.fc-03__logo{position:relative;z-index:1;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,241,245,.5);margin-bottom:8px;font-weight:600}
.fc-03__gift-title{position:relative;z-index:1;font-size:28px;font-weight:900;text-align:center;line-height:1.1;background:linear-gradient(135deg,#fbbf24,#f472b6,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fc-03__amount{position:relative;z-index:1;margin-top:10px;font-size:42px;font-weight:900;color:var(--gold);text-shadow:0 0 30px rgba(245,158,11,.5)}
.fc-03__front-hint{position:absolute;bottom:16px;right:16px;z-index:1;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,241,245,.3)}
/* BACK — coupon code */
.fc-03__back{
  background:linear-gradient(135deg,#0a1628,#1e0833);
  border:1px solid rgba(245,158,11,.25);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px;gap:20px;
}
.fc-03__back::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(245,158,11,.06),transparent 70%);
}
.fc-03__back-label{position:relative;z-index:1;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,241,245,.4);font-weight:600}
.fc-03__code-box{
  position:relative;z-index:1;
  background:rgba(245,158,11,.07);
  border:2px dashed rgba(245,158,11,.4);
  border-radius:12px;padding:14px 28px;
  font-size:22px;font-weight:900;letter-spacing:.2em;
  color:var(--gold);text-align:center;
  font-family:'Courier New',monospace;
  text-shadow:0 0 20px rgba(245,158,11,.4);
  cursor:pointer;transition:background .2s;width:100%;
}
.fc-03__code-box:hover{background:rgba(245,158,11,.14)}
.fc-03__copy-tip{position:relative;z-index:1;font-size:10px;color:rgba(255,241,245,.3);letter-spacing:.08em}
.fc-03__expiry{position:relative;z-index:1;font-size:11px;color:rgba(255,241,245,.4)}
.fc-03__expiry span{color:var(--rose)}
@media(prefers-reduced-motion:reduce){.fc-03__card{transition:none}.fc-03__flake{animation:none}}
```

**JS:**
```js
document.querySelector('.fc-03__code-box')?.addEventListener('click',function(){
  navigator.clipboard?.writeText('NOVA-XMAS-2025');
  const orig=this.textContent;this.textContent='✓ Copied!';
  setTimeout(()=>this.textContent=orig,2000);
});
```

### 05. Booking Event Ticket Fold Card

**Type:** Pure CSS
**Description:** A concert ticket split into two halves that bi-fold inward like a book page, each half rotating around its centre edge to reveal the ticket details on the back.

**HTML:**
```html
<div class="fc-22">
  <div class="fc-22__scene">
    <div class="fc-22__book">

      <!-- LEFT HALF -->
      <div class="fc-22__half fc-22__half--left">
        <!-- FRONT face -->
        <div class="fc-22__front-left">
          <div class="fc-22__event-cat">Live Concert · 2025</div>
          <div class="fc-22__event-name">Neon Pulse<br>World Tour</div>
          <div class="fc-22__event-sub">The Meridian Arena · San Francisco</div>
          <div class="fc-22__meta-row">
            <div class="fc-22__meta">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              Sat, Nov 29 · 8:00 PM
            </div>
          </div>
          <div class="fc-22__meta-row">
            <div class="fc-22__meta">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              Floor · General Admission
            </div>
          </div>
        </div>
        <!-- BACK face (rotated 180deg inside) -->
        <div class="fc-22__back-left">
          <div class="fc-22__back-cat">Ticket Details</div>
          <div class="fc-22__back-title">Neon Pulse · SF</div>
          <div class="fc-22__detail-grid">
            <div class="fc-22__detail-item">
              <div class="fc-22__di-label">Date</div>
              <div class="fc-22__di-val">Nov 29</div>
            </div>
            <div class="fc-22__detail-item">
              <div class="fc-22__di-label">Doors</div>
              <div class="fc-22__di-val fc-22__di-val--sky">6:30 PM</div>
            </div>
            <div class="fc-22__detail-item">
              <div class="fc-22__di-label">Zone</div>
              <div class="fc-22__di-val">Floor A</div>
            </div>
            <div class="fc-22__detail-item">
              <div class="fc-22__di-label">Price</div>
              <div class="fc-22__di-val fc-22__di-val--sky">$149</div>
            </div>
          </div>
        </div>
      </div><!-- /left half -->

      <!-- RIGHT HALF (stub) -->
      <div class="fc-22__half fc-22__half--right">
        <div class="fc-22__perfs">
          <div class="fc-22__perf"></div>
          <div class="fc-22__perf"></div>
          <div class="fc-22__perf"></div>
          <div class="fc-22__perf"></div>
          <div class="fc-22__perf"></div>
        </div>
        <!-- FRONT stub -->
        <div class="fc-22__front-right">
          <div class="fc-22__qr-wrap">
            <!-- mini QR SVG -->
            <svg viewBox="0 0 17 17" width="56" height="56" fill="black">
              <rect x="0" y="0" width="5" height="5" fill="none" stroke="black" stroke-width=".8"/>
              <rect x="1.5" y="1.5" width="2" height="2"/>
              <rect x="12" y="0" width="5" height="5" fill="none" stroke="black" stroke-width=".8"/>
              <rect x="13.5" y="1.5" width="2" height="2"/>
              <rect x="0" y="12" width="5" height="5" fill="none" stroke="black" stroke-width=".8"/>
              <rect x="1.5" y="13.5" width="2" height="2"/>
              <rect x="6" y="0" width="1" height="1"/><rect x="7" y="1" width="1" height="1"/>
              <rect x="9" y="0" width="1" height="1"/><rect x="10" y="1" width="1" height="1"/>
              <rect x="6" y="2" width="2" height="1"/><rect x="9" y="3" width="1" height="1"/>
              <rect x="6" y="6" width="1" height="1"/><rect x="8" y="6" width="1" height="1"/><rect x="10" y="6" width="1" height="1"/>
              <rect x="7" y="7" width="2" height="1"/><rect x="11" y="7" width="1" height="1"/>
              <rect x="6" y="8" width="1" height="1"/><rect x="9" y="8" width="1" height="1"/><rect x="12" y="8" width="1" height="1"/>
              <rect x="6" y="10" width="2" height="1"/><rect x="10" y="10" width="1" height="1"/>
              <rect x="7" y="12" width="1" height="1"/><rect x="9" y="12" width="1" height="1"/><rect x="11" y="12" width="1" height="1"/>
              <rect x="6" y="13" width="1" height="1"/><rect x="10" y="13" width="2" height="1"/>
              <rect x="6" y="15" width="1" height="1"/><rect x="8" y="15" width="1" height="1"/><rect x="11" y="15" width="1" height="1"/>
              <rect x="12" y="6" width="5" height="5" fill="none" stroke="black" stroke-width=".8"/>
              <rect x="13.5" y="7.5" width="2" height="2"/>
            </svg>
          </div>
          <div class="fc-22__seat">B14</div>
          <div class="fc-22__seat-label">Seat</div>
          <div class="fc-22__stub-label">Scan at entry</div>
        </div>
        <!-- BACK stub -->
        <div class="fc-22__back-right">
          <div class="fc-22__barcode">
            <div class="fc-22__bar" style="width:2px;height:52px"></div>
            <div class="fc-22__bar" style="width:3px;height:40px"></div>
            <div class="fc-22__bar" style="width:2px;height:52px"></div>
            <div class="fc-22__bar" style="width:1px;height:32px"></div>
            <div class="fc-22__bar" style="width:3px;height:48px"></div>
            <div class="fc-22__bar" style="width:2px;height:44px"></div>
            <div class="fc-22__bar" style="width:1px;height:52px"></div>
            <div class="fc-22__bar" style="width:2px;height:36px"></div>
            <div class="fc-22__bar" style="width:3px;height:52px"></div>
            <div class="fc-22__bar" style="width:1px;height:44px"></div>
            <div class="fc-22__bar" style="width:2px;height:40px"></div>
            <div class="fc-22__bar" style="width:3px;height:52px"></div>
            <div class="fc-22__bar" style="width:1px;height:34px"></div>
            <div class="fc-22__bar" style="width:2px;height:48px"></div>
          </div>
          <div class="fc-22__barcode-num">4829-1104-B14</div>
          <div class="fc-22__back-seat">B14</div>
          <div class="fc-22__back-seat-label">Confirmed Seat</div>
          <div class="fc-22__valid-badge">
            <span class="fc-22__valid-dot"></span>Valid Entry
          </div>
        </div>
      </div><!-- /right half -->

      <div class="fc-22__spine"></div>
    </div><!-- /book -->
    <div class="fc-22__fold-hint">Hover to unfold</div>
  </div><!-- /scene -->
</div>
```

**CSS:**
```css
.fc-22,.fc-22 *,.fc-22 *::before,.fc-22 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-22 ::selection{background:#f97316;color:#fff}
.fc-22{
  --bg:#07080f;
  --orange:#f97316;
  --amber:#fbbf24;
  --sky:#38bdf8;
  --rose:#fb7185;
  --white:#fff7ed;
  --card-w:420px;
  --card-h:200px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#1a0e00,#07080f 65%);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:28px;
  color:var(--white);
}

/* ══════════════════════════════════════════
   PAGE-FOLD MECHANISM
   The card is split into LEFT half and RIGHT half.
   Each half is a flex child inside the card wrapper.
   On hover:
     • Left half rotates  rotateY(-180deg) around its RIGHT edge  (transform-origin: right)
     • Right half rotates rotateY( 180deg) around its LEFT  edge  (transform-origin: left)
   Both use preserve-3d so their ::before back-faces show through.
   Result: a bi-fold page-turn that meets in the middle.
══════════════════════════════════════════ */

.fc-22__scene{
  width:var(--card-w);
  height:var(--card-h);
  position:relative;
  /* perspective on the scene keeps both halves in one shared 3D space */
  perspective:1400px;
  perspective-origin:50% 50%;
  cursor:pointer;
}

/* Outer wrapper — just a flex row holding the two halves */
.fc-22__book{
  width:100%;height:100%;
  display:flex;
  position:relative;
}

/* ── shared half styles ── */
.fc-22__half{
  width:50%;height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}

/* LEFT half pivots around its right edge. Background/border now live
   on each face div (front/back) — keeping them on the half itself would
   show as a solid coloured rectangle through transparent regions when
   the half rotates 180°. */
.fc-22__half--left{
  transform-origin:right center;
}

/* RIGHT half pivots around its left edge. Background/border on each
   face div (front/back) — see comment on --left above. */
.fc-22__half--right{
  transform-origin:left center;
}

/* On hover: left folds away (rotates around right edge by -180deg),
             right folds away (rotates around left edge by +180deg) */
.fc-22__scene:hover .fc-22__half--left{transform:rotateY(-180deg)}
.fc-22__scene:hover .fc-22__half--right{transform:rotateY(180deg)}

/* ── FRONT content — lives on the element itself (z-index front face) ── */
.fc-22__front-left{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#1e1000,#120900);
  border:1px solid rgba(249,115,22,.25);
  border-right:none;
  border-radius:12px 0 0 12px;
  display:flex;flex-direction:column;justify-content:center;padding:20px 20px 20px 24px;gap:8px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.fc-22__front-right{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#120900,#0d0700);
  border:1px solid rgba(249,115,22,.25);
  border-left:1px dashed rgba(249,115,22,.3);
  border-radius:0 12px 12px 0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:16px;gap:10px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}

/* ── BACK content — ::before pseudo, pre-rotated 180deg so it faces inward ── */
/* Back content lives in .fc-22__back-* divs pre-rotated 180deg. */

.fc-22__back-left,
.fc-22__back-right{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:rotateY(180deg);
  display:flex;flex-direction:column;justify-content:center;
}

.fc-22__back-left{
  background:linear-gradient(160deg,#0a1a28,#061020);
  border-radius:12px 0 0 12px;
  padding:20px 18px 20px 24px;gap:8px;
  border-right:1px dashed rgba(56,189,248,.3);
}
.fc-22__back-right{
  background:linear-gradient(160deg,#061020,#04090f);
  border-radius:0 12px 12px 0;
  padding:16px;gap:10px;
  align-items:center;
}

/* ── FRONT — left content ── */
.fc-22__event-cat{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:700}
.fc-22__event-name{font-size:19px;font-weight:900;color:var(--white);line-height:1.15}
.fc-22__event-sub{font-size:11px;color:rgba(255,247,237,.5)}
.fc-22__meta-row{display:flex;gap:14px;margin-top:4px}
.fc-22__meta{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(255,247,237,.55)}
.fc-22__meta svg{flex-shrink:0;opacity:.7}

/* ── FRONT — right content (stub) ── */
.fc-22__qr-wrap{
  width:68px;height:68px;background:#fff;border-radius:8px;
  padding:5px;display:flex;align-items:center;justify-content:center;
}
.fc-22__stub-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,247,237,.35);text-align:center}
.fc-22__seat{font-size:22px;font-weight:900;color:var(--amber);text-align:center;line-height:1}
.fc-22__seat-label{font-size:9px;color:rgba(255,247,237,.35);letter-spacing:.1em;text-transform:uppercase}
.fc-22__fold-hint{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,247,237,.2);white-space:nowrap;
}

/* ── BACK — left content ── */
.fc-22__back-cat{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);font-weight:700}
.fc-22__back-title{font-size:17px;font-weight:900;color:var(--white);line-height:1.2}
.fc-22__detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.fc-22__detail-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:8px 10px}
.fc-22__di-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,247,237,.35);margin-bottom:2px}
.fc-22__di-val{font-size:13px;font-weight:700;color:var(--white)}
.fc-22__di-val--sky{color:var(--sky)}

/* ── BACK — right content ── */
.fc-22__barcode{
  display:flex;gap:2px;align-items:flex-end;height:52px;
}
.fc-22__bar{border-radius:1px;background:var(--white)}
.fc-22__barcode-num{font-size:9px;letter-spacing:.08em;color:rgba(255,247,237,.35);font-family:'Courier New',monospace;margin-top:4px}
.fc-22__back-seat{font-size:28px;font-weight:900;color:var(--sky);line-height:1}
.fc-22__back-seat-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,247,237,.35)}
.fc-22__valid-badge{
  display:flex;align-items:center;gap:5px;
  background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);
  border-radius:20px;padding:4px 10px;
  font-size:10px;font-weight:700;color:var(--sky);
}
.fc-22__valid-dot{width:6px;height:6px;border-radius:50%;background:var(--sky)}

/* Centre join shadow — gives the fold a spine */
.fc-22__spine{
  position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,rgba(249,115,22,.25),transparent);
  transform:translateX(-50%);
  pointer-events:none;z-index:10;
}

/* Perforations on the right half left edge */
.fc-22__perfs{
  position:absolute;left:-1px;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-between;padding:10px 0;
  pointer-events:none;z-index:5;
}
.fc-22__perf{
  width:10px;height:10px;border-radius:50%;
  background:var(--bg);
  border:1px solid rgba(249,115,22,.2);
  margin-left:-5px;
}

@media(max-width:480px){
  .fc-22{--card-w:340px;--card-h:180px}
  .fc-22__event-name{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .fc-22__half--left,.fc-22__half--right{transition:none}
}
```

### 06. Meet the Team Bio Card

**Type:** Pure CSS
**Description:** Front shows avatar, role badge, name, and key stats; back reveals biography, social icon links, and a contact email action.

**HTML:**
```html
<div class="fc-04">
  <div class="fc-04__scene">
    <div class="fc-04__card">
      <div class="fc-04__front">
        <div class="fc-04__avatar">
          <svg width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="22" r="14" fill="rgba(59,130,246,.6)"/><ellipse cx="30" cy="54" rx="22" ry="16" fill="rgba(59,130,246,.4)"/></svg>
        </div>
        <div class="fc-04__role-badge">Lead Designer</div>
        <div class="fc-04__member-name">Aria Chen</div>
        <div class="fc-04__dept">Product & UX</div>
        <div class="fc-04__stat-row">
          <div class="fc-04__stat"><div class="fc-04__stat-num">120+</div><div class="fc-04__stat-lbl">Projects</div></div>
          <div class="fc-04__stat"><div class="fc-04__stat-num">6 yrs</div><div class="fc-04__stat-lbl">Experience</div></div>
          <div class="fc-04__stat"><div class="fc-04__stat-num">98%</div><div class="fc-04__stat-lbl">Rating</div></div>
        </div>
        <div class="fc-04__front-hint">Hover to connect →</div>
      </div>
      <div class="fc-04__back">
        <div class="fc-04__bio-title">About Aria</div>
        <div class="fc-04__bio">Aria leads design systems and cross-platform UX at NovaTech. She specialises in accessible, data-dense interfaces that scale from mobile to enterprise dashboards.</div>
        <div class="fc-04__social">
          <a class="fc-04__social-btn" href="#">𝕏 Twitter</a>
          <a class="fc-04__social-btn" href="#">in LinkedIn</a>
          <a class="fc-04__social-btn" href="#">⌥ Dribbble</a>
        </div>
        <a class="fc-04__contact" href="mailto:aria@novatech.io">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg>
          aria@novatech.io
        </a>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-04,.fc-04 *,.fc-04 *::before,.fc-04 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-04 ::selection{background:#3b82f6;color:#fff}
.fc-04{
  --bg:#08090f;--blue:#3b82f6;--cyan:#22d3ee;--white:#f8fafc;
  --card-w:300px;--card-h:400px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 60% 0%,#0c1a3a,#08090f 60%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);
}
.fc-04__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-04__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.4,0,.2,1)}
/* Scale-and-flip — card shrinks slightly, rotates, then settles to its
   resting size with a subtle bounce. Reads as "stepping forward to
   introduce themselves" rather than a mechanical spin. */
.fc-04__scene:hover .fc-04__card{animation:fc-04-scale-flip .85s cubic-bezier(.34,1.4,.5,1) forwards}
@keyframes fc-04-scale-flip{
  0%{transform:rotateY(0deg) scale(1)}
  40%{transform:rotateY(90deg) scale(.85)}
  70%{transform:rotateY(160deg) scale(.92)}
  100%{transform:rotateY(180deg) scale(1.03)}
}
.fc-04__front,.fc-04__back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-04__front{background:linear-gradient(160deg,#0d1b3e,#0a1220);border:1px solid rgba(59,130,246,.2);display:flex;flex-direction:column;align-items:center;padding:36px 24px}
.fc-04__avatar{
  width:100px;height:100px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(59,130,246,.4);
  box-shadow:0 0 30px rgba(59,130,246,.25);
  margin-bottom:18px;background:linear-gradient(135deg,#1e3a8a,#1e40af);
  display:flex;align-items:center;justify-content:center;
}
.fc-04__role-badge{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:6px}
.fc-04__member-name{font-size:22px;font-weight:800;color:var(--white);text-align:center}
.fc-04__dept{margin-top:6px;font-size:12px;color:rgba(248,250,252,.4);background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);padding:3px 12px;border-radius:20px}
.fc-04__stat-row{display:flex;gap:24px;margin-top:24px}
.fc-04__stat{text-align:center}
.fc-04__stat-num{font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fc-04__stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(248,250,252,.35);margin-top:2px}
.fc-04__front-hint{margin-top:auto;font-size:10px;color:rgba(248,250,252,.25);letter-spacing:.08em}
/* BACK */
.fc-04__back{background:linear-gradient(160deg,#0d1117,#111827);border:1px solid rgba(34,211,238,.2);transform:rotateY(180deg);display:flex;flex-direction:column;padding:28px;gap:16px}
.fc-04__bio-title{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);font-weight:700}
.fc-04__bio{font-size:13px;color:rgba(248,250,252,.65);line-height:1.7}
.fc-04__social{display:flex;gap:12px;margin-top:4px}
.fc-04__social-btn{
  flex:1;padding:10px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);font-size:11px;font-weight:700;letter-spacing:.06em;
  color:rgba(248,250,252,.7);cursor:pointer;text-align:center;text-decoration:none;
  transition:background .2s,border-color .2s;display:block;
}
.fc-04__social-btn:hover{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.3);color:var(--blue)}
.fc-04__contact{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:12px;
  background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(34,211,238,.08));
  border:1px solid rgba(59,130,246,.2);
  font-size:12px;color:rgba(248,250,252,.7);text-decoration:none;
}
@media(prefers-reduced-motion:reduce){.fc-04__card{transition:none}}
```

### 07. Skill Rating Portfolio Card

**Type:** Pure CSS
**Description:** Front shows a project preview with tech tags; back displays a tech stack breakdown with animated skill bar meters.

**HTML:**
```html
<div class="fc-05">
  <div class="fc-05__scene">
    <div class="fc-05__card">
      <div class="fc-05__front">
        <div class="fc-05__preview-img">
          <div class="fc-05__preview-grid">
            <div class="fc-05__pg"></div>
            <div class="fc-05__pg"></div>
            <div class="fc-05__pg"></div>
          </div>
        </div>
        <div class="fc-05__project-info">
          <div class="fc-05__proj-cat">Case Study · 2025</div>
          <div class="fc-05__proj-name">Orbit Dashboard</div>
          <div class="fc-05__proj-desc">A real-time analytics platform with customisable widget grids and live WebSocket feeds.</div>
          <div class="fc-05__tags">
            <span class="fc-05__tag">React</span>
            <span class="fc-05__tag">TypeScript</span>
            <span class="fc-05__tag">D3.js</span>
          </div>
        </div>
        <div class="fc-05__front-hint">Hover to see tech stack →</div>
      </div>
      <div class="fc-05__back">
        <div class="fc-05__back-title">Tech Stack & Proficiency</div>
        <div class="fc-05__skills">
          <div class="fc-05__skill-item"><div class="fc-05__skill-row"><span class="fc-05__skill-name">React / Next.js</span><span class="fc-05__skill-pct">96%</span></div><div class="fc-05__skill-track"><div class="fc-05__skill-bar" style="width:96%"></div></div></div>
          <div class="fc-05__skill-item"><div class="fc-05__skill-row"><span class="fc-05__skill-name">TypeScript</span><span class="fc-05__skill-pct">92%</span></div><div class="fc-05__skill-track"><div class="fc-05__skill-bar" style="width:92%"></div></div></div>
          <div class="fc-05__skill-item"><div class="fc-05__skill-row"><span class="fc-05__skill-name">D3.js / Recharts</span><span class="fc-05__skill-pct">85%</span></div><div class="fc-05__skill-track"><div class="fc-05__skill-bar" style="width:85%"></div></div></div>
          <div class="fc-05__skill-item"><div class="fc-05__skill-row"><span class="fc-05__skill-name">Node / WebSocket</span><span class="fc-05__skill-pct">88%</span></div><div class="fc-05__skill-track"><div class="fc-05__skill-bar" style="width:88%"></div></div></div>
          <div class="fc-05__skill-item"><div class="fc-05__skill-row"><span class="fc-05__skill-name">PostgreSQL</span><span class="fc-05__skill-pct">78%</span></div><div class="fc-05__skill-track"><div class="fc-05__skill-bar" style="width:78%"></div></div></div>
        </div>
        <div class="fc-05__stack-icons">
          <div class="fc-05__si">⚛</div>
          <div class="fc-05__si">🟦</div>
          <div class="fc-05__si">📊</div>
          <div class="fc-05__si">🟢</div>
          <div class="fc-05__si">🐘</div>
        </div>
        <button class="fc-05__view-btn">View Live Project →</button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-05,.fc-05 *,.fc-05 *::before,.fc-05 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-05 ::selection{background:#f97316;color:#fff}
.fc-05{
  --bg:#0a0a0a;--orange:#f97316;--amber:#fbbf24;--white:#fef3e2;
  --card-w:340px;--card-h:440px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 40% 60%,#1a0a00,#0a0a0a 65%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);
}
.fc-05__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-05__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.fc-05__scene:hover .fc-05__card{transform:rotateY(180deg)}
.fc-05__front,.fc-05__back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT — project preview */
.fc-05__front{background:#111;border:1px solid rgba(249,115,22,.2);display:flex;flex-direction:column}
.fc-05__preview-img{
  height:200px;background:linear-gradient(135deg,#1c0a00,#0d1a2e);
  position:relative;overflow:hidden;flex-shrink:0;
}
.fc-05__preview-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(249,115,22,.2),transparent 60%)}
.fc-05__preview-grid{
  position:absolute;inset:20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;
}
.fc-05__pg{border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.fc-05__pg:nth-child(1){grid-column:1/3;background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(251,191,36,.06))}
.fc-05__project-info{padding:20px 22px}
.fc-05__proj-cat{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:6px}
.fc-05__proj-name{font-size:20px;font-weight:800;color:var(--white)}
.fc-05__proj-desc{font-size:12px;color:rgba(254,243,226,.5);margin-top:6px;line-height:1.6}
.fc-05__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.fc-05__tag{font-size:10px;padding:3px 9px;border-radius:20px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);color:rgba(254,243,226,.7);letter-spacing:.06em}
.fc-05__front-hint{padding:0 22px 16px;font-size:10px;color:rgba(254,243,226,.25);letter-spacing:.08em}
/* BACK — tech stack + skill bars */
.fc-05__back{
  background:linear-gradient(160deg,#111,#1a1008);
  border:1px solid rgba(251,191,36,.2);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:28px;gap:14px;
}
.fc-05__back-title{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);font-weight:700}
.fc-05__skills{display:flex;flex-direction:column;gap:12px;flex:1}
.fc-05__skill-item{display:flex;flex-direction:column;gap:5px}
.fc-05__skill-row{display:flex;justify-content:space-between;align-items:center}
.fc-05__skill-name{font-size:12px;font-weight:600;color:rgba(254,243,226,.8)}
.fc-05__skill-pct{font-size:11px;font-weight:700;color:var(--orange)}
.fc-05__skill-track{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.fc-05__skill-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--amber));transition:width .6s ease}
.fc-05__stack-icons{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.fc-05__si{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:16px}
.fc-05__view-btn{
  margin-top:auto;width:100%;padding:12px;
  background:linear-gradient(135deg,var(--orange),var(--amber));
  color:#000;font-size:13px;font-weight:800;
  border:none;border-radius:12px;cursor:pointer;letter-spacing:.04em;
}
@media(prefers-reduced-motion:reduce){.fc-05__card{transition:none}}
```

### 08. Language Flashcard with Pronunciation

**Type:** Pure CSS
**Description:** Front shows a foreign-language word with phonetic transcription and an audio play button; back reveals definition, usage example, and a memory tip.

**HTML:**
```html
<div class="fc-06">
  <div class="fc-06__nav">
    <button class="fc-06__nav-btn">← Prev</button>
    <button class="fc-06__nav-btn">Next →</button>
  </div>
  <div class="fc-06__counter">Card 7 of 24 · Japanese N3</div>
  <div class="fc-06__scene">
    <div class="fc-06__card">
      <div class="fc-06__front">
        <div class="fc-06__lang-flag">🇯🇵</div>
        <div class="fc-06__lang-label">Japanese</div>
        <div class="fc-06__word">木漏れ日</div>
        <div class="fc-06__phonetic">/ ko·mo·re·bi /</div>
        <button class="fc-06__sound-btn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          Play audio
        </button>
        <div class="fc-06__front-hint">Hover to see definition →</div>
      </div>
      <div class="fc-06__back">
        <div class="fc-06__def-label">Definition</div>
        <div class="fc-06__pos">noun · untranslatable</div>
        <div class="fc-06__definition">Sunlight filtering through leaves; the interplay of light and shadow when sun shines through a canopy of trees.</div>
        <div class="fc-06__example-label">Example sentence</div>
        <div class="fc-06__example">「公園の木漏れ日の中で読書するのが好きです。」<br>"I love reading in the komorebi of the park."</div>
        <div class="fc-06__mnemonic"><strong>Memory tip:</strong> 木 (ki = tree) + 漏れ (more = leaking) + 日 (hi = sun) → "sun leaking through trees" — paint the picture.</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-06,.fc-06 *,.fc-06 *::before,.fc-06 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-06 ::selection{background:#a78bfa;color:#000}
.fc-06{
  --bg:#080612;--purple:#a78bfa;--indigo:#6366f1;--mint:#34d399;--white:#f5f3ff;
  --card-w:340px;--card-h:400px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 40%,#120b2e,#080612 65%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:20px;color:var(--white);
}
.fc-06__nav{display:flex;gap:12px}
.fc-06__nav-btn{
  padding:8px 20px;border-radius:20px;border:1px solid rgba(163,139,250,.25);
  background:rgba(163,139,250,.08);color:rgba(245,243,255,.6);
  font-size:12px;font-weight:600;cursor:pointer;transition:background .2s;
}
.fc-06__nav-btn:hover{background:rgba(163,139,250,.18);color:var(--purple)}
.fc-06__counter{font-size:12px;color:rgba(245,243,255,.35);letter-spacing:.08em}
.fc-06__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-06__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.fc-06__scene:hover .fc-06__card{transform:rotateY(180deg)}
.fc-06__front,.fc-06__back{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-06__front{
  background:linear-gradient(145deg,#130d2e,#0e0a22);
  border:1px solid rgba(163,139,250,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:40px 32px;
}
.fc-06__front::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(163,139,250,.1),transparent 60%)}
.fc-06__lang-flag{font-size:40px;position:relative;z-index:1}
.fc-06__lang-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,243,255,.4);font-weight:600;position:relative;z-index:1}
.fc-06__word{
  font-size:52px;font-weight:900;
  background:linear-gradient(135deg,var(--purple),var(--indigo));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-align:center;position:relative;z-index:1;
}
.fc-06__phonetic{font-size:16px;color:rgba(245,243,255,.5);font-style:italic;position:relative;z-index:1;letter-spacing:.04em}
.fc-06__sound-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:20px;
  background:rgba(163,139,250,.1);border:1px solid rgba(163,139,250,.2);
  color:var(--purple);font-size:12px;font-weight:600;cursor:pointer;
  position:relative;z-index:1;transition:background .2s;
}
.fc-06__sound-btn:hover{background:rgba(163,139,250,.2)}
.fc-06__front-hint{position:absolute;bottom:18px;font-size:10px;color:rgba(245,243,255,.2);letter-spacing:.08em}
/* BACK */
.fc-06__back{
  background:linear-gradient(145deg,#0a1a0e,#0d1f12);
  border:1px solid rgba(52,211,153,.2);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:30px;gap:14px;
}
.fc-06__def-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);font-weight:700}
.fc-06__definition{font-size:16px;font-weight:700;color:var(--white);line-height:1.4}
.fc-06__pos{display:inline-block;font-size:10px;padding:2px 10px;border-radius:20px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2);color:var(--mint);font-style:italic;margin-bottom:4px}
.fc-06__example-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,243,255,.35);margin-top:4px}
.fc-06__example{font-size:13px;color:rgba(245,243,255,.65);line-height:1.7;font-style:italic;border-left:2px solid rgba(52,211,153,.3);padding-left:12px}
.fc-06__mnemonic{margin-top:auto;padding:12px;border-radius:12px;background:rgba(163,139,250,.06);border:1px solid rgba(163,139,250,.12);font-size:12px;color:rgba(245,243,255,.5);line-height:1.6}
.fc-06__mnemonic strong{color:var(--purple)}
@media(prefers-reduced-motion:reduce){.fc-06__card{transition:none}}
```

### 09. Trivia Quiz Q&A Card

**Type:** Pure CSS
**Description:** Front states a challenging trivia question with multiple-choice options; back reveals the correct answer with a brief context paragraph and score indicator.

**HTML:**
```html
<div class="fc-07">
  <div class="fc-07__scene">
    <div class="fc-07__card">
      <div class="fc-07__front">
        <div class="fc-07__q-num">Q7</div>
        <div class="fc-07__category"><span class="fc-07__cat-dot"></span>Space & Astronomy</div>
        <div class="fc-07__difficulty">
          <span class="fc-07__star">★</span>
          <span class="fc-07__star">★</span>
          <span class="fc-07__star">★</span>
          <span class="fc-07__star empty">★</span>
          <span class="fc-07__star empty">★</span>
        </div>
        <div class="fc-07__question">Which planet in our solar system has the most known natural moons?</div>
        <div class="fc-07__options">
          <div class="fc-07__opt"><span class="fc-07__opt-letter">A</span>Jupiter</div>
          <div class="fc-07__opt"><span class="fc-07__opt-letter">B</span>Saturn</div>
          <div class="fc-07__opt"><span class="fc-07__opt-letter">C</span>Uranus</div>
          <div class="fc-07__opt"><span class="fc-07__opt-letter">D</span>Neptune</div>
        </div>
        <div class="fc-07__front-hint">Hover to reveal the answer →</div>
      </div>
      <div class="fc-07__back">
        <div class="fc-07__correct-label">✓ Correct Answer</div>
        <div class="fc-07__tick-circle">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div class="fc-07__answer">B — Saturn</div>
        <div class="fc-07__divider-line"></div>
        <div class="fc-07__context">Saturn holds the record with 146 confirmed moons as of 2025, edging past Jupiter's 95. Saturn's moon Titan has a thick atmosphere and lakes of liquid methane.</div>
        <div class="fc-07__score-row">
          <div class="fc-07__score-item"><div class="fc-07__score-num">+10</div><div class="fc-07__score-lbl">Points</div></div>
          <div class="fc-07__score-item"><div class="fc-07__score-num">7/10</div><div class="fc-07__score-lbl">Progress</div></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-07,.fc-07 *,.fc-07 *::before,.fc-07 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-07 ::selection{background:#eab308;color:#000}
.fc-07{
  --bg:#0c0c00;--yellow:#eab308;--amber:#f59e0b;--green:#22c55e;--white:#fefce8;
  --card-w:360px;--card-h:420px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#1a1500,#0c0c00 65%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);
}
.fc-07__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-07__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.fc-07__scene:hover .fc-07__card{transform:rotateY(180deg)}
.fc-07__front,.fc-07__back{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-07__front{
  background:linear-gradient(145deg,#1a1400,#150f00);
  border:1px solid rgba(234,179,8,.25);
  display:flex;flex-direction:column;align-items:center;padding:36px 28px;
}
.fc-07__front::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(234,179,8,.12),transparent 60%)}
.fc-07__category{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);font-weight:700;position:relative;z-index:1}
.fc-07__cat-dot{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.fc-07__difficulty{
  position:relative;z-index:1;margin-top:6px;
  display:flex;gap:4px;
}
.fc-07__star{color:var(--yellow);font-size:14px}
.fc-07__star.empty{opacity:.2}
.fc-07__q-num{font-size:80px;font-weight:900;color:rgba(234,179,8,.07);position:absolute;top:20px;right:24px;line-height:1;font-style:italic}
.fc-07__question{
  position:relative;z-index:1;margin-top:24px;
  font-size:20px;font-weight:700;line-height:1.5;text-align:center;color:var(--white);
}
.fc-07__options{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:28px;position:relative;z-index:1}
.fc-07__opt{
  padding:11px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(234,179,8,.15);
  font-size:13px;color:rgba(254,252,232,.7);cursor:pointer;
  transition:background .2s,border-color .2s;display:flex;align-items:center;gap:10px;
}
.fc-07__opt:hover{background:rgba(234,179,8,.1);border-color:rgba(234,179,8,.35);color:var(--white)}
.fc-07__opt-letter{width:22px;height:22px;border-radius:6px;background:rgba(234,179,8,.15);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--amber);flex-shrink:0}
.fc-07__front-hint{margin-top:auto;font-size:10px;color:rgba(254,252,232,.2);letter-spacing:.08em}
/* BACK */
.fc-07__back{
  background:linear-gradient(145deg,#051a08,#071a0e);
  border:1px solid rgba(34,197,94,.25);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;padding:36px 28px;gap:16px;
}
.fc-07__back::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(34,197,94,.1),transparent 60%)}
.fc-07__correct-label{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--green);font-weight:700}
.fc-07__tick-circle{width:48px;height:48px;border-radius:50%;background:rgba(34,197,94,.15);border:2px solid rgba(34,197,94,.35);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.fc-07__answer{position:relative;z-index:1;font-size:26px;font-weight:900;color:var(--white);text-align:center;line-height:1.2}
.fc-07__divider-line{width:60px;height:2px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.4),transparent);position:relative;z-index:1}
.fc-07__context{position:relative;z-index:1;font-size:13px;color:rgba(254,252,232,.6);line-height:1.7;text-align:center}
.fc-07__score-row{position:relative;z-index:1;display:flex;gap:20px;margin-top:4px}
.fc-07__score-item{text-align:center}
.fc-07__score-num{font-size:22px;font-weight:800;color:var(--green)}
.fc-07__score-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(254,252,232,.3)}
@media(prefers-reduced-motion:reduce){.fc-07__card{transition:none}}
```

### 10. Gaming Trading Card Character Stats

**Type:** Pure CSS
**Description:** Front displays a stylised SVG character illustration with rarity and ability icons; back lists full competitive stats with type badges and a lore quote.

**HTML:**
```html
<div class="fc-08">
  <div class="fc-08__scene">
    <div class="fc-08__card">
      <div class="fc-08__front">
        <div class="fc-08__card-header">
          <div class="fc-08__rarity">★ Legendary</div>
          <div class="fc-08__power">CP 4800</div>
        </div>
        <div class="fc-08__art">
          <svg class="fc-08__char-svg" width="160" height="180" viewBox="0 0 160 180">
            <!-- character silhouette -->
            <ellipse cx="80" cy="40" rx="28" ry="30" fill="rgba(239,68,68,.7)"/>
            <ellipse cx="80" cy="40" rx="18" ry="20" fill="#1a000a"/>
            <!-- eyes -->
            <circle cx="72" cy="38" r="5" fill="rgba(251,191,36,.9)"/>
            <circle cx="88" cy="38" r="5" fill="rgba(251,191,36,.9)"/>
            <circle cx="72" cy="38" r="2" fill="#000"/>
            <circle cx="88" cy="38" r="2" fill="#000"/>
            <!-- body/cloak -->
            <path d="M52 75 Q80 60 108 75 L115 150 Q80 160 45 150 Z" fill="rgba(139,92,246,.5)"/>
            <path d="M62 75 Q80 65 98 75 L102 140 Q80 150 58 140 Z" fill="rgba(30,0,50,.8)"/>
            <!-- weapon -->
            <rect x="105" y="50" width="6" height="90" rx="3" fill="rgba(251,191,36,.6)" transform="rotate(15 108 95)"/>
            <polygon points="108,50 114,40 120,55" fill="rgba(239,68,68,.8)" transform="rotate(15 108 95)"/>
            <!-- cape -->
            <path d="M52 80 Q30 120 35 160 Q52 140 52 120" fill="rgba(139,92,246,.3)"/>
            <path d="M108 80 Q130 120 125 160 Q108 140 108 120" fill="rgba(139,92,246,.3)"/>
            <!-- glow -->
            <circle cx="80" cy="40" r="35" fill="none" stroke="rgba(251,191,36,.2)" stroke-width="2"/>
          </svg>
        </div>
        <div class="fc-08__name-plate">
          <div class="fc-08__char-name">Vex Nightbane</div>
          <div class="fc-08__char-class">Dark Sorcerer · Elite</div>
        </div>
        <div class="fc-08__abilities">
          <div class="fc-08__ability">🔥</div>
          <div class="fc-08__ability">⚡</div>
          <div class="fc-08__ability">💀</div>
          <div class="fc-08__ability">🛡</div>
        </div>
      </div>
      <div class="fc-08__back">
        <div class="fc-08__back-header">
          <div class="fc-08__back-name">Vex Nightbane</div>
          <div class="fc-08__back-cp">CP 4800</div>
        </div>
        <div class="fc-08__type-badges">
          <span class="fc-08__type fc-08__type--fire">🔥 Fire</span>
          <span class="fc-08__type fc-08__type--dark">⚡ Dark</span>
        </div>
        <div class="fc-08__stat-grid">
          <div class="fc-08__stat-box"><div class="fc-08__stat-lbl">Attack</div><div class="fc-08__stat-bar-row"><span class="fc-08__stat-num">94</span><div class="fc-08__stat-track"><div class="fc-08__stat-fill fc-08__fill-red" style="width:94%"></div></div></div></div>
          <div class="fc-08__stat-box"><div class="fc-08__stat-lbl">Magic</div><div class="fc-08__stat-bar-row"><span class="fc-08__stat-num">98</span><div class="fc-08__stat-track"><div class="fc-08__stat-fill fc-08__fill-violet" style="width:98%"></div></div></div></div>
          <div class="fc-08__stat-box"><div class="fc-08__stat-lbl">Defense</div><div class="fc-08__stat-bar-row"><span class="fc-08__stat-num">60</span><div class="fc-08__stat-track"><div class="fc-08__stat-fill fc-08__fill-gold" style="width:60%"></div></div></div></div>
          <div class="fc-08__stat-box"><div class="fc-08__stat-lbl">Speed</div><div class="fc-08__stat-bar-row"><span class="fc-08__stat-num">82</span><div class="fc-08__stat-track"><div class="fc-08__stat-fill fc-08__fill-green" style="width:82%"></div></div></div></div>
        </div>
        <div class="fc-08__lore">"Born from shadow and flame, Vex commands armies of wraiths and bends reality itself. Few have witnessed his full power — fewer still survived."</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-08,.fc-08 *,.fc-08 *::before,.fc-08 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-08 ::selection{background:#dc2626;color:#fff}
.fc-08{
  --bg:#0a0005;--red:#ef4444;--gold:#fbbf24;--violet:#8b5cf6;--white:#fff5f5;
  --card-w:280px;--card-h:440px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 30% 50%,#1a0008,#0a0005 65%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);
}
.fc-08__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-08__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,0,.2,1)}
/* Trading-card reveal — at the midpoint of the flip the card pops forward
   60px on Z; the scene's box-shadow simultaneously expands into a gold
   glow burst (kept on the scene NOT the card, because applying filter
   to a transform-style:preserve-3d element disables backface-visibility
   in Chromium and breaks the flip). Reads as "card revealing its power"
   rather than a flat spin. */
.fc-08__scene{transition:box-shadow .45s ease}
.fc-08__scene:hover{box-shadow:0 0 60px 8px rgba(251,191,36,.35)}
.fc-08__scene:hover .fc-08__card{animation:fc-08-power-flip .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fc-08-power-flip{
  0%{transform:rotateY(0deg) translateZ(0)}
  50%{transform:rotateY(90deg) translateZ(60px)}
  100%{transform:rotateY(180deg) translateZ(0)}
}
.fc-08__front,.fc-08__back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-08__front{
  background:linear-gradient(160deg,#1a0010,#0d000a);
  border:2px solid rgba(251,191,36,.35);
  display:flex;flex-direction:column;
  box-shadow:0 0 30px rgba(251,191,36,.1),inset 0 1px 0 rgba(251,191,36,.2);
}
.fc-08__card-header{
  padding:12px 16px;display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(90deg,rgba(251,191,36,.15),transparent);
  border-bottom:1px solid rgba(251,191,36,.15);
}
.fc-08__rarity{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:800}
.fc-08__power{font-size:20px;font-weight:900;color:var(--gold);text-shadow:0 0 15px rgba(251,191,36,.5)}
.fc-08__art{
  flex:1;background:linear-gradient(160deg,#2d0020,#0d0030,#1a000a);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.fc-08__art::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(239,68,68,.2),transparent 60%)}
/* character art via SVG */
.fc-08__char-svg{position:relative;z-index:1}
.fc-08__name-plate{
  padding:12px 16px;
  background:linear-gradient(90deg,rgba(239,68,68,.15),rgba(139,92,246,.1));
  border-top:1px solid rgba(251,191,36,.2);border-bottom:1px solid rgba(251,191,36,.1);
}
.fc-08__char-name{font-size:17px;font-weight:900;letter-spacing:.04em;color:var(--white)}
.fc-08__char-class{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-weight:600;margin-top:2px}
.fc-08__abilities{display:flex;gap:6px;padding:10px 16px}
.fc-08__ability{width:28px;height:28px;border-radius:8px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.2);display:flex;align-items:center;justify-content:center;font-size:14px}
/* BACK */
.fc-08__back{
  background:linear-gradient(160deg,#0d0020,#15001a);
  border:2px solid rgba(139,92,246,.35);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:20px;gap:10px;
  box-shadow:inset 0 1px 0 rgba(139,92,246,.2);
}
.fc-08__back-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.fc-08__back-name{font-size:16px;font-weight:900;color:var(--white)}
.fc-08__back-cp{font-size:12px;font-weight:700;color:var(--gold)}
.fc-08__stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fc-08__stat-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}
.fc-08__stat-lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,245,245,.35);margin-bottom:3px}
.fc-08__stat-bar-row{display:flex;align-items:center;gap:6px}
.fc-08__stat-num{font-size:15px;font-weight:800;color:var(--white);min-width:24px}
.fc-08__stat-track{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.fc-08__stat-fill{height:100%;border-radius:2px}
.fc-08__fill-red{background:linear-gradient(90deg,var(--red),#f97316)}
.fc-08__fill-violet{background:linear-gradient(90deg,var(--violet),#a78bfa)}
.fc-08__fill-gold{background:linear-gradient(90deg,var(--gold),#fde68a)}
.fc-08__fill-green{background:linear-gradient(90deg,#22c55e,#86efac)}
.fc-08__lore{margin-top:4px;font-size:11px;color:rgba(255,245,245,.45);line-height:1.6;font-style:italic;border-left:2px solid rgba(139,92,246,.3);padding-left:10px}
.fc-08__type-badges{display:flex;gap:6px;flex-wrap:wrap}
.fc-08__type{font-size:9px;padding:3px 8px;border-radius:20px;font-weight:700;letter-spacing:.06em}
.fc-08__type--fire{background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.3);color:var(--red)}
.fc-08__type--dark{background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.3);color:var(--violet)}
@media(prefers-reduced-motion:reduce){.fc-08__card{transition:none}}
```

### 11. Photo Gallery Overlay Card

**Type:** Pure CSS
**Description:** Front displays a full-bleed SVG aurora landscape scene; back reveals location metadata, camera EXIF settings, content tags, and a download CTA.

**HTML:**
```html
<div class="fc-09">
  <div class="fc-09__scene">
    <div class="fc-09__card">
      <div class="fc-09__front">
        <div class="fc-09__photo">
          <svg viewBox="0 0 340 380" preserveAspectRatio="xMidYMid slice" fill="none">
            <!-- sky gradient -->
            <defs>
              <linearGradient id="sky9" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
                <stop stop-color="#041830"/>
                <stop offset=".5" stop-color="#0a2a4a"/>
                <stop offset="1" stop-color="#0d3a5c"/>
              </linearGradient>
              <linearGradient id="water9" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
                <stop stop-color="#062035"/>
                <stop offset="1" stop-color="#020d18"/>
              </linearGradient>
            </defs>
            <rect width="340" height="380" fill="url(#sky9)"/>
            <!-- stars -->
            <circle cx="30" cy="30" r="1.5" fill="white" opacity=".8"/>
            <circle cx="80" cy="15" r="1" fill="white" opacity=".6"/>
            <circle cx="150" cy="25" r="1.5" fill="white" opacity=".9"/>
            <circle cx="220" cy="10" r="1" fill="white" opacity=".7"/>
            <circle cx="290" cy="35" r="1.5" fill="white" opacity=".8"/>
            <circle cx="310" cy="15" r="1" fill="white" opacity=".5"/>
            <circle cx="60" cy="60" r="1" fill="white" opacity=".6"/>
            <circle cx="260" cy="60" r="1.5" fill="white" opacity=".7"/>
            <!-- aurora band -->
            <ellipse cx="170" cy="80" rx="200" ry="40" fill="rgba(20,184,166,.15)"/>
            <ellipse cx="170" cy="90" rx="160" ry="25" fill="rgba(14,165,233,.1)"/>
            <!-- mountains far -->
            <path d="M0 220 L60 140 L120 200 L180 130 L240 190 L300 140 L340 180 L340 280 L0 280Z" fill="rgba(12,36,64,.7)"/>
            <!-- mountains near -->
            <path d="M0 260 L80 180 L140 230 L200 170 L260 220 L340 175 L340 280 L0 280Z" fill="rgba(8,24,48,.9)"/>
            <!-- water reflection -->
            <rect x="0" y="280" width="340" height="100" fill="url(#water9)"/>
            <!-- reflection lines -->
            <line x1="50" y1="300" x2="290" y2="300" stroke="rgba(14,165,233,.08)" stroke-width="8"/>
            <line x1="30" y1="320" x2="310" y2="320" stroke="rgba(14,165,233,.05)" stroke-width="12"/>
            <!-- aurora reflection in water -->
            <ellipse cx="170" cy="330" rx="180" ry="20" fill="rgba(20,184,166,.08)"/>
            <!-- moon -->
            <circle cx="260" cy="55" r="20" fill="rgba(240,249,255,.9)"/>
            <circle cx="268" cy="48" r="16" fill="rgba(10,28,48,.95)"/>
          </svg>
          <div class="fc-09__photo-meta">
            <div class="fc-09__cam-icon">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
              f/2.8 · 25s · ISO 3200
            </div>
            <div class="fc-09__photo-title">Aurora at Jökulsárlón</div>
          </div>
        </div>
        <div class="fc-09__front-hint">Hover for details & download →</div>
      </div>
      <div class="fc-09__back">
        <div class="fc-09__back-img-thumb">
          <svg viewBox="0 0 340 120" preserveAspectRatio="xMidYMid slice" fill="none">
            <rect width="340" height="120" fill="#041830"/>
            <path d="M0 80 L80 50 L140 70 L200 40 L260 65 L340 45 L340 120 L0 120Z" fill="rgba(12,36,64,.9)"/>
            <ellipse cx="170" cy="30" rx="160" ry="18" fill="rgba(20,184,166,.2)"/>
            <rect x="0" y="90" width="340" height="30" fill="rgba(6,18,30,.9)"/>
          </svg>
        </div>
        <div class="fc-09__detail-grid">
          <div class="fc-09__detail"><div class="fc-09__detail-lbl">Location</div><div class="fc-09__detail-val">Iceland</div></div>
          <div class="fc-09__detail"><div class="fc-09__detail-lbl">Date Captured</div><div class="fc-09__detail-val">Nov 12, 2024</div></div>
          <div class="fc-09__detail"><div class="fc-09__detail-lbl">Camera</div><div class="fc-09__detail-val">Sony A7R V</div></div>
          <div class="fc-09__detail"><div class="fc-09__detail-lbl">Resolution</div><div class="fc-09__detail-val">61 MP RAW</div></div>
        </div>
        <div class="fc-09__tags-row">
          <span class="fc-09__photo-tag">Aurora</span>
          <span class="fc-09__photo-tag">Landscape</span>
          <span class="fc-09__photo-tag">Night Sky</span>
        </div>
        <button class="fc-09__download">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Download Full Resolution
        </button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-09,.fc-09 *,.fc-09 *::before,.fc-09 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-09 ::selection{background:#0ea5e9;color:#fff}
.fc-09{
  --bg:#080c10;--sky:#0ea5e9;--teal:#14b8a6;--white:#f0f9ff;
  --card-w:340px;--card-h:440px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 0%,#061020,#080c10 65%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);
}
.fc-09__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-09__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform-origin:center top;transition:transform .85s cubic-bezier(.4,0,.2,1)}
/* See note on translateY counter — same as fc-02 (flip-up) but inverted:
   rotating around top edge would push the card UP by its full height; the
   translateY(100%) at the end keeps the visual position fixed. */
/* Fold-out from the TOP edge — the card unfolds downward like peeling
   back a Polaroid, instead of spinning around centre. Preserves the
   photo's visual focus during the transition. */
.fc-09__scene:hover .fc-09__card{transform:translateY(100%) rotateX(-180deg)}
.fc-09__front,.fc-09__back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT — full-bleed photo */
.fc-09__front{display:flex;flex-direction:column;border:1px solid rgba(14,165,233,.2)}
.fc-09__photo{
  flex:1;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0c2340,#041520,#0d2a2a);
}
/* SVG landscape scene */
.fc-09__photo svg{position:absolute;inset:0;width:100%;height:100%}
.fc-09__photo-meta{
  position:absolute;bottom:0;inset-x:0;
  padding:20px;
  background:linear-gradient(to top,rgba(8,12,16,.9),transparent);
}
.fc-09__cam-icon{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,249,255,.5)}
.fc-09__photo-title{font-size:20px;font-weight:800;color:var(--white);margin-top:4px}
.fc-09__front-hint{padding:14px;text-align:center;background:rgba(0,0,0,.4);font-size:10px;color:rgba(240,249,255,.3);letter-spacing:.08em}
/* BACK */
.fc-09__back{
  background:linear-gradient(160deg,#0a1520,#060e18);
  border:1px solid rgba(20,184,166,.25);
  /* Pre-rotated on X so the top-hinge fold-out brings it forward. */
  transform:rotateX(180deg);
  display:flex;flex-direction:column;padding:28px;gap:16px;
}
.fc-09__back-img-thumb{
  height:120px;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,#0c2340,#041520,#0d2a2a);
  position:relative;flex-shrink:0;
}
.fc-09__back-img-thumb svg{position:absolute;inset:0;width:100%;height:100%}
.fc-09__detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fc-09__detail{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}
.fc-09__detail-lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,249,255,.35);margin-bottom:3px}
.fc-09__detail-val{font-size:13px;font-weight:600;color:var(--white)}
.fc-09__tags-row{display:flex;gap:6px;flex-wrap:wrap}
.fc-09__photo-tag{font-size:10px;padding:3px 10px;border-radius:20px;background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.2);color:var(--sky)}
.fc-09__download{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:12px;
  background:linear-gradient(135deg,var(--sky),var(--teal));
  color:#000;font-size:13px;font-weight:800;cursor:pointer;border:none;letter-spacing:.04em;
}
@media(prefers-reduced-motion:reduce){.fc-09__card{transition:none}}
```

### 12. Album Cover Iris Aperture Reveal Card

**Type:** Pure CSS
**Description:** Front face shrinks via clip-path circle while back expands from center — a camera-aperture reveal with zero 3D rotation, proving 'flip card' can mean visual swap, not just axis spin.

**HTML:**
```html
<div class="fc-21">
  <div class="fc-21__scene">
    <div class="fc-21__card">
      <div class="fc-21__front">
        <div class="fc-21__cover">
          <svg width="220" height="220" viewBox="0 0 220 220" fill="none">
            <defs>
              <radialGradient id="fc-21-cover-bg" cx="0.4" cy="0.35" r="0.7">
                <stop offset="0%" stop-color="#ec4899"/>
                <stop offset="40%" stop-color="#a21caf"/>
                <stop offset="100%" stop-color="#1e1b4b"/>
              </radialGradient>
              <linearGradient id="fc-21-vinyl" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#1c1c1c"/>
                <stop offset="100%" stop-color="#0a0a0a"/>
              </linearGradient>
            </defs>
            <rect width="220" height="220" fill="url(#fc-21-cover-bg)"/>
            <circle cx="110" cy="110" r="78" fill="url(#fc-21-vinyl)"/>
            <circle cx="110" cy="110" r="78" fill="none" stroke="#3a3a3a" stroke-width="0.5"/>
            <circle cx="110" cy="110" r="68" fill="none" stroke="#2a2a2a" stroke-width="0.5"/>
            <circle cx="110" cy="110" r="58" fill="none" stroke="#2a2a2a" stroke-width="0.5"/>
            <circle cx="110" cy="110" r="48" fill="none" stroke="#2a2a2a" stroke-width="0.5"/>
            <circle cx="110" cy="110" r="38" fill="none" stroke="#2a2a2a" stroke-width="0.5"/>
            <circle cx="110" cy="110" r="28" fill="#ec4899"/>
            <circle cx="110" cy="110" r="4" fill="#0a0a0a"/>
            <g opacity="0.4">
              <circle cx="170" cy="50" r="2" fill="#fef3c7"/>
              <circle cx="180" cy="180" r="1.5" fill="#fef3c7"/>
              <circle cx="40" cy="170" r="2" fill="#fef3c7"/>
              <circle cx="30" cy="40" r="1.5" fill="#fef3c7"/>
            </g>
          </svg>
        </div>
        <div class="fc-21__cover-meta">
          <div class="fc-21__artist">VANTABLACK</div>
          <div class="fc-21__album">After Midnight Drives</div>
          <div class="fc-21__pill-row">
            <span class="fc-21__pill">SYNTHWAVE</span>
            <span class="fc-21__pill">2026 · LP</span>
          </div>
        </div>
        <div class="fc-21__hint">Hover for the tracklist ◐</div>
      </div>
      <div class="fc-21__back">
        <div class="fc-21__back-head">
          <span class="fc-21__back-side">SIDE A</span>
          <span class="fc-21__back-runtime">38 : 12</span>
        </div>
        <div class="fc-21__tracklist">
          <div class="fc-21__track"><span class="fc-21__t-num">01</span><span class="fc-21__t-name">Neon Highway</span><span class="fc-21__t-time">4:18</span></div>
          <div class="fc-21__track"><span class="fc-21__t-num">02</span><span class="fc-21__t-name">Cassette Memory</span><span class="fc-21__t-time">5:42</span></div>
          <div class="fc-21__track"><span class="fc-21__t-num">03</span><span class="fc-21__t-name">Static Bloom</span><span class="fc-21__t-time">3:55</span></div>
          <div class="fc-21__track"><span class="fc-21__t-num">04</span><span class="fc-21__t-name">2 AM in Tokyo</span><span class="fc-21__t-time">6:08</span></div>
          <div class="fc-21__track"><span class="fc-21__t-num">05</span><span class="fc-21__t-name">Lavender Static</span><span class="fc-21__t-time">4:33</span></div>
          <div class="fc-21__track"><span class="fc-21__t-num">06</span><span class="fc-21__t-name">After Midnight</span><span class="fc-21__t-time">13:36</span></div>
        </div>
        <button class="fc-21__play">▶  Play full album</button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-21,.fc-21 *,.fc-21 *::before,.fc-21 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-21 ::selection{background:#ec4899;color:#0a0a0a}
.fc-21{
  --bg:#0a0612;--neon:#ec4899;--violet:#a21caf;--cream:#fef3c7;--ink:#f5e8ff;
  --card-w:360px;--card-h:500px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:radial-gradient(ellipse at 30% 20%,#1e0b3b,#0a0612 70%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--ink);
}
.fc-21__scene{width:var(--card-w);height:var(--card-h)}
.fc-21__card{width:100%;height:100%;position:relative;border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(236,72,153,.2)}
.fc-21__front,.fc-21__back{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:30px 28px;
  transition:clip-path .65s cubic-bezier(.7,0,.3,1);
}
.fc-21__front{
  background:linear-gradient(160deg,#1e0b3b 0%,#0a0612 100%);
  clip-path:circle(150% at 50% 50%);
  -webkit-clip-path:circle(150% at 50% 50%);
  z-index:1;
}
.fc-21__back{
  background:linear-gradient(160deg,#0a0612 0%,#1e0b3b 100%);
  clip-path:circle(0% at 50% 50%);
  -webkit-clip-path:circle(0% at 50% 50%);
  z-index:2;
}
.fc-21__scene:hover .fc-21__front{clip-path:circle(0% at 50% 50%);-webkit-clip-path:circle(0% at 50% 50%)}
.fc-21__scene:hover .fc-21__back{clip-path:circle(150% at 50% 50%);-webkit-clip-path:circle(150% at 50% 50%)}
/* FRONT — album cover */
.fc-21__cover{margin-top:6px;border-radius:4px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.fc-21__cover-meta{margin-top:22px;text-align:center;width:100%}
.fc-21__artist{font-size:11px;letter-spacing:.45em;color:var(--neon);font-weight:700}
.fc-21__album{font-size:23px;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.02em;font-family:'Playfair Display',Georgia,serif;font-style:italic}
.fc-21__pill-row{display:flex;justify-content:center;gap:6px;margin-top:12px}
.fc-21__pill{
  padding:4px 11px;border:1px solid rgba(236,72,153,.4);border-radius:999px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,232,255,.7);font-weight:600;
}
.fc-21__hint{margin-top:auto;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,232,255,.4)}
/* BACK — tracklist */
.fc-21__back-head{
  display:flex;justify-content:space-between;width:100%;
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid rgba(236,72,153,.25);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--neon);font-weight:700;
}
.fc-21__back-runtime{color:rgba(245,232,255,.55);font-family:ui-monospace,monospace;letter-spacing:.1em}
.fc-21__tracklist{display:flex;flex-direction:column;gap:1px;width:100%;flex:1}
.fc-21__track{
  display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;
  padding:10px 8px;border-radius:6px;
  transition:background .15s;cursor:pointer;
}
.fc-21__track:hover{background:rgba(236,72,153,.08)}
.fc-21__t-num{font-family:ui-monospace,monospace;font-size:10px;color:rgba(245,232,255,.4);letter-spacing:.1em}
.fc-21__t-name{font-size:13px;color:var(--ink);font-weight:500}
.fc-21__t-time{font-family:ui-monospace,monospace;font-size:11px;color:rgba(245,232,255,.4);letter-spacing:.05em}
.fc-21__play{
  margin-top:14px;width:100%;padding:13px 0;
  border:1px solid rgba(236,72,153,.5);border-radius:8px;
  background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(162,28,175,.12));
  color:var(--neon);font-size:12px;letter-spacing:.25em;text-transform:uppercase;font-weight:700;
  cursor:pointer;transition:background .2s,box-shadow .2s;
  font-family:inherit;
}
.fc-21__play:hover{background:linear-gradient(135deg,rgba(236,72,153,.3),rgba(162,28,175,.2));box-shadow:0 8px 24px rgba(236,72,153,.25)}
@media(prefers-reduced-motion:reduce){
  .fc-21__front,.fc-21__back{transition:none}
}
```

### 13. Scratch Card Diagonal Peel Reveal

**Type:** Pure CSS
**Description:** A reward scratch card where the surface wipes away diagonally from top-left to bottom-right via an animated clip-path polygon — no rotateY, no rotateX, no 3D transforms at all.

**HTML:**
```html
<div class="fc-23">
  <div class="fc-23__scene">

    <!-- Stars that appear after reveal -->
    <div class="fc-23__star"></div>
    <div class="fc-23__star"></div>
    <div class="fc-23__star"></div>
    <div class="fc-23__star"></div>
    <div class="fc-23__star"></div>
    <div class="fc-23__star"></div>

    <!-- BOTTOM — prize layer (always present, revealed by clip-path wiping top) -->
    <div class="fc-23__prize">
      <div class="fc-23__prize-icon">🏆</div>
      <div class="fc-23__prize-label">You Won!</div>
      <div class="fc-23__prize-amount">$250</div>
      <div class="fc-23__prize-sub">Store Credit · Valid 30 days</div>
      <button class="fc-23__prize-cta">Claim Reward →</button>
    </div>

    <!-- TOP — scratch surface (clip-path wipes this away on hover) -->
    <div class="fc-23__scratch">
      <div class="fc-23__scratch-bg"></div>
      <div class="fc-23__scratch-content">
        <div class="fc-23__scratch-logo">
          <span class="fc-23__logo-dot"></span>
          NovaPay Rewards
        </div>
        <div class="fc-23__scratch-title">Instant Win<br>Scratch Card</div>
        <div class="fc-23__scratch-sub">Hover to reveal your prize</div>
        <div class="fc-23__scratch-area">
          <span class="fc-23__scratch-icon">🪙</span>
          <span class="fc-23__scratch-cta-text">Scratch to reveal</span>
        </div>
      </div>
    </div>

    <div class="fc-23__reveal-label">Hover to peel →</div>
  </div>
</div>
```

**CSS:**
```css
.fc-23,.fc-23 *,.fc-23 *::before,.fc-23 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-23 ::selection{background:#8b5cf6;color:#fff}
.fc-23{
  --bg:#06040e;
  --violet:#8b5cf6;
  --purple:#a855f7;
  --gold:#f59e0b;
  --green:#22c55e;
  --white:#faf5ff;
  --card-w:380px;
  --card-h:240px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 40%,#100820,#06040e 65%);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:28px;color:var(--white);
}

/* ══════════════════════════════════════════
   SCRATCH / PEEL MECHANISM
   No rotateY or rotateX at all.

   The card has two layers stacked with position:absolute.
   The TOP layer (scratch surface) uses:
     clip-path: polygon(...)
   which starts as a full rectangle covering the card.
   On hover, the clip-path animates to a zero-width diagonal
   slice that vanishes from bottom-right to top-left —
   revealing the prize layer underneath.

   The peel curl is simulated by a ::before pseudo on the
   top layer that shows a curling shadow/gradient on the
   leading edge of the shrinking clip region.

   This is 100% clip-path + CSS custom property animation.
   Zero transform-style, zero backface-visibility, zero rotateY.
══════════════════════════════════════════ */

.fc-23__scene{
  width:var(--card-w);
  height:var(--card-h);
  position:relative;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 0 50px rgba(139,92,246,.12);
}

/* ── BOTTOM layer — the prize/reward ── */
.fc-23__prize{
  position:absolute;inset:0;
  /* isolation:isolate creates a new stacking context so the z-index:1
     on prize-icon/amount/cta children stays confined to this layer.
     Without it those children would promote into the scene's stacking
     context and render ABOVE the scratch surface, defeating the whole
     "scratch reveals the prize underneath" mechanic. */
  isolation:isolate;
  background:linear-gradient(135deg,#0d0a20,#1a0d3a,#0a1a1a);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:28px;
  border:1px solid rgba(139,92,246,.3);
  border-radius:18px;
}
.fc-23__prize::before{
  content:'';position:absolute;inset:0;border-radius:18px;
  background:radial-gradient(ellipse at 50% 50%,rgba(245,158,11,.08),transparent 70%);
  pointer-events:none;
}
.fc-23__prize-icon{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.05));
  border:2px solid rgba(245,158,11,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  box-shadow:0 0 30px rgba(245,158,11,.2);
  position:relative;z-index:1;
}
.fc-23__prize-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,245,255,.4);font-weight:700;position:relative;z-index:1}
.fc-23__prize-amount{
  font-size:42px;font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--gold),#fde68a,var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:none;
  position:relative;z-index:1;
}
.fc-23__prize-sub{font-size:12px;color:rgba(250,245,255,.45);position:relative;z-index:1}
.fc-23__prize-cta{
  margin-top:4px;padding:10px 28px;border-radius:20px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),#d97706);
  color:#000;font-size:13px;font-weight:800;letter-spacing:.04em;
  position:relative;z-index:1;transition:transform .15s;
}
.fc-23__prize-cta:hover{filter:brightness(1.08);box-shadow:0 6px 18px rgba(245,158,11,.4)}

/* ── TOP layer — the scratch surface ── */
.fc-23__scratch{
  position:absolute;inset:0;border-radius:18px;
  /*
    clip-path polygon at rest = full card rectangle:
      top-left(0% 0%) → top-right(100% 0%) → bottom-right(100% 100%) → bottom-left(0% 100%)

    On hover it animates to a collapsed diagonal line then zero:
      all four points converge to top-left corner
  */
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition:clip-path .9s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.fc-23__scene:hover .fc-23__scratch{
  /* Wipe from bottom-right to top-left — all corners collapse to top-left */
  clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
}

/* Scratch surface texture */
.fc-23__scratch-bg{
  position:absolute;inset:0;
  background:
    /* sparkle noise */
    radial-gradient(circle at 20% 30%,rgba(139,92,246,.15) 0%,transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(168,85,247,.12) 0%,transparent 40%),
    linear-gradient(135deg,#1a0d38,#250f4a,#12082a);
  border:1px solid rgba(139,92,246,.3);
  border-radius:18px;
}
/* Crosshatch scratch marks */
.fc-23__scratch-bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 8px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.015) 0px,
      rgba(255,255,255,.015) 1px,
      transparent 1px,
      transparent 8px
    );
  border-radius:18px;
}

/* Content on the scratch layer */
.fc-23__scratch-content{
  position:relative;z-index:1;
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:28px;
}
.fc-23__scratch-logo{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:800;letter-spacing:.06em;
  color:rgba(250,245,255,.9);
}
.fc-23__logo-dot{width:8px;height:8px;border-radius:50%;background:var(--violet)}
.fc-23__scratch-title{
  font-size:22px;font-weight:900;color:var(--white);text-align:center;line-height:1.2;
}
.fc-23__scratch-sub{font-size:12px;color:rgba(250,245,255,.45);text-align:center}
.fc-23__scratch-area{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
}
.fc-23__scratch-icon{font-size:16px;animation:fc-23-wiggle 1.5s ease-in-out infinite}
@keyframes fc-23-wiggle{
  0%,100%{transform:rotate(-8deg)}
  50%{transform:rotate(8deg)}
}
.fc-23__scratch-cta-text{font-size:12px;color:rgba(250,245,255,.6);font-weight:600}

/* ── The peel curl edge — ::after on the scratch layer ──
   This is a narrow gradient strip that sits at the clip-path boundary,
   simulating the curling shadow of a peeling sticker.
   We animate its position in sync with the clip-path using the same timing.
*/
.fc-23__scratch::after{
  content:'';
  position:absolute;
  /* diagonal strip from bottom-right corner going to top-left */
  top:-20%;left:-20%;
  width:60%;height:60%;
  background:linear-gradient(
    135deg,
    transparent 40%,
    rgba(0,0,0,.35) 50%,
    rgba(139,92,246,.2) 55%,
    transparent 65%
  );
  transform:rotate(0deg);
  transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .9s;
  pointer-events:none;
  border-radius:0;
}
.fc-23__scene:hover .fc-23__scratch::after{
  transform:translate(-60%,-60%);
  opacity:0;
}

/* Stars burst on the prize layer (pure CSS, no JS) */
.fc-23__star{
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);
  opacity:0;
  transition:opacity .3s .8s;
}
.fc-23__scene:hover .fc-23__star{opacity:1}
.fc-23__star:nth-child(1){top:15%;left:12%;width:6px;height:6px;transition-delay:.8s}
.fc-23__star:nth-child(2){top:22%;right:15%;width:4px;height:4px;transition-delay:.9s}
.fc-23__star:nth-child(3){bottom:20%;left:18%;width:5px;height:5px;transition-delay:1s}
.fc-23__star:nth-child(4){bottom:18%;right:12%;width:6px;height:6px;transition-delay:.85s}
.fc-23__star:nth-child(5){top:50%;left:8%;width:3px;height:3px;transition-delay:1.1s}
.fc-23__star:nth-child(6){top:45%;right:9%;width:4px;height:4px;transition-delay:.95s}

/* Reveal label */
.fc-23__reveal-label{
  position:absolute;bottom:10px;right:14px;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,245,255,.2);
  transition:opacity .3s .8s;
  pointer-events:none;
}
.fc-23__scene:hover .fc-23__reveal-label{opacity:0}

@media(max-width:440px){
  .fc-23{--card-w:320px;--card-h:210px}
  .fc-23__prize-amount{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  .fc-23__scratch{transition:none}
  .fc-23__scratch::after{transition:none}
  .fc-23__scratch-icon{animation:none}
  .fc-23__star{transition:none}
}
```

### 14. Video Playlist Thumbnail Card

**Type:** Pure CSS
**Description:** Front shows a SVG video poster with play overlay and runtime badge; back reveals description, view stats, a mini playlist, and a Watch Now CTA.

**HTML:**
```html
<div class="fc-10">
  <div class="fc-10__scene">
    <div class="fc-10__card">
      <div class="fc-10__front">
        <div class="fc-10__thumb">
          <svg viewBox="0 0 360 210" preserveAspectRatio="xMidYMid slice" fill="none">
            <defs>
              <linearGradient id="code10" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
                <stop stop-color="#0d1117"/>
                <stop offset="1" stop-color="#161b22"/>
              </linearGradient>
            </defs>
            <rect width="360" height="210" fill="url(#code10)"/>
            <!-- code editor lines -->
            <rect x="20" y="20" width="320" height="8" rx="4" fill="rgba(239,68,68,.5)"/>
            <rect x="20" y="36" width="240" height="6" rx="3" fill="rgba(249,115,22,.4)"/>
            <rect x="40" y="52" width="200" height="6" rx="3" fill="rgba(139,92,246,.4)"/>
            <rect x="40" y="68" width="280" height="6" rx="3" fill="rgba(34,197,94,.3)"/>
            <rect x="60" y="84" width="160" height="6" rx="3" fill="rgba(14,165,233,.4)"/>
            <rect x="60" y="100" width="220" height="6" rx="3" fill="rgba(251,191,36,.3)"/>
            <rect x="40" y="116" width="180" height="6" rx="3" fill="rgba(139,92,246,.3)"/>
            <rect x="20" y="132" width="260" height="6" rx="3" fill="rgba(249,115,22,.4)"/>
            <rect x="20" y="148" width="120" height="6" rx="3" fill="rgba(239,68,68,.5)"/>
            <!-- glow overlay -->
            <rect width="360" height="210" fill="rgba(0,0,0,.35)"/>
          </svg>
          <div class="fc-10__play-overlay">
            <div class="fc-10__play-btn">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><polygon points="5 3 19 12 5 21 5 3"/></svg>
            </div>
          </div>
          <div class="fc-10__duration">18:42</div>
        </div>
        <div class="fc-10__channel-row">
          <div class="fc-10__channel-avatar">CF</div>
          <div>
            <div class="fc-10__channel-name">CodeFronts</div>
            <div class="fc-10__channel-subs">248K subscribers</div>
          </div>
        </div>
        <div class="fc-10__video-title">Build a Full-Stack Auth System in 18 Minutes</div>
        <div class="fc-10__meta-row">
          <span class="fc-10__views">1.4M views</span>
          <span class="fc-10__dot-sep"></span>
          <span class="fc-10__date">3 months ago</span>
        </div>
        <div class="fc-10__front-hint">Hover for description →</div>
      </div>
      <div class="fc-10__back">
        <div class="fc-10__back-label">About this Video</div>
        <div class="fc-10__desc">In 18 minutes you'll build a production-ready JWT auth system with refresh tokens, protected routes, and Postgres storage — fully from scratch, zero magic libraries.</div>
        <div class="fc-10__stats-row">
          <div class="fc-10__stat"><div class="fc-10__stat-n">1.4M</div><div class="fc-10__stat-l">Views</div></div>
          <div class="fc-10__stat"><div class="fc-10__stat-n">98K</div><div class="fc-10__stat-l">Likes</div></div>
          <div class="fc-10__stat"><div class="fc-10__stat-n">18:42</div><div class="fc-10__stat-l">Runtime</div></div>
        </div>
        <div class="fc-10__playlist">
          <div class="fc-10__pl-item"><span class="fc-10__pl-num">1</span><span class="fc-10__pl-name">Project setup & JWT basics</span><span class="fc-10__pl-dur">4:12</span></div>
          <div class="fc-10__pl-item"><span class="fc-10__pl-num">2</span><span class="fc-10__pl-name">Refresh token strategy</span><span class="fc-10__pl-dur">6:30</span></div>
          <div class="fc-10__pl-item"><span class="fc-10__pl-num">3</span><span class="fc-10__pl-name">Protected routes & middleware</span><span class="fc-10__pl-dur">8:00</span></div>
        </div>
        <button class="fc-10__watch-btn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="white"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-10,.fc-10 *,.fc-10 *::before,.fc-10 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-10 ::selection{background:#dc2626;color:#fff}
.fc-10{
  --bg:#0c0800;--red:#ef4444;--orange:#f97316;--white:#fff7ed;
  --card-w:360px;--card-h:420px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:#0c0800;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);
}
.fc-10__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-10__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.4,0,.2,1)}
.fc-10__scene:hover .fc-10__card{transform:rotateY(180deg)}
.fc-10__front,.fc-10__back{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-10__front{background:#111;border:1px solid rgba(239,68,68,.2);display:flex;flex-direction:column}
.fc-10__thumb{
  height:210px;background:linear-gradient(160deg,#1a0800,#0d0d0d,#0d1a2e);
  position:relative;overflow:hidden;flex-shrink:0;
}
.fc-10__thumb svg{position:absolute;inset:0;width:100%;height:100%}
.fc-10__play-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);
}
.fc-10__play-btn{
  width:60px;height:60px;border-radius:50%;
  background:rgba(239,68,68,.9);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px rgba(239,68,68,.5);
}
.fc-10__duration{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.8);color:var(--white);font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px}
.fc-10__channel-row{padding:16px 18px 8px;display:flex;align-items:center;gap:10px}
.fc-10__channel-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--orange));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.fc-10__channel-name{font-size:12px;font-weight:700;color:rgba(255,247,237,.7)}
.fc-10__channel-subs{font-size:10px;color:rgba(255,247,237,.35)}
.fc-10__video-title{padding:0 18px;font-size:16px;font-weight:800;color:var(--white);line-height:1.4}
.fc-10__meta-row{padding:10px 18px;display:flex;gap:12px;align-items:center}
.fc-10__views{font-size:11px;color:rgba(255,247,237,.4)}
.fc-10__dot-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,247,237,.3)}
.fc-10__date{font-size:11px;color:rgba(255,247,237,.4)}
.fc-10__front-hint{margin-top:auto;padding:14px 18px;font-size:10px;color:rgba(255,247,237,.2);letter-spacing:.08em;border-top:1px solid rgba(255,255,255,.05)}
/* BACK */
.fc-10__back{
  background:linear-gradient(160deg,#1a0400,#0e0e0e);
  border:1px solid rgba(249,115,22,.2);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:24px;gap:14px;
}
.fc-10__back-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);font-weight:700}
.fc-10__desc{font-size:13px;color:rgba(255,247,237,.65);line-height:1.7}
.fc-10__stats-row{display:flex;gap:12px}
.fc-10__stat{flex:1;padding:12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);text-align:center}
.fc-10__stat-n{font-size:20px;font-weight:800;background:linear-gradient(135deg,var(--red),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fc-10__stat-l{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,247,237,.35);margin-top:2px}
.fc-10__playlist{margin-top:4px;display:flex;flex-direction:column;gap:8px}
.fc-10__pl-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.fc-10__pl-num{width:20px;height:20px;border-radius:50%;background:rgba(239,68,68,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--red);flex-shrink:0}
.fc-10__pl-name{font-size:11px;color:rgba(255,247,237,.65);flex:1}
.fc-10__pl-dur{font-size:10px;color:rgba(255,247,237,.3)}
.fc-10__watch-btn{
  margin-top:auto;width:100%;padding:13px;
  background:linear-gradient(135deg,var(--red),var(--orange));
  color:#fff;font-size:13px;font-weight:800;
  border:none;border-radius:12px;cursor:pointer;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
@media(prefers-reduced-motion:reduce){.fc-10__card{transition:none}}
```

### 15. Testimonial Customer Review Card

**Type:** Pure CSS
**Description:** Front features a prominent client quote and star rating; back reveals the full client profile, company details, and a per-category rating breakdown.

**HTML:**
```html
<div class="fc-11">
  <div class="fc-11__scene">
    <div class="fc-11__card">
      <div class="fc-11__front">
        <div class="fc-11__quote-mark">"</div>
        <div class="fc-11__quote">Switching to this platform <strong>cut our design-to-production time in half.</strong> The component library alone saved us three months of custom work.</div>
        <div class="fc-11__stars">
          <span class="fc-11__star">★</span><span class="fc-11__star">★</span>
          <span class="fc-11__star">★</span><span class="fc-11__star">★</span>
          <span class="fc-11__star">★</span>
        </div>
        <div class="fc-11__client-preview">
          <div class="fc-11__avatar-mini">MK</div>
          <div>
            <div class="fc-11__client-name">Marcus Klein</div>
            <div class="fc-11__client-title">VP of Engineering · Prism Labs</div>
          </div>
        </div>
        <div class="fc-11__front-hint">Hover for full profile →</div>
      </div>
      <div class="fc-11__back">
        <div class="fc-11__back-label">Reviewer Profile</div>
        <div class="fc-11__profile-card">
          <div class="fc-11__avatar-lg">MK</div>
          <div class="fc-11__full-name">Marcus Klein</div>
          <div class="fc-11__full-title">VP of Engineering · 12 years in SaaS infrastructure</div>
          <div class="fc-11__company-row">
            <div class="fc-11__company-dot">PL</div>
            <div>
              <div class="fc-11__company-name">Prism Labs</div>
              <div class="fc-11__company-size">Series B · 340 employees</div>
            </div>
          </div>
        </div>
        <div class="fc-11__rating-detail">
          <div class="fc-11__rating-row"><span class="fc-11__rating-lbl">Overall</span><span class="fc-11__rating-stars fc-11__full-stars">★★★★★</span></div>
          <div class="fc-11__rating-row"><span class="fc-11__rating-lbl">Ease of use</span><span class="fc-11__rating-stars fc-11__full-stars">★★★★★</span></div>
          <div class="fc-11__rating-row" style="margin-bottom:0"><span class="fc-11__rating-lbl">Support</span><span class="fc-11__rating-stars fc-11__full-stars">★★★★★</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-11,.fc-11 *,.fc-11 *::before,.fc-11 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-11 ::selection{background:#7c3aed;color:#fff}
.fc-11{
  --bg:#09050f;--violet:#7c3aed;--pink:#db2777;--gold:#f59e0b;--white:#fdf4ff;
  --card-w:360px;--card-h:420px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 60% 40%,#12062a,#09050f 65%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);
}
.fc-11__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-11__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.4,0,.2,1)}
.fc-11__scene:hover .fc-11__card{transform:rotateY(180deg)}
.fc-11__front,.fc-11__back{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-11__front{
  background:linear-gradient(145deg,#110822,#0d0518);
  border:1px solid rgba(124,58,237,.25);
  display:flex;flex-direction:column;padding:36px 32px;gap:16px;
  box-shadow:0 0 40px rgba(124,58,237,.06);
}
.fc-11__quote-mark{font-size:80px;line-height:.7;color:rgba(124,58,237,.25);font-family:Georgia,serif;font-weight:900;margin-bottom:-12px}
.fc-11__quote{font-size:18px;font-weight:600;line-height:1.7;color:rgba(253,244,255,.85);flex:1}
.fc-11__quote strong{background:linear-gradient(135deg,var(--violet),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fc-11__stars{display:flex;gap:4px;margin-top:auto}
.fc-11__star{color:var(--gold);font-size:18px}
.fc-11__client-preview{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}
.fc-11__avatar-mini{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0}
.fc-11__client-name{font-size:14px;font-weight:700;color:var(--white)}
.fc-11__client-title{font-size:11px;color:rgba(253,244,255,.45)}
.fc-11__front-hint{font-size:10px;color:rgba(253,244,255,.2);letter-spacing:.08em;text-align:right}
/* BACK */
.fc-11__back{
  background:linear-gradient(145deg,#0f0120,#14022a);
  border:1px solid rgba(219,39,119,.2);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:28px;gap:14px;
}
.fc-11__back-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--pink);font-weight:700}
.fc-11__profile-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
}
.fc-11__avatar-lg{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#fff;border:3px solid rgba(124,58,237,.3)}
.fc-11__full-name{font-size:18px;font-weight:800;color:var(--white)}
.fc-11__full-title{font-size:12px;color:rgba(253,244,255,.5);text-align:center}
.fc-11__company-row{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2)}
.fc-11__company-dot{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.fc-11__company-name{font-size:13px;font-weight:700;color:rgba(253,244,255,.8)}
.fc-11__company-size{font-size:10px;color:rgba(253,244,255,.4)}
.fc-11__rating-detail{padding:14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.fc-11__rating-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fc-11__rating-lbl{font-size:11px;color:rgba(253,244,255,.5)}
.fc-11__rating-stars{display:flex;gap:2px;font-size:13px}
.fc-11__full-stars{color:var(--gold)}
@media(prefers-reduced-motion:reduce){.fc-11__card{transition:none}}
```

### 16. Digital Business Card VCard

**Type:** Pure CSS
**Description:** Front shows a minimalist corporate name card with a holographic accent strip; back provides structured phone, email, and location contacts plus a decorative QR code.

**HTML:**
```html
<div class="fc-12">
  <div class="fc-12__label">Digital Business Card · Hover to flip</div>
  <div class="fc-12__scene">
    <div class="fc-12__card">
      <div class="fc-12__front">
        <div class="fc-12__holo"></div>
        <div class="fc-12__logo-mark">JD</div>
        <div class="fc-12__front-info">
          <div class="fc-12__person-name">James Dorian</div>
          <div class="fc-12__person-role">Chief Technology Officer</div>
          <div class="fc-12__divider-h"></div>
          <div class="fc-12__company">Nova Systems Inc.</div>
          <div class="fc-12__contact-mini">
            <div class="fc-12__cm"><span class="fc-12__cm-dot"></span>+1 (415) 555-0198</div>
            <div class="fc-12__cm"><span class="fc-12__cm-dot"></span>j.dorian@novasys.io</div>
          </div>
        </div>
        <div class="fc-12__front-hint">Hover →</div>
      </div>
      <div class="fc-12__back">
        <div class="fc-12__contact-grid">
          <div class="fc-12__contact-item">
            <div class="fc-12__ci-icon"><svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.43 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16z"/></svg></div>
            <div class="fc-12__ci-text"><span class="fc-12__ci-label">Phone</span><span class="fc-12__ci-val">+1 (415) 555-0198</span></div>
          </div>
          <div class="fc-12__contact-item">
            <div class="fc-12__ci-icon"><svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg></div>
            <div class="fc-12__ci-text"><span class="fc-12__ci-label">Email</span><span class="fc-12__ci-val">j.dorian@novasys.io</span></div>
          </div>
          <div class="fc-12__contact-item">
            <div class="fc-12__ci-icon"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
            <div class="fc-12__ci-text"><span class="fc-12__ci-label">Office</span><span class="fc-12__ci-val">SF · Floor 22</span></div>
          </div>
        </div>
        <div class="fc-12__qr">
          <!-- QR code as SVG pattern -->
          <svg viewBox="0 0 21 21" fill="black">
            <!-- position detection patterns -->
            <rect x="0" y="0" width="7" height="7" fill="none" stroke="black" stroke-width="1"/>
            <rect x="2" y="2" width="3" height="3"/>
            <rect x="14" y="0" width="7" height="7" fill="none" stroke="black" stroke-width="1"/>
            <rect x="16" y="2" width="3" height="3"/>
            <rect x="0" y="14" width="7" height="7" fill="none" stroke="black" stroke-width="1"/>
            <rect x="2" y="16" width="3" height="3"/>
            <!-- data modules (decorative) -->
            <rect x="8" y="0" width="1" height="1"/><rect x="10" y="0" width="1" height="1"/><rect x="12" y="0" width="1" height="1"/>
            <rect x="9" y="2" width="1" height="1"/><rect x="11" y="2" width="1" height="1"/>
            <rect x="8" y="4" width="1" height="1"/><rect x="10" y="4" width="2" height="1"/><rect x="13" y="4" width="1" height="1"/>
            <rect x="7" y="7" width="1" height="1"/><rect x="9" y="7" width="2" height="1"/><rect x="12" y="7" width="1" height="1"/>
            <rect x="7" y="9" width="2" height="1"/><rect x="11" y="9" width="1" height="1"/><rect x="13" y="9" width="1" height="1"/>
            <rect x="8" y="11" width="1" height="1"/><rect x="10" y="11" width="2" height="1"/><rect x="14" y="11" width="1" height="1"/>
            <rect x="7" y="13" width="1" height="1"/><rect x="9" y="13" width="1" height="1"/><rect x="12" y="13" width="2" height="1"/>
            <rect x="8" y="14" width="2" height="1"/><rect x="12" y="14" width="1" height="1"/><rect x="14" y="14" width="1" height="1"/>
            <rect x="9" y="16" width="1" height="1"/><rect x="11" y="16" width="3" height="1"/>
            <rect x="8" y="18" width="2" height="1"/><rect x="12" y="18" width="1" height="1"/><rect x="14" y="18" width="1" height="1"/>
            <rect x="9" y="20" width="1" height="1"/><rect x="11" y="20" width="2" height="1"/><rect x="14" y="20" width="1" height="1"/>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-12,.fc-12 *,.fc-12 *::before,.fc-12 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-12 ::selection{background:#0891b2;color:#fff}
.fc-12{
  --bg:#04080c;--cyan:#06b6d4;--slate:#94a3b8;--white:#f0f9ff;
  --card-w:360px;--card-h:220px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 60%,#040e18,#04080c 65%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:16px;color:var(--white);
}
.fc-12__label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(148,163,184,.4);font-weight:600}
.fc-12__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-12__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.fc-12__scene:hover .fc-12__card{transform:rotateY(180deg)}
.fc-12__front,.fc-12__back{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-12__front{
  background:linear-gradient(135deg,#0a1520,#040e18);
  border:1px solid rgba(6,182,212,.25);
  display:flex;align-items:center;padding:24px 28px;gap:20px;
  box-shadow:0 0 40px rgba(6,182,212,.06);
}
.fc-12__front::before{content:'';position:absolute;top:0;right:0;width:160px;height:100%;background:linear-gradient(to left,rgba(6,182,212,.05),transparent);pointer-events:none}
/* holographic strip */
.fc-12__holo{position:absolute;top:0;right:60px;width:4px;height:100%;background:linear-gradient(180deg,transparent,rgba(6,182,212,.4),rgba(139,92,246,.4),rgba(236,72,153,.4),transparent)}
.fc-12__logo-mark{
  width:60px;height:60px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,#0891b2,#0e7490);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;color:#fff;
  box-shadow:0 0 20px rgba(6,182,212,.3);
}
.fc-12__front-info{flex:1}
.fc-12__person-name{font-size:20px;font-weight:800;color:var(--white)}
.fc-12__person-role{font-size:11px;color:var(--cyan);font-weight:600;letter-spacing:.06em;margin-top:2px}
.fc-12__divider-h{height:1px;background:rgba(255,255,255,.08);margin:10px 0}
.fc-12__company{font-size:13px;color:rgba(240,249,255,.6)}
.fc-12__contact-mini{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.fc-12__cm{font-size:11px;color:rgba(240,249,255,.4);display:flex;align-items:center;gap:5px}
.fc-12__cm-dot{width:4px;height:4px;border-radius:50%;background:var(--cyan);opacity:.6}
.fc-12__front-hint{position:absolute;bottom:12px;right:16px;font-size:9px;color:rgba(240,249,255,.2);letter-spacing:.08em}
/* BACK */
.fc-12__back{
  background:linear-gradient(135deg,#060e18,#040a12);
  border:1px solid rgba(6,182,212,.2);
  transform:rotateY(180deg);
  display:flex;align-items:center;padding:20px 24px;gap:20px;
}
.fc-12__contact-grid{flex:1;display:flex;flex-direction:column;gap:10px}
.fc-12__contact-item{display:flex;align-items:center;gap:10px}
.fc-12__ci-icon{width:32px;height:32px;border-radius:8px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fc-12__ci-icon svg{width:14px;height:14px;stroke:var(--cyan);stroke-width:1.8;fill:none}
.fc-12__ci-text{display:flex;flex-direction:column}
.fc-12__ci-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,249,255,.35)}
.fc-12__ci-val{font-size:12px;color:rgba(240,249,255,.8);font-weight:600}
.fc-12__qr{
  width:100px;height:100px;border-radius:10px;flex-shrink:0;
  background:white;padding:6px;
  display:flex;align-items:center;justify-content:center;
}
.fc-12__qr svg{width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.fc-12__card{transition:none}}
```

### 17. Restaurant Menu Item Recipe Card

**Type:** Pure CSS
**Description:** Front presents a dish SVG illustration with price tag; back breaks down key ingredients, allergen warnings, and a per-serving nutrition panel.

**HTML:**
```html
<div class="fc-13">
  <div class="fc-13__scene">
    <div class="fc-13__card">
      <div class="fc-13__front">
        <div class="fc-13__dish-img">
          <svg class="fc-13__dish-svg" width="180" height="160" viewBox="0 0 180 160" fill="none">
            <!-- plate -->
            <ellipse cx="90" cy="110" rx="78" ry="30" fill="rgba(30,20,10,.6)"/>
            <ellipse cx="90" cy="105" rx="76" ry="28" fill="#2a1a08"/>
            <ellipse cx="90" cy="103" rx="68" ry="24" fill="#1a0e04"/>
            <!-- pasta swirls -->
            <path d="M55 95 Q70 80 85 95 Q100 110 115 95 Q130 80 125 95" stroke="rgba(217,119,6,.8)" stroke-width="5" fill="none" stroke-linecap="round"/>
            <path d="M60 100 Q75 85 90 100 Q105 115 120 100" stroke="rgba(180,100,20,.7)" stroke-width="4" fill="none" stroke-linecap="round"/>
            <path d="M65 90 Q80 75 95 90 Q110 105 125 90" stroke="rgba(240,150,30,.6)" stroke-width="3" fill="none" stroke-linecap="round"/>
            <!-- meatballs -->
            <circle cx="72" cy="88" r="14" fill="rgba(139,69,19,.85)"/>
            <circle cx="72" cy="88" r="10" fill="rgba(160,82,45,.8)"/>
            <circle cx="108" cy="93" r="13" fill="rgba(139,69,19,.85)"/>
            <circle cx="108" cy="93" r="9" fill="rgba(160,82,45,.8)"/>
            <!-- sauce -->
            <ellipse cx="90" cy="95" rx="35" ry="12" fill="rgba(180,30,10,.35)"/>
            <!-- herbs -->
            <circle cx="78" cy="76" r="3" fill="rgba(34,197,94,.7)"/>
            <circle cx="85" cy="74" r="2" fill="rgba(34,197,94,.6)"/>
            <circle cx="95" cy="78" r="2.5" fill="rgba(34,197,94,.7)"/>
            <!-- parmesan -->
            <ellipse cx="90" cy="85" rx="20" ry="6" fill="rgba(255,235,180,.3)"/>
          </svg>
          <div class="fc-13__price-tag">$24</div>
        </div>
        <div class="fc-13__dish-info">
          <div class="fc-13__cuisine">Italian · Pasta</div>
          <div class="fc-13__dish-name">Spaghetti al Ragu</div>
          <div class="fc-13__dish-desc">House-made spaghetti with slow-cooked Bolognese, fresh parmesan, and wild basil.</div>
          <div class="fc-13__badges">
            <span class="fc-13__badge">🌶 Medium</span>
            <span class="fc-13__badge">Chef's Pick</span>
          </div>
        </div>
        <div class="fc-13__front-hint">Hover for ingredients & nutrition →</div>
      </div>
      <div class="fc-13__back">
        <div class="fc-13__back-section">Key Ingredients</div>
        <div class="fc-13__ingredients">
          <span class="fc-13__ingredient">Spaghetti pasta</span>
          <span class="fc-13__ingredient">Beef mince (15%)</span>
          <span class="fc-13__ingredient">San Marzano tomato</span>
          <span class="fc-13__ingredient">Parmigiano 24mo</span>
          <span class="fc-13__ingredient">Soffritto base</span>
          <span class="fc-13__ingredient">Fresh basil</span>
          <span class="fc-13__ingredient">Dry white wine</span>
          <span class="fc-13__ingredient">Extra virgin olive oil</span>
        </div>
        <div class="fc-13__back-section">Allergens</div>
        <div class="fc-13__allergens">
          <span class="fc-13__allergen">⚠ Gluten</span>
          <span class="fc-13__allergen">⚠ Dairy</span>
          <span class="fc-13__allergen">⚠ Sulphites</span>
        </div>
        <div class="fc-13__back-section">Nutrition per serving</div>
        <div class="fc-13__nutrition">
          <div class="fc-13__nut-item"><div class="fc-13__nut-num">620</div><div class="fc-13__nut-lbl">kcal</div></div>
          <div class="fc-13__nut-item"><div class="fc-13__nut-num">42g</div><div class="fc-13__nut-lbl">Carbs</div></div>
          <div class="fc-13__nut-item"><div class="fc-13__nut-num">38g</div><div class="fc-13__nut-lbl">Protein</div></div>
          <div class="fc-13__nut-item"><div class="fc-13__nut-num">22g</div><div class="fc-13__nut-lbl">Fat</div></div>
        </div>
        <button class="fc-13__add-btn">Add to Order — $24</button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-13,.fc-13 *,.fc-13 *::before,.fc-13 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-13 ::selection{background:#dc2626;color:#fff}
.fc-13{
  --bg:#0c0400;--red:#dc2626;--amber:#d97706;--cream:#fef3c7;
  --card-w:340px;--card-h:460px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 40%,#1a0800,#0c0400 65%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--cream);
}
.fc-13__scene{width:var(--card-w);height:var(--card-h);cursor:pointer;border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.fc-13__card{width:100%;height:100%;position:relative}
/* Sliding cover — no 3D rotation. Front slides left out, back slides in
   from the right at the same time. Reads as a menu card filing system,
   not a flip. */
.fc-13__front,.fc-13__back{position:absolute;inset:0;border-radius:20px;overflow:hidden;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.fc-13__back{transform:translateX(100%)}
.fc-13__scene:hover .fc-13__front{transform:translateX(-100%)}
.fc-13__scene:hover .fc-13__back{transform:translateX(0)}
/* FRONT */
.fc-13__front{background:#111008;border:1px solid rgba(217,119,6,.2);display:flex;flex-direction:column}
.fc-13__dish-img{
  height:220px;flex-shrink:0;
  background:linear-gradient(160deg,#1a0800,#2d1200,#0d0800);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.fc-13__dish-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(217,119,6,.3),transparent 65%)}
.fc-13__dish-svg{position:relative;z-index:1}
.fc-13__price-tag{
  position:absolute;top:14px;right:14px;z-index:2;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  border:1px solid rgba(217,119,6,.4);
  padding:6px 12px;border-radius:20px;
  font-size:16px;font-weight:800;color:var(--amber);
}
.fc-13__dish-info{padding:20px 22px;flex:1;display:flex;flex-direction:column;gap:8px}
.fc-13__cuisine{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);font-weight:700}
.fc-13__dish-name{font-size:22px;font-weight:800;color:var(--cream)}
.fc-13__dish-desc{font-size:13px;color:rgba(254,243,199,.55);line-height:1.6}
.fc-13__badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.fc-13__badge{font-size:10px;padding:3px 9px;border-radius:20px;background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.2);color:rgba(254,243,199,.7)}
.fc-13__front-hint{padding:0 22px 16px;margin-top:auto;font-size:10px;color:rgba(254,243,199,.2);letter-spacing:.08em}
/* BACK */
.fc-13__back{
  background:linear-gradient(160deg,#0e0800,#12090a);
  border:1px solid rgba(220,38,38,.2);
  /* Initial off-canvas position set by the shared sliding rule above. */
  display:flex;flex-direction:column;padding:24px;gap:12px;
}
.fc-13__back-section{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--amber)}
.fc-13__ingredients{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fc-13__ingredient{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(254,243,199,.7)}
.fc-13__ingredient::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber);flex-shrink:0}
.fc-13__allergens{display:flex;gap:6px;flex-wrap:wrap}
.fc-13__allergen{font-size:10px;padding:3px 8px;border-radius:6px;border:1px solid rgba(220,38,38,.3);background:rgba(220,38,38,.08);color:rgba(254,243,199,.6)}
.fc-13__nutrition{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fc-13__nut-item{text-align:center;padding:8px 4px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.fc-13__nut-num{font-size:15px;font-weight:800;color:var(--cream)}
.fc-13__nut-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:rgba(254,243,199,.35);margin-top:2px}
.fc-13__add-btn{
  margin-top:auto;width:100%;padding:13px;
  background:linear-gradient(135deg,var(--red),var(--amber));
  color:#fff;font-size:13px;font-weight:800;
  border:none;border-radius:12px;cursor:pointer;letter-spacing:.04em;
}
@media(prefers-reduced-motion:reduce){.fc-13__card{transition:none}}
```

### 18. Step-by-Step Process Map Card

**Type:** Pure CSS
**Description:** A four-card grid where each front marks a numbered process step; back outlines execution tasks, deliverables, and time estimates.

**HTML:**
```html
<div class="fc-14">
  <div class="fc-14__grid">
    <!-- Step 01 -->
    <div class="fc-14__scene">
      <div class="fc-14__card">
        <div class="fc-14__front">
          <div class="fc-14__step-num-bg">01</div>
          <div class="fc-14__step-icon">🎯</div>
          <div class="fc-14__step-num">01 · Strategy</div>
          <div class="fc-14__step-title">Define Goals & Scope</div>
          <div class="fc-14__step-hint">Hover for details →</div>
        </div>
        <div class="fc-14__back">
          <div class="fc-14__back-step">Step 01 · Strategy</div>
          <div class="fc-14__back-title">Define Goals & Scope</div>
          <div class="fc-14__task-list">
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Stakeholder interviews & alignment</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>OKR definition & success metrics</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Risk & constraint mapping</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Project charter sign-off</div>
          </div>
          <div class="fc-14__duration">⏱ 1–2 weeks</div>
        </div>
      </div>
    </div>
    <!-- Step 02 -->
    <div class="fc-14__scene">
      <div class="fc-14__card">
        <div class="fc-14__front">
          <div class="fc-14__step-num-bg">02</div>
          <div class="fc-14__step-icon">🔬</div>
          <div class="fc-14__step-num">02 · Research</div>
          <div class="fc-14__step-title">Discover & Validate</div>
          <div class="fc-14__step-hint">Hover for details →</div>
        </div>
        <div class="fc-14__back">
          <div class="fc-14__back-step">Step 02 · Research</div>
          <div class="fc-14__back-title">Discover & Validate</div>
          <div class="fc-14__task-list">
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>User interviews (12+ sessions)</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Competitive analysis matrix</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Journey & persona mapping</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Insights synthesis report</div>
          </div>
          <div class="fc-14__duration">⏱ 2–3 weeks</div>
        </div>
      </div>
    </div>
    <!-- Step 03 -->
    <div class="fc-14__scene">
      <div class="fc-14__card">
        <div class="fc-14__front">
          <div class="fc-14__step-num-bg">03</div>
          <div class="fc-14__step-icon">✏️</div>
          <div class="fc-14__step-num">03 · Design</div>
          <div class="fc-14__step-title">Prototype & Test</div>
          <div class="fc-14__step-hint">Hover for details →</div>
        </div>
        <div class="fc-14__back">
          <div class="fc-14__back-step">Step 03 · Design</div>
          <div class="fc-14__back-title">Prototype & Test</div>
          <div class="fc-14__task-list">
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Information architecture</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Hi-fi Figma prototypes</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Usability test rounds</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Design system tokens</div>
          </div>
          <div class="fc-14__duration">⏱ 3–4 weeks</div>
        </div>
      </div>
    </div>
    <!-- Step 04 -->
    <div class="fc-14__scene">
      <div class="fc-14__card">
        <div class="fc-14__front">
          <div class="fc-14__step-num-bg">04</div>
          <div class="fc-14__step-icon">🚀</div>
          <div class="fc-14__step-num">04 · Launch</div>
          <div class="fc-14__step-title">Ship & Measure</div>
          <div class="fc-14__step-hint">Hover for details →</div>
        </div>
        <div class="fc-14__back">
          <div class="fc-14__back-step">Step 04 · Launch</div>
          <div class="fc-14__back-title">Ship & Measure</div>
          <div class="fc-14__task-list">
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Staged rollout & QA pass</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Analytics instrumentation</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>30/60/90 day OKR review</div>
            <div class="fc-14__task"><span class="fc-14__task-check"><svg viewBox="0 0 10 10"><polyline points="2,5 4,8 8,2"/></svg></span>Retrospective & iteration</div>
          </div>
          <div class="fc-14__duration">⏱ Ongoing</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-14,.fc-14 *,.fc-14 *::before,.fc-14 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-14 ::selection{background:#6366f1;color:#fff}
.fc-14{
  --bg:#070710;--indigo:#6366f1;--sky:#38bdf8;--white:#eef2ff;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#0e0e2e,#070710 65%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--white);flex-direction:column;gap:20px;
}
.fc-14__grid{display:grid;grid-template-columns:repeat(4,200px);gap:20px}
.fc-14__scene{width:200px;height:280px;perspective:1000px;cursor:pointer}
.fc-14__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.fc-14__scene:hover .fc-14__card{transform:rotateY(180deg)}
.fc-14__front,.fc-14__back{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-14__front{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px 16px;border:1px solid rgba(99,102,241,.2);
}
.fc-14__step-num-bg{
  position:absolute;bottom:-20px;right:-10px;
  font-size:80px;font-weight:900;color:rgba(99,102,241,.07);font-style:italic;line-height:1;
  pointer-events:none;
}
.fc-14__step-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;position:relative;z-index:1;
  border:1px solid rgba(255,255,255,.12);
}
.fc-14__step-num{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:1}
.fc-14__step-title{font-size:16px;font-weight:800;text-align:center;position:relative;z-index:1;line-height:1.3}
.fc-14__step-hint{font-size:9px;color:rgba(238,242,255,.25);letter-spacing:.08em;position:absolute;bottom:12px;text-align:center}
/* BACK */
.fc-14__back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:18px 16px;gap:10px;border:1px solid rgba(56,189,248,.2);
  background:linear-gradient(160deg,#0d0d22,#0a1020);
}
.fc-14__back-step{font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.fc-14__back-title{font-size:15px;font-weight:800;color:var(--white);line-height:1.2}
.fc-14__task-list{display:flex;flex-direction:column;gap:7px;flex:1}
.fc-14__task{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:rgba(238,242,255,.65);line-height:1.4}
.fc-14__task-check{width:14px;height:14px;border-radius:4px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center}
.fc-14__task-check svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.5}
.fc-14__duration{margin-top:auto;display:flex;align-items:center;gap:5px;font-size:10px;color:rgba(238,242,255,.4);padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}

/* per-step colors */
.fc-14__scene:nth-child(1) .fc-14__front{background:linear-gradient(160deg,#0f0f2e,#080820)}
.fc-14__scene:nth-child(1) .fc-14__step-icon{background:rgba(99,102,241,.15)}
.fc-14__scene:nth-child(1) .fc-14__step-num{color:#818cf8}
.fc-14__scene:nth-child(1) .fc-14__step-title{color:#c7d2fe}
.fc-14__scene:nth-child(2) .fc-14__front{background:linear-gradient(160deg,#0d1a10,#080e0a)}
.fc-14__scene:nth-child(2) .fc-14__step-icon{background:rgba(34,197,94,.12)}
.fc-14__scene:nth-child(2) .fc-14__step-num{color:#4ade80}
.fc-14__scene:nth-child(2) .fc-14__step-title{color:#bbf7d0}
.fc-14__scene:nth-child(3) .fc-14__front{background:linear-gradient(160deg,#1a0d0d,#0e0808)}
.fc-14__scene:nth-child(3) .fc-14__step-icon{background:rgba(249,115,22,.12)}
.fc-14__scene:nth-child(3) .fc-14__step-num{color:#fb923c}
.fc-14__scene:nth-child(3) .fc-14__step-title{color:#fed7aa}
.fc-14__scene:nth-child(4) .fc-14__front{background:linear-gradient(160deg,#0d0a20,#080614)}
.fc-14__scene:nth-child(4) .fc-14__step-icon{background:rgba(168,85,247,.12)}
.fc-14__scene:nth-child(4) .fc-14__step-num{color:#c084fc}
.fc-14__scene:nth-child(4) .fc-14__step-title{color:#e9d5ff}

.fc-14__scene:nth-child(1) .fc-14__back-step,.fc-14__scene:nth-child(1) .fc-14__task-check{color:#818cf8}
.fc-14__scene:nth-child(2) .fc-14__back-step,.fc-14__scene:nth-child(2) .fc-14__task-check{color:#4ade80}
.fc-14__scene:nth-child(3) .fc-14__back-step,.fc-14__scene:nth-child(3) .fc-14__task-check{color:#fb923c}
.fc-14__scene:nth-child(4) .fc-14__back-step,.fc-14__scene:nth-child(4) .fc-14__task-check{color:#c084fc}

@media(max-width:900px){.fc-14__grid{grid-template-columns:repeat(2,200px)}}
@media(max-width:480px){.fc-14__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fc-14__card{transition:none}}
```

### 19. Travel Postcard Diagonal 3D Flip Card

**Type:** Pure CSS
**Description:** A travel postcard that flips along the diagonal corner-to-corner axis — rotate3d(1,1,0,180deg) instead of the conventional rotateY spin.

**HTML:**
```html
<div class="fc-20">
  <div class="fc-20__scene">
    <div class="fc-20__card">
      <div class="fc-20__front">
        <div class="fc-20__sky">
          <svg width="100%" height="160" viewBox="0 0 360 160" preserveAspectRatio="none">
            <defs>
              <linearGradient id="fc-20-sky" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#f7c8a0"/>
                <stop offset="60%" stop-color="#f4a87d"/>
                <stop offset="100%" stop-color="#e88e6e"/>
              </linearGradient>
              <linearGradient id="fc-20-bldg" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#fef3c7"/>
                <stop offset="100%" stop-color="#fbbf24"/>
              </linearGradient>
            </defs>
            <rect width="360" height="160" fill="url(#fc-20-sky)"/>
            <circle cx="280" cy="48" r="22" fill="#fff3cf" opacity="0.85"/>
            <g fill="url(#fc-20-bldg)">
              <rect x="20" y="92" width="34" height="68"/>
              <polygon points="20,92 37,75 54,92"/>
              <rect x="64" y="100" width="42" height="60"/>
              <polygon points="64,100 85,80 106,100"/>
              <rect x="116" y="84" width="38" height="76"/>
              <polygon points="116,84 135,68 154,84"/>
              <rect x="164" y="96" width="46" height="64"/>
              <polygon points="164,96 187,76 210,96"/>
              <rect x="220" y="78" width="40" height="82"/>
              <polygon points="220,78 240,60 260,78"/>
              <rect x="270" y="100" width="34" height="60"/>
              <polygon points="270,100 287,82 304,100"/>
              <rect x="314" y="92" width="36" height="68"/>
              <polygon points="314,92 332,75 350,92"/>
            </g>
            <g fill="#0c0a07" opacity="0.6">
              <rect x="28" y="100" width="3" height="5"/><rect x="36" y="100" width="3" height="5"/><rect x="44" y="100" width="3" height="5"/>
              <rect x="28" y="115" width="3" height="5"/><rect x="36" y="115" width="3" height="5"/><rect x="44" y="115" width="3" height="5"/>
              <rect x="72" y="110" width="3" height="5"/><rect x="80" y="110" width="3" height="5"/><rect x="88" y="110" width="3" height="5"/>
              <rect x="124" y="92" width="3" height="5"/><rect x="132" y="92" width="3" height="5"/><rect x="142" y="92" width="3" height="5"/>
              <rect x="172" y="106" width="3" height="5"/><rect x="184" y="106" width="3" height="5"/><rect x="196" y="106" width="3" height="5"/>
              <rect x="228" y="90" width="3" height="5"/><rect x="240" y="90" width="3" height="5"/><rect x="252" y="90" width="3" height="5"/>
              <rect x="320" y="100" width="3" height="5"/><rect x="332" y="100" width="3" height="5"/><rect x="342" y="100" width="3" height="5"/>
            </g>
          </svg>
        </div>
        <div class="fc-20__title-block">
          <div class="fc-20__greetings">Greetings from</div>
          <div class="fc-20__city">Lisbon</div>
          <div class="fc-20__sub">Portugal · Postcards from the road</div>
        </div>
        <div class="fc-20__stamp">
          <span class="fc-20__stamp-fig">★</span>
          <span class="fc-20__stamp-text">Par<br>Avion</span>
        </div>
        <div class="fc-20__hint">Hover to read ›</div>
      </div>
      <div class="fc-20__back">
        <div class="fc-20__back-head">
          <span class="fc-20__back-eyebrow">Postcard · 02</span>
          <span class="fc-20__back-date">June 14</span>
        </div>
        <div class="fc-20__note">
          <p>Dear friend,</p>
          <p>The pastel buildings climb every hill and at sunset the whole city turns the colour of warm bread. I am drinking ginjinha in a paper cup and listening to a man play fado outside the cathedral.</p>
          <p>Wish you were here.</p>
          <p class="fc-20__signoff">— V.</p>
        </div>
        <div class="fc-20__address-block">
          <div class="fc-20__address-line"></div>
          <div class="fc-20__address-line"></div>
          <div class="fc-20__address-line"></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-20,.fc-20 *,.fc-20 *::before,.fc-20 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-20 ::selection{background:#dc2626;color:#fff5e6}
.fc-20{
  --bg:#f5f0e6;--ink:#3a2f24;--paper:#faf6ec;--paper-2:#fef9ec;
  --stamp-red:#dc2626;--airmail-blue:#1e40af;--accent:#c08552;
  --card-w:360px;--card-h:480px;
  font-family:Georgia,'Times New Roman',serif;
  background:repeating-linear-gradient(45deg,#f5f0e6,#f5f0e6 12px,#efe7d6 12px,#efe7d6 24px);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;color:var(--ink);
}
.fc-20__scene{width:var(--card-w);height:var(--card-h);perspective:1200px}
.fc-20__card{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.4,0,.2,1);
}
.fc-20__scene:hover .fc-20__card{transform:rotate3d(1,1,0,180deg)}
.fc-20__front,.fc-20__back{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(58,47,36,.25),0 4px 10px rgba(58,47,36,.12);
}
/* FRONT — sunset city */
.fc-20__front{
  background:var(--paper);
  border:6px solid var(--paper);
  outline:2px dashed rgba(58,47,36,.25);outline-offset:-12px;
  display:flex;flex-direction:column;
}
.fc-20__sky{width:100%;height:160px;flex-shrink:0;border-bottom:1px solid rgba(58,47,36,.15)}
.fc-20__title-block{padding:20px 24px 12px;text-align:center}
.fc-20__greetings{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}
.fc-20__city{font-size:46px;font-weight:900;color:var(--ink);line-height:1;letter-spacing:-.02em;font-style:italic;font-family:'Brush Script MT','Lucida Handwriting',Georgia,cursive}
.fc-20__sub{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(58,47,36,.5);margin-top:8px;font-family:Georgia,serif}
.fc-20__stamp{
  position:absolute;top:14px;right:14px;
  width:54px;height:64px;
  border:2px dashed var(--stamp-red);
  background:var(--paper-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transform:rotate(6deg);
  box-shadow:0 2px 4px rgba(58,47,36,.18);
}
.fc-20__stamp-fig{font-size:18px;color:var(--stamp-red);line-height:1}
.fc-20__stamp-text{font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:var(--stamp-red);font-weight:700;line-height:1.1;text-align:center}
.fc-20__hint{margin-top:auto;padding:14px 24px;text-align:center;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:rgba(58,47,36,.45);font-family:Georgia,serif;font-style:italic}
/* BACK — handwritten note */
.fc-20__back{
  background:var(--paper-2);
  transform:rotate3d(1,1,0,180deg);
  display:flex;flex-direction:column;
  padding:24px 26px;
  border:6px solid var(--paper-2);
}
.fc-20__back::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;
  width:1px;background:repeating-linear-gradient(to bottom,rgba(220,38,38,.35) 0 4px,transparent 4px 10px);
  pointer-events:none;
}
.fc-20__back::after{
  content:'';position:absolute;top:8px;left:8px;right:8px;bottom:8px;
  border:2px solid transparent;
  background:repeating-linear-gradient(45deg,var(--airmail-blue) 0 8px,transparent 8px 16px,var(--stamp-red) 16px 24px,transparent 24px 32px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:0;opacity:.5;pointer-events:none;
}
.fc-20__back-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(58,47,36,.55);margin-bottom:12px;font-family:Georgia,serif}
.fc-20__back-eyebrow{font-weight:700;color:var(--accent)}
.fc-20__note{flex:1;padding-right:18px;font-family:'Brush Script MT','Lucida Handwriting','Snell Roundhand',cursive;color:var(--ink);font-size:17px;line-height:1.5}
.fc-20__note p{margin-bottom:8px}
.fc-20__signoff{margin-top:10px;font-size:18px}
.fc-20__address-block{position:absolute;right:22px;bottom:22px;width:42%;display:flex;flex-direction:column;gap:14px}
.fc-20__address-line{height:1px;background:rgba(58,47,36,.3)}
@media(prefers-reduced-motion:reduce){
  .fc-20__card{transition:none}
  .fc-20__scene:hover .fc-20__card{transform:none}
  .fc-20__scene:hover .fc-20__front{opacity:0}
  .fc-20__scene:hover .fc-20__back{transform:rotate3d(1,1,0,0)}
}
```

### 20. Vertical Axis Top-to-Bottom Flip Card

**Type:** Pure CSS
**Description:** A layout variation using rotateX instead of rotateY to produce a top-to-bottom vertical card-flip interaction.

**HTML:**
```html
<div class="fc-15">
  <div class="fc-15__heading">
    <h2>Vertical Axis (rotateX) Flip</h2>
    <p>Card flips top-to-bottom instead of side-to-side</p>
    <div class="fc-15__code-tag">transform: rotateX(180deg)</div>
  </div>
  <div class="fc-15__scene">
    <div class="fc-15__card">
      <div class="fc-15__front">
        <div class="fc-15__icon-box">
          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
        </div>
        <div class="fc-15__front-text">
          <div class="fc-15__front-label">Feature · Flip Axis</div>
          <div class="fc-15__front-title">Vertical Card Flip</div>
          <div class="fc-15__front-sub">Hover to flip top-to-bottom via rotateX</div>
        </div>
        <div class="fc-15__axis-arrow">
          <span>▲</span>
          <span style="writing-mode:vertical-rl;letter-spacing:0">flip</span>
          <span>▼</span>
        </div>
      </div>
      <div class="fc-15__back">
        <div class="fc-15__back-icon">✅</div>
        <div>
          <div class="fc-15__back-label">Back Face · Revealed</div>
          <div class="fc-15__back-title">rotateX Flip Complete</div>
          <div class="fc-15__pill-list">
            <span class="fc-15__pill">rotateX(180deg)</span>
            <span class="fc-15__pill">backface-visibility:hidden</span>
            <span class="fc-15__pill">perspective:1200px</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-15,.fc-15 *,.fc-15 *::before,.fc-15 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-15 ::selection{background:#0d9488;color:#fff}
.fc-15{
  --bg:#04100e;--teal:#0d9488;--emerald:#10b981;--white:#f0fdf4;
  --card-w:360px;--card-h:240px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 50%,#061a16,#04100e 65%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:20px;color:var(--white);
}
.fc-15__heading{text-align:center}
.fc-15__heading h2{font-size:18px;font-weight:800;color:var(--white)}
.fc-15__heading p{font-size:12px;color:rgba(240,253,244,.4);margin-top:4px}
.fc-15__code-tag{display:inline-block;font-family:'Courier New',monospace;font-size:11px;background:rgba(13,148,136,.15);border:1px solid rgba(13,148,136,.3);color:var(--teal);padding:2px 8px;border-radius:4px;margin-top:6px}
.fc-15__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-15__card{
  width:100%;height:100%;position:relative;transform-style:preserve-3d;
  /* KEY: rotateX instead of rotateY = vertical flip */
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.fc-15__scene:hover .fc-15__card{transform:rotateX(180deg)}
.fc-15__front,.fc-15__back{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-15__front{
  background:linear-gradient(160deg,#071a16,#04100e);
  border:1px solid rgba(13,148,136,.25);
  display:flex;align-items:center;padding:28px 32px;gap:20px;
}
.fc-15__icon-box{
  width:64px;height:64px;border-radius:18px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(13,148,136,.2),rgba(16,185,129,.1));
  border:1px solid rgba(13,148,136,.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 20px rgba(13,148,136,.15);
}
.fc-15__icon-box svg{stroke:var(--teal);stroke-width:1.8;fill:none;width:28px;height:28px}
.fc-15__front-text{flex:1}
.fc-15__front-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:6px}
.fc-15__front-title{font-size:20px;font-weight:800;color:var(--white);line-height:1.2}
.fc-15__front-sub{font-size:12px;color:rgba(240,253,244,.45);margin-top:6px}
.fc-15__axis-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.35}
.fc-15__axis-arrow span{font-size:10px;color:var(--teal);letter-spacing:.08em}
/* BACK — rotateX(180deg) on the element itself means it starts face-down */
.fc-15__back{
  background:linear-gradient(160deg,#031a14,#040e0c);
  border:1px solid rgba(16,185,129,.25);
  transform:rotateX(180deg);
  display:flex;align-items:center;padding:28px 32px;gap:20px;
}
.fc-15__back-icon{
  width:64px;height:64px;border-radius:18px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(13,148,136,.1));
  border:1px solid rgba(16,185,129,.3);
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.fc-15__back-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--emerald);font-weight:700;margin-bottom:6px}
.fc-15__back-title{font-size:18px;font-weight:800;color:var(--white)}
.fc-15__pill-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fc-15__pill{font-size:11px;padding:4px 10px;border-radius:20px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:rgba(240,253,244,.7)}
@media(prefers-reduced-motion:reduce){.fc-15__card{transition:none}}
```

### 21. Click-to-Flip JavaScript Toggle Card

**Type:** CSS + JS
**Description:** A card that flips strictly on a click event using a JS-toggled helper class rather than a hover pseudo-class — ideal for touch and keyboard interfaces.

**HTML:**
```html
<div class="fc-16">
  <div class="fc-16__meta">
    <h2>Click-to-Flip · JavaScript Toggle</h2>
    <p>Uses a CSS class toggle — no hover required</p>
    <div class="fc-16__click-pill"><span class="fc-16__click-dot"></span>Click anywhere on the card</div>
  </div>
  <div class="fc-16__scene" id="fc-16-scene">
    <div class="fc-16__card" id="fc-16-card">
      <div class="fc-16__front">
        <div class="fc-16__click-icon">
          <svg viewBox="0 0 24 24"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        </div>
        <div class="fc-16__label">Click Trigger · JS Toggle</div>
        <div class="fc-16__title">Click to Flip</div>
        <div class="fc-16__sub">This card flips on click, not hover — great for mobile touch interfaces where hover states don't exist.</div>
        <button class="fc-16__click-cta" id="fc-16-flip-btn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 18 6-6-6-6"/></svg>
          Click to Reveal
        </button>
      </div>
      <div class="fc-16__back">
        <div class="fc-16__back-icon">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="1.8"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div class="fc-16__back-title">Flip Complete ✓</div>
        <div class="fc-16__back-sub">The JS toggles <code style="color:#4ade80;background:rgba(0,0,0,.3);padding:1px 5px;border-radius:4px">.is-flipped</code> on the card element — no hover pseudo-class needed.</div>
        <div class="fc-16__code-block">
          <span class="fc-16__cmt">// toggle flip on click</span><br>
          card.<span class="fc-16__kw">classList</span>.<br>
          &nbsp;&nbsp;<span class="fc-16__str">toggle</span>(<span class="fc-16__str">'is-flipped'</span>);
        </div>
        <button class="fc-16__flip-back-btn" id="fc-16-back-btn">← Flip Back</button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-16,.fc-16 *,.fc-16 *::before,.fc-16 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-16 ::selection{background:#f97316;color:#fff}
.fc-16{
  --bg:#0c0800;--orange:#f97316;--yellow:#fbbf24;--white:#fffbf0;
  --card-w:340px;--card-h:420px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 40%,#1a0e00,#0c0800 65%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:20px;color:var(--white);
}
.fc-16__meta{text-align:center}
.fc-16__meta h2{font-size:16px;font-weight:700;color:var(--white)}
.fc-16__meta p{font-size:11px;color:rgba(255,251,240,.4);margin-top:4px}
.fc-16__click-pill{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:6px 14px;border-radius:20px;
  background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);
  font-size:11px;color:var(--orange);cursor:default;
}
.fc-16__click-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:fc-16-pulse 1.5s ease-in-out infinite}
@keyframes fc-16-pulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
/* Card */
.fc-16__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer;flex-shrink:0}
.fc-16__card{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
/* JS toggle via class */
.fc-16__card.is-flipped{transform:rotateY(180deg)}
.fc-16__front,.fc-16__back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-16__front{
  background:linear-gradient(145deg,#1a0e00,#0f0900);
  border:1px solid rgba(249,115,22,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:36px 28px;
}
.fc-16__front::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(249,115,22,.08),transparent 60%)}
.fc-16__click-icon{
  width:80px;height:80px;border-radius:24px;
  background:linear-gradient(135deg,rgba(249,115,22,.15),rgba(251,191,36,.08));
  border:1px solid rgba(249,115,22,.25);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  box-shadow:0 0 30px rgba(249,115,22,.12);
}
.fc-16__click-icon svg{width:36px;height:36px;stroke:var(--orange);stroke-width:1.8;fill:none}
.fc-16__label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);font-weight:700;position:relative;z-index:1}
.fc-16__title{font-size:24px;font-weight:900;color:var(--white);text-align:center;position:relative;z-index:1}
.fc-16__sub{font-size:13px;color:rgba(255,251,240,.45);text-align:center;position:relative;z-index:1;line-height:1.6}
.fc-16__click-cta{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;margin-top:8px;
  padding:12px 24px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  color:#000;font-size:13px;font-weight:800;letter-spacing:.04em;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 4px 20px rgba(249,115,22,.3);
}
.fc-16__click-cta:hover{box-shadow:0 8px 30px rgba(249,115,22,.5);filter:brightness(1.08)}
.fc-16__click-cta:active{filter:brightness(.95)}
/* BACK */
.fc-16__back{
  background:linear-gradient(145deg,#0e1a0a,#081008);
  border:1px solid rgba(74,222,128,.25);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:36px 28px;
}
.fc-16__back::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(74,222,128,.06),transparent 60%)}
.fc-16__back-icon{
  width:80px;height:80px;border-radius:24px;
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
}
.fc-16__back-title{font-size:22px;font-weight:900;color:var(--white);text-align:center;position:relative;z-index:1}
.fc-16__back-sub{font-size:13px;color:rgba(255,251,240,.5);text-align:center;position:relative;z-index:1;line-height:1.6}
.fc-16__code-block{
  position:relative;z-index:1;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:12px 16px;
  font-family:'Courier New',monospace;font-size:11px;color:rgba(255,251,240,.6);
  line-height:1.8;width:100%;text-align:left;
}
.fc-16__kw{color:#4ade80}.fc-16__str{color:#fb923c}.fc-16__cmt{color:rgba(255,251,240,.3)}
.fc-16__flip-back-btn{
  position:relative;z-index:1;
  padding:11px 24px;border-radius:12px;border:1px solid rgba(74,222,128,.3);
  background:rgba(74,222,128,.1);color:#4ade80;font-size:13px;font-weight:700;
  cursor:pointer;transition:background .2s;
}
.fc-16__flip-back-btn:hover{background:rgba(74,222,128,.18)}
@media(prefers-reduced-motion:reduce){.fc-16__card{transition:none}.fc-16__click-dot{animation:none}}
```

**JS:**
```js
(function(){
  var card=document.getElementById('fc-16-card');
  var scene=document.getElementById('fc-16-scene');
  var backBtn=document.getElementById('fc-16-back-btn');
  scene.addEventListener('click',function(){card.classList.toggle('is-flipped')});
  backBtn.addEventListener('click',function(e){e.stopPropagation();card.classList.remove('is-flipped')});
})();
```

### 22. Dynamic Height Auto-Resizing Flip Card

**Type:** Pure CSS
**Description:** A card that adapts its height fluidly to varying content lengths on the front versus the back — no explicit pixel heights, no JavaScript.

**HTML:**
```html
<div class="fc-17">
  <div class="fc-17__heading">
    <h2>Dynamic-Height Auto-Resizing Flip Card</h2>
    <p>No fixed heights — adapts to any content length on front or back</p>
    <p style="margin-top:6px"><code>display:grid</code> + opacity/rotateY cross-fade</p>
  </div>
  <div class="fc-17__cards-row">
    <!-- Card A: short front, long back -->
    <div class="fc-17__card-wrap">
      <div class="fc-17__face fc-17__face--front">
        <div class="fc-17__f-label">Dynamic Card A</div>
        <div class="fc-17__f-title">Short Front</div>
        <div class="fc-17__f-teaser">This front face has minimal content. The back has much more.</div>
        <div class="fc-17__f-hint">Hover to expand →</div>
      </div>
      <div class="fc-17__face fc-17__face--back">
        <div class="fc-17__b-label">Full Detail · Back</div>
        <div class="fc-17__b-title">Extended Back Content</div>
        <div class="fc-17__b-body">The grid technique means this back face can contain as much content as needed and the card height will adapt automatically — no hardcoded pixel heights required.</div>
        <div class="fc-17__b-list">
          <div class="fc-17__b-item"><span class="fc-17__b-dot"></span>Both faces sit in the same CSS grid cell (1/1)</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot"></span>Opacity + rotateY creates the cross-fade flip</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot"></span>The tallest face dictates the wrapper height</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot"></span>No JavaScript needed — pure CSS grid trick</div>
        </div>
      </div>
    </div>
    <!-- Card B: long front, short back -->
    <div class="fc-17__card-wrap">
      <div class="fc-17__face fc-17__face--front">
        <div class="fc-17__f-label">Dynamic Card B</div>
        <div class="fc-17__f-title">Longer Front Content</div>
        <div class="fc-17__f-teaser">This card has a lot more text on the front — multiple paragraphs, a list of items, and a closing note — and still no height is specified anywhere in the CSS.</div>
        <div class="fc-17__b-list" style="margin-top:12px">
          <div class="fc-17__b-item"><span class="fc-17__b-dot" style="background:#f472b6"></span>Point one with some detail</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot" style="background:#f472b6"></span>Point two with some detail</div>
          <div class="fc-17__b-item"><span class="fc-17__b-dot" style="background:#f472b6"></span>Point three with some detail</div>
        </div>
        <div class="fc-17__f-hint">Hover for brief summary →</div>
      </div>
      <div class="fc-17__face fc-17__face--back">
        <div class="fc-17__b-label">TL;DR · Back</div>
        <div class="fc-17__b-title">Short Summary</div>
        <div class="fc-17__b-body">The grid stacking approach lets each face own its natural height. No JS. No fixed pixels.</div>
      </div>
    </div>
  </div>
  <div class="fc-17__note">
    Technique: both <code>.front</code> and <code>.back</code> use <code>grid-area: 1/1</code> so they overlap in the same grid cell. The tallest visible face sets the wrapper height. On hover, opacity fades to 0 while <code>rotateY(±90deg)</code> adds depth — a CSS-only auto-height flip card.
  </div>
</div>
```

**CSS:**
```css
.fc-17,.fc-17 *,.fc-17 *::before,.fc-17 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-17 ::selection{background:#8b5cf6;color:#fff}
.fc-17{
  --bg:#08060e;--violet:#8b5cf6;--purple:#a855f7;--white:#faf5ff;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#0f0820,#08060e 65%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:24px;color:var(--white);
}
.fc-17__heading{text-align:center}
.fc-17__heading h2{font-size:16px;font-weight:700;color:var(--white)}
.fc-17__heading p{font-size:11px;color:rgba(250,245,255,.4);margin-top:4px}
.fc-17__heading code{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.25);color:var(--violet);padding:1px 6px;border-radius:4px;font-size:11px}
/* The key technique: grid with 1 column so both faces stack,
   only the visible one takes up height */
.fc-17__cards-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.fc-17__card-wrap{
  width:280px;
  /* The magic: a grid container where both faces overlap in the same cell */
  display:grid;
  grid-template-rows:1fr;
}
/* hover trigger on wrapper */
.fc-17__card-wrap:hover .fc-17__face--front{opacity:0;transform:rotateY(90deg)}
.fc-17__card-wrap:hover .fc-17__face--back{opacity:1;transform:rotateY(0deg)}
.fc-17__face--front,.fc-17__face--back{
  /* overlap in same grid row */
  grid-area:1/1;
  border-radius:16px;
  transition:opacity .35s ease, transform .5s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.fc-17__face--front{
  background:linear-gradient(145deg,#130e28,#0a0718);
  border:1px solid rgba(139,92,246,.2);
  padding:24px;
  opacity:1;transform:rotateY(0deg);
}
.fc-17__face--back{
  background:linear-gradient(145deg,#0e1a28,#080f18);
  border:1px solid rgba(56,189,248,.2);
  padding:24px;
  opacity:0;transform:rotateY(-90deg);
  /* back starts hidden — no explicit height needed */
}
/* FRONT content — short */
.fc-17__f-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--violet);font-weight:700;margin-bottom:10px}
.fc-17__f-title{font-size:18px;font-weight:800;color:var(--white);margin-bottom:8px}
.fc-17__f-teaser{font-size:13px;color:rgba(250,245,255,.5);line-height:1.6}
.fc-17__f-hint{font-size:10px;color:rgba(250,245,255,.2);margin-top:14px;letter-spacing:.08em}
/* BACK content — variable, longer */
.fc-17__b-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#38bdf8;font-weight:700;margin-bottom:10px}
.fc-17__b-title{font-size:16px;font-weight:800;color:var(--white);margin-bottom:10px}
.fc-17__b-body{font-size:13px;color:rgba(250,245,255,.65);line-height:1.7}
.fc-17__b-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.fc-17__b-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:rgba(250,245,255,.6)}
.fc-17__b-dot{width:5px;height:5px;border-radius:50%;background:#38bdf8;flex-shrink:0;margin-top:5px}
/* card 2 has even more content */
.fc-17__card-wrap:nth-child(2) .fc-17__face--front{background:linear-gradient(145deg,#1a0e18,#0f0810)}
.fc-17__card-wrap:nth-child(2) .fc-17__face--back{background:linear-gradient(145deg,#0a1a0e,#060e08)}
.fc-17__card-wrap:nth-child(2) .fc-17__f-label{color:#f472b6}
.fc-17__card-wrap:nth-child(2) .fc-17__b-label{color:#4ade80}
.fc-17__card-wrap:nth-child(2) .fc-17__b-dot{background:#4ade80}
/* technique note */
.fc-17__note{
  max-width:580px;padding:16px 20px;border-radius:12px;
  background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.15);
  font-size:12px;color:rgba(250,245,255,.5);line-height:1.7;text-align:center;
}
.fc-17__note code{color:var(--violet);background:rgba(139,92,246,.12);padding:0 4px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.fc-17__face--front,.fc-17__face--back{transition:none}}
```

### 23. Responsive CSS Grid Flip Card Matrix

**Type:** Pure CSS
**Description:** A six-card portfolio grid that flips on hover, maintains correct 3D perspective at all breakpoints, and reflows from 3 columns to 2 to 1 via CSS Grid.

**HTML:**
```html
<div class="fc-18">
  <div class="fc-18__header">
    <h2>Responsive CSS Grid Flip Card Matrix</h2>
    <p>3 columns desktop · 2 tablet · 1 mobile · perspective maintained per card at all breakpoints</p>
  </div>
  <div class="fc-18__grid">
    <!-- 01 -->
    <div class="fc-18__scene">
      <div class="fc-18__card">
        <div class="fc-18__front"><div class="fc-18__project-num">01</div><div class="fc-18__front-tag">Design Systems</div><div class="fc-18__front-icon">🎨</div><div class="fc-18__front-title">Token Architecture</div><div class="fc-18__front-sub">Scalable design token system</div><div class="fc-18__front-hint">Hover for details →</div></div>
        <div class="fc-18__back"><div class="fc-18__back-label">Design Systems</div><div class="fc-18__back-title">Token Architecture</div><div class="fc-18__back-list"><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Semantic color layers</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Typography scale (clamp)</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Multi-brand theming</div></div><button class="fc-18__back-cta">View Project</button></div>
      </div>
    </div>
    <!-- 02 -->
    <div class="fc-18__scene">
      <div class="fc-18__card">
        <div class="fc-18__front"><div class="fc-18__project-num">02</div><div class="fc-18__front-tag">Web Performance</div><div class="fc-18__front-icon">⚡</div><div class="fc-18__front-title">Core Web Vitals</div><div class="fc-18__front-sub">LCP under 1.2s in production</div><div class="fc-18__front-hint">Hover for details →</div></div>
        <div class="fc-18__back"><div class="fc-18__back-label">Web Performance</div><div class="fc-18__back-title">Core Web Vitals</div><div class="fc-18__back-list"><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>LCP: 1.1s (p75)</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>INP: &lt;60ms</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>CLS: 0.01</div></div><button class="fc-18__back-cta">Case Study</button></div>
      </div>
    </div>
    <!-- 03 -->
    <div class="fc-18__scene">
      <div class="fc-18__card">
        <div class="fc-18__front"><div class="fc-18__project-num">03</div><div class="fc-18__front-tag">Accessibility</div><div class="fc-18__front-icon">♿</div><div class="fc-18__front-title">WCAG 2.2 AA Audit</div><div class="fc-18__front-sub">Full accessibility review</div><div class="fc-18__front-hint">Hover for details →</div></div>
        <div class="fc-18__back"><div class="fc-18__back-label">Accessibility</div><div class="fc-18__back-title">WCAG 2.2 AA Audit</div><div class="fc-18__back-list"><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Colour contrast 4.5:1+</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Full keyboard flow</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>ARIA landmark audit</div></div><button class="fc-18__back-cta">Read Report</button></div>
      </div>
    </div>
    <!-- 04 -->
    <div class="fc-18__scene">
      <div class="fc-18__card">
        <div class="fc-18__front"><div class="fc-18__project-num">04</div><div class="fc-18__front-tag">Animation</div><div class="fc-18__front-icon">🎬</div><div class="fc-18__front-title">Motion Library</div><div class="fc-18__front-sub">60fps CSS keyframe suite</div><div class="fc-18__front-hint">Hover for details →</div></div>
        <div class="fc-18__back"><div class="fc-18__back-label">Animation</div><div class="fc-18__back-title">Motion Library</div><div class="fc-18__back-list"><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>48 keyframe demos</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Reduced-motion safe</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Zero JS dependencies</div></div><button class="fc-18__back-cta">Browse Library</button></div>
      </div>
    </div>
    <!-- 05 -->
    <div class="fc-18__scene">
      <div class="fc-18__card">
        <div class="fc-18__front"><div class="fc-18__project-num">05</div><div class="fc-18__front-tag">Architecture</div><div class="fc-18__front-icon">🏗</div><div class="fc-18__front-title">Micro-Frontend</div><div class="fc-18__front-sub">Module federation at scale</div><div class="fc-18__front-hint">Hover for details →</div></div>
        <div class="fc-18__back"><div class="fc-18__back-label">Architecture</div><div class="fc-18__back-title">Micro-Frontend</div><div class="fc-18__back-list"><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Webpack 5 federation</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Shared runtime deps</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>12 independent teams</div></div><button class="fc-18__back-cta">Architecture Docs</button></div>
      </div>
    </div>
    <!-- 06 -->
    <div class="fc-18__scene">
      <div class="fc-18__card">
        <div class="fc-18__front"><div class="fc-18__project-num">06</div><div class="fc-18__front-tag">Testing</div><div class="fc-18__front-icon">🧪</div><div class="fc-18__front-title">E2E Test Suite</div><div class="fc-18__front-sub">Playwright + CI pipeline</div><div class="fc-18__front-hint">Hover for details →</div></div>
        <div class="fc-18__back"><div class="fc-18__back-label">Testing</div><div class="fc-18__back-title">E2E Test Suite</div><div class="fc-18__back-list"><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>98% critical path coverage</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Cross-browser parallel runs</div><div class="fc-18__back-item"><span class="fc-18__back-dot"></span>Visual regression gates</div></div><button class="fc-18__back-cta">View Suite</button></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fc-18,.fc-18 *,.fc-18 *::before,.fc-18 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-18 ::selection{background:#6366f1;color:#fff}
.fc-18{
  --bg:#07080f;--indigo:#6366f1;--white:#eef2ff;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 0%,#0d0f28,#07080f 65%);
  min-height:100vh;padding:40px 20px 60px;color:var(--white);
}
.fc-18__header{text-align:center;margin-bottom:36px}
.fc-18__header h2{font-size:20px;font-weight:800;color:var(--white)}
.fc-18__header p{font-size:12px;color:rgba(238,242,255,.4);margin-top:6px}
/* Responsive grid — 3 cols desktop, 2 tablet, 1 mobile */
.fc-18__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:960px;margin:0 auto;
}
/* Perspective must sit on the individual scene elements, not the grid */
.fc-18__scene{
  height:260px;perspective:1000px;cursor:pointer;
}
.fc-18__card{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.fc-18__scene:hover .fc-18__card{transform:rotateY(180deg)}
.fc-18__front,.fc-18__back{
  position:absolute;inset:0;border-radius:16px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
}
/* FRONT */
.fc-18__front{
  display:flex;flex-direction:column;padding:24px;
  border:1px solid rgba(255,255,255,.08);
}
.fc-18__project-num{position:absolute;top:16px;right:18px;font-size:32px;font-weight:900;opacity:.07;font-style:italic;line-height:1}
.fc-18__front-tag{font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.fc-18__front-icon{font-size:28px;margin-bottom:10px}
.fc-18__front-title{font-size:17px;font-weight:800;color:var(--white);line-height:1.2}
.fc-18__front-sub{font-size:12px;margin-top:6px;line-height:1.5;opacity:.55}
.fc-18__front-hint{margin-top:auto;font-size:9px;opacity:.25;letter-spacing:.08em}
/* BACK */
.fc-18__back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:20px;gap:10px;
  border:1px solid rgba(255,255,255,.1);
}
.fc-18__back-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.fc-18__back-title{font-size:15px;font-weight:800;color:var(--white);line-height:1.2}
.fc-18__back-list{display:flex;flex-direction:column;gap:6px;flex:1}
.fc-18__back-item{display:flex;align-items:center;gap:8px;font-size:11px;opacity:.7}
.fc-18__back-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.fc-18__back-cta{
  padding:10px;border-radius:10px;border:none;cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  transition:opacity .2s;
}
.fc-18__back-cta:hover{opacity:.85}

/* Per-card color schemes */
/* 1 — indigo */
.fc-18__scene:nth-child(1) .fc-18__front{background:linear-gradient(145deg,#0e0f28,#07080f)}
.fc-18__scene:nth-child(1) .fc-18__front-tag{color:#818cf8}
.fc-18__scene:nth-child(1) .fc-18__front-sub{color:#c7d2fe}
.fc-18__scene:nth-child(1) .fc-18__back{background:linear-gradient(145deg,#0d0f26,#090a1a)}
.fc-18__scene:nth-child(1) .fc-18__back-label{color:#818cf8}
.fc-18__scene:nth-child(1) .fc-18__back-dot{background:#6366f1}
.fc-18__scene:nth-child(1) .fc-18__back-cta{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff}
/* 2 — emerald */
.fc-18__scene:nth-child(2) .fc-18__front{background:linear-gradient(145deg,#071a0e,#04100a)}
.fc-18__scene:nth-child(2) .fc-18__front-tag{color:#4ade80}
.fc-18__scene:nth-child(2) .fc-18__front-sub{color:#bbf7d0}
.fc-18__scene:nth-child(2) .fc-18__back{background:linear-gradient(145deg,#071a0e,#030c07)}
.fc-18__scene:nth-child(2) .fc-18__back-label{color:#4ade80}
.fc-18__scene:nth-child(2) .fc-18__back-dot{background:#22c55e}
.fc-18__scene:nth-child(2) .fc-18__back-cta{background:linear-gradient(135deg,#22c55e,#16a34a);color:#000}
/* 3 — rose */
.fc-18__scene:nth-child(3) .fc-18__front{background:linear-gradient(145deg,#1a0710,#0e0408)}
.fc-18__scene:nth-child(3) .fc-18__front-tag{color:#fb7185}
.fc-18__scene:nth-child(3) .fc-18__front-sub{color:#fecdd3}
.fc-18__scene:nth-child(3) .fc-18__back{background:linear-gradient(145deg,#1a0710,#0a0306)}
.fc-18__scene:nth-child(3) .fc-18__back-label{color:#fb7185}
.fc-18__scene:nth-child(3) .fc-18__back-dot{background:#f43f5e}
.fc-18__scene:nth-child(3) .fc-18__back-cta{background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff}
/* 4 — amber */
.fc-18__scene:nth-child(4) .fc-18__front{background:linear-gradient(145deg,#1a1000,#0e0900)}
.fc-18__scene:nth-child(4) .fc-18__front-tag{color:#fbbf24}
.fc-18__scene:nth-child(4) .fc-18__front-sub{color:#fde68a}
.fc-18__scene:nth-child(4) .fc-18__back{background:linear-gradient(145deg,#1a1000,#0a0700)}
.fc-18__scene:nth-child(4) .fc-18__back-label{color:#fbbf24}
.fc-18__scene:nth-child(4) .fc-18__back-dot{background:#f59e0b}
.fc-18__scene:nth-child(4) .fc-18__back-cta{background:linear-gradient(135deg,#f59e0b,#d97706);color:#000}
/* 5 — cyan */
.fc-18__scene:nth-child(5) .fc-18__front{background:linear-gradient(145deg,#041618,#020e10)}
.fc-18__scene:nth-child(5) .fc-18__front-tag{color:#22d3ee}
.fc-18__scene:nth-child(5) .fc-18__front-sub{color:#a5f3fc}
.fc-18__scene:nth-child(5) .fc-18__back{background:linear-gradient(145deg,#041618,#020c0e)}
.fc-18__scene:nth-child(5) .fc-18__back-label{color:#22d3ee}
.fc-18__scene:nth-child(5) .fc-18__back-dot{background:#06b6d4}
.fc-18__scene:nth-child(5) .fc-18__back-cta{background:linear-gradient(135deg,#06b6d4,#0284c7);color:#fff}
/* 6 — violet */
.fc-18__scene:nth-child(6) .fc-18__front{background:linear-gradient(145deg,#120820,#0a0414)}
.fc-18__scene:nth-child(6) .fc-18__front-tag{color:#c084fc}
.fc-18__scene:nth-child(6) .fc-18__front-sub{color:#e9d5ff}
.fc-18__scene:nth-child(6) .fc-18__back{background:linear-gradient(145deg,#120820,#08031a)}
.fc-18__scene:nth-child(6) .fc-18__back-label{color:#c084fc}
.fc-18__scene:nth-child(6) .fc-18__back-dot{background:#a855f7}
.fc-18__scene:nth-child(6) .fc-18__back-cta{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff}

@media(max-width:720px){.fc-18__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fc-18__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fc-18__card{transition:none}}
```

---
## 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: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2a1a4a 0%, #4a2a6a 50%, #ff6c8a 100%);
  min-height: 100vh;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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);
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}
.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: 100vh;
  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;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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; }
```

---
## 16 CSS Gradient Animations

URL: https://codefronts.com/motion/css-gradient-animation/
Description: 16 hand-coded CSS gradient animations with live demos — aurora mesh hero background, diagonal sweeping linear gradient, radial glow split, dark-mode subtle mesh pulse, glow-on-hover accent button, animated gradient border card, metallic shimmer skeleton loader, neon flowing underline link, infinite gradient text animation, hover-reveal text fill, glassmorphism moving backdrop, retro vaporwave cyberpunk mesh, liquid lava lamp blob, striped progress bar loader, file upload streaming state, and animated toggle switch track glow. 4 pure CSS + 12 with a small vanilla JS snippet — no framework. Modern @property typed-angle + conic-gradient + animation-timeline techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.
Demo count: 16

### 01. CSS Infinite Loop Aurora Background

**Type:** CSS + JS
**Description:** A slow-moving, organic multi-color aurora mesh background built from blurred radial-gradient blobs that rotate and scale on infinite CSS keyframes — ideal for SaaS landing page heroes.

**HTML:**
```html
<div class="ga-01">
  <div class="ga-01__aurora">
    <div class="ga-01__blob"></div>
    <div class="ga-01__blob"></div>
    <div class="ga-01__blob"></div>
    <div class="ga-01__blob"></div>
  </div>
  <div class="ga-01__content">
    <div class="ga-01__badge">✦ New — Now in Beta</div>
    <h1 class="ga-01__title">The AI Platform<br><span>Built for Teams</span></h1>
    <p class="ga-01__sub">Ship faster with AI-powered workflows, real-time collaboration, and intelligent automation that adapts to how your team actually works.</p>
    <div class="ga-01__cta">
      <button class="ga-01__btn ga-01__btn--primary">Start for Free</button>
      <button class="ga-01__btn ga-01__btn--ghost">View Demo →</button>
    </div>
  </div>
  <div class="ga-01__speed">
    <button class="ga-01__speed-btn" data-speed="slow">Slow</button>
    <button class="ga-01__speed-btn active" data-speed="normal">Normal</button>
    <button class="ga-01__speed-btn" data-speed="fast">Fast</button>
  </div>
</div>
```

**CSS:**
```css
.ga-01, .ga-01 *, .ga-01 *::before, .ga-01 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-01 ::selection { background: rgba(139,92,246,.45); color: #fff; }

.ga-01 {
  --c1: #0d0d1a;
  --c2: #6d28d9;
  --c3: #0ea5e9;
  --c4: #10b981;
  --c5: #7c3aed;
  --dur: 12s;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--c1);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Aurora mesh layers */
.ga-01__aurora {
  position: absolute;
  inset: 0;
  filter: blur(60px);
  opacity: .75;
}
.ga-01__blob {
  position: absolute;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  animation: ga-01-drift linear infinite;
  mix-blend-mode: screen;
}
.ga-01__blob:nth-child(1) {
  width: 65%; height: 70%;
  top: -15%; left: -10%;
  background: radial-gradient(ellipse at center, var(--c2) 0%, transparent 65%);
  animation-duration: var(--dur);
  animation-delay: 0s;
}
.ga-01__blob:nth-child(2) {
  width: 55%; height: 60%;
  bottom: -20%; right: -10%;
  background: radial-gradient(ellipse at center, var(--c3) 0%, transparent 65%);
  animation-duration: calc(var(--dur) * 1.3);
  animation-delay: calc(var(--dur) * -.4);
  animation-direction: reverse;
}
.ga-01__blob:nth-child(3) {
  width: 50%; height: 55%;
  top: 20%; left: 30%;
  background: radial-gradient(ellipse at center, var(--c4) 0%, transparent 65%);
  animation-duration: calc(var(--dur) * 1.6);
  animation-delay: calc(var(--dur) * -.7);
}
.ga-01__blob:nth-child(4) {
  width: 45%; height: 50%;
  top: -10%; right: 10%;
  background: radial-gradient(ellipse at center, var(--c5) 0%, transparent 65%);
  animation-duration: calc(var(--dur) * 1.1);
  animation-delay: calc(var(--dur) * -.2);
  animation-direction: reverse;
}

@keyframes ga-01-drift {
  0%   { transform: translate(0, 0)    rotate(0deg)   scale(1); }
  25%  { transform: translate(8%, 12%) rotate(90deg)  scale(1.08); }
  50%  { transform: translate(-5%, 8%) rotate(180deg) scale(.95); }
  75%  { transform: translate(10%, -6%) rotate(270deg) scale(1.05); }
  100% { transform: translate(0, 0)    rotate(360deg) scale(1); }
}

/* Content */
.ga-01__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px 32px;
  max-width: 640px;
}
.ga-01__badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(139,92,246,.4);
  color: #a78bfa;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ga-01__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.ga-01__title span {
  background: linear-gradient(135deg, #a78bfa 0%, #38bdf8 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ga-01__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin-bottom: 32px;
}
.ga-01__cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.ga-01__btn {
  padding: 12px 28px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform .2s, box-shadow .2s;
}
.ga-01__btn:hover { transform: translateY(-2px); }
.ga-01__btn--primary {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  color: #fff;
  box-shadow: 0 4px 24px rgba(124,58,237,.4);
}
.ga-01__btn--primary:hover { box-shadow: 0 8px 32px rgba(124,58,237,.6); }
.ga-01__btn--ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
}
.ga-01__btn--ghost:hover { background: rgba(255,255,255,.13); }

/* Speed toggle */
.ga-01__speed {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.ga-01__speed-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  transition: all .2s;
}
.ga-01__speed-btn.active,
.ga-01__speed-btn:hover {
  background: rgba(139,92,246,.25);
  border-color: rgba(139,92,246,.5);
  color: #c4b5fd;
}

@media (prefers-reduced-motion: reduce) {
  .ga-01__blob { animation: none; }
}
```

**JS:**
```js
(function() {
  const wrapper = document.querySelector('.ga-01');
  const btns = wrapper.querySelectorAll('.ga-01__speed-btn');
  const speeds = { slow: '22s', normal: '12s', fast: '5s' };
  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      btns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      wrapper.style.setProperty('--dur', speeds[btn.dataset.speed]);
    });
  });
})();
```

### 02. CSS Diagonal Shifting Linear Gradient

**Type:** CSS + JS
**Description:** A continuously sweeping diagonal linear gradient background that animates its background-position across a 300% × 300% canvas to simulate uninterrupted color flow across the full page.

**HTML:**
```html
<div class="ga-02">
  <div class="ga-02__content">
    <div class="ga-02__eyebrow">
      <div class="ga-02__dot"></div>
      <span class="ga-02__eyebrow-text">Live Platform</span>
    </div>
    <h1 class="ga-02__title">Design Without<br>Limits</h1>
    <p class="ga-02__sub">A professional-grade design suite that moves as fast as your ideas. Collaborate, prototype, and ship — all from one place.</p>
    <div class="ga-02__stats">
      <div class="ga-02__stat">
        <span class="ga-02__stat-num">4M+</span>
        <span class="ga-02__stat-label">Creators</span>
      </div>
      <div class="ga-02__stat">
        <span class="ga-02__stat-num">98%</span>
        <span class="ga-02__stat-label">Uptime</span>
      </div>
      <div class="ga-02__stat">
        <span class="ga-02__stat-num">12ms</span>
        <span class="ga-02__stat-label">Latency</span>
      </div>
    </div>
  </div>
  <div class="ga-02__controls">
    <span class="ga-02__ctrl-label">Angle:</span>
    <button class="ga-02__angle-btn" data-angle="45deg">45°</button>
    <button class="ga-02__angle-btn active" data-angle="135deg">135°</button>
    <button class="ga-02__angle-btn" data-angle="180deg">180°</button>
    <button class="ga-02__angle-btn" data-angle="90deg">90°</button>
  </div>
</div>
```

**CSS:**
```css
.ga-02, .ga-02 *, .ga-02 *::before, .ga-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-02 ::selection { background: rgba(236,72,153,.4); color: #fff; }

.ga-02 {
  --dur: 8s;
  --angle: 135deg;
  --c1: #1e0533;
  --c2: #312e81;
  --c3: #0c4a6e;
  --c4: #831843;
  --c5: #1e0533;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 48px 24px;
}

/* The animated background sits on a pseudo-element so background-size can be animated */
.ga-02::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--angle),
    var(--c1) 0%,
    var(--c2) 20%,
    var(--c3) 40%,
    var(--c4) 60%,
    var(--c2) 80%,
    var(--c5) 100%
  );
  background-size: 300% 300%;
  animation: ga-02-sweep var(--dur) ease-in-out infinite;
}

@keyframes ga-02-sweep {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

/* Noise overlay for depth */
.ga-02::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .04;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

/* Content */
.ga-02__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
}
.ga-02__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.ga-02__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f472b6;
  animation: ga-02-pulse-dot 2s ease-in-out infinite;
}
@keyframes ga-02-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.7); }
}
.ga-02__eyebrow-text {
  color: #f9a8d4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ga-02__title {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.ga-02__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin-bottom: 36px;
}
.ga-02__stats {
  display: flex;
  gap: 0;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,.2);
  max-width: 460px;
  margin: 0 auto;
}
.ga-02__stat {
  flex: 1;
  padding: 16px 8px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.1);
}
.ga-02__stat:last-child { border-right: none; }
.ga-02__stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  display: block;
}
.ga-02__stat-label {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 2px;
}

/* Angle control */
.ga-02__controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ga-02__ctrl-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ga-02__angle-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.5);
  transition: all .2s;
}
.ga-02__angle-btn.active,
.ga-02__angle-btn:hover {
  background: rgba(244,114,182,.2);
  border-color: rgba(244,114,182,.5);
  color: #f9a8d4;
}

@media (prefers-reduced-motion: reduce) {
  .ga-02::before { animation: none; background-position: 50% 50%; }
  .ga-02__dot    { animation: none; }
}
```

**JS:**
```js
(function() {
  const wrapper = document.querySelector('.ga-02');
  const btns = wrapper.querySelectorAll('.ga-02__angle-btn');
  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      btns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      wrapper.style.setProperty('--angle', btn.dataset.angle);
    });
  });
})();
```

### 03. CSS Animated Radial Glow Split

**Type:** Pure CSS
**Description:** A two-panel feature layout where independently pulsing radial gradient orbs shift position and scale on infinite keyframes, creating atmospheric lighting that draws the eye to each side's content.

**HTML:**
```html
<div class="ga-03">
  <div class="ga-03__glow-a"></div>
  <div class="ga-03__glow-b"></div>
  <div class="ga-03__divider"></div>

  <div class="ga-03__panel ga-03__panel--left">
    <div class="ga-03__tag ga-03__tag--a">
      <span class="ga-03__tag-dot"></span> Infrastructure
    </div>
    <h2 class="ga-03__heading">Edge Network<br>Performance</h2>
    <p class="ga-03__body">Requests routed to the nearest PoP automatically. Sub-10ms response times across 190 regions with zero configuration.</p>
    <div class="ga-03__metric">
      <span class="ga-03__metric-val">9.4ms</span>
      <span class="ga-03__metric-label">Avg. global latency</span>
    </div>
  </div>

  <div class="ga-03__panel ga-03__panel--right">
    <div class="ga-03__tag ga-03__tag--b">
      <span class="ga-03__tag-dot"></span> Analytics
    </div>
    <h2 class="ga-03__heading">Real-Time<br>Intelligence</h2>
    <p class="ga-03__body">Stream millions of events per second into queryable dashboards. No sampling. No delays. Full fidelity at any scale.</p>
    <div class="ga-03__metric">
      <span class="ga-03__metric-val">3.2B</span>
      <span class="ga-03__metric-label">Events processed today</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ga-03, .ga-03 *, .ga-03 *::before, .ga-03 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-03 ::selection { background: rgba(249,115,22,.4); color: #fff; }

.ga-03 {
  --bg: #070d1a;
  --glow-a: #f97316;
  --glow-b: #8b5cf6;
  --dur-a: 7s;
  --dur-b: 9s;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* Radial glow A — left, orange */
.ga-03__glow-a {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--glow-a) 40%, transparent),
    transparent 70%);
  top: 50%;
  left: 0;
  transform: translate(-30%, -50%);
  animation: ga-03-pulse-a var(--dur-a) ease-in-out infinite;
  pointer-events: none;
}
@keyframes ga-03-pulse-a {
  0%, 100% { transform: translate(-30%, -50%) scale(1);   opacity: .7; }
  40%       { transform: translate(-15%, -60%) scale(1.2); opacity: 1; }
  70%       { transform: translate(-40%, -40%) scale(.85); opacity: .5; }
}

/* Radial glow B — right, violet */
.ga-03__glow-b {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--glow-b) 40%, transparent),
    transparent 70%);
  top: 50%;
  right: 0;
  transform: translate(30%, -50%);
  animation: ga-03-pulse-b var(--dur-b) ease-in-out infinite;
  pointer-events: none;
}
@keyframes ga-03-pulse-b {
  0%, 100% { transform: translate(30%, -50%)  scale(1);   opacity: .65; }
  35%       { transform: translate(20%, -65%) scale(1.15); opacity: .9; }
  65%       { transform: translate(40%, -35%) scale(.9);  opacity: .5; }
}

/* Thin divider */
.ga-03__divider {
  position: absolute;
  left: 50%; top: 10%;
  width: 1px; height: 80%;
  background: linear-gradient(to bottom,
    transparent, rgba(255,255,255,.1) 30%,
    rgba(255,255,255,.1) 70%, transparent);
  z-index: 1;
}

/* Left panel */
.ga-03__panel {
  position: relative;
  z-index: 2;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ga-03__panel--left { padding-right: 52px; }
.ga-03__panel--right { padding-left: 52px; }

.ga-03__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  width: fit-content;
}
.ga-03__tag--a {
  background: rgba(249,115,22,.12);
  border: 1px solid rgba(249,115,22,.3);
  color: #fb923c;
}
.ga-03__tag--b {
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.3);
  color: #a78bfa;
}
.ga-03__tag-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: ga-03-blink 2s ease-in-out infinite;
}
.ga-03__panel--right .ga-03__tag-dot { animation-delay: -.8s; }
@keyframes ga-03-blink {
  0%, 100% { opacity: 1; } 50% { opacity: .3; }
}

.ga-03__heading {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  letter-spacing: -.025em;
}
.ga-03__body {
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  line-height: 1.72;
}
.ga-03__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.ga-03__metric-val {
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.ga-03__panel--left .ga-03__metric-val { color: #fb923c; }
.ga-03__panel--right .ga-03__metric-val { color: #a78bfa; }
.ga-03__metric-label {
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Hover to intensify */
.ga-03:hover .ga-03__glow-a,
.ga-03:hover .ga-03__glow-b {
  opacity: 1 !important;
  filter: blur(0px);
}

@media (max-width: 640px) {
  .ga-03 { grid-template-columns: 1fr; }
  .ga-03__divider { display: none; }
  .ga-03__panel--left { padding-right: 44px; }
  .ga-03__panel--right { padding-left: 44px; border-top: 1px solid rgba(255,255,255,.07); }
}

@media (prefers-reduced-motion: reduce) {
  .ga-03__glow-a, .ga-03__glow-b { animation: none; }
  .ga-03__tag-dot { animation: none; }
}
```

### 04. CSS Dark Mode Subtle Mesh Pulse

**Type:** CSS + JS
**Description:** A low-contrast dark-mode background built from layered radial gradients on pseudo-elements that slowly translate and rotate, replacing flat pure-black with breathing, atmospheric depth.

**HTML:**
```html
<div class="ga-04">
  <div class="ga-04__bar">
    <div class="ga-04__logo">
      <div class="ga-04__logo-mark">✦</div>
      <span class="ga-04__logo-name">Axiom</span>
    </div>
    <nav class="ga-04__nav">
      <span class="ga-04__nav-item ga-04__nav-item--active">Product</span>
      <span class="ga-04__nav-item">Pricing</span>
      <span class="ga-04__nav-item">Docs</span>
      <span class="ga-04__nav-item">Blog</span>
    </nav>
  </div>

  <div class="ga-04__hero">
    <div class="ga-04__kicker">
      <span class="ga-04__kicker-ring"></span>
      Built for dark mode
    </div>
    <h1 class="ga-04__title">Your workflow,<br><em>beautifully dark</em></h1>
    <p class="ga-04__sub">Subtle ambient gradients that breathe with your UI. No harsh blacks. No eye strain. Just clean, deep dark-mode done right.</p>
    <div class="ga-04__actions">
      <button class="ga-04__btn ga-04__btn--fill">Get Started Free</button>
      <button class="ga-04__btn ga-04__btn--outline">Explore →</button>
    </div>
  </div>

  <div class="ga-04__cards">
    <div class="ga-04__card">
      <div class="ga-04__card-icon">⚡</div>
      <div class="ga-04__card-title">Zero Config</div>
      <div class="ga-04__card-body">Works out of the box. No build steps, no config files.</div>
    </div>
    <div class="ga-04__card">
      <div class="ga-04__card-icon">🔒</div>
      <div class="ga-04__card-title">Secure by Default</div>
      <div class="ga-04__card-body">End-to-end encryption on every request, every time.</div>
    </div>
    <div class="ga-04__card">
      <div class="ga-04__card-icon">🌐</div>
      <div class="ga-04__card-title">Global Edge</div>
      <div class="ga-04__card-body">190 PoPs. Sub-10ms latency worldwide.</div>
    </div>
  </div>

  <div class="ga-04__palette">
    <div class="ga-04__swatch ga-04__swatch--indigo active" data-m1="#1a1040" data-m2="#0f1f30" data-m3="#1a0e28" data-m4="#0d1e1a" data-acc="#6366f1" title="Indigo"></div>
    <div class="ga-04__swatch ga-04__swatch--teal"   data-m1="#0a2420" data-m2="#0f2030" data-m3="#082820" data-m4="#0f2418" data-acc="#10b981" title="Teal"></div>
    <div class="ga-04__swatch ga-04__swatch--rose"   data-m1="#2a0a18" data-m2="#1a0a30" data-m3="#280812" data-m4="#1a0e20" data-acc="#f43f5e" title="Rose"></div>
  </div>
</div>
```

**CSS:**
```css
.ga-04, .ga-04 *, .ga-04 *::before, .ga-04 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-04 ::selection { background: rgba(99,102,241,.5); color: #fff; }

.ga-04 {
  --bg: #0a0a0f;
  --m1: #1a1040;
  --m2: #0f1f30;
  --m3: #1a0e28;
  --m4: #0d1e1a;
  --accent: #6366f1;
  --dur: 14s;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
}

/* Mesh layer: overlapping soft radial gradients on one pseudo-element */
.ga-04::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 60% 55% at 20% 20%, var(--m1) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 80% 75%, var(--m2) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 75% 15%, var(--m3) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 25% 80%, var(--m4) 0%, transparent 70%);
  animation: ga-04-mesh var(--dur) ease-in-out infinite alternate;
  opacity: .95;
}
@keyframes ga-04-mesh {
  0%   { transform: translate(0, 0)    rotate(0deg); }
  33%  { transform: translate(5%, 4%)  rotate(3deg); }
  66%  { transform: translate(-4%, 6%) rotate(-2deg); }
  100% { transform: translate(3%, -3%) rotate(1.5deg); }
}

/* Second mesh layer offset */
.ga-04::after {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 45% 55% at 55% 50%, rgba(99,102,241,.06) 0%, transparent 65%),
    radial-gradient(ellipse 35% 45% at 30% 60%, rgba(16,185,129,.05) 0%, transparent 60%);
  animation: ga-04-mesh2 calc(var(--dur) * 1.4) ease-in-out infinite alternate-reverse;
}
@keyframes ga-04-mesh2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-6%, 5%); }
  100% { transform: translate(4%, -4%); }
}

/* Topbar */
.ga-04__bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ga-04__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ga-04__logo-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.ga-04__logo-name {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.ga-04__nav {
  display: flex;
  gap: 6px;
}
.ga-04__nav-item {
  padding: 5px 12px;
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.ga-04__nav-item:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); }
.ga-04__nav-item--active { color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); }

/* Center hero */
.ga-04__hero {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 24px 0;
}
.ga-04__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(99,102,241,.25);
  background: rgba(99,102,241,.08);
  font-size: 11.5px;
  color: #818cf8;
  font-weight: 600;
  letter-spacing: .06em;
}
.ga-04__kicker-ring {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid #818cf8;
  position: relative;
}
.ga-04__kicker-ring::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 50%;
  background: #818cf8;
  animation: ga-04-ring-fill 2.5s ease-in-out infinite;
}
@keyframes ga-04-ring-fill {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(0); opacity: 0; }
}
.ga-04__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #f1f5f9;
  max-width: 600px;
}
.ga-04__title em {
  font-style: normal;
  background: linear-gradient(90deg, #818cf8, #a78bfa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ga-04__sub {
  font-size: .95rem;
  color: rgba(255,255,255,.4);
  line-height: 1.72;
  max-width: 440px;
}
.ga-04__actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.ga-04__btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.ga-04__btn--fill {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(99,102,241,0);
}
.ga-04__btn--fill:hover {
  box-shadow: 0 0 24px rgba(99,102,241,.45);
  transform: translateY(-1px);
}
.ga-04__btn--outline {
  background: transparent;
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.1);
}
.ga-04__btn--outline:hover {
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.75);
}

/* Bottom card row */
.ga-04__cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ga-04__card {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  transition: border-color .25s, background .25s;
}
.ga-04__card:hover {
  background: rgba(255,255,255,.055);
  border-color: rgba(99,102,241,.2);
}
.ga-04__card-icon {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.ga-04__card-title {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin-bottom: 4px;
}
.ga-04__card-body {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  line-height: 1.55;
}

/* Palette toggle */
.ga-04__palette {
  position: absolute;
  top: 36px;
  right: 36px;
  z-index: 10;
  display: flex;
  gap: 6px;
}
.ga-04__swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, transform .2s;
}
.ga-04__swatch:hover, .ga-04__swatch.active { border-color: #fff; transform: scale(1.2); }
.ga-04__swatch--indigo { background: linear-gradient(135deg, #1a1040, #0f1f30); }
.ga-04__swatch--teal   { background: linear-gradient(135deg, #0f2420, #0a2030); }
.ga-04__swatch--rose   { background: linear-gradient(135deg, #2a0a18, #1a0a30); }

@media (max-width: 600px) {
  .ga-04__cards { grid-template-columns: 1fr; }
  .ga-04__nav { display: none; }
  .ga-04__palette { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ga-04::before, .ga-04::after { animation: none; }
  .ga-04__kicker-ring::after { animation: none; opacity: 1; }
}
```

**JS:**
```js
(function() {
  const wrapper = document.querySelector('.ga-04');
  wrapper.querySelectorAll('.ga-04__swatch').forEach(sw => {
    sw.addEventListener('click', () => {
      wrapper.querySelectorAll('.ga-04__swatch').forEach(s => s.classList.remove('active'));
      sw.classList.add('active');
      ['m1','m2','m3','m4','acc'].forEach(k => {
        const val = sw.dataset[k];
        if (val) wrapper.style.setProperty('--' + k, val);
      });
    });
  });
})();
```

### 05. CSS Glow on Hover Accent Button

**Type:** Pure CSS
**Description:** Three button variants — gradient-fill shift, gradient border glow, and flood fill — where the colour palette activates and shifts only on hover, using pseudo-elements and CSS transitions for zero-JS interactivity.

**HTML:**
```html
<div class="ga-05">
  <div class="ga-05__row">
    <span class="ga-05__label">Gradient Fill Shift</span>
    <button class="ga-05__btn ga-05__btn--filled">Get Started Free ↗</button>
    <button class="ga-05__btn ga-05__btn--filled" style="--c1:#059669;--c2:#0ea5e9;--c3:#7c3aed;">Deploy Now</button>
    <button class="ga-05__btn ga-05__btn--filled" style="--c1:#db2777;--c2:#f59e0b;--c3:#ef4444;">Go Premium</button>
  </div>
  <div class="ga-05__row">
    <span class="ga-05__label">Gradient Border Glow</span>
    <button class="ga-05__btn ga-05__btn--ghost">Connect Wallet</button>
    <button class="ga-05__btn ga-05__btn--ghost" style="--c1:#0ea5e9;--c2:#6366f1;--c3:#a855f7;">View Docs</button>
  </div>
  <div class="ga-05__row">
    <span class="ga-05__label">Flood Fill on Hover</span>
    <button class="ga-05__btn ga-05__btn--flood">Subscribe</button>
    <button class="ga-05__btn ga-05__btn--flood" style="--c1:#d946ef;--c2:#f43f5e;">Join Waitlist</button>
    <button class="ga-05__btn ga-05__btn--flood" style="--c1:#0891b2;--c2:#0d9488;">Learn More</button>
  </div>
</div>
```

**CSS:**
```css
.ga-05, .ga-05 *, .ga-05 *::before, .ga-05 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-05 ::selection { background: rgba(139,92,246,.4); color: #fff; }

.ga-05 {
  --c1: #7c3aed;
  --c2: #06b6d4;
  --c3: #ec4899;
  --bg: #0d0d18;
  --dur: .5s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 48px 24px;
}

/* ── Variant A: gradient background shifts on hover ── */
.ga-05__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  overflow: hidden;
  transition: transform var(--dur) ease, box-shadow var(--dur) ease;
  z-index: 0;
}

/* Shared gradient layer that slides in */
.ga-05__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--c1), var(--c2), var(--c3));
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position .6s ease, opacity var(--dur) ease;
  z-index: -1;
}

/* Glow halo */
.ga-05__btn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c1), var(--c2), var(--c3));
  background-size: 200% 200%;
  background-position: 0% 50%;
  filter: blur(16px);
  opacity: 0;
  transition: opacity var(--dur) ease, background-position .6s ease;
  z-index: -2;
}

.ga-05__btn:hover::before { background-position: 100% 50%; }
.ga-05__btn:hover::after  { opacity: .65; background-position: 100% 50%; }
.ga-05__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(124,58,237,.3); }
.ga-05__btn:active { transform: translateY(0); }

/* Variant A — filled */
.ga-05__btn--filled {
  background: linear-gradient(135deg, var(--c1), var(--c1));
  color: #fff;
}
.ga-05__btn--filled::before { opacity: 0; }
.ga-05__btn--filled:hover::before { opacity: 1; }

/* Variant B — ghost with gradient border */
.ga-05__btn--ghost {
  background: transparent;
  color: #fff;
  padding: 13px 31px; /* 1px less to account for border */
}
.ga-05__btn--ghost::before {
  /* Gradient border trick: wrapper with gradient bg, inner mask */
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.35)) border-box;
  border: 1px solid transparent;
  opacity: 1;
  transition: background var(--dur) ease;
}
.ga-05__btn--ghost:hover::before {
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              linear-gradient(135deg, var(--c1), var(--c2), var(--c3)) border-box;
}
.ga-05__btn--ghost:hover { box-shadow: 0 0 0 3px rgba(124,58,237,.15); }

/* Variant C — outline that floods with gradient fill */
.ga-05__btn--flood {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.15);
  overflow: hidden;
}
.ga-05__btn--flood::before {
  opacity: 0;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  background-size: 100% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .1s;
}
.ga-05__btn--flood:hover::before { opacity: 1; transform: scaleX(1); }
.ga-05__btn--flood:hover { border-color: transparent; }

/* Row layout */
.ga-05__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.ga-05__label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
  text-align: center;
  margin-bottom: -32px;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ga-05__btn, .ga-05__btn::before, .ga-05__btn::after {
    transition: none;
    animation: none;
  }
}
```

### 06. CSS Animated Gradient Border Card

**Type:** Pure CSS
**Description:** A pricing card trio where the featured tier sports a razor-thin rotating conic-gradient border driven by the CSS @property Houdini API, creating a continuously spinning rainbow ring that highlights premium tiers.

**HTML:**
```html
<div class="ga-06">

  <!-- Free tier — no spinning border -->
  <div class="ga-06__card">
    <div class="ga-06__inner">
      <div class="ga-06__tier">
        <span class="ga-06__tier-name">Starter</span>
        <span class="ga-06__badge ga-06__badge--free">Free</span>
      </div>
      <div class="ga-06__price">
        <span class="ga-06__price-amt">$0</span>
        <span class="ga-06__price-per">/mo</span>
      </div>
      <div class="ga-06__divider"></div>
      <ul class="ga-06__features">
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>3 projects</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>5GB storage</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✗</span>Team access</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✗</span>Priority support</li>
      </ul>
      <button class="ga-06__cta ga-06__cta--free">Get Started</button>
    </div>
  </div>

  <!-- Pro tier — always-on spinning gradient border -->
  <div class="ga-06__card ga-06__card--active">
    <div class="ga-06__inner">
      <div class="ga-06__tier">
        <span class="ga-06__tier-name">Pro</span>
        <span class="ga-06__badge ga-06__badge--pro">Most Popular</span>
      </div>
      <div class="ga-06__price">
        <span class="ga-06__price-amt">$29</span>
        <span class="ga-06__price-per">/mo</span>
      </div>
      <div class="ga-06__divider"></div>
      <ul class="ga-06__features">
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>Unlimited projects</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>100GB storage</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>Team access (5 seats)</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>Priority support</li>
      </ul>
      <button class="ga-06__cta ga-06__cta--pro">Upgrade to Pro</button>
    </div>
  </div>

  <!-- Elite tier — hover reveals border -->
  <div class="ga-06__card">
    <div class="ga-06__inner">
      <div class="ga-06__tier">
        <span class="ga-06__tier-name">Elite</span>
        <span class="ga-06__badge ga-06__badge--elite">Enterprise</span>
      </div>
      <div class="ga-06__price">
        <span class="ga-06__price-amt">$99</span>
        <span class="ga-06__price-per">/mo</span>
      </div>
      <div class="ga-06__divider"></div>
      <ul class="ga-06__features">
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>Unlimited everything</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>1TB storage</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>Unlimited seats</li>
        <li class="ga-06__feature"><span class="ga-06__feature-icon">✓</span>Dedicated SLA</li>
      </ul>
      <button class="ga-06__cta ga-06__cta--elite">Contact Sales</button>
    </div>
  </div>

</div>
```

**CSS:**
```css
.ga-06, .ga-06 *, .ga-06 *::before, .ga-06 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-06 ::selection { background: rgba(168,85,247,.4); color: #fff; }

.ga-06 {
  --bg: #0c0c14;
  --card-bg: #13131f;
  --dur: 3s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 48px 24px;
}

/* ── Rotating gradient border using conic-gradient on ::before ── */
.ga-06__card {
  position: relative;
  width: 240px;
  border-radius: 18px;
  padding: 2px; /* border width */
  background: var(--card-bg);
  isolation: isolate;
}

/* The spinning gradient ring */
.ga-06__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--a, 0deg),
    #a855f7, #ec4899, #f97316, #eab308, #22d3ee, #6366f1, #a855f7
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ga-06-spin var(--dur) linear infinite;
  opacity: 0;
  transition: opacity .4s ease;
}

/* Static subtle border at rest */
.ga-06__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(255,255,255,.07);
  pointer-events: none;
}

/* Spin via CSS custom property (Houdini) with JS fallback */
@keyframes ga-06-spin {
  to { --a: 360deg; }
}

/* Always-on card shows border always */
.ga-06__card--active::before { opacity: 1; }

/* Hover reveals border on non-active cards */
.ga-06__card:not(.ga-06__card--active):hover::before { opacity: .7; }

/* Glow behind active card */
.ga-06__card--active {
  filter: drop-shadow(0 0 18px rgba(168,85,247,.25));
}

/* Inner content */
.ga-06__inner {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ga-06__tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ga-06__tier-name {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.4);
}
.ga-06__badge {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 3px 9px;
  border-radius: 999px;
}
.ga-06__badge--free   { background: rgba(255,255,255,.07); color: rgba(255,255,255,.4); }
.ga-06__badge--pro    { background: rgba(168,85,247,.15); color: #c084fc; border: 1px solid rgba(168,85,247,.25); }
.ga-06__badge--elite  { background: rgba(234,179,8,.12);  color: #fbbf24; border: 1px solid rgba(234,179,8,.2); }

.ga-06__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.ga-06__price-amt {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.ga-06__price-per {
  font-size: .75rem;
  color: rgba(255,255,255,.35);
}

.ga-06__divider {
  height: 1px;
  background: rgba(255,255,255,.06);
}

.ga-06__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ga-06__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.ga-06__feature-icon {
  font-size: .85rem;
  flex-shrink: 0;
}
.ga-06__card--active .ga-06__feature { color: rgba(255,255,255,.72); }

.ga-06__cta {
  margin-top: 4px;
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: none;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
}
.ga-06__cta--free  { background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); }
.ga-06__cta--free:hover { background: rgba(255,255,255,.11); color: rgba(255,255,255,.75); }
.ga-06__cta--pro   { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
.ga-06__cta--pro:hover { box-shadow: 0 4px 20px rgba(168,85,247,.4); transform: translateY(-1px); }
.ga-06__cta--elite { background: linear-gradient(135deg, #92400e, #b45309); color: #fef3c7; }
.ga-06__cta--elite:hover { box-shadow: 0 4px 20px rgba(234,179,8,.3); transform: translateY(-1px); }

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

@media (prefers-reduced-motion: reduce) {
  .ga-06__card::before { animation: none; }
}
```

### 07. CSS Metallic Shimmer Skeleton Loader

**Type:** CSS + JS
**Description:** Three skeleton loader patterns — a social card, a list component, and a data table — all sharing a single shimmer keyframe that sweeps a diagonal highlight across each bone element to indicate an active loading state.

**HTML:**
```html
<div class="ga-07" data-speed="normal">

  <!-- Card skeleton -->
  <div class="ga-07__card">
    <div class="ga-07__header">
      <div class="ga-07__bone ga-07__avatar"></div>
      <div class="ga-07__header-lines">
        <div class="ga-07__bone ga-07__line ga-07__line--lg"></div>
        <div class="ga-07__bone ga-07__line ga-07__line--md"></div>
      </div>
    </div>
    <div class="ga-07__bone ga-07__thumb"></div>
    <div class="ga-07__bone ga-07__line ga-07__line--lg"></div>
    <div class="ga-07__bone ga-07__line ga-07__line--md"></div>
    <div style="display:flex;gap:8px;">
      <div class="ga-07__bone ga-07__tag"></div>
      <div class="ga-07__bone ga-07__tag" style="width:80px;"></div>
    </div>
  </div>

  <!-- List skeleton -->
  <div class="ga-07__list">
    <div class="ga-07__list-row">
      <div class="ga-07__bone ga-07__icon"></div>
      <div class="ga-07__list-lines">
        <div class="ga-07__bone ga-07__line ga-07__line--lg"></div>
        <div class="ga-07__bone ga-07__line ga-07__line--sm"></div>
      </div>
    </div>
    <div class="ga-07__list-row">
      <div class="ga-07__bone ga-07__icon"></div>
      <div class="ga-07__list-lines">
        <div class="ga-07__bone ga-07__line" style="width:55%;"></div>
        <div class="ga-07__bone ga-07__line ga-07__line--sm"></div>
      </div>
    </div>
    <div class="ga-07__list-row">
      <div class="ga-07__bone ga-07__icon"></div>
      <div class="ga-07__list-lines">
        <div class="ga-07__bone ga-07__line ga-07__line--md"></div>
        <div class="ga-07__bone ga-07__line" style="width:30%;"></div>
      </div>
    </div>
    <div class="ga-07__list-row">
      <div class="ga-07__bone ga-07__icon"></div>
      <div class="ga-07__list-lines">
        <div class="ga-07__bone ga-07__line" style="width:65%;"></div>
        <div class="ga-07__bone ga-07__line ga-07__line--sm"></div>
      </div>
    </div>
    <div style="display:flex;gap:8px;margin-top:4px;">
      <div class="ga-07__bone" style="height:34px;width:100%;border-radius:8px;"></div>
    </div>
  </div>

  <!-- Table skeleton -->
  <div class="ga-07__table">
    <div class="ga-07__thead">
      <div class="ga-07__bone ga-07__th" style="width:50%;"></div>
      <div class="ga-07__bone ga-07__th" style="width:60%;"></div>
      <div class="ga-07__bone ga-07__th" style="width:70%;"></div>
      <div class="ga-07__bone ga-07__th" style="width:45%;"></div>
    </div>
    <div class="ga-07__tbody-row">
      <div class="ga-07__td--name">
        <div class="ga-07__bone ga-07__td--avatar"></div>
        <div class="ga-07__bone ga-07__td" style="flex:1;"></div>
      </div>
      <div class="ga-07__bone ga-07__td" style="width:55%;"></div>
      <div class="ga-07__bone ga-07__td" style="width:70%;"></div>
      <div class="ga-07__bone ga-07__td" style="width:40%;"></div>
    </div>
    <div class="ga-07__tbody-row">
      <div class="ga-07__td--name">
        <div class="ga-07__bone ga-07__td--avatar"></div>
        <div class="ga-07__bone ga-07__td" style="flex:1;width:65%;"></div>
      </div>
      <div class="ga-07__bone ga-07__td" style="width:80%;"></div>
      <div class="ga-07__bone ga-07__td" style="width:50%;"></div>
      <div class="ga-07__bone ga-07__td" style="width:60%;"></div>
    </div>
    <div class="ga-07__tbody-row">
      <div class="ga-07__td--name">
        <div class="ga-07__bone ga-07__td--avatar"></div>
        <div class="ga-07__bone ga-07__td" style="flex:1;width:45%;"></div>
      </div>
      <div class="ga-07__bone ga-07__td" style="width:65%;"></div>
      <div class="ga-07__bone ga-07__td" style="width:45%;"></div>
      <div class="ga-07__bone ga-07__td" style="width:75%;"></div>
    </div>
  </div>

  <div class="ga-07__controls">
    <button class="ga-07__toggle" data-s="slow">Slow</button>
    <button class="ga-07__toggle active" data-s="normal">Normal</button>
    <button class="ga-07__toggle" data-s="fast">Fast</button>
  </div>
</div>
```

**CSS:**
```css
.ga-07, .ga-07 *, .ga-07 *::before, .ga-07 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-07 ::selection { background: rgba(99,102,241,.4); color: #fff; }

.ga-07 {
  --bg: #0f111a;
  --skel: #1c1e2e;
  --shine-from: rgba(255,255,255,0);
  --shine-mid:  rgba(255,255,255,.07);
  --shine-to:   rgba(255,255,255,0);
  --dur: 1.6s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 48px 24px;
}

/* ── Base skeleton bone ── */
.ga-07__bone {
  position: relative;
  background: var(--skel);
  border-radius: 6px;
  overflow: hidden;
}

/* Shimmer wave — single pseudo-element slides across */
.ga-07__bone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    var(--shine-from) 0%,
    var(--shine-from) 35%,
    var(--shine-mid)  50%,
    var(--shine-to)   65%,
    var(--shine-to)   100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: ga-07-shimmer var(--dur) ease-in-out infinite;
}

@keyframes ga-07-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* ── Card skeleton ── */
.ga-07__card {
  width: 280px;
  background: #13151f;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ga-07__avatar { width: 44px; height: 44px; border-radius: 50%; }
.ga-07__line   { height: 10px; }
.ga-07__line--lg  { width: 70%; }
.ga-07__line--md  { width: 50%; }
.ga-07__line--sm  { width: 35%; }
.ga-07__thumb { width: 100%; height: 140px; border-radius: 10px; }
.ga-07__tag   { width: 60px; height: 22px; border-radius: 999px; }

.ga-07__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ga-07__header-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── List skeleton ── */
.ga-07__list {
  width: 280px;
  background: #13151f;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ga-07__list-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ga-07__icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.ga-07__list-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ── Table skeleton ── */
.ga-07__table {
  width: 560px;
  max-width: 100%;
  background: #13151f;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  overflow: hidden;
}
.ga-07__thead {
  background: rgba(255,255,255,.03);
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ga-07__tbody-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  align-items: center;
}
.ga-07__tbody-row:last-child { border-bottom: none; }
.ga-07__th { height: 8px; border-radius: 4px; }
.ga-07__td { height: 9px; border-radius: 4px; }
.ga-07__td--name { display: flex; align-items: center; gap: 10px; }
.ga-07__td--avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }

/* Toggle loaded state */
.ga-07__controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.ga-07 { position: relative; }
.ga-07__toggle {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  transition: all .2s;
}
.ga-07__toggle:hover,
.ga-07__toggle.active {
  background: rgba(99,102,241,.2);
  border-color: rgba(99,102,241,.4);
  color: #a5b4fc;
}
/* Fast/slow speed variants */
.ga-07[data-speed="fast"] { --dur: .9s; }
.ga-07[data-speed="slow"] { --dur: 2.8s; }

@media (prefers-reduced-motion: reduce) {
  .ga-07__bone::after { animation: none; background-position: -50% 0; }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-07');
  w.querySelectorAll('.ga-07__toggle').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-07__toggle').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.dataset.speed = btn.dataset.s;
    });
  });
})();
```

### 08. CSS Neon Flowing Underline Link

**Type:** CSS + JS
**Description:** Navigation links and inline prose anchors where hover activates a flowing multi-colour gradient underline that sweeps in from the left and then animates infinitely, replacing the static underline with a living neon ribbon.

**HTML:**
```html
<div class="ga-08">

  <nav class="ga-08__nav">
    <span class="ga-08__link ga-08__link--active">Home</span>
    <span class="ga-08__link">Features</span>
    <span class="ga-08__link">Pricing</span>
    <span class="ga-08__link">Blog</span>
    <span class="ga-08__link">Contact</span>
  </nav>

  <div class="ga-08__prose">
    <h2 class="ga-08__prose-head">Links that feel alive</h2>
    <p class="ga-08__prose-body">
      Hover the navigation above to see each link reveal its own unique
      <span class="ga-08__inline">flowing gradient underline</span>. In body copy,
      the same technique works at a smaller scale — try hovering
      <span class="ga-08__inline">this inline link</span> or
      <span class="ga-08__inline" style="--ul-c1:#a855f7;--ul-c2:#f97316;--ul-c3:#eab308;">this one</span>
      to see the neon line slide in from the left and animate infinitely.
    </p>
  </div>

  <div class="ga-08__speed">
    <span class="ga-08__speed-label">Flow speed:</span>
    <button class="ga-08__speed-btn" data-dur="4s">Slow</button>
    <button class="ga-08__speed-btn active" data-dur="2s">Normal</button>
    <button class="ga-08__speed-btn" data-dur="1s">Fast</button>
  </div>

</div>
```

**CSS:**
```css
.ga-08, .ga-08 *, .ga-08 *::before, .ga-08 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-08 ::selection { background: rgba(6,182,212,.4); color: #fff; }

.ga-08 {
  --bg: #080c12;
  --dur: 2s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 48px 24px;
}

/* ── Realistic nav bar ── */
.ga-08__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  margin-bottom: 56px;
}

/* ── Core underline link technique ── */
.ga-08__link {
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  cursor: pointer;
  transition: color .3s ease;
  border-radius: 8px;
  white-space: nowrap;
}

/* Underline via ::after using gradient background-size trick */
.ga-08__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--ul-c1, #06b6d4),
    var(--ul-c2, #818cf8),
    var(--ul-c3, #ec4899),
    var(--ul-c1, #06b6d4)
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  transform: scaleX(0);
  transform-origin: right;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    background-position var(--dur) linear;
}

.ga-08__link:hover {
  color: rgba(255,255,255,.92);
}
.ga-08__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  background-position: -100% 0;
  animation: ga-08-flow var(--dur) linear infinite;
}

@keyframes ga-08-flow {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Active nav item — always underlined */
.ga-08__link--active {
  color: rgba(255,255,255,.9);
}
.ga-08__link--active::after {
  transform: scaleX(1);
  animation: ga-08-flow var(--dur) linear infinite;
}

/* Custom colour variants per link */
.ga-08__link:nth-child(2)  { --ul-c1: #a855f7; --ul-c2: #ec4899; --ul-c3: #f97316; }
.ga-08__link:nth-child(3)  { --ul-c1: #10b981; --ul-c2: #06b6d4; --ul-c3: #6366f1; }
.ga-08__link:nth-child(4)  { --ul-c1: #f97316; --ul-c2: #eab308; --ul-c3: #ef4444; }
.ga-08__link:nth-child(5)  { --ul-c1: #ec4899; --ul-c2: #a855f7; --ul-c3: #6366f1; }

/* ── Prose section showing links in copy ── */
.ga-08__prose {
  max-width: 560px;
  text-align: center;
}
.ga-08__prose-head {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -.025em;
  margin-bottom: 20px;
  line-height: 1.2;
}
.ga-08__prose-body {
  font-size: .95rem;
  color: rgba(255,255,255,.45);
  line-height: 1.8;
}
/* Inline prose links */
.ga-08__inline {
  position: relative;
  display: inline;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 2px;
}
.ga-08__inline::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #06b6d4, #818cf8, #ec4899, #06b6d4);
  background-size: 300% 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.ga-08__inline:hover { color: #fff; }
.ga-08__inline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  animation: ga-08-flow-inline 1.8s linear infinite;
}
@keyframes ga-08-flow-inline {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Speed control */
.ga-08__speed {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ga-08__speed-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
}
.ga-08__speed-btn {
  padding: 4px 12px;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: rgba(255,255,255,.35);
  cursor: pointer;
  transition: all .2s;
}
.ga-08__speed-btn.active,
.ga-08__speed-btn:hover {
  background: rgba(6,182,212,.15);
  border-color: rgba(6,182,212,.35);
  color: #67e8f9;
}

@media (prefers-reduced-motion: reduce) {
  .ga-08__link:hover::after,
  .ga-08__link--active::after,
  .ga-08__inline:hover::after { animation: none; }
  .ga-08__link::after,
  .ga-08__inline::after { transition: transform .3s ease; }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-08');
  w.querySelectorAll('.ga-08__speed-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-08__speed-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.style.setProperty('--dur', btn.dataset.dur);
    });
  });
})();
```

### 09. CSS Animated Infinite Gradient Text

**Type:** CSS + JS
**Description:** Multiple gradient text variants — a hero headline, sentence-level accents, animated stat counters, and a badge tag — all using background-clip: text with a sliding background-position keyframe to create a continuously flowing colour palette across the lettering.

**HTML:**
```html
<div class="ga-09">

  <div class="ga-09__tag-display">
    <span class="ga-09__tag-icon">✦</span>
    <span class="ga-09__tag-text ga-09__text">CSS background-clip gradient animation</span>
  </div>

  <div class="ga-09__hero">
    <span class="ga-09__pre">Build the future</span>
    <span class="ga-09__gradient-a ga-09__text">one pixel at a time.</span>
  </div>

  <p class="ga-09__sentence">
    Gradient text is great for
    <span class="ga-09__accent-b ga-09__text">hero headlines</span>,
    key statistics, and
    <span class="ga-09__accent-b ga-09__text" style="background-image:linear-gradient(90deg,#f97316,#eab308,#10b981,#f97316)">call-to-action</span>
    words that need to pop without colour conflicts.
  </p>

  <div class="ga-09__stats">
    <div class="ga-09__stat">
      <span class="ga-09__stat-num ga-09__stat-c1 ga-09__text">4.2M</span>
      <span class="ga-09__stat-label">Monthly users</span>
    </div>
    <div class="ga-09__stat">
      <span class="ga-09__stat-num ga-09__stat-c2 ga-09__text">99.98%</span>
      <span class="ga-09__stat-label">Uptime SLA</span>
    </div>
    <div class="ga-09__stat">
      <span class="ga-09__stat-num ga-09__stat-c3 ga-09__text">18ms</span>
      <span class="ga-09__stat-label">Avg. latency</span>
    </div>
  </div>

  <div class="ga-09__controls">
    <button class="ga-09__ctrl-btn" data-dur="12s">Slow</button>
    <button class="ga-09__ctrl-btn active" data-dur="5s">Normal</button>
    <button class="ga-09__ctrl-btn" data-dur="2.5s">Fast</button>
    <button class="ga-09__ctrl-btn" data-dur="1s">Blazing</button>
  </div>

</div>
```

**CSS:**
```css
.ga-09, .ga-09 *, .ga-09 *::before, .ga-09 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-09 ::selection { background: rgba(168,85,247,.4); color: #fff; }

.ga-09 {
  --bg: #060912;
  --dur: 5s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 48px 24px;
}

/* ── Core gradient text technique ── */
.ga-09__text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 300% 100%;
  animation: ga-09-slide var(--dur) linear infinite;
}

@keyframes ga-09-slide {
  0%   { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

/* ── Variant A: hero headline ── */
.ga-09__hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ga-09__pre {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: rgba(255,255,255,.9);
}
.ga-09__gradient-a {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.035em;
  background-image: linear-gradient(90deg,
    #a855f7, #ec4899, #f97316, #eab308, #10b981, #06b6d4, #6366f1, #a855f7
  );
}
.ga-09__gradient-a.ga-09__text { animation-duration: calc(var(--dur) * 1.4); }

/* ── Variant B: word-level accents in a sentence ── */
.ga-09__sentence {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  text-align: center;
  max-width: 580px;
}
.ga-09__accent-b {
  font-weight: 800;
  background-image: linear-gradient(90deg,
    #06b6d4, #818cf8, #ec4899, #f97316, #06b6d4
  );
  display: inline;
}
.ga-09__accent-b.ga-09__text { animation-duration: calc(var(--dur) * .8); }

/* ── Variant C: display counters / stats ── */
.ga-09__stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.ga-09__stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ga-09__stat-num {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}
.ga-09__stat-c1 { background-image: linear-gradient(90deg, #06b6d4, #6366f1, #a855f7, #06b6d4); }
.ga-09__stat-c2 { background-image: linear-gradient(90deg, #10b981, #06b6d4, #818cf8, #10b981); animation-delay: -.8s; }
.ga-09__stat-c3 { background-image: linear-gradient(90deg, #f97316, #ec4899, #a855f7, #f97316); animation-delay: -1.6s; }
.ga-09__stat-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
}

/* ── Variant D: large display tag ── */
.ga-09__tag-display {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.ga-09__tag-icon { font-size: .9rem; }
.ga-09__tag-text {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  background-image: linear-gradient(90deg, #c084fc, #818cf8, #67e8f9, #34d399, #c084fc);
}

/* Speed palette buttons */
.ga-09__controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.ga-09__ctrl-btn {
  padding: 5px 14px;
  border-radius: 7px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.4);
  cursor: pointer;
  transition: all .2s;
}
.ga-09__ctrl-btn.active,
.ga-09__ctrl-btn:hover {
  background: rgba(168,85,247,.15);
  border-color: rgba(168,85,247,.3);
  color: #d8b4fe;
}

@media (prefers-reduced-motion: reduce) {
  .ga-09__text { animation: none; background-position: 0% 50%; }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-09');
  w.querySelectorAll('.ga-09__ctrl-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-09__ctrl-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.style.setProperty('--dur', btn.dataset.dur);
    });
  });
})();
```

### 10. CSS Hover Reveal Text Fill

**Type:** Pure CSS
**Description:** Plain text that reveals a flowing gradient fill on hover — using background-clip: text with a CSS transition that expands background-size from 0% to full width, plus a per-character stagger variant where each letter fills individually.

**HTML:**
```html
<div class="ga-10">

  <p class="ga-10__hint">↓ Hover each line to reveal the gradient fill</p>

  <div style="display:flex;flex-direction:column;align-items:center;gap:16px;">
    <span class="ga-10__reveal">Ship Faster.</span>
    <span class="ga-10__reveal ga-10__v2">Build Smarter.</span>
    <span class="ga-10__reveal ga-10__v3">Scale Effortlessly.</span>
    <span class="ga-10__reveal ga-10__v4">Design Better.</span>
  </div>

  <div style="display:flex;flex-direction:column;align-items:center;gap:12px;">
    <p class="ga-10__hint">Character stagger — hover the word below</p>
    <div class="ga-10__stagger" aria-label="INNOVATION">
      <span class="ga-10__char">I</span>
      <span class="ga-10__char">N</span>
      <span class="ga-10__char">N</span>
      <span class="ga-10__char">O</span>
      <span class="ga-10__char">V</span>
      <span class="ga-10__char">A</span>
      <span class="ga-10__char">T</span>
      <span class="ga-10__char">I</span>
      <span class="ga-10__char">O</span>
      <span class="ga-10__char">N</span>
    </div>
  </div>

</div>
```

**CSS:**
```css
.ga-10, .ga-10 *, .ga-10 *::before, .ga-10 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-10 ::selection { background: rgba(245,158,11,.35); color: #fff; }

.ga-10 {
  --bg: #09090f;
  --plain: rgba(255,255,255,.25);
  --dur: 3s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 56px 24px;
}

/* ── Core technique: layered backgrounds, clip to text ──
   The gradient is always there but background-size is 0% → 100%
   driven by a CSS transition on hover, revealing the fill left-to-right. */

/* Variant A — reveal fill sweeps left to right on hover */
.ga-10__reveal {
  position: relative;
  display: inline-block;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  cursor: default;
  /* Base colour */
  color: var(--plain);
  /* Gradient overlay via background-clip */
  background-image: linear-gradient(var(--grad-angle, 90deg),
    var(--g1, #f97316),
    var(--g2, #ec4899),
    var(--g3, #a855f7),
    var(--g4, #06b6d4)
  );
  background-size: var(--fill, 0%) 100%;
  background-clip: text;
  -webkit-background-clip: text;
  /* The text colour itself is not transparent yet — we use a
     clip-path on a pseudo-element to overlay the gradient version */
  -webkit-text-fill-color: var(--plain);
}
/* Gradient layer rides on the parent's background-clip */
.ga-10__reveal:hover {
  --fill: 100%;
  -webkit-text-fill-color: transparent;
  transition: background-size .55s cubic-bezier(.22,1,.36,1);
  animation: ga-10-flow var(--dur) linear infinite;
  background-size: 300% 100%;
}
@keyframes ga-10-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}
/* Reset when not hovered */
.ga-10__reveal {
  transition: background-size .4s ease, -webkit-text-fill-color .1s .38s;
  background-position: 0% 50%;
}

/* Variant styles */
.ga-10__v2 { --g1: #10b981; --g2: #06b6d4; --g3: #818cf8; --g4: #a855f7; }
.ga-10__v3 { --g1: #eab308; --g2: #f97316; --g3: #ef4444; --g4: #ec4899; }
.ga-10__v4 { --g1: #c084fc; --g2: #818cf8; --g3: #38bdf8; --g4: #34d399; }

/* ── Variant B — character-split stagger ── */
.ga-10__stagger {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.ga-10__char {
  display: inline-block;
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -.025em;
  color: rgba(255,255,255,.18);
  background-image: linear-gradient(90deg, #a855f7, #ec4899, #f97316, #eab308);
  background-size: 200% 100%;
  background-position: 0% 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: inherit;
  transition: color .01s, -webkit-text-fill-color .01s;
}
.ga-10__stagger:hover .ga-10__char {
  -webkit-text-fill-color: transparent;
  animation: ga-10-char-fill .4s forwards, ga-10-flow-char 2s .4s linear infinite;
}
@keyframes ga-10-char-fill {
  to { background-position: -100% 0; }
}
@keyframes ga-10-flow-char {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
/* Stagger delay */
.ga-10__stagger:hover .ga-10__char:nth-child(1)  { animation-delay: 0s, .4s; }
.ga-10__stagger:hover .ga-10__char:nth-child(2)  { animation-delay: .04s, .44s; }
.ga-10__stagger:hover .ga-10__char:nth-child(3)  { animation-delay: .08s, .48s; }
.ga-10__stagger:hover .ga-10__char:nth-child(4)  { animation-delay: .12s, .52s; }
.ga-10__stagger:hover .ga-10__char:nth-child(5)  { animation-delay: .16s, .56s; }
.ga-10__stagger:hover .ga-10__char:nth-child(6)  { animation-delay: .20s, .60s; }
.ga-10__stagger:hover .ga-10__char:nth-child(7)  { animation-delay: .24s, .64s; }
.ga-10__stagger:hover .ga-10__char:nth-child(8)  { animation-delay: .28s, .68s; }
.ga-10__stagger:hover .ga-10__char:nth-child(9)  { animation-delay: .32s, .72s; }
.ga-10__stagger:hover .ga-10__char:nth-child(10) { animation-delay: .36s, .76s; }
.ga-10__stagger:hover .ga-10__char:nth-child(11) { animation-delay: .40s, .80s; }

/* Space character */
.ga-10__char--sp { background: none !important; -webkit-text-fill-color: transparent !important; }

/* Sub-hint */
.ga-10__hint {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.2);
}

@media (prefers-reduced-motion: reduce) {
  .ga-10__reveal:hover, .ga-10__stagger:hover .ga-10__char { animation: none; }
  .ga-10__reveal:hover { background-size: 100% 100%; }
}
```

### 11. CSS Glassmorphism Moving Backdrop

**Type:** CSS + JS
**Description:** Four animated radial-gradient blobs drift behind a frosted-glass modal card that uses backdrop-filter: blur(28px), magnifying the depth illusion as the colourful layer shifts continuously beneath the transparency.

**HTML:**
```html
<div class="ga-11">
  <div class="ga-11__blob ga-11__blob--1"></div>
  <div class="ga-11__blob ga-11__blob--2"></div>
  <div class="ga-11__blob ga-11__blob--3"></div>
  <div class="ga-11__blob ga-11__blob--4"></div>

  <div class="ga-11__glass">
    <div class="ga-11__card-head">
      <div class="ga-11__logo">
        <div class="ga-11__logo-box">✦</div>
        <span class="ga-11__logo-name">Prism</span>
      </div>
      <div class="ga-11__status">
        <div class="ga-11__status-dot"></div>
        Secure
      </div>
    </div>
    <div class="ga-11__divider"></div>
    <div class="ga-11__form-field">
      <span class="ga-11__form-label">Email address</span>
      <input class="ga-11__form-input" type="email" placeholder="you@company.com">
    </div>
    <div class="ga-11__form-field">
      <span class="ga-11__form-label">Password</span>
      <input class="ga-11__form-input" type="password" placeholder="••••••••••">
    </div>
    <div class="ga-11__btn-row">
      <button class="ga-11__btn ga-11__btn--fill">Sign In</button>
      <button class="ga-11__btn ga-11__btn--ghost">Register</button>
    </div>
    <p class="ga-11__note">The blobs behind the glass card are pure CSS animated gradients. The glass card uses <code>backdrop-filter: blur(28px)</code>.</p>
  </div>

  <div class="ga-11__ctrl">
    <button class="ga-11__ctrl-btn" data-dur="22s">Slow</button>
    <button class="ga-11__ctrl-btn active" data-dur="10s">Normal</button>
    <button class="ga-11__ctrl-btn" data-dur="4s">Fast</button>
  </div>
</div>
```

**CSS:**
```css
.ga-11, .ga-11 *, .ga-11 *::before, .ga-11 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-11 ::selection { background: rgba(99,102,241,.5); color: #fff; }

.ga-11 {
  --bg: #080a12;
  --dur: 10s;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* ── Animated gradient backdrop blobs ── */
.ga-11__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  will-change: transform;
}
.ga-11__blob--1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(124,58,237,.7), transparent 65%);
  top: -80px; left: -80px;
  animation: ga-11-b1 var(--dur) ease-in-out infinite alternate;
}
.ga-11__blob--2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(6,182,212,.6), transparent 65%);
  bottom: -60px; right: -60px;
  animation: ga-11-b2 calc(var(--dur) * 1.3) ease-in-out infinite alternate;
}
.ga-11__blob--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(236,72,153,.55), transparent 65%);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ga-11-b3 calc(var(--dur) * 1.6) ease-in-out infinite alternate;
}
.ga-11__blob--4 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(16,185,129,.5), transparent 65%);
  bottom: 10%; left: 10%;
  animation: ga-11-b4 calc(var(--dur) * .9) ease-in-out infinite alternate;
}

@keyframes ga-11-b1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(180px, 130px) scale(1.2); }
}
@keyframes ga-11-b2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-150px, -120px) scale(1.1); }
}
@keyframes ga-11-b3 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-30%, -70%) scale(.85); }
}
@keyframes ga-11-b4 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(100px, -80px) scale(1.15); }
}

/* ── Glass card ── */
.ga-11__glass {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  border-radius: 24px;
  padding: 36px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 24px 60px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Card inner content */
.ga-11__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ga-11__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ga-11__logo-box {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.ga-11__logo-name {
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}
.ga-11__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ga-11__status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  animation: ga-11-blink 2s ease-in-out infinite;
}
@keyframes ga-11-blink {
  0%, 100% { opacity: 1; } 50% { opacity: .3; }
}

.ga-11__divider { height: 1px; background: rgba(255,255,255,.07); }

.ga-11__form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ga-11__form-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.35);
}
.ga-11__form-input {
  padding: 11px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  outline: none;
  transition: border-color .2s, background .2s;
}
.ga-11__form-input:focus {
  border-color: rgba(124,58,237,.5);
  background: rgba(124,58,237,.07);
}
.ga-11__form-input::placeholder { color: rgba(255,255,255,.2); }

.ga-11__btn-row { display: flex; gap: 10px; }
.ga-11__btn {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.ga-11__btn--fill {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  color: #fff;
}
.ga-11__btn--fill:hover { box-shadow: 0 4px 20px rgba(124,58,237,.4); transform: translateY(-1px); }
.ga-11__btn--ghost {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.1);
}
.ga-11__btn--ghost:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }

.ga-11__note {
  font-size: .72rem;
  color: rgba(255,255,255,.25);
  text-align: center;
  line-height: 1.5;
}

/* Speed control */
.ga-11__ctrl {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  gap: 6px;
}
.ga-11__ctrl-btn {
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.35);
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(4px);
}
.ga-11__ctrl-btn.active,
.ga-11__ctrl-btn:hover {
  background: rgba(124,58,237,.2);
  border-color: rgba(124,58,237,.4);
  color: #c4b5fd;
}

@media (prefers-reduced-motion: reduce) {
  .ga-11__blob { animation: none; }
  .ga-11__status-dot { animation: none; }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-11');
  w.querySelectorAll('.ga-11__ctrl-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-11__ctrl-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.style.setProperty('--dur', btn.dataset.dur);
    });
  });
})();
```

### 12. CSS Retro Vaporwave Cyberpunk Mesh

**Type:** CSS + JS
**Description:** A high-contrast, fast-rotating mesh gradient in neon magenta, cyan, and violet layered with a CSS grid overlay and CRT scanlines, creating a brutalist retro-futuristic aesthetic popular in vaporwave and cyberpunk design.

**HTML:**
```html
<div class="ga-12">
  <div class="ga-12__grid"></div>
  <div class="ga-12__scan"></div>

  <div class="ga-12__content">
    <span class="ga-12__year">∴ 1989 — 2089 ∴</span>
    <h1 class="ga-12__title">VAPORWAVE</h1>
    <p class="ga-12__sub">Aesthetics · Interface · Future · Retro</p>
    <div class="ga-12__divider"></div>
    <div class="ga-12__pills">
      <span class="ga-12__pill ga-12__pill--m">Neon Magenta</span>
      <span class="ga-12__pill ga-12__pill--c">Cyber Cyan</span>
      <span class="ga-12__pill ga-12__pill--p">Deep Violet</span>
    </div>
  </div>

  <div class="ga-12__ctrl">
    <button class="ga-12__ctrl-btn" data-dur="12s">Slow</button>
    <button class="ga-12__ctrl-btn active" data-dur="6s">Normal</button>
    <button class="ga-12__ctrl-btn" data-dur="2.5s">Fast</button>
  </div>
</div>
```

**CSS:**
```css
.ga-12, .ga-12 *, .ga-12 *::before, .ga-12 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-12 ::selection { background: rgba(236,72,153,.5); color: #fff; }

.ga-12 {
  --bg: #06010f;
  --c1: #ff00ff;
  --c2: #00ffff;
  --c3: #bf00ff;
  --c4: #ff006e;
  --dur: 6s;
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 48px 24px;
}

/* ── Fast-moving high-contrast mesh ── */
.ga-12::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, color-mix(in srgb, var(--c1) 35%, transparent), transparent 60%),
    radial-gradient(ellipse 45% 45% at 80% 70%, color-mix(in srgb, var(--c2) 30%, transparent), transparent 60%),
    radial-gradient(ellipse 40% 50% at 60% 20%, color-mix(in srgb, var(--c3) 28%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 35% at 30% 80%, color-mix(in srgb, var(--c4) 25%, transparent), transparent 55%);
  animation: ga-12-mesh var(--dur) linear infinite;
  mix-blend-mode: screen;
}

/* Second mesh layer — faster, different direction */
.ga-12::after {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 30% 50% at 70% 40%, color-mix(in srgb, var(--c2) 20%, transparent), transparent 55%),
    radial-gradient(ellipse 40% 30% at 15% 60%, color-mix(in srgb, var(--c1) 18%, transparent), transparent 50%);
  animation: ga-12-mesh2 calc(var(--dur) * .7) linear infinite reverse;
  mix-blend-mode: screen;
}

@keyframes ga-12-mesh {
  0%   { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.05); }
}
@keyframes ga-12-mesh2 {
  0%   { transform: rotate(0deg) translate(0, 0); }
  33%  { transform: rotate(120deg) translate(5%, -5%); }
  66%  { transform: rotate(240deg) translate(-5%, 5%); }
  100% { transform: rotate(360deg) translate(0, 0); }
}

/* Scan-line grid overlay */
.ga-12__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

/* CRT scanline overlay */
.ga-12__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,.08) 2px,
    rgba(0,0,0,.08) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* Content */
.ga-12__content {
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ga-12__year {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c2);
  text-shadow: 0 0 10px var(--c2), 0 0 20px var(--c2);
  animation: ga-12-flicker 4s ease-in-out infinite;
}
@keyframes ga-12-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: .6; }
  97% { opacity: 1; }
  98% { opacity: .4; }
}

.ga-12__title {
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,0,255,.6)) drop-shadow(0 0 32px rgba(0,255,255,.3));
}

.ga-12__sub {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(0,255,255,.7);
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(0,255,255,.5);
}

.ga-12__divider {
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c1), var(--c2), transparent);
  position: relative;
}
.ga-12__divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(4px);
  opacity: .7;
}

/* Stat pills */
.ga-12__pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.ga-12__pill {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid;
  cursor: pointer;
  transition: all .2s;
}
.ga-12__pill--m { color: var(--c1); border-color: rgba(255,0,255,.35); background: rgba(255,0,255,.07); }
.ga-12__pill--m:hover { background: rgba(255,0,255,.15); box-shadow: 0 0 12px rgba(255,0,255,.3); }
.ga-12__pill--c { color: var(--c2); border-color: rgba(0,255,255,.35); background: rgba(0,255,255,.06); }
.ga-12__pill--c:hover { background: rgba(0,255,255,.12); box-shadow: 0 0 12px rgba(0,255,255,.25); }
.ga-12__pill--p { color: var(--c3); border-color: rgba(191,0,255,.3); background: rgba(191,0,255,.06); }
.ga-12__pill--p:hover { background: rgba(191,0,255,.13); box-shadow: 0 0 12px rgba(191,0,255,.25); }

/* Speed control */
.ga-12__ctrl {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  gap: 5px;
}
.ga-12__ctrl-btn {
  padding: 4px 10px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-radius: 3px;
  border: 1px solid rgba(0,255,255,.2);
  background: rgba(0,0,0,.4);
  color: rgba(0,255,255,.4);
  cursor: pointer;
  transition: all .15s;
}
.ga-12__ctrl-btn.active,
.ga-12__ctrl-btn:hover {
  border-color: var(--c2);
  color: var(--c2);
  text-shadow: 0 0 6px var(--c2);
}

@media (prefers-reduced-motion: reduce) {
  .ga-12::before, .ga-12::after { animation: none; }
  .ga-12__year { animation: none; }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-12');
  w.querySelectorAll('.ga-12__ctrl-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-12__ctrl-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.style.setProperty('--dur', btn.dataset.dur);
    });
  });
})();
```

### 13. CSS Liquid Lava Lamp Blob Animation

**Type:** CSS + JS
**Description:** Three themed lava lamps — Ember (orange-pink), Aether (cyan-violet), and Growth (green-yellow) — each containing morphing radial-gradient blobs that simultaneously change shape via border-radius keyframes and float vertically, simulating fluid droplets in a heated lamp.

**HTML:**
```html
<div class="ga-13">
  <div class="ga-13__lamp ga-13__lamp--a">
    <div class="ga-13__blob"></div>
    <div class="ga-13__blob"></div>
    <div class="ga-13__blob"></div>
    <span class="ga-13__lamp-label">Ember</span>
  </div>
  <div class="ga-13__lamp ga-13__lamp--b">
    <div class="ga-13__blob"></div>
    <div class="ga-13__blob"></div>
    <div class="ga-13__blob"></div>
    <span class="ga-13__lamp-label">Aether</span>
  </div>
  <div class="ga-13__lamp ga-13__lamp--c">
    <div class="ga-13__blob"></div>
    <div class="ga-13__blob"></div>
    <div class="ga-13__blob"></div>
    <span class="ga-13__lamp-label">Growth</span>
  </div>

  <div class="ga-13__ctrl">
    <button class="ga-13__ctrl-btn" data-dur="18s">Slow</button>
    <button class="ga-13__ctrl-btn active" data-dur="8s">Normal</button>
    <button class="ga-13__ctrl-btn" data-dur="3s">Fast</button>
  </div>
</div>
```

**CSS:**
```css
.ga-13, .ga-13 *, .ga-13 *::before, .ga-13 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-13 ::selection { background: rgba(249,115,22,.4); color: #fff; }

.ga-13 {
  --bg: #0a0510;
  --dur: 8s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 48px 24px;
  position: relative;
}

/* ── Single lava blob ── */
.ga-13__lamp {
  position: relative;
  width: 180px;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background: #100820;
  border: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

/* Container label */
.ga-13__lamp-label {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  z-index: 3;
}

/* Each blob is a div with morphing border-radius + position animation */
.ga-13__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}

/* ── Lamp A: Orange-pink ── */
.ga-13__lamp--a { background: #0d060a; }
.ga-13__lamp--a .ga-13__blob:nth-child(1) {
  width: 100px; height: 100px;
  background: radial-gradient(circle at 35% 40%, #ff6b2b, #ff2d7f);
  animation: ga-13-morph-a1 var(--dur) ease-in-out infinite, ga-13-float-a1 var(--dur) ease-in-out infinite;
  top: 60%; left: 40px;
}
.ga-13__lamp--a .ga-13__blob:nth-child(2) {
  width: 70px; height: 70px;
  background: radial-gradient(circle at 40% 35%, #ffab40, #ff5252);
  animation: ga-13-morph-a2 calc(var(--dur) * 1.3) ease-in-out infinite, ga-13-float-a2 calc(var(--dur) * 1.3) ease-in-out infinite;
  top: 20%; left: 55px;
  animation-delay: calc(var(--dur) * -.4);
}
.ga-13__lamp--a .ga-13__blob:nth-child(3) {
  width: 50px; height: 50px;
  background: radial-gradient(circle, #ff9d00, #ff3d00);
  animation: ga-13-morph-a2 calc(var(--dur) * .9) ease-in-out infinite, ga-13-float-a3 calc(var(--dur) * .9) ease-in-out infinite;
  top: 40%; left: 70px;
  animation-delay: calc(var(--dur) * -.65);
}
.ga-13__lamp--a .ga-13__lamp-label { color: #ff7b3a; }

/* ── Lamp B: Cyan-violet ── */
.ga-13__lamp--b { background: #050a12; }
.ga-13__lamp--b .ga-13__blob:nth-child(1) {
  width: 110px; height: 90px;
  background: radial-gradient(circle at 40% 45%, #00e5ff, #6c63ff);
  animation: ga-13-morph-b1 calc(var(--dur) * 1.1) ease-in-out infinite, ga-13-float-b1 calc(var(--dur) * 1.1) ease-in-out infinite;
  top: 55%; left: 35px;
}
.ga-13__lamp--b .ga-13__blob:nth-child(2) {
  width: 75px; height: 85px;
  background: radial-gradient(circle at 45% 35%, #18ffff, #7c4dff);
  animation: ga-13-morph-b2 calc(var(--dur) * .85) ease-in-out infinite, ga-13-float-b2 calc(var(--dur) * .85) ease-in-out infinite;
  top: 15%; left: 50px;
  animation-delay: calc(var(--dur) * -.3);
}
.ga-13__lamp--b .ga-13__blob:nth-child(3) {
  width: 45px; height: 55px;
  background: radial-gradient(circle, #64ffda, #536dfe);
  animation: ga-13-morph-b1 calc(var(--dur) * 1.4) ease-in-out infinite, ga-13-float-a3 calc(var(--dur) * 1.4) ease-in-out infinite;
  top: 35%; left: 60px;
  animation-delay: calc(var(--dur) * -.55);
}
.ga-13__lamp--b .ga-13__lamp-label { color: #00e5ff; }

/* ── Lamp C: Green-yellow ── */
.ga-13__lamp--c { background: #030d07; }
.ga-13__lamp--c .ga-13__blob:nth-child(1) {
  width: 95px; height: 105px;
  background: radial-gradient(circle at 38% 42%, #00e676, #ffea00);
  animation: ga-13-morph-c1 calc(var(--dur) * .95) ease-in-out infinite, ga-13-float-c1 calc(var(--dur) * .95) ease-in-out infinite;
  top: 58%; left: 42px;
}
.ga-13__lamp--c .ga-13__blob:nth-child(2) {
  width: 65px; height: 75px;
  background: radial-gradient(circle at 42% 38%, #b2ff59, #69f0ae);
  animation: ga-13-morph-c2 calc(var(--dur) * 1.2) ease-in-out infinite, ga-13-float-c2 calc(var(--dur) * 1.2) ease-in-out infinite;
  top: 18%; left: 58px;
  animation-delay: calc(var(--dur) * -.45);
}
.ga-13__lamp--c .ga-13__blob:nth-child(3) {
  width: 42px; height: 48px;
  background: radial-gradient(circle, #ccff90, #00c853);
  animation: ga-13-morph-c1 calc(var(--dur) * 1.5) ease-in-out infinite, ga-13-float-a1 calc(var(--dur) * 1.5) ease-in-out infinite;
  top: 38%; left: 68px;
  animation-delay: calc(var(--dur) * -.7);
}
.ga-13__lamp--c .ga-13__lamp-label { color: #69f0ae; }

/* Morph keyframes (border-radius) */
@keyframes ga-13-morph-a1 {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
  25%  { border-radius: 30% 70% 40% 60% / 60% 40% 70% 30%; }
  50%  { border-radius: 50% 50% 30% 70% / 40% 60% 50% 60%; }
  75%  { border-radius: 70% 30% 60% 40% / 30% 70% 40% 60%; }
  100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
}
@keyframes ga-13-morph-a2 {
  0%   { border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; }
  33%  { border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%; }
  66%  { border-radius: 30% 70% 40% 60% / 70% 30% 60% 40%; }
  100% { border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; }
}
@keyframes ga-13-morph-b1 {
  0%   { border-radius: 55% 45% 65% 35% / 45% 55% 45% 55%; }
  30%  { border-radius: 35% 65% 45% 55% / 65% 35% 65% 35%; }
  60%  { border-radius: 65% 35% 55% 45% / 35% 65% 35% 65%; }
  100% { border-radius: 55% 45% 65% 35% / 45% 55% 45% 55%; }
}
@keyframes ga-13-morph-b2 {
  0%   { border-radius: 45% 55% 35% 65% / 55% 45% 65% 35%; }
  40%  { border-radius: 65% 35% 55% 45% / 35% 65% 45% 55%; }
  80%  { border-radius: 35% 65% 45% 55% / 65% 35% 55% 45%; }
  100% { border-radius: 45% 55% 35% 65% / 55% 45% 65% 35%; }
}
@keyframes ga-13-morph-c1 {
  0%   { border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%; }
  35%  { border-radius: 70% 30% 40% 60% / 60% 40% 70% 30%; }
  70%  { border-radius: 40% 60% 70% 30% / 30% 70% 40% 60%; }
  100% { border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%; }
}
@keyframes ga-13-morph-c2 {
  0%   { border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%; }
  45%  { border-radius: 40% 60% 60% 40% / 60% 40% 50% 50%; }
  90%  { border-radius: 50% 50% 40% 60% / 40% 60% 60% 40%; }
  100% { border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%; }
}

/* Float keyframes (position) */
@keyframes ga-13-float-a1 {
  0%, 100% { top: 60%; }
  30%  { top: 10%; }
  60%  { top: 40%; }
}
@keyframes ga-13-float-a2 {
  0%, 100% { top: 18%; }
  40%  { top: 65%; }
  70%  { top: 25%; }
}
@keyframes ga-13-float-a3 {
  0%, 100% { top: 42%; }
  25%  { top: 5%; }
  55%  { top: 70%; }
  80%  { top: 30%; }
}
@keyframes ga-13-float-b1 {
  0%, 100% { top: 55%; left: 35px; }
  35%  { top: 8%; left: 45px; }
  65%  { top: 35%; left: 25px; }
}
@keyframes ga-13-float-b2 {
  0%, 100% { top: 15%; left: 50px; }
  45%  { top: 62%; left: 40px; }
  75%  { top: 22%; left: 55px; }
}
@keyframes ga-13-float-c1 {
  0%, 100% { top: 58%; }
  28%  { top: 6%; }
  58%  { top: 38%; }
}
@keyframes ga-13-float-c2 {
  0%, 100% { top: 18%; }
  38%  { top: 62%; }
  72%  { top: 28%; }
}

/* Speed toggle */
.ga-13__ctrl {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  gap: 5px;
}
.ga-13__ctrl-btn {
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.35);
  cursor: pointer;
  transition: all .2s;
}
.ga-13__ctrl-btn.active,
.ga-13__ctrl-btn:hover {
  background: rgba(249,115,22,.15);
  border-color: rgba(249,115,22,.35);
  color: #fb923c;
}

@media (prefers-reduced-motion: reduce) {
  .ga-13__blob { animation: none !important; border-radius: 50%; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-13');
  w.querySelectorAll('.ga-13__ctrl-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-13__ctrl-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.style.setProperty('--dur', btn.dataset.dur);
    });
  });
})();
```

### 14. CSS Striped Progress Bar Loader

**Type:** CSS + JS
**Description:** Five progress bar variants — indigo deploy, emerald storage, amber CPU, rose queue, plus an indeterminate loader — all using repeating-linear-gradient diagonal stripes that scroll infinitely across the fill to signal active loading status.

**HTML:**
```html
<div class="ga-14">

  <div class="ga-14__section-label">Standard bars</div>

  <div class="ga-14__bar">
    <div class="ga-14__bar-meta">
      <span class="ga-14__bar-label">Deploying to production</span>
      <span class="ga-14__bar-pct">72%</span>
    </div>
    <div class="ga-14__track">
      <div class="ga-14__fill ga-14__fill--indigo"></div>
    </div>
  </div>

  <div class="ga-14__bar">
    <div class="ga-14__bar-meta">
      <span class="ga-14__bar-label">Storage used</span>
      <span class="ga-14__bar-pct">45 / 100 GB</span>
    </div>
    <div class="ga-14__track ga-14__track--thin">
      <div class="ga-14__fill ga-14__fill--emerald"></div>
    </div>
  </div>

  <div class="ga-14__bar">
    <div class="ga-14__bar-meta">
      <span class="ga-14__bar-label">CPU utilisation</span>
      <span class="ga-14__bar-pct">88%</span>
    </div>
    <div class="ga-14__track ga-14__track--thick">
      <div class="ga-14__fill ga-14__fill--amber ga-14__fill--thick"></div>
    </div>
  </div>

  <div class="ga-14__bar">
    <div class="ga-14__bar-meta">
      <span class="ga-14__bar-label">Request queue</span>
      <span class="ga-14__bar-pct">31%</span>
    </div>
    <div class="ga-14__track">
      <div class="ga-14__fill ga-14__fill--rose"></div>
    </div>
  </div>

  <div class="ga-14__section-label">Indeterminate (unknown duration)</div>

  <div class="ga-14__bar">
    <div class="ga-14__bar-meta">
      <span class="ga-14__bar-label">Syncing cloud data…</span>
    </div>
    <div class="ga-14__track ga-14__track--indeterminate">
      <div class="ga-14__fill ga-14__fill--indeterminate"></div>
    </div>
  </div>

  <div class="ga-14__steps">
    <span class="ga-14__step ga-14__step--done">Build</span>
    <span class="ga-14__step ga-14__step--done">Test</span>
    <span class="ga-14__step ga-14__step--done">Package</span>
    <span class="ga-14__step">Deploy</span>
    <span class="ga-14__step">Verify</span>
  </div>

  <div class="ga-14__ctrl">
    <span class="ga-14__ctrl-label">Stripe speed:</span>
    <button class="ga-14__ctrl-btn" data-dur="1.5s">Slow</button>
    <button class="ga-14__ctrl-btn active" data-dur=".7s">Normal</button>
    <button class="ga-14__ctrl-btn" data-dur=".3s">Fast</button>
  </div>

</div>
```

**CSS:**
```css
.ga-14, .ga-14 *, .ga-14 *::before, .ga-14 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-14 ::selection { background: rgba(99,102,241,.4); color: #fff; }

.ga-14 {
  --bg: #0c0d16;
  --track: #1a1c2e;
  --dur-stripe: .7s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 48px 32px;
}

/* ── Progress bar shell ── */
.ga-14__bar {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ga-14__bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ga-14__bar-label {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
}
.ga-14__bar-pct {
  font-size: .7rem;
  font-weight: 800;
  color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
}

/* Track */
.ga-14__track {
  width: 100%;
  height: 14px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

/* Fill */
.ga-14__fill {
  height: 100%;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: width .4s ease;
}

/* Stripe overlay on fill using repeating-linear-gradient */
.ga-14__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.12) 0px,
    rgba(255,255,255,.12) 8px,
    transparent 8px,
    transparent 16px
  );
  background-size: 22.63px 22.63px; /* √(16²+16²) for perfect diagonal tiling */
  animation: ga-14-stripe var(--dur-stripe) linear infinite;
}

@keyframes ga-14-stripe {
  to { background-position: 22.63px 0; }
}

/* Colour variants */
.ga-14__fill--indigo {
  background: linear-gradient(90deg, #6366f1, #818cf8);
  width: 72%;
}
.ga-14__fill--emerald {
  background: linear-gradient(90deg, #059669, #34d399);
  width: 45%;
}
.ga-14__fill--amber {
  background: linear-gradient(90deg, #d97706, #fbbf24);
  width: 88%;
}
.ga-14__fill--rose {
  background: linear-gradient(90deg, #e11d48, #fb7185);
  width: 31%;
}
.ga-14__fill--cyan {
  background: linear-gradient(90deg, #0891b2, #22d3ee);
  width: 60%;
}

/* Thin track variant */
.ga-14__track--thin { height: 8px; }
.ga-14__track--thick { height: 20px; border-radius: 6px; }
.ga-14__fill--thick { border-radius: 4px; }

/* Indeterminate / infinite fill variant */
.ga-14__fill--indeterminate {
  width: 40%;
  position: absolute;
  animation: ga-14-indeterminate 1.8s ease-in-out infinite;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
}
@keyframes ga-14-indeterminate {
  0%   { left: -40%; }
  100% { left: 110%; }
}
.ga-14__fill--indeterminate::after { animation: none; }
.ga-14__track--indeterminate { overflow: hidden; position: relative; height: 10px; }

/* Step labels under bar */
.ga-14__steps {
  display: flex;
  justify-content: space-between;
  max-width: 540px;
  width: 100%;
}
.ga-14__step {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.2);
}
.ga-14__step--done { color: #818cf8; }

/* Section label */
.ga-14__section-label {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.2);
  width: 100%;
  max-width: 540px;
  margin-bottom: -20px;
}

/* speed control */
.ga-14__ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ga-14__ctrl-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.2);
}
.ga-14__ctrl-btn {
  padding: 4px 12px;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.35);
  cursor: pointer;
  transition: all .2s;
}
.ga-14__ctrl-btn.active,
.ga-14__ctrl-btn:hover {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.35);
  color: #a5b4fc;
}

@media (prefers-reduced-motion: reduce) {
  .ga-14__fill::after { animation: none; }
  .ga-14__fill--indeterminate { animation: none; left: 30%; }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-14');
  w.querySelectorAll('.ga-14__ctrl-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-14__ctrl-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.style.setProperty('--dur-stripe', btn.dataset.dur);
    });
  });
})();
```

### 15. CSS Active File Upload Streaming State

**Type:** CSS + JS
**Description:** A file upload UI showing three upload states — active uploading with a spinning conic-gradient border and shimmer progress fill, completed with a green fill, and failed with a red fill — plus a styled drop zone.

**HTML:**
```html
<div class="ga-15">

  <!-- Uploading -->
  <div class="ga-15__card ga-15__card--uploading">
    <div class="ga-15__card-inner">
      <div class="ga-15__file">
        <div class="ga-15__file-icon ga-15__file-icon--img">🖼</div>
        <div class="ga-15__file-info">
          <div class="ga-15__file-name">hero-banner-v3.png</div>
          <div class="ga-15__file-size">4.2 MB</div>
        </div>
        <span class="ga-15__file-action">✕</span>
      </div>
      <div class="ga-15__prog-row">
        <span class="ga-15__prog-status ga-15__prog-status--up">⟳ Uploading…</span>
        <span class="ga-15__prog-pct">63%</span>
      </div>
      <div class="ga-15__track">
        <div class="ga-15__fill ga-15__fill--up"></div>
      </div>
    </div>
  </div>

  <!-- Done -->
  <div class="ga-15__card ga-15__card--done">
    <div class="ga-15__card-inner">
      <div class="ga-15__file">
        <div class="ga-15__file-icon ga-15__file-icon--pdf">📄</div>
        <div class="ga-15__file-info">
          <div class="ga-15__file-name">proposal-final.pdf</div>
          <div class="ga-15__file-size">1.8 MB</div>
        </div>
        <span class="ga-15__file-action">✕</span>
      </div>
      <div class="ga-15__prog-row">
        <span class="ga-15__prog-status ga-15__prog-status--done">✓ Complete</span>
        <span class="ga-15__prog-pct">100%</span>
      </div>
      <div class="ga-15__track">
        <div class="ga-15__fill ga-15__fill--done"></div>
      </div>
    </div>
  </div>

  <!-- Error -->
  <div class="ga-15__card ga-15__card--error">
    <div class="ga-15__card-inner">
      <div class="ga-15__file">
        <div class="ga-15__file-icon ga-15__file-icon--zip">📦</div>
        <div class="ga-15__file-info">
          <div class="ga-15__file-name">assets-bundle.zip</div>
          <div class="ga-15__file-size">92.4 MB</div>
        </div>
        <span class="ga-15__file-action">↺</span>
      </div>
      <div class="ga-15__prog-row">
        <span class="ga-15__prog-status ga-15__prog-status--err">⚠ Failed</span>
        <span class="ga-15__prog-pct">40%</span>
      </div>
      <div class="ga-15__track">
        <div class="ga-15__fill ga-15__fill--err"></div>
      </div>
    </div>
  </div>

  <!-- Drop zone -->
  <div class="ga-15__drop">
    <span class="ga-15__drop-icon">⬆</span>
    <span class="ga-15__drop-text">Drop files here</span>
    <span class="ga-15__drop-sub">PNG, JPG, PDF, ZIP — max 100 MB</span>
  </div>

  <div class="ga-15__ctrl">
    <button class="ga-15__ctrl-btn" data-dur="4s">Slow</button>
    <button class="ga-15__ctrl-btn active" data-dur="2s">Normal</button>
    <button class="ga-15__ctrl-btn" data-dur=".8s">Fast</button>
  </div>
</div>
```

**CSS:**
```css
.ga-15, .ga-15 *, .ga-15 *::before, .ga-15 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-15 ::selection { background: rgba(6,182,212,.4); color: #fff; }

.ga-15 {
  --bg: #080d14;
  --card-bg: #0e1520;
  --dur: 2s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 48px 24px;
}

/* ── Upload card ── */
.ga-15__card {
  width: 280px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

/* Glowing border pulse on uploading card */
.ga-15__card--uploading::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: conic-gradient(
    from var(--r, 0deg),
    transparent 0deg,
    #06b6d4 60deg,
    #818cf8 120deg,
    transparent 180deg,
    transparent 360deg
  );
  animation: ga-15-spin var(--dur) linear infinite;
  z-index: 0;
}
.ga-15__card--uploading::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--card-bg);
  border-radius: 14px;
  z-index: 1;
}

@property --r {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes ga-15-spin {
  to { --r: 360deg; }
}

/* Idle card — static border */
.ga-15__card--idle {
  border: 1px solid rgba(255,255,255,.06);
}
/* Done card */
.ga-15__card--done {
  border: 1px solid rgba(16,185,129,.2);
}
.ga-15__card--error {
  border: 1px solid rgba(239,68,68,.2);
}

.ga-15__card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* File row */
.ga-15__file {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ga-15__file-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.ga-15__file-icon--img { background: rgba(99,102,241,.15); }
.ga-15__file-icon--pdf { background: rgba(239,68,68,.12); }
.ga-15__file-icon--zip { background: rgba(245,158,11,.12); }
.ga-15__file-info { flex: 1; min-width: 0; }
.ga-15__file-name {
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ga-15__file-size {
  font-size: .7rem;
  color: rgba(255,255,255,.3);
  margin-top: 2px;
}
.ga-15__file-action {
  font-size: .9rem;
  cursor: pointer;
  color: rgba(255,255,255,.25);
  transition: color .2s;
  flex-shrink: 0;
}
.ga-15__file-action:hover { color: rgba(255,255,255,.6); }

/* Progress row */
.ga-15__prog-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ga-15__prog-status {
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ga-15__prog-status--up { color: #67e8f9; }
.ga-15__prog-status--done { color: #34d399; }
.ga-15__prog-status--err { color: #f87171; }
.ga-15__prog-status--idle { color: rgba(255,255,255,.3); }
.ga-15__prog-pct {
  font-size: .7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.35);
}

/* Track */
.ga-15__track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  position: relative;
}
.ga-15__fill {
  height: 100%;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.ga-15__fill--up {
  background: linear-gradient(90deg, #0891b2, #22d3ee, #818cf8);
  width: 63%;
  animation: ga-15-fill-pulse var(--dur) ease-in-out infinite;
}
@keyframes ga-15-fill-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
/* Shimmer on uploading fill */
.ga-15__fill--up::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  animation: ga-15-shimmer 1.2s linear infinite;
}
@keyframes ga-15-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}

.ga-15__fill--done { background: #10b981; width: 100%; }
.ga-15__fill--err  { background: #ef4444; width: 40%; }
.ga-15__fill--idle { background: rgba(255,255,255,.12); width: 0%; }

/* Upload dropzone */
.ga-15__drop {
  width: 280px;
  height: 160px;
  border-radius: 14px;
  border: 1.5px dashed rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.ga-15__drop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6,182,212,.06), rgba(99,102,241,.06));
  opacity: 0;
  transition: opacity .25s;
}
.ga-15__drop:hover { border-color: rgba(6,182,212,.35); }
.ga-15__drop:hover::before { opacity: 1; }
.ga-15__drop-icon { font-size: 1.6rem; }
.ga-15__drop-text {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
}
.ga-15__drop-sub {
  font-size: .68rem;
  color: rgba(255,255,255,.2);
}

/* Speed control */
.ga-15__ctrl {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 5px;
}
.ga-15 { position: relative; }
.ga-15__ctrl-btn {
  padding: 4px 10px;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.3);
  cursor: pointer;
  transition: all .2s;
}
.ga-15__ctrl-btn.active,
.ga-15__ctrl-btn:hover {
  background: rgba(6,182,212,.12);
  border-color: rgba(6,182,212,.3);
  color: #67e8f9;
}

@media (prefers-reduced-motion: reduce) {
  .ga-15__card--uploading::before { animation: none; }
  .ga-15__fill--up, .ga-15__fill--up::after { animation: none; }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-15');
  w.querySelectorAll('.ga-15__ctrl-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-15__ctrl-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.style.setProperty('--dur', btn.dataset.dur);
    });
  });
})();
```

### 16. CSS Toggle Switch Track Glow

**Type:** CSS + JS
**Description:** A settings panel with five checkbox-driven toggle switches where activating each switch floods the track with a continuously flowing gradient stream and emits a soft outer glow — all driven by the CSS :checked pseudo-class with zero JavaScript in the toggle logic.

**HTML:**
```html
<div class="ga-16">
  <div class="ga-16__card">
    <div class="ga-16__card-head">
      <div>
        <div class="ga-16__card-title">Notification Settings</div>
      </div>
      <span class="ga-16__card-sub">App v4.2</span>
    </div>

    <div class="ga-16__card-body">

      <div class="ga-16__row">
        <div class="ga-16__row-info">
          <span class="ga-16__row-label">Push notifications</span>
          <span class="ga-16__row-desc">Get alerts on your device in real time</span>
        </div>
        <label class="ga-16__toggle">
          <input type="checkbox" checked>
          <span class="ga-16__track"></span>
          <span class="ga-16__knob"></span>
        </label>
      </div>

      <div class="ga-16__row">
        <div class="ga-16__row-info">
          <span class="ga-16__row-label">Activity digest</span>
          <span class="ga-16__row-desc">Weekly summary of your workspace</span>
        </div>
        <label class="ga-16__toggle ga-16__toggle--emerald">
          <input type="checkbox">
          <span class="ga-16__track"></span>
          <span class="ga-16__knob"></span>
        </label>
      </div>

      <div class="ga-16__row">
        <div class="ga-16__row-info">
          <span class="ga-16__row-label">Security alerts</span>
          <span class="ga-16__row-desc">Notify on login from new devices</span>
        </div>
        <label class="ga-16__toggle ga-16__toggle--rose">
          <input type="checkbox" checked>
          <span class="ga-16__track"></span>
          <span class="ga-16__knob"></span>
        </label>
      </div>

      <div class="ga-16__row">
        <div class="ga-16__row-info">
          <span class="ga-16__row-label">Usage reports</span>
          <span class="ga-16__row-desc">Monthly billing and quota updates</span>
        </div>
        <label class="ga-16__toggle ga-16__toggle--amber">
          <input type="checkbox">
          <span class="ga-16__track"></span>
          <span class="ga-16__knob"></span>
        </label>
      </div>

      <div class="ga-16__row">
        <div class="ga-16__row-info">
          <span class="ga-16__row-label">Product updates</span>
          <span class="ga-16__row-desc">New features and release notes</span>
        </div>
        <label class="ga-16__toggle ga-16__toggle--cyan">
          <input type="checkbox" checked>
          <span class="ga-16__track"></span>
          <span class="ga-16__knob"></span>
        </label>
      </div>

    </div>

    <div class="ga-16__ctrl">
      <span class="ga-16__ctrl-label">Flow speed:</span>
      <button class="ga-16__ctrl-btn" data-dur="4s">Slow</button>
      <button class="ga-16__ctrl-btn active" data-dur="2s">Normal</button>
      <button class="ga-16__ctrl-btn" data-dur=".8s">Fast</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ga-16, .ga-16 *, .ga-16 *::before, .ga-16 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ga-16 ::selection { background: rgba(99,102,241,.4); color: #fff; }

.ga-16 {
  --bg: #090b12;
  --card-bg: #0f1120;
  --dur: 2s;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* Settings card */
.ga-16__card {
  width: 100%;
  max-width: 440px;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  overflow: hidden;
}
.ga-16__card-head {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ga-16__card-title {
  font-size: .88rem;
  font-weight: 800;
  color: rgba(255,255,255,.8);
}
.ga-16__card-sub {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,.25);
  letter-spacing: .04em;
}
.ga-16__card-body {
  display: flex;
  flex-direction: column;
}

/* ── Row ── */
.ga-16__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .2s;
}
.ga-16__row:last-child { border-bottom: none; }
.ga-16__row:hover { background: rgba(255,255,255,.02); }

.ga-16__row-info { display: flex; flex-direction: column; gap: 3px; }
.ga-16__row-label {
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}
.ga-16__row-desc {
  font-size: .7rem;
  color: rgba(255,255,255,.28);
  line-height: 1.4;
}

/* ── Toggle switch ── */
.ga-16__toggle {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Hidden checkbox */
.ga-16__toggle input {
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}

/* Track */
.ga-16__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  transition: background .3s ease;
  overflow: hidden;
}

/* Flowing gradient inside track — visible when checked */
.ga-16__track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--tc1, #6366f1),
    var(--tc2, #a855f7),
    var(--tc3, #06b6d4),
    var(--tc1, #6366f1)
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .35s ease;
  animation: ga-16-flow var(--dur) linear infinite;
}

@keyframes ga-16-flow {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* Glow behind track */
.ga-16__track::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tc1, #6366f1), var(--tc2, #a855f7), var(--tc3, #06b6d4));
  filter: blur(8px);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}

/* Knob */
.ga-16__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  z-index: 1;
}

/* Checked state */
input:checked ~ .ga-16__track::before { opacity: 1; }
input:checked ~ .ga-16__track::after  { opacity: .4; }
input:checked ~ .ga-16__knob {
  transform: translateX(24px);
  box-shadow: 0 1px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.1);
}

/* Colour themes per row */
.ga-16__toggle--emerald { --tc1: #059669; --tc2: #10b981; --tc3: #34d399; }
.ga-16__toggle--rose    { --tc1: #e11d48; --tc2: #f43f5e; --tc3: #fb7185; }
.ga-16__toggle--amber   { --tc1: #d97706; --tc2: #f59e0b; --tc3: #fbbf24; }
.ga-16__toggle--cyan    { --tc1: #0891b2; --tc2: #06b6d4; --tc3: #22d3ee; }

/* Focus ring */
.ga-16__toggle input:focus-visible ~ .ga-16__knob {
  outline: 2px solid rgba(99,102,241,.7);
  outline-offset: 2px;
}

/* Speed control */
.ga-16__ctrl {
  margin-top: 8px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.ga-16__ctrl-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.2);
  margin-right: 4px;
}
.ga-16__ctrl-btn {
  padding: 4px 11px;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.3);
  cursor: pointer;
  transition: all .2s;
}
.ga-16__ctrl-btn.active,
.ga-16__ctrl-btn:hover {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.35);
  color: #a5b4fc;
}

@media (prefers-reduced-motion: reduce) {
  .ga-16__track::before { animation: none; background-position: 0% 0; }
  .ga-16__knob { transition: transform .2s, box-shadow .2s; }
}
```

**JS:**
```js
(function() {
  const w = document.querySelector('.ga-16');
  w.querySelectorAll('.ga-16__ctrl-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      w.querySelectorAll('.ga-16__ctrl-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      w.style.setProperty('--dur', btn.dataset.dur);
    });
  });
})();
```

---
## 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');
    });
  });
}());
```

---
## 20 CSS Image Hover Effects

URL: https://codefronts.com/motion/css-image-hover-effects/
Description: 20 hand-coded CSS image hover effects with live demos — zoom-in card, hover reveal text overlay, e-commerce product image swap, grid blur overlay, slide-up caption, grayscale-to-color, color tint overlay, neumorphic image card, glassmorphism overlay, glowing neon border, clip-path morphing, 3D tilt perspective, shining glare sweep, split transition, ripple animation, spinning avatar border, fullscreen background swap, masonry zoom, icon reveal centre, and 3D card flip. 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline techniques, prefers-reduced-motion honoured, CLS-safe via aspect-ratio, WCAG 2.2 AA compliant, MIT licensed.
Demo count: 20

### 01. CSS Image Hover Zoom In Card

**Type:** Pure CSS
**Description:** The classic card micro-interaction where the image scales up inside its clipped container boundary without shifting the surrounding grid.

**HTML:**
```html
<div class="ih-01">
  <div class="ih-01__grid">
    <div class="ih-01__card">
      <div class="ih-01__img-wrap">
        <div class="ih-01__img ih-01__img--1">
          <div class="ih-01__img-inner"><span class="ih-01__img-icon">🔭</span></div>
        </div>
      </div>
      <div class="ih-01__body">
        <p class="ih-01__cat">Explore</p>
        <p class="ih-01__title">Deep Space Observatory</p>
        <p class="ih-01__meta">12 min read · Cosmos</p>
      </div>
    </div>
    <div class="ih-01__card">
      <div class="ih-01__img-wrap">
        <div class="ih-01__img ih-01__img--2">
          <div class="ih-01__img-inner"><span class="ih-01__img-icon">🌿</span></div>
        </div>
      </div>
      <div class="ih-01__body">
        <p class="ih-01__cat">Nature</p>
        <p class="ih-01__title">Ancient Forest Canopy</p>
        <p class="ih-01__meta">8 min read · Biology</p>
      </div>
    </div>
    <div class="ih-01__card">
      <div class="ih-01__img-wrap">
        <div class="ih-01__img ih-01__img--3">
          <div class="ih-01__img-inner"><span class="ih-01__img-icon">💎</span></div>
        </div>
      </div>
      <div class="ih-01__body">
        <p class="ih-01__cat">Design</p>
        <p class="ih-01__title">Crystal Formations</p>
        <p class="ih-01__meta">5 min read · Art</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-01, .ih-01 *, .ih-01 *::before, .ih-01 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ih-01 ::selection { background: #7c3aed; color: #fff; }

.ih-01 {
  --accent: #7c3aed;
  --accent2: #06b6d4;
  --bg: #0f0f13;
  --card-bg: #1a1a24;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --radius: 16px;
  --zoom: 1.12;
  --duration: 0.45s;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  padding: 40px 24px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ih-01__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 780px;
  width: 100%;
}

/* The key trick: overflow:hidden on card clips the zooming image */
.ih-01__card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
  cursor: pointer;
}

.ih-01__card:hover {
  box-shadow: 0 20px 60px rgba(124,58,237,0.25);
  border-color: rgba(124,58,237,0.35);
}

.ih-01__img-wrap {
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}

/* The image itself scales — overflow:hidden on parent does the crop */
.ih-01__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--ease);
  display: block;
  background: linear-gradient(135deg, #1e1e2e, #2d1b69);
}

.ih-01__card:hover .ih-01__img {
  transform: scale(var(--zoom));
}

/* Decorative gradient placeholder images */
.ih-01__img--1 { background: linear-gradient(135deg, #1a0533 0%, #4c1d95 50%, #0891b2 100%); }
.ih-01__img--2 { background: linear-gradient(135deg, #0c1a2e 0%, #1e3a5f 50%, #065f46 100%); }
.ih-01__img--3 { background: linear-gradient(135deg, #1a0a1e 0%, #6b21a8 50%, #be185d 100%); }

.ih-01__img-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.ih-01__img-icon {
  font-size: 48px;
  opacity: 0.4;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.ih-01__card:hover .ih-01__img-icon {
  transform: scale(0.88);
  opacity: 0.25;
}

.ih-01__body {
  padding: 16px;
}

.ih-01__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 6px;
}

.ih-01__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.ih-01__meta {
  font-size: 12px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .ih-01__img,
  .ih-01__img-icon,
  .ih-01__card {
    transition: none;
  }
}
```

### 02. CSS Hover Reveal Text Over Image

**Type:** Pure CSS
**Description:** Portfolio-grid technique where a title and description fade and slide in over an image on mouseover via layered opacity and translateY transitions.

**HTML:**
```html
<div class="ih-02">
  <div class="ih-02__grid">
    <div class="ih-02__card">
      <div class="ih-02__img ih-02__img--1">
        <span class="ih-02__emoji">🌌</span>
      </div>
      <span class="ih-02__badge">Portfolio</span>
      <div class="ih-02__overlay">
        <p class="ih-02__tag">Astrophotography</p>
        <p class="ih-02__name">Nebula Series Vol. 3</p>
        <p class="ih-02__sub">Shot over 14 nights in the Chilean Atacama desert</p>
      </div>
    </div>
    <div class="ih-02__card">
      <div class="ih-02__img ih-02__img--2">
        <span class="ih-02__emoji">🏙️</span>
      </div>
      <span class="ih-02__badge">Architecture</span>
      <div class="ih-02__overlay">
        <p class="ih-02__tag">Urban Design</p>
        <p class="ih-02__name">Midnight Cityscapes</p>
        <p class="ih-02__sub">Long exposure study of downtown light trails</p>
      </div>
    </div>
    <div class="ih-02__card">
      <div class="ih-02__img ih-02__img--3">
        <span class="ih-02__emoji">🔮</span>
      </div>
      <span class="ih-02__badge">Abstract</span>
      <div class="ih-02__overlay">
        <p class="ih-02__tag">Digital Art</p>
        <p class="ih-02__name">Prism Light Study</p>
        <p class="ih-02__sub">Generative colour diffraction experiments</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-02, .ih-02 *, .ih-02 *::before, .ih-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ih-02 ::selection { background: #06b6d4; color: #000; }

.ih-02 {
  --accent: #06b6d4;
  --accent2: #a78bfa;
  --bg: #09090f;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --duration: 0.4s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  padding: 40px 24px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ih-02__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 780px;
  width: 100%;
}

.ih-02__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
}

/* Gradient placeholder images */
.ih-02__img {
  width: 100%; height: 100%;
  transition: transform var(--duration) var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.ih-02__img--1 { background: linear-gradient(160deg,#0f0c29,#302b63,#24243e); }
.ih-02__img--2 { background: linear-gradient(160deg,#0f2027,#203a43,#2c5364); }
.ih-02__img--3 { background: linear-gradient(160deg,#1a0533,#4a044e,#2d1b69); }

.ih-02__card:hover .ih-02__img {
  transform: scale(1.08);
}

.ih-02__emoji {
  font-size: 56px;
  opacity: 0.35;
  transition: opacity var(--duration) var(--ease);
}
.ih-02__card:hover .ih-02__emoji {
  opacity: 0.1;
}

/* The overlay fades in and text slides up */
.ih-02__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 16px;
}

.ih-02__card:hover .ih-02__overlay {
  opacity: 1;
}

.ih-02__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  transform: translateY(12px);
  transition: transform var(--duration) var(--ease);
}

.ih-02__card:hover .ih-02__tag { transform: translateY(0); }

.ih-02__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  transform: translateY(16px);
  transition: transform calc(var(--duration) * 1.1) var(--ease);
}

.ih-02__card:hover .ih-02__name { transform: translateY(0); }

.ih-02__sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform calc(var(--duration) * 1.2) var(--ease),
              opacity calc(var(--duration) * 1.2) var(--ease);
}

.ih-02__card:hover .ih-02__sub {
  transform: translateY(0);
  opacity: 1;
}

/* Static label when not hovered (accessibility) */
.ih-02__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .ih-02__img,
  .ih-02__overlay,
  .ih-02__tag,
  .ih-02__name,
  .ih-02__sub,
  .ih-02__emoji {
    transition: none;
  }
  .ih-02__overlay { opacity: 1; }
  .ih-02__tag, .ih-02__name, .ih-02__sub { transform: none; opacity: 1; }
}
```

### 03. E-Commerce Product Image Swap on Hover

**Type:** Pure CSS
**Description:** Shopping-grid hover that cross-fades between a primary product angle and a secondary lifestyle image using stacked absolute elements.

**HTML:**
```html
<div class="ih-03">
  <div class="ih-03__grid">
    <div class="ih-03__card">
      <div class="ih-03__img-wrap">
        <div class="ih-03__img-primary ih-03__img--1a"><span class="ih-03__emoji">👟</span></div>
        <div class="ih-03__img-secondary ih-03__img--1b"><span class="ih-03__emoji">👟</span></div>
        <span class="ih-03__swap-badge">Hover</span>
      </div>
      <div class="ih-03__body">
        <p class="ih-03__name">AeroStep Pro Runner</p>
        <div class="ih-03__price-row">
          <span class="ih-03__price">$129</span>
          <span class="ih-03__old-price">$189</span>
        </div>
        <div class="ih-03__swatches">
          <span class="ih-03__swatch" style="background:#4338ca"></span>
          <span class="ih-03__swatch" style="background:#38bdf8"></span>
          <span class="ih-03__swatch" style="background:#f59e0b"></span>
        </div>
      </div>
    </div>
    <div class="ih-03__card">
      <div class="ih-03__img-wrap">
        <div class="ih-03__img-primary ih-03__img--2a"><span class="ih-03__emoji">👜</span></div>
        <div class="ih-03__img-secondary ih-03__img--2b"><span class="ih-03__emoji">👜</span></div>
        <span class="ih-03__swap-badge">Hover</span>
      </div>
      <div class="ih-03__body">
        <p class="ih-03__name">Nomad Leather Tote</p>
        <div class="ih-03__price-row">
          <span class="ih-03__price">$249</span>
          <span class="ih-03__old-price">$320</span>
        </div>
        <div class="ih-03__swatches">
          <span class="ih-03__swatch" style="background:#92400e"></span>
          <span class="ih-03__swatch" style="background:#4ade80"></span>
          <span class="ih-03__swatch" style="background:#e5e7eb"></span>
        </div>
      </div>
    </div>
    <div class="ih-03__card">
      <div class="ih-03__img-wrap">
        <div class="ih-03__img-primary ih-03__img--3a"><span class="ih-03__emoji">⌚</span></div>
        <div class="ih-03__img-secondary ih-03__img--3b"><span class="ih-03__emoji">⌚</span></div>
        <span class="ih-03__swap-badge">Hover</span>
      </div>
      <div class="ih-03__body">
        <p class="ih-03__name">Vertex Titanium Watch</p>
        <div class="ih-03__price-row">
          <span class="ih-03__price">$589</span>
          <span class="ih-03__old-price">$750</span>
        </div>
        <div class="ih-03__swatches">
          <span class="ih-03__swatch" style="background:#9ca3af"></span>
          <span class="ih-03__swatch" style="background:#f87171"></span>
          <span class="ih-03__swatch" style="background:#fbbf24"></span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-03, .ih-03 *, .ih-03 *::before, .ih-03 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ih-03 ::selection { background: #f59e0b; color: #000; }

.ih-03 {
  --accent: #f59e0b;
  --accent2: #10b981;
  --bg: #0d0d11;
  --card-bg: #16161f;
  --text: #f1f5f9;
  --muted: #64748b;
  --border: rgba(255,255,255,0.07);
  --duration: 0.5s;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  padding: 40px 24px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ih-03__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 780px;
  width: 100%;
}

.ih-03__card {
  background: var(--card-bg);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.ih-03__card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.ih-03__img-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

/* Primary and secondary images stacked */
.ih-03__img-primary,
.ih-03__img-secondary {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--duration) cubic-bezier(0.4, 0, 0.2, 1),
              transform var(--duration) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primary visible by default */
.ih-03__img-primary {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* Secondary hidden by default */
.ih-03__img-secondary {
  opacity: 0;
  transform: scale(1.04);
  z-index: 2;
}

/* On hover: fade primary out, secondary in */
.ih-03__card:hover .ih-03__img-primary {
  opacity: 0;
  transform: scale(0.96);
}
.ih-03__card:hover .ih-03__img-secondary {
  opacity: 1;
  transform: scale(1);
}

/* Colour swatches as stand-ins for product angles */
.ih-03__img--1a { background: linear-gradient(135deg, #1e1b4b, #312e81, #4338ca); }
.ih-03__img--1b { background: linear-gradient(135deg, #0c4a6e, #0369a1, #38bdf8); }
.ih-03__img--2a { background: linear-gradient(135deg, #1a1007, #451a03, #92400e); }
.ih-03__img--2b { background: linear-gradient(135deg, #052e16, #166534, #4ade80); }
.ih-03__img--3a { background: linear-gradient(135deg, #1f1f2e, #374151, #9ca3af); }
.ih-03__img--3b { background: linear-gradient(135deg, #310a0a, #7f1d1d, #f87171); }

.ih-03__emoji { font-size: 52px; opacity: 0.5; }

.ih-03__swap-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 10;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.25s;
}

.ih-03__card:hover .ih-03__swap-badge { opacity: 0; }

.ih-03__body {
  padding: 14px 16px;
}

.ih-03__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.ih-03__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ih-03__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.ih-03__old-price {
  font-size: 11px;
  color: var(--muted);
  text-decoration: line-through;
}

.ih-03__swatches {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.ih-03__swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
}

@media (prefers-reduced-motion: reduce) {
  .ih-03__img-primary, .ih-03__img-secondary, .ih-03__swap-badge { transition: none; }
}
```

### 04. CSS Grid Image Blur Overlay Text Hover

**Type:** Pure CSS
**Description:** Visually soft hover where the background image blurs under a dark overlay via backdrop-filter to make typography legible.

**HTML:**
```html
<div class="ih-04">
  <div class="ih-04__grid">
    <div class="ih-04__card">
      <div class="ih-04__bg ih-04__bg--1"></div>
      <span class="ih-04__emoji">🌌</span>
      <div class="ih-04__overlay">
        <p class="ih-04__cat">Editorial</p>
        <p class="ih-04__title">The Infinite Canvas</p>
        <p class="ih-04__desc">Exploring the boundaries of digital art in 2025</p>
      </div>
    </div>
    <div class="ih-04__card">
      <div class="ih-04__bg ih-04__bg--2"></div>
      <span class="ih-04__emoji">🌿</span>
      <div class="ih-04__overlay">
        <p class="ih-04__cat">Nature</p>
        <p class="ih-04__title">Bioluminescent Depths</p>
        <p class="ih-04__desc">Life thriving in the ocean's twilight zone</p>
      </div>
    </div>
    <div class="ih-04__card">
      <div class="ih-04__bg ih-04__bg--3"></div>
      <span class="ih-04__emoji">✨</span>
      <div class="ih-04__overlay">
        <p class="ih-04__cat">Culture</p>
        <p class="ih-04__title">Neon Flux Collection</p>
        <p class="ih-04__desc">Street art meets future-forward design aesthetics</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-04, .ih-04 *, .ih-04 *::before, .ih-04 *::after { margin:0;padding:0;box-sizing:border-box; }
.ih-04 ::selection { background:#8b5cf6;color:#fff; }
.ih-04 {
  --accent:#8b5cf6; --bg:#080810; --text:#f1f5f9; --muted:#94a3b8;
  --duration:0.4s; --ease:cubic-bezier(0.25,0.46,0.45,0.94);
  font-family:system-ui,sans-serif; background:var(--bg); padding:40px 24px;
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
}
.ih-04__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:780px; width:100%; }
.ih-04__card { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4; cursor:pointer; }
.ih-04__bg { position:absolute; inset:0; transition:filter var(--duration) var(--ease), transform var(--duration) var(--ease); }
.ih-04__bg--1 { background:linear-gradient(135deg,#0f0c29,#302b63,#24243e); }
.ih-04__bg--2 { background:linear-gradient(135deg,#0a3d2e,#155e43,#6ee7b7); }
.ih-04__bg--3 { background:linear-gradient(135deg,#1a0010,#6b1d4e,#e879f9); }
.ih-04__emoji { position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); font-size:60px; opacity:0.35; transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
/* backdrop-filter blur on overlay — applied to the ::before pseudo so it blurs the sibling bg */
.ih-04__overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,0);
  /* We use backdrop-filter on the overlay itself */
  backdrop-filter:blur(0px) brightness(1);
  -webkit-backdrop-filter:blur(0px) brightness(1);
  transition:backdrop-filter var(--duration) var(--ease),
             -webkit-backdrop-filter var(--duration) var(--ease),
             background var(--duration) var(--ease);
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px;
}
.ih-04__card:hover .ih-04__bg { transform:scale(1.05); }
.ih-04__card:hover .ih-04__emoji { opacity:0.08; transform:translate(-50%,-60%) scale(1.2); }
.ih-04__card:hover .ih-04__overlay {
  backdrop-filter:blur(8px) brightness(0.6);
  -webkit-backdrop-filter:blur(8px) brightness(0.6);
  background:rgba(0,0,0,0.15);
}
.ih-04__cat { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; opacity:0; transform:translateY(10px); transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
.ih-04__title { font-size:15px; font-weight:700; color:var(--text); line-height:1.3; opacity:0; transform:translateY(12px); transition:opacity calc(var(--duration)*1.1) var(--ease), transform calc(var(--duration)*1.1) var(--ease); }
.ih-04__desc { font-size:11px; color:var(--muted); margin-top:5px; opacity:0; transform:translateY(14px); transition:opacity calc(var(--duration)*1.2) var(--ease), transform calc(var(--duration)*1.2) var(--ease); }
.ih-04__card:hover .ih-04__cat, .ih-04__card:hover .ih-04__title, .ih-04__card:hover .ih-04__desc { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .ih-04__bg,.ih-04__overlay,.ih-04__cat,.ih-04__title,.ih-04__desc,.ih-04__emoji { transition:none; }
  .ih-04__overlay { backdrop-filter:blur(8px) brightness(0.6); }
  .ih-04__cat,.ih-04__title,.ih-04__desc { opacity:1; transform:none; }
}
```

### 05. CSS Card Slide Up Caption on Hover

**Type:** Pure CSS
**Description:** A caption panel anchored at the bottom that slides up into view from below the image frame, revealing metadata and a category pill.

**HTML:**
```html
<div class="ih-05">
  <div class="ih-05__grid">
    <div class="ih-05__card">
      <div class="ih-05__img ih-05__img--1"><span class="ih-05__icon">🎵</span></div>
      <div class="ih-05__caption">
        <div class="ih-05__peek"><span class="ih-05__dot"></span>Synthwave</div>
        <p class="ih-05__title">Neon Highways</p>
        <p class="ih-05__meta">A 12-track journey through retro-futuristic soundscapes and pulsing basslines</p>
        <span class="ih-05__pill">New Album</span>
      </div>
    </div>
    <div class="ih-05__card">
      <div class="ih-05__img ih-05__img--2"><span class="ih-05__icon">🌊</span></div>
      <div class="ih-05__caption">
        <div class="ih-05__peek"><span class="ih-05__dot"></span>Ambient</div>
        <p class="ih-05__title">Ocean Mind</p>
        <p class="ih-05__meta">Meditative binaural compositions recorded at the Faroe Islands coastline</p>
        <span class="ih-05__pill">EP Release</span>
      </div>
    </div>
    <div class="ih-05__card">
      <div class="ih-05__img ih-05__img--3"><span class="ih-05__icon">🔮</span></div>
      <div class="ih-05__caption">
        <div class="ih-05__peek"><span class="ih-05__dot"></span>Electronic</div>
        <p class="ih-05__title">Violet Frequencies</p>
        <p class="ih-05__meta">Experimental club music blending modular synthesis and jazz improvisation</p>
        <span class="ih-05__pill">Single</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-05,.ih-05 *,.ih-05 *::before,.ih-05 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-05 ::selection{background:#f472b6;color:#000}
.ih-05{
  --accent:#f472b6;--accent2:#818cf8;--bg:#0a0a10;--card:#141420;--text:#f1f5f9;--muted:#64748b;
  --duration:0.4s;--ease:cubic-bezier(0.16,1,0.3,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-05__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:780px;width:100%}
.ih-05__card{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;cursor:pointer;
  background:var(--card);border:1px solid rgba(255,255,255,0.05);
}
.ih-05__img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--duration) var(--ease)}
.ih-05__img--1{background:linear-gradient(150deg,#0d0d1a 0%,#1e1b4b 60%,#312e81 100%)}
.ih-05__img--2{background:linear-gradient(150deg,#042f2e 0%,#0f766e 60%,#2dd4bf 100%)}
.ih-05__img--3{background:linear-gradient(150deg,#1a0626 0%,#6b21a8 60%,#c084fc 100%)}
.ih-05__card:hover .ih-05__img{transform:scale(1.06) translateY(-4px)}
.ih-05__icon{font-size:56px;opacity:0.35;transition:opacity var(--duration) var(--ease)}
.ih-05__card:hover .ih-05__icon{opacity:0.12}

/* The caption panel slides up from the bottom */
.ih-05__caption{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
  padding:40px 16px 16px;
  transform:translateY(calc(100% - 44px));
  transition:transform var(--duration) var(--ease);
}
.ih-05__card:hover .ih-05__caption{transform:translateY(0)}

.ih-05__peek{
  font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.ih-05__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.ih-05__title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.ih-05__meta{font-size:11px;color:var(--muted);line-height:1.5}
.ih-05__pill{
  display:inline-block;margin-top:8px;padding:3px 8px;border-radius:20px;
  background:rgba(244,114,182,0.15);border:1px solid rgba(244,114,182,0.3);
  font-size:10px;font-weight:700;color:var(--accent);letter-spacing:0.06em;
}

@media(prefers-reduced-motion:reduce){
  .ih-05__img,.ih-05__icon,.ih-05__caption{transition:none}
  .ih-05__caption{transform:none}
}
```

### 06. CSS Grayscale to Color Image Hover

**Type:** Pure CSS
**Description:** Team-bio technique where images start in desaturated grayscale and animate to full colour with a slight saturation boost on hover.

**HTML:**
```html
<div class="ih-06">
  <div class="ih-06__grid">
    <div class="ih-06__card">
      <div class="ih-06__img ih-06__img--1"><span class="ih-06__emoji">👩‍💻</span></div>
      <div class="ih-06__info">
        <p class="ih-06__name">Aria Chen</p>
        <p class="ih-06__role">Lead Engineer</p>
      </div>
    </div>
    <div class="ih-06__card">
      <div class="ih-06__img ih-06__img--2"><span class="ih-06__emoji">👨‍🎨</span></div>
      <div class="ih-06__info">
        <p class="ih-06__name">Marcus Webb</p>
        <p class="ih-06__role">Creative Director</p>
      </div>
    </div>
    <div class="ih-06__card">
      <div class="ih-06__img ih-06__img--3"><span class="ih-06__emoji">👩‍🔬</span></div>
      <div class="ih-06__info">
        <p class="ih-06__name">Priya Nair</p>
        <p class="ih-06__role">Research Scientist</p>
      </div>
    </div>
    <div class="ih-06__card">
      <div class="ih-06__img ih-06__img--4"><span class="ih-06__emoji">👨‍💼</span></div>
      <div class="ih-06__info">
        <p class="ih-06__name">Leo Santos</p>
        <p class="ih-06__role">Product Strategist</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-06,.ih-06 *,.ih-06 *::before,.ih-06 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-06 ::selection{background:#22d3ee;color:#000}
.ih-06{
  --accent:#22d3ee;--bg:#09090f;--text:#f1f5f9;--muted:#475569;
  --duration:0.55s;--ease:cubic-bezier(0.25,0.46,0.45,0.94);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-06__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:780px;width:100%}
.ih-06__card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:3/4}
/* filter:grayscale() + saturate() is the key technique — hardware accelerated */
.ih-06__img{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(1) brightness(0.75) saturate(0);
  transition:filter var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.ih-06__card:hover .ih-06__img{filter:grayscale(0) brightness(1) saturate(1.2);transform:scale(1.04)}
.ih-06__img--1{background: linear-gradient(135deg,#1e3a5f,#1e40af,#3b82f6,#93c5fd)}
.ih-06__img--2{background: linear-gradient(135deg,#431407,#9a3412,#ef4444,#fca5a5)}
.ih-06__img--3{background: linear-gradient(135deg,#064e3b,#065f46,#10b981,#6ee7b7)}
.ih-06__img--4{background: linear-gradient(135deg,#3b0764,#7e22ce,#a855f7,#e9d5ff)}
.ih-06__emoji{font-size:52px;opacity:0.6;filter:grayscale(1);transition:filter var(--duration) var(--ease)}
.ih-06__card:hover .ih-06__emoji{filter:grayscale(0)}
.ih-06__info{position:absolute;bottom:0;left:0;right:0;padding:12px;background:linear-gradient(to top,rgba(0,0,0,0.8),transparent)}
.ih-06__name{font-size:12px;font-weight:700;color:var(--text)}
.ih-06__role{font-size:10px;color:var(--muted);margin-top:2px;transition:color var(--duration) var(--ease)}
.ih-06__card:hover .ih-06__role{color:var(--accent)}
/* Coloured border reveal on hover */
.ih-06__card::after{
  content:'';position:absolute;inset:0;border-radius:10px;
  border:2px solid transparent;
  transition:border-color var(--duration) var(--ease);
  pointer-events:none;
}
.ih-06__card:hover::after{border-color:rgba(34,211,238,0.4)}
@media(prefers-reduced-motion:reduce){.ih-06__img,.ih-06__emoji,.ih-06__role,.ih-06__card::after{transition:none}.ih-06__img{filter:none}}
```

### 07. CSS Image Color Overlay Tint on Hover

**Type:** Pure CSS
**Description:** Brand-tint hover where a per-card accent colour washes over a neutral image using mix-blend-mode to preserve the underlying texture.

**HTML:**
```html
<div class="ih-07">
  <div class="ih-07__grid">
    <div class="ih-07__card">
      <div class="ih-07__img ih-07__img--1"><span class="ih-07__icon">🏗️</span></div>
      <div class="ih-07__tint"></div>
      <span class="ih-07__corner-tag">Brand A</span>
      <div class="ih-07__label"><p class="ih-07__name">Ember Orange Tint</p></div>
    </div>
    <div class="ih-07__card">
      <div class="ih-07__img ih-07__img--2"><span class="ih-07__icon">💡</span></div>
      <div class="ih-07__tint"></div>
      <span class="ih-07__corner-tag">Brand B</span>
      <div class="ih-07__label"><p class="ih-07__name">Pacific Blue Tint</p></div>
    </div>
    <div class="ih-07__card">
      <div class="ih-07__img ih-07__img--3"><span class="ih-07__icon">🔮</span></div>
      <div class="ih-07__tint"></div>
      <span class="ih-07__corner-tag">Brand C</span>
      <div class="ih-07__label"><p class="ih-07__name">Deep Violet Tint</p></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-07,.ih-07 *,.ih-07 *::before,.ih-07 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-07 ::selection{background:#f97316;color:#000}
.ih-07{
  --bg:#0d0d0f;--text:#f1f5f9;--muted:#94a3b8;
  --duration:0.38s;--ease:cubic-bezier(0.25,0.46,0.45,0.94);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-07__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:780px;width:100%}
.ih-07__card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;cursor:pointer}
.ih-07__img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--duration) var(--ease)}
.ih-07__img--1{background-image: url('https://picsum.photos/seed/landscape-orange/600/600'), linear-gradient(135deg,#111827,#1f2937,#374151); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-07__img--2{background-image: url('https://picsum.photos/seed/landscape-blue/600/600'), linear-gradient(135deg,#0c0c0c,#1c1c1e,#2c2c2e); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-07__img--3{background-image: url('https://picsum.photos/seed/landscape-violet/600/600'), linear-gradient(135deg,#0f0f14,#1a1a24,#252535); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-07__card:hover .ih-07__img{transform:scale(1.06)}
.ih-07__icon{font-size:56px;opacity:0.5;transition:opacity var(--duration) var(--ease)}
.ih-07__card:hover .ih-07__icon{opacity:0.2}

/* The tint overlay uses a CSS custom property for the brand colour per card */
.ih-07__tint{
  position:absolute;inset:0;
  background:var(--tint-color);
  opacity:0;
  transition:opacity var(--duration) var(--ease);
  mix-blend-mode:color; /* blend mode keeps underlying texture visible */
}
.ih-07__card:hover .ih-07__tint{opacity:0.7}

/* Dark overlay under the text (separate from tint so blend mode doesn't affect it) */
.ih-07__label{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;
}
.ih-07__name{font-size:14px;font-weight:700;color:var(--text);opacity:0;transform:scale(0.9);transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease)}
.ih-07__card:hover .ih-07__name{opacity:1;transform:none}

.ih-07__card:first-child { --tint-color: #f97316; } /* orange */
.ih-07__card:nth-child(2) { --tint-color: #3b82f6; } /* blue */
.ih-07__card:nth-child(3) { --tint-color: #8b5cf6; } /* violet */

.ih-07__corner-tag{
  position:absolute;top:10px;left:10px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;padding:3px 8px;font-size:10px;font-weight:600;color:var(--muted);
}

@media(prefers-reduced-motion:reduce){.ih-07__img,.ih-07__tint,.ih-07__icon,.ih-07__name{transition:none}.ih-07__tint{opacity:0.5}.ih-07__name{opacity:1;transform:none}}
```

### 08. Neumorphic Image Card Hover Effect CSS

**Type:** Pure CSS
**Description:** Soft-UI cards that shift from an extruded dual-shadow state to an inset "pressed" shadow on hover, mimicking tactile depth.

**HTML:**
```html
<div class="ih-08">
  <div class="ih-08__grid">
    <div class="ih-08__card">
      <div class="ih-08__img-frame">
        <div class="ih-08__img ih-08__img--1"><span class="ih-08__icon">🎮</span></div>
      </div>
      <div class="ih-08__body">
        <p class="ih-08__title">Phantom Controller</p>
        <p class="ih-08__sub">Haptic · Wireless · 40h</p>
        <div class="ih-08__foot">
          <span class="ih-08__price">$89</span>
          <button class="ih-08__btn">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="ih-08__card">
      <div class="ih-08__img-frame">
        <div class="ih-08__img ih-08__img--2"><span class="ih-08__icon">🎧</span></div>
      </div>
      <div class="ih-08__body">
        <p class="ih-08__title">AquaTone Studio</p>
        <p class="ih-08__sub">ANC · Hi-Res · 60h</p>
        <div class="ih-08__foot">
          <span class="ih-08__price">$229</span>
          <button class="ih-08__btn">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="ih-08__card">
      <div class="ih-08__img-frame">
        <div class="ih-08__img ih-08__img--3"><span class="ih-08__icon">💻</span></div>
      </div>
      <div class="ih-08__body">
        <p class="ih-08__title">NovaPad Ultra</p>
        <p class="ih-08__sub">OLED · 12-core · 18h</p>
        <div class="ih-08__foot">
          <span class="ih-08__price">$1,299</span>
          <button class="ih-08__btn">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-08,.ih-08 *,.ih-08 *::before,.ih-08 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-08 ::selection{background:#6366f1;color:#fff}
.ih-08{
  --nm-bg:#1e1e2a;--nm-light:rgba(255,255,255,0.05);--nm-dark:rgba(0,0,0,0.45);
  --accent:#6366f1;--accent2:#22d3ee;--text:#e2e8f0;--muted:#64748b;
  --duration:0.4s;--ease:cubic-bezier(0.25,0.46,0.45,0.94);
  font-family:system-ui,sans-serif;background:var(--nm-bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-08__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:780px;width:100%}
/* Neumorphic base: dual shadow (light top-left, dark bottom-right) */
.ih-08__card{
  background:var(--nm-bg);border-radius:20px;padding:12px;cursor:pointer;
  box-shadow:6px 6px 16px var(--nm-dark), -4px -4px 12px var(--nm-light);
  transition:box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
/* Hover: inset shadow = pressed state */
.ih-08__card:hover{
  box-shadow:inset 4px 4px 10px var(--nm-dark), inset -3px -3px 8px var(--nm-light);
  transform:scale(0.98);
}
.ih-08__img-frame{
  border-radius:12px;overflow:hidden;aspect-ratio:1;position:relative;
  box-shadow:inset 2px 2px 6px var(--nm-dark),inset -1px -1px 4px var(--nm-light);
}
.ih-08__img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--duration) var(--ease)}
.ih-08__img--1{background:linear-gradient(135deg,#1e1b4b,#312e81,#4338ca)}
.ih-08__img--2{background:linear-gradient(135deg,#0c4a6e,#075985,#38bdf8)}
.ih-08__img--3{background:linear-gradient(135deg,#3b0764,#6b21a8,#a855f7)}
.ih-08__card:hover .ih-08__img{transform:scale(1.04)}
.ih-08__icon{font-size:48px;opacity:0.45}
.ih-08__body{padding:12px 4px 4px}
.ih-08__title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.ih-08__sub{font-size:11px;color:var(--muted)}
.ih-08__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.ih-08__price{font-size:15px;font-weight:700;color:var(--accent)}
/* Neumorphic pill button */
.ih-08__btn{
  padding:5px 12px;border-radius:20px;font-size:10px;font-weight:700;
  color:var(--text);letter-spacing:0.06em;
  background:var(--nm-bg);
  box-shadow:3px 3px 8px var(--nm-dark), -2px -2px 6px var(--nm-light);
  transition:box-shadow 0.2s ease;border:none;cursor:pointer;
}
.ih-08__btn:hover{box-shadow:inset 2px 2px 6px var(--nm-dark),inset -1px -1px 4px var(--nm-light)}
@media(prefers-reduced-motion:reduce){.ih-08__card,.ih-08__img{transition:none}}
```

### 09. Glassmorphism Overlay on Image Hover

**Type:** Pure CSS
**Description:** A frosted-glass descriptive card slides up from below the image frame on hover, using backdrop-filter for the blurred panel effect.

**HTML:**
```html
<div class="ih-09">
  <div class="ih-09__grid">
    <div class="ih-09__card">
      <div class="ih-09__bg ih-09__bg--1"><span class="ih-09__icon">🌸</span></div>
      <div class="ih-09__static"><p class="ih-09__static-name">Spring Collection</p></div>
      <div class="ih-09__glass">
        <p class="ih-09__glass-label">Collection</p>
        <p class="ih-09__glass-title">Spring Bloom 2025</p>
        <p class="ih-09__glass-desc">Ethereal violet pieces inspired by cherry blossom season</p>
        <div class="ih-09__glass-footer">
          <span class="ih-09__glass-stat">24 pieces</span>
          <span class="ih-09__glass-cta">Explore →</span>
        </div>
      </div>
    </div>
    <div class="ih-09__card">
      <div class="ih-09__bg ih-09__bg--2"><span class="ih-09__icon">🍃</span></div>
      <div class="ih-09__static"><p class="ih-09__static-name">Earth Tones</p></div>
      <div class="ih-09__glass">
        <p class="ih-09__glass-label">Sustainable</p>
        <p class="ih-09__glass-title">Forest Origins</p>
        <p class="ih-09__glass-desc">Organic cotton pieces dyed with natural plant extracts</p>
        <div class="ih-09__glass-footer">
          <span class="ih-09__glass-stat">18 pieces</span>
          <span class="ih-09__glass-cta">Explore →</span>
        </div>
      </div>
    </div>
    <div class="ih-09__card">
      <div class="ih-09__bg ih-09__bg--3"><span class="ih-09__icon">🌊</span></div>
      <div class="ih-09__static"><p class="ih-09__static-name">Azure Line</p></div>
      <div class="ih-09__glass">
        <p class="ih-09__glass-label">Limited</p>
        <p class="ih-09__glass-title">Azure Coast</p>
        <p class="ih-09__glass-desc">Mediterranean-inspired linen pieces for summer living</p>
        <div class="ih-09__glass-footer">
          <span class="ih-09__glass-stat">12 pieces</span>
          <span class="ih-09__glass-cta">Explore →</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-09,.ih-09 *,.ih-09 *::before,.ih-09 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-09 ::selection{background:rgba(139,92,246,0.8);color:#fff}
.ih-09{
  --accent:#8b5cf6;--accent2:#34d399;--bg:#060611;--text:#f1f5f9;--muted:#94a3b8;
  --duration:0.45s;--ease:cubic-bezier(0.16,1,0.3,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-09__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:780px;width:100%}
.ih-09__card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;cursor:pointer}
.ih-09__bg{position:absolute;inset:0;transition:transform var(--duration) var(--ease);display:flex;align-items:center;justify-content:center}
.ih-09__bg--1{background:linear-gradient(145deg,#1a0a2e,#2d1b69,#4c1d95,#7c3aed)}
.ih-09__bg--2{background:linear-gradient(145deg,#022c22,#065f46,#059669,#34d399)}
.ih-09__bg--3{background:linear-gradient(145deg,#0c1445,#1e3a8a,#1d4ed8,#60a5fa)}
.ih-09__card:hover .ih-09__bg{transform:scale(1.08)}
.ih-09__icon{font-size:60px;opacity:0.3;transition:opacity var(--duration) var(--ease)}
.ih-09__card:hover .ih-09__icon{opacity:0.08}

/* The glass card: backdrop-filter applies to everything behind it in the stacking context */
.ih-09__glass{
  position:absolute;left:12px;right:12px;bottom:12px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px) saturate(1.5);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;padding:16px;
  transform:translateY(calc(100% + 16px));
  opacity:0;
  transition:transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.ih-09__card:hover .ih-09__glass{transform:translateY(0);opacity:1}

.ih-09__glass-label{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ih-09__glass-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.ih-09__glass-desc{font-size:11px;color:rgba(241,245,249,0.7);line-height:1.5}
.ih-09__glass-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.ih-09__glass-stat{font-size:10px;color:var(--muted)}
.ih-09__glass-cta{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:0.06em}

/* Static bottom gradient so card has content even before hover */
.ih-09__static{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 100%)}
.ih-09__static-name{font-size:13px;font-weight:600;color:var(--text);transition:opacity var(--duration) var(--ease)}
.ih-09__card:hover .ih-09__static-name{opacity:0}

@media(prefers-reduced-motion:reduce){
  .ih-09__bg,.ih-09__icon,.ih-09__glass,.ih-09__static-name{transition:none}
  .ih-09__glass{transform:none;opacity:1}
}
```

### 10. CSS Glowing Neon Border Image Hover

**Type:** Pure CSS
**Description:** Gaming-card style hover where vibrant box-shadow glows activate around the card border, driven by per-card CSS custom properties.

**HTML:**
```html
<div class="ih-10">
  <div class="ih-10__grid">
    <div class="ih-10__card ih-10__card--1">
      <div class="ih-10__img ih-10__img--1"><span class="ih-10__icon">⚡</span></div>
      <div class="ih-10__body">
        <p class="ih-10__title">Cipher X9 GPU</p>
        <p class="ih-10__sub">24GB GDDR7 · Ray Tracing</p>
        <p class="ih-10__score">★ 98 / 100 Performance</p>
      </div>
    </div>
    <div class="ih-10__card ih-10__card--2">
      <div class="ih-10__img ih-10__img--2"><span class="ih-10__icon">🖥️</span></div>
      <div class="ih-10__body">
        <p class="ih-10__title">Horizon 4K OLED</p>
        <p class="ih-10__sub">240Hz · 1ms GTG · HDR</p>
        <p class="ih-10__score">★ 96 / 100 Visuals</p>
      </div>
    </div>
    <div class="ih-10__card ih-10__card--3">
      <div class="ih-10__img ih-10__img--3"><span class="ih-10__icon">⌨️</span></div>
      <div class="ih-10__body">
        <p class="ih-10__title">Spectra 75% MK</p>
        <p class="ih-10__sub">Optical · Per-key RGB</p>
        <p class="ih-10__score">★ 94 / 100 Feel</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-10,.ih-10 *,.ih-10 *::before,.ih-10 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-10 ::selection{background:#f0abfc;color:#000}
.ih-10{
  --c1:#f0abfc;--c2:#22d3ee;--c3:#86efac;--bg:#030308;--text:#f1f5f9;--muted:#64748b;
  --duration:0.4s;--ease:cubic-bezier(0.25,0.46,0.45,0.94);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-10__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:780px;width:100%}

/* The glow uses box-shadow — much cheaper than drop-shadow on GPU */
.ih-10__card{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,0.06);
  transition:box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.ih-10__card--1:hover{box-shadow:0 0 0 1px var(--c1),0 0 20px var(--c1),0 0 60px rgba(240,171,252,0.25);border-color:var(--c1)}
.ih-10__card--2:hover{box-shadow:0 0 0 1px var(--c2),0 0 20px var(--c2),0 0 60px rgba(34,211,238,0.25);border-color:var(--c2)}
.ih-10__card--3:hover{box-shadow:0 0 0 1px var(--c3),0 0 20px var(--c3),0 0 60px rgba(134,239,172,0.25);border-color:var(--c3)}

.ih-10__img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;transition:transform var(--duration) var(--ease)}
.ih-10__img--1{background:linear-gradient(135deg,#150824,#3b0764,#6b21a8)}
.ih-10__img--2{background:linear-gradient(135deg,#041e2b,#0c4a6e,#0369a1)}
.ih-10__img--3{background:linear-gradient(135deg,#052013,#064e3b,#065f46)}
.ih-10__card:hover .ih-10__img{transform:scale(1.04)}

/* Animated corner accents */
.ih-10__img::before,.ih-10__img::after{
  content:'';position:absolute;width:16px;height:16px;opacity:0;
  transition:opacity var(--duration) var(--ease);
}
.ih-10__img::before{top:8px;left:8px;border-top:2px solid currentColor;border-left:2px solid currentColor}
.ih-10__img::after{bottom:8px;right:8px;border-bottom:2px solid currentColor;border-right:2px solid currentColor}
.ih-10__card--1 .ih-10__img{color:var(--c1)}
.ih-10__card--2 .ih-10__img{color:var(--c2)}
.ih-10__card--3 .ih-10__img{color:var(--c3)}
.ih-10__card:hover .ih-10__img::before,.ih-10__card:hover .ih-10__img::after{opacity:1}

.ih-10__icon{font-size:52px;opacity:0.4;transition:opacity var(--duration) var(--ease)}
.ih-10__card:hover .ih-10__icon{opacity:0.2}

.ih-10__body{padding:14px 16px;background:rgba(0,0,0,0.3)}
.ih-10__title{font-size:13px;font-weight:700;color:var(--text)}
.ih-10__sub{font-size:11px;color:var(--muted);margin-top:3px}
.ih-10__score{
  font-size:12px;font-weight:800;margin-top:8px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ih-10__card--2 .ih-10__score{background:linear-gradient(90deg,var(--c2),var(--c3));-webkit-background-clip:text;background-clip:text}
.ih-10__card--3 .ih-10__score{background:linear-gradient(90deg,var(--c3),var(--c1));-webkit-background-clip:text;background-clip:text}

@media(prefers-reduced-motion:reduce){.ih-10__card,.ih-10__img,.ih-10__icon,.ih-10__img::before,.ih-10__img::after{transition:none}}
```

### 11. CSS Image Clip-Path Transition Hover

**Type:** Pure CSS
**Description:** Geometric shape morphing where images transition between circles, diamonds, and polygons via interpolated clip-path values on hover.

**HTML:**
```html
<div class="ih-11">
  <div class="ih-11__grid">
    <div class="ih-11__item">
      <div class="ih-11__frame">
        <div class="ih-11__img ih-11__img--circle"><span class="ih-11__icon">🌕</span></div>
      </div>
      <div class="ih-11__labels">
        <p><span class="ih-11__shape-from">Circle</span><span class="ih-11__arrow">→</span><span class="ih-11__shape-to">Rounded Rect</span></p>
        <p class="ih-11__name">Orbital Shift</p>
      </div>
    </div>
    <div class="ih-11__item">
      <div class="ih-11__frame">
        <div class="ih-11__img ih-11__img--diamond"><span class="ih-11__icon">💎</span></div>
      </div>
      <div class="ih-11__labels">
        <p><span class="ih-11__shape-from">Diamond</span><span class="ih-11__arrow">→</span><span class="ih-11__shape-to">Circle</span></p>
        <p class="ih-11__name">Gem Reveal</p>
      </div>
    </div>
    <div class="ih-11__item">
      <div class="ih-11__frame">
        <div class="ih-11__img ih-11__img--hexagon"><span class="ih-11__icon">⬡</span></div>
      </div>
      <div class="ih-11__labels">
        <p><span class="ih-11__shape-from">Hex</span><span class="ih-11__arrow">→</span><span class="ih-11__shape-to">Wide Hex + Spin</span></p>
        <p class="ih-11__name">Lattice Morph</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-11,.ih-11 *,.ih-11 *::before,.ih-11 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-11 ::selection{background:#e879f9;color:#000}
.ih-11{
  --accent:#e879f9;--bg:#08080d;--text:#f1f5f9;--muted:#64748b;
  --duration:0.5s;--ease:cubic-bezier(0.34,1.56,0.64,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-11__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:780px;width:100%}
.ih-11__item{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}

/* clip-path morphs the image shape on hover */
.ih-11__frame{
  width:100%;aspect-ratio:1;position:relative;overflow:visible;
}
.ih-11__img{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  transition:clip-path var(--duration) var(--ease), transform var(--duration) var(--ease);
}
/* Starting shapes */
.ih-11__img--circle{
  clip-path:circle(42% at 50% 50%);
  background:radial-gradient(circle,#2d1b69,#4c1d95,#7c3aed);
}
.ih-11__img--diamond{
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  background:radial-gradient(circle,#042f2e,#065f46,#34d399);
}
.ih-11__img--hexagon{
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(circle,#1c1917,#92400e,#f59e0b);
}
/* Hover shapes */
.ih-11__item:hover .ih-11__img--circle{
  clip-path:polygon(10% 0%,90% 0%,100% 10%,100% 90%,90% 100%,10% 100%,0% 90%,0% 10%);
  transform:scale(1.05);
}
.ih-11__item:hover .ih-11__img--diamond{
  clip-path:circle(48% at 50% 50%);
  transform:scale(1.05);
}
.ih-11__item:hover .ih-11__img--hexagon{
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  transform:scale(1.05) rotate(30deg);
}
.ih-11__icon{font-size:44px;opacity:0.5}

/* Shape label */
.ih-11__labels{text-align:center}
.ih-11__shape-from{font-size:10px;color:var(--muted);letter-spacing:0.08em}
.ih-11__arrow{color:var(--accent);margin:0 4px}
.ih-11__shape-to{font-size:10px;color:var(--accent);font-weight:700}
.ih-11__name{font-size:13px;font-weight:700;color:var(--text);margin-top:3px}

@media(prefers-reduced-motion:reduce){.ih-11__img{transition:none}}
```

### 12. CSS Image Tilt 3D Perspective Hover

**Type:** CSS + JS
**Description:** A mousemove-driven 3D tilt illusion using CSS perspective and rotational transforms, with a specular highlight that tracks the pointer position.

**HTML:**
```html
<div class="ih-12">
  <div class="ih-12__grid">
    <div class="ih-12__card" id="ih-12-card-1">
      <div class="ih-12__img ih-12__img--1">
        <span class="ih-12__icon">🔮</span>
        <div class="ih-12__shine"></div>
      </div>
      <div class="ih-12__body">
        <p class="ih-12__title">Mystic Artifacts</p>
        <p class="ih-12__sub">Interactive 3D collection</p>
      </div>
    </div>
    <div class="ih-12__card" id="ih-12-card-2">
      <div class="ih-12__img ih-12__img--2">
        <span class="ih-12__icon">🌿</span>
        <div class="ih-12__shine"></div>
      </div>
      <div class="ih-12__body">
        <p class="ih-12__title">Botanical Studies</p>
        <p class="ih-12__sub">Flora & fauna series</p>
      </div>
    </div>
    <div class="ih-12__card" id="ih-12-card-3">
      <div class="ih-12__img ih-12__img--3">
        <span class="ih-12__icon">🌊</span>
        <div class="ih-12__shine"></div>
      </div>
      <div class="ih-12__body">
        <p class="ih-12__title">Ocean Depths</p>
        <p class="ih-12__sub">Underwater photography</p>
      </div>
    </div>
  </div>
</div>
<script>
(function(){
  const cards = document.querySelectorAll('.ih-12__card');
  const INTENSITY = 18;
  cards.forEach(card => {
    const shine = card.querySelector('.ih-12__shine');
    card.addEventListener('mousemove', e => {
      const r = card.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width;
      const y = (e.clientY - r.top) / r.height;
      const rx = (y - 0.5) * -INTENSITY;
      const ry = (x - 0.5) * INTENSITY;
      card.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg) scale3d(1.02,1.02,1.02)`;
      if(shine){
        shine.style.setProperty('--mx', (x*100)+'%');
        shine.style.setProperty('--my', (y*100)+'%');
      }
    });
    card.addEventListener('mouseleave', () => {
      card.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) scale3d(1,1,1)';
      card.style.transition = 'transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.3s ease';
      setTimeout(() => { card.style.transition = ''; }, 500);
    });
  });
})();
</script>
```

**CSS:**
```css
.ih-12,.ih-12 *,.ih-12 *::before,.ih-12 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-12 ::selection{background:#38bdf8;color:#000}
.ih-12{
  --accent:#38bdf8;--bg:#060a12;--text:#f1f5f9;--muted:#64748b;
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
  perspective:1200px;
}
.ih-12__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:780px;width:100%}

.ih-12__card{
  border-radius:16px;overflow:hidden;cursor:pointer;
  transform-style:preserve-3d;
  transition:box-shadow 0.3s ease;
  will-change:transform;
  /* transform applied by JS */
}
.ih-12__card:hover{box-shadow:0 30px 80px rgba(0,0,0,0.6)}

.ih-12__img{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ih-12__img--1{background:linear-gradient(135deg,#0f0c29,#2d1b69,#7c3aed)}
.ih-12__img--2{background:linear-gradient(135deg,#022c22,#065f46,#10b981)}
.ih-12__img--3{background:linear-gradient(135deg,#0c1445,#1e3a8a,#3b82f6)}
.ih-12__icon{font-size:52px;opacity:0.45;transition:opacity 0.3s ease}
.ih-12__card:hover .ih-12__icon{opacity:0.2}

/* Specular shine layer — moves opposite to tilt for realism */
.ih-12__shine{
  position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.12) 0%, transparent 60%);
  opacity:0;transition:opacity 0.3s ease;
  pointer-events:none;
}
.ih-12__card:hover .ih-12__shine{opacity:1}

.ih-12__body{padding:14px;background:rgba(255,255,255,0.03);backdrop-filter:blur(2px)}
.ih-12__title{font-size:13px;font-weight:700;color:var(--text)}
.ih-12__sub{font-size:11px;color:var(--muted);margin-top:3px}
```

**JS:**
```js
(function(){
  const cards = document.querySelectorAll('.ih-12__card');
  const INTENSITY = 18;
  cards.forEach(card => {
    const shine = card.querySelector('.ih-12__shine');
    card.addEventListener('mousemove', e => {
      const r = card.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width;
      const y = (e.clientY - r.top) / r.height;
      const rx = (y - 0.5) * -INTENSITY;
      const ry = (x - 0.5) * INTENSITY;
      card.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg) scale3d(1.02,1.02,1.02)`;
      if(shine){
        shine.style.setProperty('--mx', (x*100)+'%');
        shine.style.setProperty('--my', (y*100)+'%');
      }
    });
    card.addEventListener('mouseleave', () => {
      card.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) scale3d(1,1,1)';
      card.style.transition = 'transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.3s ease';
      setTimeout(() => { card.style.transition = ''; }, 500);
    });
  });
})();
```

### 13. CSS Shining Light Glare Image Hover

**Type:** Pure CSS
**Description:** A linear-gradient sheen sweeps across the image on hover using a translateX-driven pseudo-element, simulating a light reflection glare.

**HTML:**
```html
<div class="ih-13">
  <div class="ih-13__grid">
    <div class="ih-13__card">
      <div class="ih-13__img ih-13__img--1"><span class="ih-13__icon">🏆</span></div>
      <div class="ih-13__body">
        <p class="ih-13__tag">Premium</p>
        <p class="ih-13__title">Gold Tier Membership</p>
        <p class="ih-13__stars">★★★★★</p>
        <p class="ih-13__price">$49 / mo</p>
      </div>
    </div>
    <div class="ih-13__card">
      <div class="ih-13__img ih-13__img--2"><span class="ih-13__icon">💳</span></div>
      <div class="ih-13__body">
        <p class="ih-13__tag">Exclusive</p>
        <p class="ih-13__title">Platinum Credit Card</p>
        <p class="ih-13__stars">★★★★★</p>
        <p class="ih-13__price">0% APR 18mo</p>
      </div>
    </div>
    <div class="ih-13__card">
      <div class="ih-13__img ih-13__img--3"><span class="ih-13__icon">💎</span></div>
      <div class="ih-13__body">
        <p class="ih-13__tag">Diamond</p>
        <p class="ih-13__title">Crystal Pro Bundle</p>
        <p class="ih-13__stars">★★★★★</p>
        <p class="ih-13__price">$299 / yr</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-13,.ih-13 *,.ih-13 *::before,.ih-13 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-13 ::selection{background:#fbbf24;color:#000}
.ih-13{
  --accent:#fbbf24;--bg:#0a0906;--text:#f1f5f9;--muted:#78716c;
  --duration:0.6s;--ease:cubic-bezier(0.4,0,0.2,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-13__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:780px;width:100%}
.ih-13__card{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,0.06);
  transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ih-13__card:hover{border-color:rgba(251,191,36,0.3);box-shadow:0 8px 40px rgba(251,191,36,0.12)}
.ih-13__img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ih-13__img--1{background:linear-gradient(135deg,#1c1003,#451a03,#92400e,#fbbf24)}
.ih-13__img--2{background:linear-gradient(135deg,#0d0d0d,#1f1f1f,#404040,#a3a3a3)}
.ih-13__img--3{background:linear-gradient(135deg,#1a0a24,#4c1d95,#7c3aed,#c4b5fd)}
.ih-13__icon{font-size:48px;opacity:0.45;position:relative;z-index:1}

/* The glare: a rotated linear-gradient pseudo-element that slides across */
.ih-13__img::after{
  content:'';
  position:absolute;inset:-50%;
  width:40%;height:200%;
  background:linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 60%
  );
  transform:translateX(-200%) skewX(-10deg);
  transition:transform var(--duration) cubic-bezier(0.4,0,0.2,1);
}
.ih-13__card:hover .ih-13__img::after{transform:translateX(300%) skewX(-10deg)}

.ih-13__body{padding:14px 16px;background:rgba(0,0,0,0.4)}
.ih-13__tag{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.ih-13__title{font-size:14px;font-weight:700;color:var(--text)}
.ih-13__price{font-size:16px;font-weight:800;color:var(--accent);margin-top:6px}
.ih-13__stars{font-size:11px;color:var(--accent);margin-top:2px;letter-spacing:-1px}

@media(prefers-reduced-motion:reduce){.ih-13__img::after,.ih-13__card{transition:none}.ih-13__img::after{display:none}}
```

### 14. CSS Image Split Transition Hover

**Type:** Pure CSS
**Description:** Avant-garde hover where an image slices horizontally into two moving segments, revealing an action strip in the gap via clip-path.

**HTML:**
```html
<div class="ih-14">
  <div class="ih-14__grid">
    <div class="ih-14__card">
      <div class="ih-14__half ih-14__half--top ih-14__half--1"><span class="ih-14__icon">🎨</span></div>
      <div class="ih-14__half ih-14__half--bot ih-14__half--1"><span class="ih-14__icon">🎨</span></div>
      <span class="ih-14__num">01</span>
      <div class="ih-14__reveal">
        <p class="ih-14__rev-title">Digital Canvas</p>
        <span class="ih-14__rev-cta">View</span>
      </div>
    </div>
    <div class="ih-14__card">
      <div class="ih-14__half ih-14__half--top ih-14__half--2"><span class="ih-14__icon">🌱</span></div>
      <div class="ih-14__half ih-14__half--bot ih-14__half--2"><span class="ih-14__icon">🌱</span></div>
      <span class="ih-14__num">02</span>
      <div class="ih-14__reveal">
        <p class="ih-14__rev-title">Growth Series</p>
        <span class="ih-14__rev-cta">View</span>
      </div>
    </div>
    <div class="ih-14__card">
      <div class="ih-14__half ih-14__half--top ih-14__half--3"><span class="ih-14__icon">⚡</span></div>
      <div class="ih-14__half ih-14__half--bot ih-14__half--3"><span class="ih-14__icon">⚡</span></div>
      <span class="ih-14__num">03</span>
      <div class="ih-14__reveal">
        <p class="ih-14__rev-title">Power Study</p>
        <span class="ih-14__rev-cta">View</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-14,.ih-14 *,.ih-14 *::before,.ih-14 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-14 ::selection{background:#fb7185;color:#000}
.ih-14{
  --accent:#fb7185;--accent2:#38bdf8;--bg:#070710;--text:#f1f5f9;--muted:#475569;
  --duration:0.5s;--ease:cubic-bezier(0.34,1.56,0.64,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-14__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:780px;width:100%}
.ih-14__card{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;cursor:pointer}

/* Each card is split into two halves using clip-path */
.ih-14__half{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--duration) var(--ease), clip-path var(--duration) var(--ease);
  will-change:transform;
}
/* Top half */
.ih-14__half--top{clip-path:polygon(0 0,100% 0,100% 50%,0 50%)}
/* Bottom half */
.ih-14__half--bot{clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}

/* On hover: halves slide apart */
.ih-14__card:hover .ih-14__half--top{transform:translateY(-6%)}
.ih-14__card:hover .ih-14__half--bot{transform:translateY(6%)}

.ih-14__half--1{background:linear-gradient(135deg,#1a0533,#4c1d95,#7c3aed)}
.ih-14__half--2{background:linear-gradient(135deg,#042f2e,#065f46,#10b981)}
.ih-14__half--3{background:linear-gradient(135deg,#1c1003,#92400e,#f59e0b)}
.ih-14__icon{font-size:52px;opacity:0.4;transition:opacity var(--duration) var(--ease)}
.ih-14__card:hover .ih-14__icon{opacity:0.1}

/* Revealed content in the gap */
.ih-14__reveal{
  position:absolute;top:50%;left:0;right:0;
  transform:translateY(-50%);
  padding:12px 16px;
  background:var(--bg);
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;
  clip-path:inset(100% 0 100% 0);
  transition:opacity var(--duration) var(--ease), clip-path var(--duration) var(--ease);
}
.ih-14__card:hover .ih-14__reveal{opacity:1;clip-path:inset(0 0 0 0)}
.ih-14__rev-title{font-size:12px;font-weight:700;color:var(--text)}
.ih-14__rev-cta{font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;background:var(--accent);color:#fff}

/* Static badge */
.ih-14__num{
  position:absolute;top:12px;left:12px;
  font-size:22px;font-weight:900;
  color:rgba(255,255,255,0.12);line-height:1;
}
@media(prefers-reduced-motion:reduce){.ih-14__half,.ih-14__icon,.ih-14__reveal{transition:none}.ih-14__reveal{opacity:1;clip-path:inset(0)}.ih-14__half--top{transform:none}.ih-14__half--bot{transform:none}}
```

### 15. CSS Image Ripple Animation Hover

**Type:** Pure CSS
**Description:** Concentric circle ripples emanate outward from a circular avatar on hover, driven by staggered keyframe animations on sibling span elements.

**HTML:**
```html
<div class="ih-15">
  <div class="ih-15__grid">
    <div class="ih-15__item">
      <div class="ih-15__frame">
        <span class="ih-15__ring"></span>
        <span class="ih-15__ring"></span>
        <span class="ih-15__ring"></span>
        <div class="ih-15__avatar ih-15__avatar--1">👩‍🚀</div>
      </div>
      <div style="text-align:center">
        <p class="ih-15__name">Dr. Elena Vasquez</p>
        <p class="ih-15__role">Mission Architect</p>
        <div class="ih-15__socials">
          <span class="ih-15__social">𝕏</span>
          <span class="ih-15__social">in</span>
          <span class="ih-15__social">gh</span>
        </div>
      </div>
    </div>
    <div class="ih-15__item">
      <div class="ih-15__frame">
        <span class="ih-15__ring"></span>
        <span class="ih-15__ring"></span>
        <span class="ih-15__ring"></span>
        <div class="ih-15__avatar ih-15__avatar--2">🧙</div>
      </div>
      <div style="text-align:center">
        <p class="ih-15__name">Orion Blackwood</p>
        <p class="ih-15__role">AI Research Lead</p>
        <div class="ih-15__socials">
          <span class="ih-15__social">𝕏</span>
          <span class="ih-15__social">in</span>
          <span class="ih-15__social">gh</span>
        </div>
      </div>
    </div>
    <div class="ih-15__item">
      <div class="ih-15__frame">
        <span class="ih-15__ring"></span>
        <span class="ih-15__ring"></span>
        <span class="ih-15__ring"></span>
        <div class="ih-15__avatar ih-15__avatar--3">👩‍🌾</div>
      </div>
      <div style="text-align:center">
        <p class="ih-15__name">Freya Lindqvist</p>
        <p class="ih-15__role">Growth Engineer</p>
        <div class="ih-15__socials">
          <span class="ih-15__social">𝕏</span>
          <span class="ih-15__social">in</span>
          <span class="ih-15__social">gh</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-15,.ih-15 *,.ih-15 *::before,.ih-15 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-15 ::selection{background:#2dd4bf;color:#000}
.ih-15{
  --accent:#2dd4bf;--bg:#060d0d;--text:#f1f5f9;--muted:#64748b;
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-15__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:780px;width:100%}
.ih-15__item{display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer}

/* Ripple container — must be position:relative so pseudo rings use absolute */
.ih-15__frame{
  position:relative;width:140px;height:140px;
  display:flex;align-items:center;justify-content:center;
}

.ih-15__avatar{
  width:100px;height:100px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:42px;position:relative;z-index:2;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ih-15__avatar--1{background:radial-gradient(circle,#1e3a5f,#0369a1)}
.ih-15__avatar--2{background:radial-gradient(circle,#3b0764,#7e22ce)}
.ih-15__avatar--3{background:radial-gradient(circle,#052e16,#15803d)}
.ih-15__item:hover .ih-15__avatar{transform:scale(1.08)}

/* Three ripple rings using sibling spans — keyframe scales + fades */
.ih-15__ring{
  position:absolute;border-radius:50%;
  border:2px solid var(--accent);
  opacity:0;
  animation:none;
}
.ih-15__item:hover .ih-15__ring{
  animation:ih-15-ripple 1.5s cubic-bezier(0,0.2,0.8,1) infinite;
}
.ih-15__ring:nth-child(2){animation-delay:0s}
.ih-15__ring:nth-child(3){animation-delay:0.5s}
.ih-15__ring:nth-child(4){animation-delay:1s}

@keyframes ih-15-ripple{
  0%{width:100px;height:100px;opacity:0.6;top:calc(50% - 50px);left:calc(50% - 50px)}
  100%{width:140px;height:140px;opacity:0;top:calc(50% - 70px);left:calc(50% - 70px)}
}

/* Colour the rings per item */
.ih-15__item:nth-child(1) .ih-15__ring{border-color:#38bdf8}
.ih-15__item:nth-child(2) .ih-15__ring{border-color:#c084fc}
.ih-15__item:nth-child(3) .ih-15__ring{border-color:#4ade80}

.ih-15__name{font-size:14px;font-weight:700;color:var(--text)}
.ih-15__role{font-size:11px;color:var(--muted)}
.ih-15__socials{display:flex;gap:8px;margin-top:4px}
.ih-15__social{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:12px;transition:background 0.2s ease}
.ih-15__item:hover .ih-15__social{background:rgba(255,255,255,0.1)}

@media(prefers-reduced-motion:reduce){.ih-15__ring,.ih-15__avatar{animation:none!important;transition:none}}
```

### 16. Circular Team Profile Avatar Hover CSS

**Type:** Pure CSS
**Description:** About-page avatar hover with a conic-gradient spinning border trail and slide-up social icon reveal driven by CSS animation-play-state.

**HTML:**
```html
<div class="ih-16">
  <div class="ih-16__grid">
    <div class="ih-16__item">
      <div class="ih-16__wrap">
        <div class="ih-16__avatar ih-16__avatar--1">👩‍💻</div>
      </div>
      <p class="ih-16__name">Yuki Tanaka</p>
      <p class="ih-16__role">Frontend Eng.</p>
      <div class="ih-16__socials"><span class="ih-16__s">𝕏</span><span class="ih-16__s">gh</span></div>
    </div>
    <div class="ih-16__item">
      <div class="ih-16__wrap">
        <div class="ih-16__avatar ih-16__avatar--2">👨‍🎨</div>
      </div>
      <p class="ih-16__name">Amara Diallo</p>
      <p class="ih-16__role">UX Designer</p>
      <div class="ih-16__socials"><span class="ih-16__s">𝕏</span><span class="ih-16__s">be</span></div>
    </div>
    <div class="ih-16__item">
      <div class="ih-16__wrap">
        <div class="ih-16__avatar ih-16__avatar--3">🧑‍🔬</div>
      </div>
      <p class="ih-16__name">Ravi Patel</p>
      <p class="ih-16__role">Data Scientist</p>
      <div class="ih-16__socials"><span class="ih-16__s">𝕏</span><span class="ih-16__s">in</span></div>
    </div>
    <div class="ih-16__item">
      <div class="ih-16__wrap">
        <div class="ih-16__avatar ih-16__avatar--4">👩‍🚀</div>
      </div>
      <p class="ih-16__name">Zoe Mercer</p>
      <p class="ih-16__role">DevOps Lead</p>
      <div class="ih-16__socials"><span class="ih-16__s">gh</span><span class="ih-16__s">in</span></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-16,.ih-16 *,.ih-16 *::before,.ih-16 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-16 ::selection{background:#a78bfa;color:#000}
.ih-16{
  --accent:#a78bfa;--accent2:#34d399;--bg:#080812;--text:#f1f5f9;--muted:#64748b;
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-16__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:780px;width:100%}
.ih-16__item{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer}

/* Conic gradient spinning ring via pseudo-element */
.ih-16__wrap{
  position:relative;width:80px;height:80px;
}
.ih-16__wrap::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg 270deg, var(--ring-color,var(--accent)) 270deg 360deg);
  opacity:0;
  transition:opacity 0.3s ease;
  animation:ih-16-spin 1.2s linear infinite paused;
}
.ih-16__item:hover .ih-16__wrap::before{opacity:1;animation-play-state:running}

@keyframes ih-16-spin{to{transform:rotate(360deg)}}

/* The avatar itself */
.ih-16__avatar{
  position:relative;z-index:1;
  width:74px;height:74px;border-radius:50%;margin:3px;
  display:flex;align-items:center;justify-content:center;font-size:34px;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.ih-16__item:hover .ih-16__avatar{transform:scale(1.06)}
.ih-16__avatar--1{background:radial-gradient(circle at 30% 30%,#4c1d95,#0f172a)}
.ih-16__avatar--2{background:radial-gradient(circle at 30% 30%,#065f46,#0f172a)}
.ih-16__avatar--3{background:radial-gradient(circle at 30% 30%,#92400e,#0f172a)}
.ih-16__avatar--4{background:radial-gradient(circle at 30% 30%,#1e3a5f,#0f172a)}

/* Individual ring colours */
.ih-16__item:nth-child(1) .ih-16__wrap{--ring-color:#a78bfa}
.ih-16__item:nth-child(2) .ih-16__wrap{--ring-color:#34d399}
.ih-16__item:nth-child(3) .ih-16__wrap{--ring-color:#fb923c}
.ih-16__item:nth-child(4) .ih-16__wrap{--ring-color:#60a5fa}

/* Social icons slide up on hover */
.ih-16__socials{
  display:flex;gap:6px;margin-top:2px;
  transform:translateY(6px);opacity:0;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),opacity 0.3s ease;
}
.ih-16__item:hover .ih-16__socials{transform:none;opacity:1}
.ih-16__s{font-size:12px;background:rgba(255,255,255,0.07);border-radius:4px;padding:2px 5px;color:var(--muted)}

.ih-16__name{font-size:12px;font-weight:700;color:var(--text);text-align:center}
.ih-16__role{font-size:10px;color:var(--muted);text-align:center}

@media(prefers-reduced-motion:reduce){
  .ih-16__wrap::before{animation:none}
  .ih-16__avatar,.ih-16__socials{transition:none}
  .ih-16__item:hover .ih-16__wrap::before{opacity:1}
  .ih-16__item:hover .ih-16__socials{opacity:1;transform:none}
}
```

### 17. CSS Fullscreen Background Image Hover

**Type:** CSS + JS
**Description:** Navigation hover that swaps the entire viewport background by toggling an is-active class on one of several stacked background panels.

**HTML:**
```html
<div class="ih-17" id="ih-17-root">
  <div class="ih-17__bg ih-17__bg--0 is-active" data-bg="0"></div>
  <div class="ih-17__bg ih-17__bg--1" data-bg="1"></div>
  <div class="ih-17__bg ih-17__bg--2" data-bg="2"></div>
  <div class="ih-17__bg ih-17__bg--3" data-bg="3"></div>
  <div class="ih-17__bg ih-17__bg--4" data-bg="4"></div>
  <div class="ih-17__bg ih-17__bg--5" data-bg="5"></div>

  <nav class="ih-17__nav">
    <p class="ih-17__kicker">Navigate · hover to preview</p>
    <ul class="ih-17__list">
      <li><a class="ih-17__link" data-target="1" href="#">
        <span class="ih-17__num">01</span>
        <span class="ih-17__emoji">🌌</span>
        <span class="ih-17__label">Deep Universe</span>
        <span class="ih-17__arrow">→</span>
      </a></li>
      <li><a class="ih-17__link" data-target="2" href="#">
        <span class="ih-17__num">02</span>
        <span class="ih-17__emoji">🌿</span>
        <span class="ih-17__label">Wild Canopy</span>
        <span class="ih-17__arrow">→</span>
      </a></li>
      <li><a class="ih-17__link" data-target="3" href="#">
        <span class="ih-17__num">03</span>
        <span class="ih-17__emoji">🏜️</span>
        <span class="ih-17__label">Desert Dunes</span>
        <span class="ih-17__arrow">→</span>
      </a></li>
      <li><a class="ih-17__link" data-target="4" href="#">
        <span class="ih-17__num">04</span>
        <span class="ih-17__emoji">🔮</span>
        <span class="ih-17__label">Violet Dreams</span>
        <span class="ih-17__arrow">→</span>
      </a></li>
      <li><a class="ih-17__link" data-target="5" href="#">
        <span class="ih-17__num">05</span>
        <span class="ih-17__emoji">🌊</span>
        <span class="ih-17__label">Ocean Horizon</span>
        <span class="ih-17__arrow">→</span>
      </a></li>
    </ul>
  </nav>
</div>
<script>
(function(){
  const root = document.getElementById('ih-17-root');
  if(!root)return;
  const links = root.querySelectorAll('.ih-17__link');
  const bgs = root.querySelectorAll('.ih-17__bg');
  function activate(idx){
    bgs.forEach(b=>{b.classList.toggle('is-active',b.dataset.bg===String(idx))});
  }
  links.forEach(link=>{
    link.addEventListener('mouseenter',()=>activate(link.dataset.target));
    link.addEventListener('mouseleave',()=>activate(0));
    link.addEventListener('click',e=>e.preventDefault());
  });
})();
</script>
```

**CSS:**
```css
.ih-17,.ih-17 *,.ih-17 *::before,.ih-17 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-17 ::selection{background:#f472b6;color:#000}
.ih-17{
  --accent:#f472b6;--bg:#06060a;--text:#f1f5f9;--muted:#64748b;
  --duration:0.6s;--ease:cubic-bezier(0.16,1,0.3,1);
  font-family:system-ui,sans-serif;background:var(--bg);
  min-height: 100vh;position:relative;overflow:hidden;
}
/* Background panels — opacity cross-fade controlled by JS data-active */
.ih-17__bg{
  position:absolute;inset:0;opacity:0;
  transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease);
  transform:scale(1.04);
  pointer-events:none;
}
.ih-17__bg.is-active{opacity:1;transform:scale(1)}
.ih-17__bg--0{background:linear-gradient(135deg,#060606,#111)}
.ih-17__bg--1{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}
.ih-17__bg--2{background:linear-gradient(135deg,#042f2e,#065f46,#059669)}
.ih-17__bg--3{background:linear-gradient(135deg,#1c1003,#451a03,#92400e)}
.ih-17__bg--4{background:linear-gradient(135deg,#1a0533,#4c1d95,#7c3aed)}
.ih-17__bg--5{background:linear-gradient(135deg,#0c1445,#1e3a8a,#1d4ed8)}

/* Foreground nav list */
.ih-17__nav{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  min-height: 100vh;padding:40px;
}
.ih-17__kicker{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.ih-17__list{list-style:none;display:flex;flex-direction:column;gap:4px}
.ih-17__link{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:8px;cursor:pointer;
  transition:background 0.2s ease,color 0.2s ease;
  text-decoration:none;
}
.ih-17__link:hover,.ih-17__link.is-active{background:rgba(255,255,255,0.06)}
.ih-17__num{font-size:11px;color:var(--muted);font-weight:600;width:22px;flex-shrink:0}
.ih-17__label{
  font-size:20px;font-weight:800;color:rgba(255,255,255,0.25);
  transition:color var(--duration) var(--ease), transform var(--duration) var(--ease);
  letter-spacing:-0.02em;
}
.ih-17__link:hover .ih-17__label, .ih-17__link.is-active .ih-17__label{
  color:var(--text);transform:translateX(6px);
}
.ih-17__arrow{
  margin-left:auto;opacity:0;color:var(--accent);font-size:16px;
  transform:translateX(-8px);
  transition:opacity 0.2s ease,transform 0.2s ease;
}
.ih-17__link:hover .ih-17__arrow,.ih-17__link.is-active .ih-17__arrow{opacity:1;transform:none}

.ih-17__emoji{font-size:14px}
```

**JS:**
```js
(function(){
  const root = document.getElementById('ih-17-root');
  if(!root)return;
  const links = root.querySelectorAll('.ih-17__link');
  const bgs = root.querySelectorAll('.ih-17__bg');
  function activate(idx){
    bgs.forEach(b=>{b.classList.toggle('is-active',b.dataset.bg===String(idx))});
  }
  links.forEach(link=>{
    link.addEventListener('mouseenter',()=>activate(link.dataset.target));
    link.addEventListener('mouseleave',()=>activate(0));
    link.addEventListener('click',e=>e.preventDefault());
  });
})();
```

### 18. CSS Masonry Gallery Zoom Hover

**Type:** Pure CSS
**Description:** Pinterest-style column masonry gallery where individual items zoom in on hover without disrupting the column flow via isolated overflow contexts.

**HTML:**
```html
<div class="ih-18">
  <div class="ih-18__masonry">
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--tall ih-18__img--a"></div>
      <span class="ih-18__emoji">🌌</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Cosmos</span></div>
    </div>
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--sq ih-18__img--b"></div>
      <span class="ih-18__emoji">🌿</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Flora</span></div>
    </div>
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--wide ih-18__img--c"></div>
      <span class="ih-18__emoji">🏜️</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Desert</span></div>
    </div>
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--sq ih-18__img--d"></div>
      <span class="ih-18__emoji">🌊</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Ocean</span></div>
    </div>
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--tall ih-18__img--e"></div>
      <span class="ih-18__emoji">🌺</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Bloom</span></div>
    </div>
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--wide ih-18__img--f"></div>
      <span class="ih-18__emoji">🧊</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Ice</span></div>
    </div>
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--wide ih-18__img--g"></div>
      <span class="ih-18__emoji">🔮</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Mystic</span></div>
    </div>
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--tall ih-18__img--h"></div>
      <span class="ih-18__emoji">🌲</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Forest</span></div>
    </div>
    <div class="ih-18__item">
      <div class="ih-18__img ih-18__img--sq ih-18__img--a"></div>
      <span class="ih-18__emoji">⭐</span>
      <div class="ih-18__overlay"><span class="ih-18__tag">Stars</span></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-18,.ih-18 *,.ih-18 *::before,.ih-18 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-18 ::selection{background:#f43f5e;color:#fff}
.ih-18{
  --accent:#f43f5e;--bg:#08080c;--text:#f1f5f9;--muted:#64748b;
  --duration:0.4s;--ease:cubic-bezier(0.25,0.46,0.45,0.94);
  font-family:system-ui,sans-serif;background:var(--bg);padding:32px 24px;
  min-height: 100vh;
}
/* CSS Masonry via columns — no JS layout required */
.ih-18__masonry{
  columns:3;column-gap:12px;max-width:780px;margin:0 auto;
}
.ih-18__item{
  break-inside:avoid;margin-bottom:12px;
  position:relative;border-radius:10px;overflow:hidden;cursor:pointer;
  /* Isolate so zoom doesn't clip to the column boundary */
  display:block;
}
.ih-18__img{
  display:block;width:100%;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--duration) var(--ease);
}
.ih-18__item:hover .ih-18__img{transform:scale(1.08)}

/* Heights via padding-top for aspect ratios */
.ih-18__img--tall  { padding-top:140%; }
.ih-18__img--sq    { padding-top:100%; }
.ih-18__img--wide  { padding-top:65%;  }

.ih-18__img--a{background-image: url('https://picsum.photos/seed/masonry-a/600/600'), linear-gradient(150deg,#1a0533,#4c1d95,#7c3aed); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-18__img--b{background-image: url('https://picsum.photos/seed/masonry-b/600/600'), linear-gradient(150deg,#042f2e,#065f46,#10b981); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-18__img--c{background-image: url('https://picsum.photos/seed/masonry-c/600/600'), linear-gradient(150deg,#1c1003,#92400e,#f59e0b); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-18__img--d{background-image: url('https://picsum.photos/seed/masonry-d/600/600'), linear-gradient(150deg,#0c1445,#1e3a8a,#3b82f6); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-18__img--e{background-image: url('https://picsum.photos/seed/masonry-e/600/600'), linear-gradient(150deg,#1a0010,#9d174d,#f43f5e); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-18__img--f{background-image: url('https://picsum.photos/seed/masonry-f/600/600'), linear-gradient(150deg,#082032,#1e3a5f,#0891b2); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-18__img--g{background-image: url('https://picsum.photos/seed/masonry-g/600/600'), linear-gradient(150deg,#0f0c29,#312e81,#4f46e5); background-size: cover; background-position: center; background-repeat: no-repeat}
.ih-18__img--h{background-image: url('https://picsum.photos/seed/masonry-h/600/600'), linear-gradient(150deg,#052e16,#14532d,#4ade80); background-size: cover; background-position: center; background-repeat: no-repeat}

/* Hover overlay */
.ih-18__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 60%);
  opacity:0;transition:opacity var(--duration) var(--ease);
  display:flex;align-items:flex-end;padding:10px;
}
.ih-18__item:hover .ih-18__overlay{opacity:1}
.ih-18__tag{font-size:10px;font-weight:700;color:#fff;background:rgba(244,63,94,0.7);border-radius:4px;padding:2px 6px}

.ih-18__emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:36px;opacity:0.3;pointer-events:none}

@media(prefers-reduced-motion:reduce){.ih-18__img,.ih-18__overlay{transition:none}.ih-18__overlay{opacity:1}}
```

### 19. CSS Image Icon Reveal Center Hover

**Type:** Pure CSS
**Description:** Thumbnail grid where the image darkens and an action icon (play, magnify, link) scales in at the exact centre on hover using transform origin.

**HTML:**
```html
<div class="ih-19">
  <div class="ih-19__grid">
    <div class="ih-19__card">
      <div class="ih-19__img ih-19__img--1"></div>
      <div class="ih-19__img-content"><span class="ih-19__thumb">🎬</span></div>
      <div class="ih-19__icon-wrap"><div class="ih-19__icon-btn">▶</div></div>
      <div class="ih-19__strip"><span class="ih-19__title">Intro Reel 2025</span><span class="ih-19__views">4.2k views</span></div>
    </div>
    <div class="ih-19__card">
      <div class="ih-19__img ih-19__img--2"></div>
      <div class="ih-19__img-content"><span class="ih-19__thumb">🌿</span></div>
      <div class="ih-19__icon-wrap"><div class="ih-19__icon-btn">🔍</div></div>
      <div class="ih-19__strip"><span class="ih-19__title">Jungle Macro</span><span class="ih-19__views">1.8k views</span></div>
    </div>
    <div class="ih-19__card">
      <div class="ih-19__img ih-19__img--3"></div>
      <div class="ih-19__img-content"><span class="ih-19__thumb">🔮</span></div>
      <div class="ih-19__icon-wrap"><div class="ih-19__icon-btn">🔗</div></div>
      <div class="ih-19__strip"><span class="ih-19__title">Prism Study</span><span class="ih-19__views">9.1k views</span></div>
    </div>
    <div class="ih-19__card">
      <div class="ih-19__img ih-19__img--4"></div>
      <div class="ih-19__img-content"><span class="ih-19__thumb">🌅</span></div>
      <div class="ih-19__icon-wrap"><div class="ih-19__icon-btn">▶</div></div>
      <div class="ih-19__strip"><span class="ih-19__title">Golden Hour BTS</span><span class="ih-19__views">3.3k views</span></div>
    </div>
    <div class="ih-19__card">
      <div class="ih-19__img ih-19__img--5"></div>
      <div class="ih-19__img-content"><span class="ih-19__thumb">🌊</span></div>
      <div class="ih-19__icon-wrap"><div class="ih-19__icon-btn">🔍</div></div>
      <div class="ih-19__strip"><span class="ih-19__title">Deep Blue Series</span><span class="ih-19__views">7.6k views</span></div>
    </div>
    <div class="ih-19__card">
      <div class="ih-19__img ih-19__img--6"></div>
      <div class="ih-19__img-content"><span class="ih-19__thumb">🌺</span></div>
      <div class="ih-19__icon-wrap"><div class="ih-19__icon-btn">🔗</div></div>
      <div class="ih-19__strip"><span class="ih-19__title">Bloom Editorial</span><span class="ih-19__views">2.9k views</span></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-19,.ih-19 *,.ih-19 *::before,.ih-19 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-19 ::selection{background:#818cf8;color:#fff}
.ih-19{
  --accent:#818cf8;--bg:#07070e;--text:#f1f5f9;--muted:#475569;
  --duration:0.38s;--ease:cubic-bezier(0.16,1,0.3,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-19__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:780px;width:100%}
.ih-19__card{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;cursor:pointer}

.ih-19__img{position:absolute;inset:0;transition:filter var(--duration) var(--ease),transform var(--duration) var(--ease)}
.ih-19__img--1{background:linear-gradient(135deg,#0f0c29,#312e81,#4338ca)}
.ih-19__img--2{background:linear-gradient(135deg,#042f2e,#065f46,#059669)}
.ih-19__img--3{background:linear-gradient(135deg,#3b0764,#7e22ce,#a855f7)}
.ih-19__img--4{background:linear-gradient(135deg,#1c1003,#92400e,#d97706)}
.ih-19__img--5{background:linear-gradient(135deg,#0c1445,#1e3a8a,#2563eb)}
.ih-19__img--6{background:linear-gradient(135deg,#1a0010,#9d174d,#e11d48)}
.ih-19__card:hover .ih-19__img{filter:brightness(0.4);transform:scale(1.06)}

.ih-19__img-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ih-19__thumb{font-size:40px;opacity:0.4;transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease)}
.ih-19__card:hover .ih-19__thumb{opacity:0;transform:scale(0.7)}

/* The center icon — scales in from 0 */
.ih-19__icon-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.5) rotate(-20deg);
  transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.ih-19__card:hover .ih-19__icon-wrap{opacity:1;transform:scale(1) rotate(0deg)}

.ih-19__icon-btn{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,0.12);
  border:2px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  transition:background 0.2s ease, transform 0.2s ease;
}
.ih-19__card:hover .ih-19__icon-btn:hover{background:rgba(255,255,255,0.22);transform:scale(1.1)}

/* Bottom strip */
.ih-19__strip{
  position:absolute;bottom:0;left:0;right:0;padding:8px 10px;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  display:flex;align-items:center;justify-content:space-between;
}
.ih-19__title{font-size:11px;font-weight:700;color:var(--text)}
.ih-19__views{font-size:10px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){.ih-19__img,.ih-19__thumb,.ih-19__icon-wrap{transition:none}.ih-19__icon-wrap{opacity:1;transform:none}}
```

### 20. CSS Image Card Flip 3D Animation Hover

**Type:** Pure CSS
**Description:** Cards that rotate 180deg on their Y-axis to reveal a back face with descriptive content, driven entirely by CSS 3D transforms.

**HTML:**
```html
<div class="ih-20">
  <div class="ih-20__grid">
    <div class="ih-20__scene">
      <div class="ih-20__flipper">
        <div class="ih-20__front">
          <div class="ih-20__front-img ih-20__front-img--1"><span class="ih-20__face-icon">🔭</span></div>
          <div class="ih-20__front-label">
            <p class="ih-20__front-name">Cosmos Explorer</p>
            <p class="ih-20__front-cat">Astrophotography</p>
          </div>
          <span class="ih-20__hint">Hover to flip</span>
        </div>
        <div class="ih-20__back ih-20__back--1">
          <span class="ih-20__back-icon">🌌</span>
          <p class="ih-20__back-title">20-Week Course</p>
          <p class="ih-20__back-desc">Master astrophotography from light pollution basics to deep-sky stacking in Photoshop.</p>
          <button class="ih-20__back-cta">Enroll Now</button>
        </div>
      </div>
    </div>
    <div class="ih-20__scene">
      <div class="ih-20__flipper">
        <div class="ih-20__front">
          <div class="ih-20__front-img ih-20__front-img--2"><span class="ih-20__face-icon">🌿</span></div>
          <div class="ih-20__front-label">
            <p class="ih-20__front-name">Bio Systems</p>
            <p class="ih-20__front-cat">Botany Research</p>
          </div>
          <span class="ih-20__hint">Hover to flip</span>
        </div>
        <div class="ih-20__back ih-20__back--2">
          <span class="ih-20__back-icon">🧬</span>
          <p class="ih-20__back-title">Lab Access</p>
          <p class="ih-20__back-desc">12 months of virtual lab sessions with live microscopy and specimen archive access.</p>
          <button class="ih-20__back-cta">Join Lab</button>
        </div>
      </div>
    </div>
    <div class="ih-20__scene">
      <div class="ih-20__flipper">
        <div class="ih-20__front">
          <div class="ih-20__front-img ih-20__front-img--3"><span class="ih-20__face-icon">🎭</span></div>
          <div class="ih-20__front-label">
            <p class="ih-20__front-name">Digital Arts</p>
            <p class="ih-20__front-cat">Creative Studio</p>
          </div>
          <span class="ih-20__hint">Hover to flip</span>
        </div>
        <div class="ih-20__back ih-20__back--3">
          <span class="ih-20__back-icon">🎨</span>
          <p class="ih-20__back-title">Creator Pack</p>
          <p class="ih-20__back-desc">Unlimited generative art tools, 500+ premium assets, and weekly critique sessions.</p>
          <button class="ih-20__back-cta">Get Access</button>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ih-20,.ih-20 *,.ih-20 *::before,.ih-20 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-20 ::selection{background:#34d399;color:#000}
.ih-20{
  --accent:#34d399;--accent2:#818cf8;--bg:#07070f;--text:#f1f5f9;--muted:#64748b;
  --duration:0.65s;--ease:cubic-bezier(0.45,0,0.55,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
  perspective:1000px;
}
.ih-20__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:780px;width:100%}

.ih-20__scene{perspective:800px;aspect-ratio:3/4}
/* The flipper: transform-style:preserve-3d is the key */
.ih-20__flipper{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform var(--duration) var(--ease);
  cursor:pointer;
}
.ih-20__scene:hover .ih-20__flipper{transform:rotateY(180deg)}

/* Both faces share absolute positioning and backface-visibility:hidden */
.ih-20__front, .ih-20__back{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
/* Back face pre-rotated so it shows on flip */
.ih-20__back{transform:rotateY(180deg);flex-direction:column;justify-content:center;align-items:center;padding:20px}

.ih-20__front-img{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.ih-20__front-img--1{background:linear-gradient(145deg,#1e1b4b,#312e81,#4338ca,#818cf8)}
.ih-20__front-img--2{background:linear-gradient(145deg,#052e16,#065f46,#059669,#34d399)}
.ih-20__front-img--3{background:linear-gradient(145deg,#3b0764,#6b21a8,#9333ea,#e879f9)}

.ih-20__back--1{background:linear-gradient(135deg,#13103a,#1e1b4b)}
.ih-20__back--2{background:linear-gradient(135deg,#031b10,#052e16)}
.ih-20__back--3{background:linear-gradient(135deg,#230335,#3b0764)}

.ih-20__face-icon{font-size:56px;opacity:0.35;position:relative;z-index:1}
.ih-20__front-label{position:relative;z-index:1;padding:16px;background:linear-gradient(to top,rgba(0,0,0,0.8),transparent)}
.ih-20__front-name{font-size:14px;font-weight:700;color:var(--text)}
.ih-20__front-cat{font-size:10px;color:var(--muted);margin-top:2px}

/* Back content */
.ih-20__back-icon{font-size:36px;margin-bottom:12px}
.ih-20__back-title{font-size:15px;font-weight:800;color:var(--text);text-align:center;margin-bottom:8px}
.ih-20__back-desc{font-size:11px;color:var(--muted);text-align:center;line-height:1.5;margin-bottom:14px}
.ih-20__back-cta{
  padding:8px 18px;border-radius:24px;
  font-size:11px;font-weight:700;letter-spacing:0.05em;
  color:#000;background:var(--accent);border:none;cursor:pointer;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.ih-20__back-cta:hover{transform:scale(1.04);box-shadow:0 0 16px rgba(52,211,153,0.4)}
.ih-20__back--3 .ih-20__back-cta{background:#e879f9;color:#000}
.ih-20__back--3 .ih-20__back-cta:hover{box-shadow:0 0 16px rgba(232,121,249,0.4)}

/* Flip hint badge */
.ih-20__hint{
  position:absolute;top:10px;right:10px;z-index:2;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:3px 8px;font-size:9px;font-weight:700;color:var(--muted);
  transition:opacity 0.3s ease;
}
.ih-20__scene:hover .ih-20__hint{opacity:0}

@media(prefers-reduced-motion:reduce){.ih-20__flipper{transition:none}.ih-20__scene:hover .ih-20__flipper{transform:none}}
```

---
## 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 neon button treatments on one dark grid backdrop — border-trace cyan, pulse-glow pink, chamfered violet, ghost amber, double-border teal, and a red fill-sweep CTA. A cyan border-trace that draws itself on hover (SVG stroke-dasharray), a pink pulse-glow with an idle breathing animation, a solid violet with chamfered clip-path corners and a gradient sweep, an amber ghost with a vertical scanline that wipes top-to-bottom on hover, a teal double-bordered button using outline-offset for the secondary ring, and a red fill-sweep that slides a colored fill in from the left. Each button pairs with a phosphor-style icon. Rajdhani + Orbitron. Best for cyberpunk landing pages, gaming UIs, music/club sites, retro-futuristic SaaS heros.

**HTML:**
```html
<section class="nn-btn" aria-label="Neon buttons demo">
  <div class="stage">
    <button class="btn btn-trace" type="button">
      <svg class="tracer" viewBox="0 0 220 54" preserveAspectRatio="none" aria-hidden="true">
        <rect x="1" y="1" width="218" height="52" rx="0"/>
      </svg>
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
      ACTIVATE
    </button>

    <button class="btn btn-pulse" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
      IGNITE
    </button>

    <button class="btn btn-solid" type="button">
      <svg class="btn-icon" 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>
      EXECUTE
    </button>

    <button class="btn btn-ghost" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true" style="fill:none;stroke:currentColor;stroke-width:2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
      CONNECT
    </button>

    <button class="btn btn-double" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      SECURE
    </button>

    <button class="btn btn-sweep" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true" style="fill:none;stroke:currentColor;stroke-width:2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      LAUNCH
    </button>
  </div>
</section>
```

**CSS:**
```css
/* ─── 01 Neon Buttons — six glow treatments on dark grid ───────── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Orbitron:wght@400;700;900&display=swap');

.nn-btn {
  position: relative;
  width: 100%;
  min-height: 560px;
  background: #04040f;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Dark grid backdrop — was body::before; scoped to wrapper. */
.nn-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,200,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,200,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.nn-btn .stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 36px 48px;
  align-items: center;
  justify-items: center;
  padding: 24px;
}

.nn-btn .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 44px;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.nn-btn .btn-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* 1 — BORDER TRACE CYAN */
.nn-btn .btn-trace { color: #00ffe5; background: transparent; }
.nn-btn .btn-trace::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(0,255,229,0.25);
}
.nn-btn .btn-trace svg.tracer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.nn-btn .btn-trace svg.tracer rect {
  fill: none;
  stroke: #00ffe5;
  stroke-width: 2;
  stroke-dasharray: 0 9999;
  transition: stroke-dasharray 0s;
  filter: drop-shadow(0 0 6px #00ffe5) drop-shadow(0 0 14px #00ffe5);
}
.nn-btn .btn-trace:hover svg.tracer rect {
  stroke-dasharray: 9999 0;
  transition: stroke-dasharray 0.65s ease;
}
.nn-btn .btn-trace:hover {
  color: #fff;
  text-shadow: 0 0 12px #00ffe5, 0 0 28px #00ffe5;
  background: rgba(0,255,229,0.05);
  box-shadow: inset 0 0 20px rgba(0,255,229,0.07);
}

/* 2 — PULSE GLOW PINK */
.nn-btn .btn-pulse {
  color: #ff2d78;
  background: rgba(255,45,120,0.08);
  border: 1.5px solid #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.8);
  box-shadow:
    0 0 12px rgba(255,45,120,0.4),
    inset 0 0 12px rgba(255,45,120,0.08);
  animation: nn-btn-pulse 2.2s ease-in-out infinite;
}
@keyframes nn-btn-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,45,120,0.35), 0 0 30px rgba(255,45,120,0.15), inset 0 0 12px rgba(255,45,120,0.07); }
  50%      { box-shadow: 0 0 22px rgba(255,45,120,0.7),  0 0 55px rgba(255,45,120,0.3),  inset 0 0 20px rgba(255,45,120,0.12); }
}
.nn-btn .btn-pulse:hover {
  background: rgba(255,45,120,0.18);
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 18px #ff2d78;
  box-shadow:
    0 0 28px rgba(255,45,120,0.8),
    0 0 70px rgba(255,45,120,0.4),
    inset 0 0 28px rgba(255,45,120,0.15);
  animation: none;
  transform: scale(1.04);
}

/* 3 — SOLID FILLED VIOLET */
.nn-btn .btn-solid {
  color: #0d0020;
  background: linear-gradient(135deg, #bf5fff, #7b00ff);
  box-shadow:
    0 0 20px rgba(127,0,255,0.6),
    0 0 50px rgba(127,0,255,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}
.nn-btn .btn-solid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.nn-btn .btn-solid:hover {
  background: linear-gradient(135deg, #d47fff, #9b2fff);
  box-shadow:
    0 0 35px rgba(127,0,255,0.9),
    0 0 90px rgba(127,0,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

/* 4 — GHOST + SCANLINE AMBER */
.nn-btn .btn-ghost {
  color: #ffb700;
  background: transparent;
  border: 2px solid #ffb700;
  text-shadow: 0 0 10px rgba(255,183,0,0.9);
  box-shadow: 0 0 16px rgba(255,183,0,0.3), inset 0 0 16px rgba(255,183,0,0.05);
  overflow: hidden;
}
.nn-btn .btn-ghost::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255,183,0,0.18), transparent);
  transform: skewY(-4deg);
  transition: top 0s;
}
.nn-btn .btn-ghost:hover::before {
  top: 200%;
  transition: top 0.5s ease;
}
.nn-btn .btn-ghost:hover {
  background: rgba(255,183,0,0.1);
  box-shadow:
    0 0 28px rgba(255,183,0,0.65),
    0 0 60px rgba(255,183,0,0.3),
    inset 0 0 22px rgba(255,183,0,0.12);
  color: #fff;
  text-shadow: 0 0 6px #ffb700, 0 0 20px #ffb700;
}

/* 5 — DOUBLE BORDER TEAL */
.nn-btn .btn-double {
  color: #00ffcc;
  background: transparent;
  padding: 14px 40px;
  outline: 1px solid rgba(0,255,204,0.2);
  outline-offset: 5px;
  border: 1.5px solid #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
  box-shadow: 0 0 14px rgba(0,255,204,0.3), inset 0 0 14px rgba(0,255,204,0.05);
  transition: all 0.3s ease;
}
.nn-btn .btn-double:hover {
  outline-offset: 2px;
  outline-color: rgba(0,255,204,0.7);
  box-shadow:
    0 0 28px rgba(0,255,204,0.6),
    0 0 70px rgba(0,255,204,0.25),
    inset 0 0 24px rgba(0,255,204,0.1);
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 16px #00ffcc;
  background: rgba(0,255,204,0.07);
}

/* 6 — FILL SWEEP RED */
.nn-btn .btn-sweep {
  color: #ff3c3c;
  background: transparent;
  border: 1.5px solid #ff3c3c;
  text-shadow: 0 0 8px rgba(255,60,60,0.8);
  overflow: hidden;
  z-index: 0;
}
.nn-btn .btn-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff3c3c, #ff0066);
  transform: translateX(-105%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
}
.nn-btn .btn-sweep:hover::before { transform: translateX(0); }
.nn-btn .btn-sweep:hover {
  color: #000;
  text-shadow: none;
  border-color: transparent;
  box-shadow: 0 0 30px rgba(255,60,60,0.7), 0 0 70px rgba(255,60,60,0.3);
  letter-spacing: 0.22em;
}

@media (max-width: 640px) {
  .nn-btn .stage { grid-template-columns: 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-btn .btn,
  .nn-btn .btn-pulse,
  .nn-btn .btn-ghost::before,
  .nn-btn .btn-sweep::before,
  .nn-btn .btn-trace svg.tracer rect { animation: none !important; transition: none !important; }
}
```

### 02. Neon Typography

**Type:** Pure CSS
**Description:** Five neon text treatments arranged like a row of vintage bar signs — a classic cyan tube reading "OPEN 24/7", a flickering pink "NOVA CLUB" with two letters wired as dead bulbs that intermittently glow back to half-life, a chroma-shifting "CYBERPUNK" outline that cycles through pink/yellow/cyan/blue gradient stops, a breathing violet "PHANTOM" in Monoton, and a warm amber "LIVE MUSIC" framed by pulsing star glyphs. Each effect uses layered text-shadow stacks (6 layers deep on the cyan tube) to fake the gaslight-style outer glow that single-shadow approximations always miss. CRT scanlines overlay the entire stage. Boogaloo + Bebas Neue + Special Elite + Monoton. Best for music venues, bar/restaurant sites, retro-gaming, vaporwave/cyberpunk hero sections.

**HTML:**
```html
<section class="nn-typ" aria-label="Neon typography demo">
  <div class="stage">
    <div class="neon-classic">OPEN 24/7</div>

    <div class="neon-flicker" aria-label="NOVA CLUB">
      <span style="--d:3.5s;--del:0s">N</span><span style="--d:4.2s;--del:0.2s">O</span><span class="dead" style="--d:5s;--del:0.1s">V</span><span style="--d:3.8s;--del:0.4s">A</span>
      <span class="gap" aria-hidden="true">&nbsp;</span>
      <span style="--d:4.5s;--del:0.3s">C</span><span class="dead" style="--d:6s;--del:0.2s">L</span><span style="--d:3.2s;--del:0s">U</span><span style="--d:5.1s;--del:0.5s">B</span>
    </div>

    <div class="neon-outline">CYBERPUNK</div>

    <div class="neon-intense">PHANTOM</div>

    <div class="neon-frame">
      <span class="neon-frame-text">LIVE MUSIC</span>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Neon Typography — retro signage / vintage bar signs ───── */
@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Bebas+Neue&family=Special+Elite&family=Monoton&display=swap');

.nn-typ {
  position: relative;
  width: 100%;
  min-height: 700px;
  background: #060614;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Scanlines overlay — was body::after at z-index 100; scoped to
   wrapper at z-index 5 so it covers the demo without escaping. */
.nn-typ::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 5;
}

.nn-typ .stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
  padding: 50px 60px;
}

/* 1 — CLASSIC CYAN NEON SIGN */
.nn-typ .neon-classic {
  font-family: 'Boogaloo', cursive;
  font-size: 72px;
  color: #fff;
  text-shadow:
    0 0 4px #fff,
    0 0 10px #fff,
    0 0 18px #fff,
    0 0 30px #00eeff,
    0 0 55px #00eeff,
    0 0 80px #00eeff,
    0 0 120px #00eeff;
  letter-spacing: 0.05em;
}

/* 2 — FLICKERING BROKEN SIGN */
.nn-typ .neon-flicker {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 0.12em;
  color: #ff2d78;
  text-shadow:
    0 0 5px #ff2d78,
    0 0 15px #ff2d78,
    0 0 30px #ff2d78,
    0 0 60px #ff2d78,
    0 0 100px #ff2d78;
}
.nn-typ .neon-flicker span {
  display: inline-block;
  animation: nn-typ-flicker1 var(--d, 3s) var(--del, 0s) infinite;
}
.nn-typ .neon-flicker .dead {
  color: rgba(255,45,120,0.18);
  text-shadow: none;
  animation: nn-typ-deadbulb var(--d, 4s) var(--del, 0s) infinite;
}

@keyframes nn-typ-flicker1 {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #ff2d78,
      0 0 12px #ff2d78,
      0 0 26px #ff2d78,
      0 0 52px #ff2d78,
      0 0 90px #ff2d78;
    color: #ff2d78;
  }
  20%, 24%, 55% {
    text-shadow: none;
    color: rgba(255,45,120,0.15);
  }
}

@keyframes nn-typ-deadbulb {
  0%, 45%, 55%, 100% {
    color: rgba(255,45,120,0.18);
    text-shadow: none;
  }
  48%, 52% {
    color: rgba(255,45,120,0.55);
    text-shadow: 0 0 8px rgba(255,45,120,0.4);
  }
}

/* 3 — MULTICOLOR STROKE OUTLINE */
.nn-typ .neon-outline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #ff00cc 0%, #ffcc00 35%, #00ffcc 65%, #00aaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,0,204,0.6)) drop-shadow(0 0 20px rgba(0,255,204,0.4));
  animation: nn-typ-chroma 5s ease-in-out infinite alternate;
}
@keyframes nn-typ-chroma {
  0%   { filter: drop-shadow(0 0 8px rgba(255,0,204,0.7)) drop-shadow(0 0 22px rgba(0,255,204,0.35)); }
  50%  { filter: drop-shadow(0 0 16px rgba(255,204,0,0.8)) drop-shadow(0 0 36px rgba(0,170,255,0.4)); }
  100% { filter: drop-shadow(0 0 8px rgba(0,255,204,0.7)) drop-shadow(0 0 22px rgba(255,0,204,0.35)); }
}

/* 4 — SINGLE WORD INTENSE VIOLET */
.nn-typ .neon-intense {
  font-family: 'Monoton', cursive;
  font-size: 52px;
  color: #e040fb;
  letter-spacing: 0.25em;
  text-shadow:
    0 0 2px #fff,
    0 0 6px #e040fb,
    0 0 16px #e040fb,
    0 0 32px #e040fb,
    0 0 55px #7b00d4,
    0 0 90px #7b00d4;
  animation: nn-typ-breathe 3s ease-in-out infinite;
}
@keyframes nn-typ-breathe {
  0%, 100% {
    text-shadow:
      0 0 2px #fff,
      0 0 6px #e040fb,
      0 0 16px #e040fb,
      0 0 32px #e040fb,
      0 0 55px #7b00d4,
      0 0 90px #7b00d4;
  }
  50% {
    text-shadow:
      0 0 2px #fff,
      0 0 10px #e040fb,
      0 0 28px #e040fb,
      0 0 52px #e040fb,
      0 0 80px #b040fb,
      0 0 140px #7b00d4;
  }
}

/* 5 — RETRO SIGN FRAME */
.nn-typ .neon-frame {
  position: relative;
  padding: 18px 40px;
  border: 2px solid rgba(255, 220, 0, 0.3);
  box-shadow:
    0 0 14px rgba(255,220,0,0.25),
    inset 0 0 14px rgba(255,220,0,0.05);
}
.nn-typ .neon-frame::before,
.nn-typ .neon-frame::after {
  content: '✦';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #ffdc00;
  text-shadow: 0 0 10px #ffdc00, 0 0 25px #ffdc00;
  animation: nn-typ-starpulse 2s ease-in-out infinite;
}
.nn-typ .neon-frame::before { left: 14px; }
.nn-typ .neon-frame::after  { right: 14px; }
@keyframes nn-typ-starpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.nn-typ .neon-frame-text {
  font-family: 'Special Elite', cursive;
  font-size: 38px;
  letter-spacing: 0.14em;
  color: #ffdc00;
  text-shadow:
    0 0 4px #ffdc00,
    0 0 12px #ffdc00,
    0 0 26px rgba(255,180,0,0.9),
    0 0 50px rgba(255,140,0,0.6);
  animation: nn-typ-warmglow 2.5s ease-in-out infinite;
}
@keyframes nn-typ-warmglow {
  0%, 100% {
    text-shadow:
      0 0 4px #ffdc00,
      0 0 12px #ffdc00,
      0 0 26px rgba(255,180,0,0.9),
      0 0 50px rgba(255,140,0,0.6);
  }
  50% {
    text-shadow:
      0 0 6px #fff,
      0 0 16px #ffdc00,
      0 0 38px rgba(255,180,0,1),
      0 0 72px rgba(255,140,0,0.7);
  }
}

@media (max-width: 640px) {
  .nn-typ .neon-classic { font-size: 48px; }
  .nn-typ .neon-flicker { font-size: 42px; }
  .nn-typ .neon-outline { font-size: 56px; }
  .nn-typ .neon-intense { font-size: 36px; }
  .nn-typ .neon-frame-text { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-typ .neon-flicker span,
  .nn-typ .neon-outline,
  .nn-typ .neon-intense,
  .nn-typ .neon-frame::before,
  .nn-typ .neon-frame::after,
  .nn-typ .neon-frame-text { animation: none !important; }
}
```

### 03. Neon Pricing Cards

**Type:** Pure CSS
**Description:** A three-tier pricing layout — Starter (cyan), Pro (pink, featured with "Most Popular" badge), Enterprise (violet) — each ringed by a conic-gradient border that rotates continuously. The trick is CSS @property: registering --a as a typed <angle> means it can be interpolated, so a simple to-360deg keyframe spins the gradient smoothly. Pseudo-elements stack the rotating gradient under a solid card background so only the 1.5px ring edge shows. Hover lifts the card and intensifies the ring glow. Feature lists use arrow bullets colored to the tier. CTAs vary by tier: outlined cyan, solid pink gradient, outlined violet. Space Grotesk + Exo 2. Best for SaaS pricing pages, hosting/devtool tiers, cyberpunk product comparison.

**HTML:**
```html
<section class="nn-crd" aria-label="Neon pricing cards demo">
  <div class="stage">

    <article class="card card-cyan">
      <div class="card-tier">Starter</div>
      <div>
        <div class="card-price"><sup>$</sup>9</div>
        <div class="card-period">per month</div>
      </div>
      <div class="card-divider" aria-hidden="true"></div>
      <ul class="card-features">
        <li>5 active projects</li>
        <li>10 GB cloud storage</li>
        <li>API access (1k req/day)</li>
        <li>Community support</li>
      </ul>
      <button class="card-cta" type="button">Get Started</button>
    </article>

    <article class="card card-pink card-featured">
      <div class="badge">Most Popular</div>
      <div class="card-tier">Pro</div>
      <div>
        <div class="card-price"><sup>$</sup>29</div>
        <div class="card-period">per month</div>
      </div>
      <div class="card-divider" aria-hidden="true"></div>
      <ul class="card-features">
        <li>Unlimited projects</li>
        <li>100 GB cloud storage</li>
        <li>API access (unlimited)</li>
        <li>Priority support 24/7</li>
        <li>Custom domains</li>
      </ul>
      <button class="card-cta" type="button">Upgrade Now</button>
    </article>

    <article class="card card-violet">
      <div class="card-tier">Enterprise</div>
      <div>
        <div class="card-price"><sup>$</sup>99</div>
        <div class="card-period">per month</div>
      </div>
      <div class="card-divider" aria-hidden="true"></div>
      <ul class="card-features">
        <li>Unlimited everything</li>
        <li>1 TB cloud storage</li>
        <li>Dedicated servers</li>
        <li>SLA 99.99% uptime</li>
        <li>White-label option</li>
      </ul>
      <button class="card-cta" type="button">Contact Sales</button>
    </article>

  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Neon Pricing Cards — rotating conic-gradient border ───── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&family=Exo+2:wght@300;700;900&display=swap');

/* @property is a document-level registration; can't be scoped to a
   wrapper. Declared once here and referenced from .nn-crd. */
@property --nn-crd-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.nn-crd {
  position: relative;
  width: 100%;
  min-height: 640px;
  background: #070711;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  font-family: 'Space Grotesk', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Ambient gradient backdrop — was body::before fixed; scoped. */
.nn-crd::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 50%, rgba(0,180,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 50%, rgba(180,0,255,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.nn-crd .stage {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 28px;
  padding: 24px;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}

.nn-crd .card {
  position: relative;
  width: 220px;
  padding: 32px 24px 28px;
  border-radius: 4px;
  background: rgba(12,12,28,0.95);
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.nn-crd .card-featured { padding-top: 40px; }
.nn-crd .card:hover { transform: translateY(-6px); }

/* Rotating conic border via pseudo */
.nn-crd .card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 6px;
  background: conic-gradient(
    from var(--nn-crd-a),
    var(--c1) 0deg,
    var(--c2) 90deg,
    transparent 130deg,
    transparent 230deg,
    var(--c2) 270deg,
    var(--c1) 360deg
  );
  animation: nn-crd-spin 3s linear infinite;
  z-index: 0;
}
@keyframes nn-crd-spin { to { --nn-crd-a: 360deg; } }

.nn-crd .card::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 3px;
  background: #0c0c1e;
  z-index: 1;
}
.nn-crd .card > * { position: relative; z-index: 2; }

.nn-crd .card-cyan   { --c1: #00eeff; --c2: rgba(0,238,255,0.3); }
.nn-crd .card-pink   { --c1: #ff2d78; --c2: rgba(255,45,120,0.3); }
.nn-crd .card-violet { --c1: #bf5fff; --c2: rgba(191,95,255,0.3); }

.nn-crd .card-cyan:hover::before   { box-shadow: 0 0 28px rgba(0,238,255,0.45),  0 0 60px rgba(0,238,255,0.2); }
.nn-crd .card-pink:hover::before   { box-shadow: 0 0 28px rgba(255,45,120,0.45), 0 0 60px rgba(255,45,120,0.2); }
.nn-crd .card-violet:hover::before { box-shadow: 0 0 28px rgba(191,95,255,0.45), 0 0 60px rgba(191,95,255,0.2); }

/* Content */
.nn-crd .card-tier {
  font-family: 'Exo 2', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nn-crd .card-cyan   .card-tier { color: #00eeff; text-shadow: 0 0 10px #00eeff; }
.nn-crd .card-pink   .card-tier { color: #ff2d78; text-shadow: 0 0 10px #ff2d78; }
.nn-crd .card-violet .card-tier { color: #bf5fff; text-shadow: 0 0 10px #bf5fff; }

.nn-crd .card-price {
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: 42px;
  color: #f0f0ff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.nn-crd .card-price sup {
  font-size: 18px;
  font-weight: 600;
  vertical-align: super;
  color: rgba(240,240,255,0.6);
}
.nn-crd .card-period {
  font-size: 12px;
  color: rgba(240,240,255,0.35);
  margin-top: 2px;
  letter-spacing: 0.05em;
}

.nn-crd .card-divider { height: 1px; background: rgba(255,255,255,0.07); }
.nn-crd .card-cyan   .card-divider { background: linear-gradient(90deg, transparent, rgba(0,238,255,0.35), transparent); }
.nn-crd .card-pink   .card-divider { background: linear-gradient(90deg, transparent, rgba(255,45,120,0.35), transparent); }
.nn-crd .card-violet .card-divider { background: linear-gradient(90deg, transparent, rgba(191,95,255,0.35), transparent); }

.nn-crd .card-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.nn-crd .card-features li {
  font-size: 12px;
  color: rgba(210,210,240,0.7);
  padding-left: 18px;
  position: relative;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.nn-crd .card-features li::before {
  content: '▸';
  position: absolute;
  left: 0;
  font-size: 10px;
}
.nn-crd .card-cyan   .card-features li::before { color: #00eeff; text-shadow: 0 0 6px #00eeff; }
.nn-crd .card-pink   .card-features li::before { color: #ff2d78; text-shadow: 0 0 6px #ff2d78; }
.nn-crd .card-violet .card-features li::before { color: #bf5fff; text-shadow: 0 0 6px #bf5fff; }

.nn-crd .card-cta {
  margin-top: auto;
  padding: 11px 0;
  text-align: center;
  font-family: 'Exo 2', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  transition: all 0.25s ease;
  width: 100%;
}
.nn-crd .card-cyan .card-cta {
  background: rgba(0,238,255,0.1);
  color: #00eeff;
  border: 1px solid rgba(0,238,255,0.5);
  text-shadow: 0 0 8px rgba(0,238,255,0.8);
  box-shadow: 0 0 12px rgba(0,238,255,0.15);
}
.nn-crd .card-cyan .card-cta:hover { background: rgba(0,238,255,0.22); box-shadow: 0 0 22px rgba(0,238,255,0.4); }
.nn-crd .card-pink .card-cta {
  background: linear-gradient(135deg, rgba(255,45,120,0.85), rgba(200,20,90,0.85));
  color: #fff;
  text-shadow: 0 0 8px rgba(255,45,120,0.5);
  box-shadow: 0 0 18px rgba(255,45,120,0.4), 0 0 40px rgba(255,45,120,0.15);
}
.nn-crd .card-pink .card-cta:hover { box-shadow: 0 0 28px rgba(255,45,120,0.65), 0 0 60px rgba(255,45,120,0.25); }
.nn-crd .card-violet .card-cta {
  background: rgba(191,95,255,0.12);
  color: #bf5fff;
  border: 1px solid rgba(191,95,255,0.5);
  text-shadow: 0 0 8px rgba(191,95,255,0.8);
  box-shadow: 0 0 12px rgba(191,95,255,0.15);
}
.nn-crd .card-violet .card-cta:hover { background: rgba(191,95,255,0.22); box-shadow: 0 0 22px rgba(191,95,255,0.4); }

.nn-crd .badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Exo 2', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 14px;
  background: linear-gradient(135deg, #ff2d78, #d4006a);
  color: #fff;
  z-index: 10;
  text-shadow: 0 0 6px rgba(255,45,120,0.8);
  box-shadow: 0 0 12px rgba(255,45,120,0.5);
}

@media (prefers-reduced-motion: reduce) {
  .nn-crd .card::before { animation: none !important; }
  .nn-crd .card { transition: none !important; }
}
```

### 04. Synthwave Scene

**Type:** CSS + JS
**Description:** A complete 80s retrofuture scene: a starfield (90 stars injected by JS, each with randomised size and twinkle timing), a vertically-banded sun melting from yellow to violet with horizontal CRT bands cutting through it, a glowing magenta horizon line, a perspective-rotated pink wireframe grid that scrolls toward the viewer, a polygon mountain silhouette with wireframe ridge highlights, a CRT-scanline overlay across the whole composition, and the "SYNTHWAVE" title with a layered magenta glow, "Retro · Future · Neon" tagline, and a "◈ 1 9 8 6 ◈" year badge in golden text. Pure CSS + 15 lines of JS for the stars. Audiowide + Oxanium. Best for vaporwave/synthwave landing pages, music albums, retro-gaming, nostalgic hero sections.

**HTML:**
```html
<section class="nn-syn" aria-label="Synthwave scene demo">
  <div class="scene">

    <div class="stars" data-nn-syn-stars aria-hidden="true"></div>

    <div class="sun-wrap" aria-hidden="true">
      <div class="sun"></div>
      <div class="sun-lines"></div>
    </div>

    <div class="horizon" aria-hidden="true"></div>

    <div class="mountains" aria-hidden="true">
      <svg viewBox="0 0 700 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="nn-syn-mtnGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#1a0035"/>
            <stop offset="100%" stop-color="#0a0015"/>
          </linearGradient>
        </defs>
        <polygon points="0,100 0,65 60,30 120,58 180,18 240,52 300,5 360,48 420,22 480,55 540,28 600,60 660,35 700,48 700,100" fill="url(#nn-syn-mtnGrad)"/>
        <line x1="0" y1="65" x2="60" y2="30" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="60" y1="30" x2="120" y2="58" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="120" y1="58" x2="180" y2="18" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="180" y1="18" x2="240" y2="52" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="240" y1="52" x2="300" y2="5" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="300" y1="5" x2="360" y2="48" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="360" y1="48" x2="420" y2="22" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="420" y1="22" x2="480" y2="55" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="480" y1="55" x2="540" y2="28" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="540" y1="28" x2="600" y2="60" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="600" y1="60" x2="660" y2="35" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
        <line x1="660" y1="35" x2="700" y2="48" stroke="rgba(255,0,200,0.5)" stroke-width="0.8"/>
      </svg>
    </div>

    <div class="grid-wrap" aria-hidden="true">
      <div class="grid"></div>
      <div class="grid-fade"></div>
    </div>

    <div class="scanlines" aria-hidden="true"></div>

    <div class="title-wrap">
      <div class="title-main">SYNTHWAVE</div>
      <div class="title-sub">Retro · Future · Neon</div>
      <div class="year">◈ 1 9 8 6 ◈</div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Synthwave Scene — 80s retrofuture composition ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Oxanium:wght@700;800&display=swap');

.nn-syn {
  position: relative;
  width: 100%;
  min-height: 560px;
  background: #0a0015;
  font-family: 'Audiowide', cursive;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

.nn-syn .scene {
  position: relative;
  width: 700px;
  max-width: 100%;
  height: 480px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #090010 0%,
    #130025 30%,
    #1a003a 55%,
    #260050 70%,
    #0f0020 100%
  );
}

.nn-syn .stars { position: absolute; inset: 0 0 50% 0; overflow: hidden; }
.nn-syn .star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: nn-syn-twinkle var(--dur, 2s) var(--del, 0s) ease-in-out infinite alternate;
}
@keyframes nn-syn-twinkle {
  from { opacity: var(--min, 0.3); transform: scale(1); }
  to   { opacity: 1; transform: scale(1.4); }
}

.nn-syn .sun-wrap {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
}
.nn-syn .sun {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    #ffe066 0%,
    #ff9900 20%,
    #ff2d78 45%,
    #c800ff 65%,
    #6600cc 80%,
    #2a0060 100%
  );
  box-shadow:
    0 0 30px rgba(255,150,0,0.6),
    0 0 70px rgba(255,80,150,0.5),
    0 0 120px rgba(200,0,255,0.35),
    0 0 200px rgba(100,0,200,0.2);
  animation: nn-syn-sunpulse 4s ease-in-out infinite;
}
@keyframes nn-syn-sunpulse {
  0%, 100% { box-shadow: 0 0 28px rgba(255,150,0,0.55), 0 0 65px rgba(255,80,150,0.45), 0 0 110px rgba(200,0,255,0.3); }
  50%      { box-shadow: 0 0 42px rgba(255,150,0,0.75), 0 0 90px rgba(255,80,150,0.6),  0 0 160px rgba(200,0,255,0.45); }
}

.nn-syn .sun-lines {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.nn-syn .sun-lines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 8px,
    rgba(10,0,20,0.55) 8px,
    rgba(10,0,20,0.55) 12px
  );
}

.nn-syn .horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,60,180,0.8) 20%,
    #ff2aff 50%,
    rgba(255,60,180,0.8) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 18px rgba(255,40,255,0.8),
    0 0 45px rgba(255,40,255,0.4),
    0 0 80px rgba(255,40,255,0.2);
}

.nn-syn .grid-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 57%;
  bottom: 0;
  overflow: hidden;
  perspective: 300px;
}
.nn-syn .grid {
  position: absolute;
  width: 200%;
  left: -50%;
  top: 0;
  height: 300%;
  transform-origin: top center;
  transform: rotateX(55deg) translateY(0);
  background-image:
    linear-gradient(rgba(255,0,200,0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,200,0.7) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: nn-syn-gridscroll 1.5s linear infinite;
}
@keyframes nn-syn-gridscroll {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}
.nn-syn .grid-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,0,21,0.0) 0%, rgba(10,0,21,0.95) 100%),
    linear-gradient(90deg, rgba(10,0,21,0.8) 0%, transparent 15%, transparent 85%, rgba(10,0,21,0.8) 100%);
  pointer-events: none;
}

.nn-syn .mountains {
  position: absolute;
  left: 0;
  right: 0;
  top: 43%;
  height: 18%;
  overflow: hidden;
}
.nn-syn .mountains svg { width: 100%; height: 100%; }

.nn-syn .scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 3px
  );
  pointer-events: none;
  z-index: 10;
}

.nn-syn .title-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
  z-index: 5;
}
.nn-syn .title-main {
  font-family: 'Oxanium', sans-serif;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 16px #ff69d0,
    0 0 36px #ff2aff,
    0 0 70px rgba(200,0,255,0.7);
  animation: nn-syn-titlebreath 3s ease-in-out infinite;
}
.nn-syn .title-sub {
  font-family: 'Audiowide', cursive;
  font-size: 13px;
  letter-spacing: 0.55em;
  color: rgba(255,150,230,0.85);
  text-shadow: 0 0 8px rgba(255,50,200,0.7), 0 0 20px rgba(255,0,200,0.4);
  margin-top: 6px;
  text-transform: uppercase;
}
@keyframes nn-syn-titlebreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.88; }
}
.nn-syn .year {
  font-family: 'Audiowide', cursive;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(255,220,0,0.8);
  text-shadow: 0 0 10px rgba(255,200,0,0.7);
  margin-top: 10px;
}

@media (max-width: 720px) {
  .nn-syn .scene { width: 100%; height: 380px; }
  .nn-syn .title-main { font-size: 40px; }
  .nn-syn .sun-wrap { width: 120px; height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-syn .star,
  .nn-syn .sun,
  .nn-syn .grid,
  .nn-syn .title-main { animation: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped star injection — finds the stars container inside .nn-syn
  // only, so the demo can render anywhere on the page without
  // colliding on a global element id.
  const root = document.querySelector('.nn-syn');
  if (!root) return;
  const stars = root.querySelector('[data-nn-syn-stars]');
  if (!stars || stars.childElementCount > 0) return;
  for (let i = 0; i < 90; i++) {
    const s = document.createElement('div');
    s.className = 'star';
    const size = Math.random() * 2.2 + 0.5;
    s.style.cssText =
      'width:' + size + 'px;' +
      'height:' + size + 'px;' +
      'left:' + (Math.random() * 100) + '%;' +
      'top:' + (Math.random() * 100) + '%;' +
      '--dur:' + (Math.random() * 2.5 + 1.2).toFixed(2) + 's;' +
      '--del:' + (Math.random() * 3).toFixed(2) + 's;' +
      '--min:' + (Math.random() * 0.3 + 0.1).toFixed(2) + ';';
    stars.appendChild(s);
  }
})();
```

### 05. Neon Form Controls

**Type:** CSS + JS
**Description:** A "System Controls" panel with three glowing toggle rows (Neural Link cyan, Threat Scanner pink, Hologram HUD amber) that flip ON/OFF with text labels syncing to colour, two custom range sliders (cyan Signal Power and pink Plasma Charge) whose filled-track gradient updates as the user drags, three violet checkboxes for module selection (Crypto / Stealth / Override), and three yellow radio buttons for operating mode (Passive / Active / Combat). Every neon glow is a layered box-shadow / text-shadow stack — no images, no SVG filters. Inline event handlers from the source mock are rewritten as a single scoped delegator so multiple instances safely coexist on one page. Chakra Petch + Share Tech Mono. Best for cyberpunk dashboards, gaming HUDs, futuristic settings panels, sci-fi product UIs.

**HTML:**
```html
<section class="nn-ctl" aria-label="Neon form controls demo">
  <div class="panel">

    <span class="panel-label">System Controls — v2.4.1</span>
    <div class="divider" aria-hidden="true"></div>

    <div class="toggles">
      <div class="row">
        <span class="ctrl-label">Neural Link</span>
        <div class="toggle-wrap">
          <span class="toggle-status" data-ctl-status data-on-color="#00ffcc" data-off-color="rgba(0,255,204,0.5)">OFF</span>
          <label>
            <input type="checkbox" class="toggle-input" checked />
            <div class="toggle-track cyan"><div class="toggle-knob"></div></div>
          </label>
        </div>
      </div>

      <div class="row">
        <span class="ctrl-label">Threat Scanner</span>
        <div class="toggle-wrap">
          <span class="toggle-status" data-ctl-status data-on-color="#ff2d78" data-off-color="rgba(255,45,120,0.5)">OFF</span>
          <label>
            <input type="checkbox" class="toggle-input" />
            <div class="toggle-track pink"><div class="toggle-knob"></div></div>
          </label>
        </div>
      </div>

      <div class="row">
        <span class="ctrl-label">Hologram HUD</span>
        <div class="toggle-wrap">
          <span class="toggle-status" data-ctl-status data-on-color="#ffb400" data-off-color="rgba(255,180,0,0.5)">OFF</span>
          <label>
            <input type="checkbox" class="toggle-input" checked />
            <div class="toggle-track amber"><div class="toggle-knob"></div></div>
          </label>
        </div>
      </div>
    </div>

    <div class="divider" aria-hidden="true"></div>

    <div class="slider-wrap">
      <div class="slider-header">
        <span class="ctrl-label">Signal Power</span>
        <span class="slider-val cyan" data-ctl-sliderval>65%</span>
      </div>
      <input type="range" class="cyan-range" min="0" max="100" value="65" style="--p:65%" aria-label="Signal Power" />
    </div>

    <div class="slider-wrap">
      <div class="slider-header">
        <span class="ctrl-label">Plasma Charge</span>
        <span class="slider-val pink" data-ctl-sliderval>40%</span>
      </div>
      <input type="range" class="pink-range" min="0" max="100" value="40" style="--p:40%" aria-label="Plasma Charge" />
    </div>

    <div class="divider" aria-hidden="true"></div>

    <div>
      <span class="ctrl-label section">Modules</span>
      <div class="checks">
        <label class="check-item">
          <input type="checkbox" checked />
          <div class="check-box"><svg viewBox="0 0 12 12" aria-hidden="true"><polyline points="1.5,6 4.5,9 10.5,3"/></svg></div>
          <span class="check-text">Crypto</span>
        </label>
        <label class="check-item">
          <input type="checkbox" checked />
          <div class="check-box"><svg viewBox="0 0 12 12" aria-hidden="true"><polyline points="1.5,6 4.5,9 10.5,3"/></svg></div>
          <span class="check-text">Stealth</span>
        </label>
        <label class="check-item">
          <input type="checkbox" />
          <div class="check-box"><svg viewBox="0 0 12 12" aria-hidden="true"><polyline points="1.5,6 4.5,9 10.5,3"/></svg></div>
          <span class="check-text">Override</span>
        </label>
      </div>
    </div>

    <div>
      <span class="ctrl-label section">Mode</span>
      <div class="radios">
        <label class="radio-item">
          <input type="radio" name="nn-ctl-mode" value="low" />
          <div class="radio-dot"></div>
          <span class="radio-text">Passive</span>
        </label>
        <label class="radio-item">
          <input type="radio" name="nn-ctl-mode" value="mid" checked />
          <div class="radio-dot"></div>
          <span class="radio-text">Active</span>
        </label>
        <label class="radio-item">
          <input type="radio" name="nn-ctl-mode" value="high" />
          <div class="radio-dot"></div>
          <span class="radio-text">Combat</span>
        </label>
      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Neon Form Controls — futuristic system panel ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Chakra+Petch:wght@400;600;700&display=swap');

.nn-ctl {
  position: relative;
  width: 100%;
  min-height: 760px;
  background: #050510;
  font-family: 'Chakra Petch', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

.nn-ctl .panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: rgba(10,10,28,0.9);
  border: 1px solid rgba(0,255,200,0.1);
  padding: 40px 50px;
  box-shadow:
    0 0 40px rgba(0,255,200,0.04),
    inset 0 0 60px rgba(0,0,30,0.5);
  width: 420px;
  max-width: 100%;
}

.nn-ctl .panel-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0,255,200,0.5);
  margin-bottom: -16px;
  font-family: 'Share Tech Mono', monospace;
}

.nn-ctl .toggles { display: flex; flex-direction: column; gap: 16px; }
.nn-ctl .row { display: flex; align-items: center; justify-content: space-between; }
.nn-ctl .ctrl-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(200,200,240,0.75);
  text-transform: uppercase;
  font-weight: 600;
}
.nn-ctl .ctrl-label.section { font-size: 10px; display: block; margin-bottom: 12px; }

/* TOGGLES */
.nn-ctl .toggle-wrap { display: flex; align-items: center; gap: 10px; }
.nn-ctl .toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.nn-ctl .toggle-track {
  display: flex;
  align-items: center;
  width: 58px;
  height: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  cursor: pointer;
  padding: 3px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.nn-ctl .toggle-track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nn-ctl .toggle-knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(180,180,200,0.4);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.nn-ctl .toggle-input:checked ~ .toggle-track.cyan {
  background: rgba(0,255,204,0.12);
  border-color: rgba(0,255,204,0.5);
  box-shadow: 0 0 12px rgba(0,255,204,0.3), inset 0 0 12px rgba(0,255,204,0.06);
}
.nn-ctl .toggle-input:checked ~ .toggle-track.cyan .toggle-knob {
  transform: translateX(30px);
  background: #00ffcc;
  box-shadow: 0 0 10px #00ffcc, 0 0 22px rgba(0,255,204,0.6);
}
.nn-ctl .toggle-input:checked ~ .toggle-track.cyan::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(0,255,204,0.2), transparent 70%);
  opacity: 1;
}

.nn-ctl .toggle-input:checked ~ .toggle-track.pink {
  background: rgba(255,45,120,0.12);
  border-color: rgba(255,45,120,0.5);
  box-shadow: 0 0 12px rgba(255,45,120,0.3), inset 0 0 12px rgba(255,45,120,0.06);
}
.nn-ctl .toggle-input:checked ~ .toggle-track.pink .toggle-knob {
  transform: translateX(30px);
  background: #ff2d78;
  box-shadow: 0 0 10px #ff2d78, 0 0 22px rgba(255,45,120,0.6);
}

.nn-ctl .toggle-input:checked ~ .toggle-track.amber {
  background: rgba(255,180,0,0.12);
  border-color: rgba(255,180,0,0.5);
  box-shadow: 0 0 12px rgba(255,180,0,0.3), inset 0 0 12px rgba(255,180,0,0.06);
}
.nn-ctl .toggle-input:checked ~ .toggle-track.amber .toggle-knob {
  transform: translateX(30px);
  background: #ffb400;
  box-shadow: 0 0 10px #ffb400, 0 0 22px rgba(255,180,0,0.6);
}

.nn-ctl .toggle-status {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  min-width: 30px;
  text-align: right;
  transition: all 0.3s;
}

/* SLIDERS */
.nn-ctl .slider-wrap { display: flex; flex-direction: column; gap: 8px; }
.nn-ctl .slider-header { display: flex; justify-content: space-between; align-items: center; }
.nn-ctl .slider-val {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
}
.nn-ctl .slider-val.cyan { color: #00ffcc; text-shadow: 0 0 8px #00ffcc; }
.nn-ctl .slider-val.pink { color: #ff2d78; text-shadow: 0 0 8px #ff2d78; }

.nn-ctl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: rgba(255,255,255,0.08);
  position: relative;
}
.nn-ctl input[type="range"].cyan-range {
  background: linear-gradient(to right, #00ffcc var(--p, 65%), rgba(255,255,255,0.08) var(--p, 65%));
  box-shadow: 0 0 6px rgba(0,255,204,0.4);
}
.nn-ctl input[type="range"].pink-range {
  background: linear-gradient(to right, #ff2d78 var(--p, 40%), rgba(255,255,255,0.08) var(--p, 40%));
  box-shadow: 0 0 6px rgba(255,45,120,0.4);
}
.nn-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.nn-ctl input[type="range"].cyan-range::-webkit-slider-thumb {
  background: #00ffcc;
  box-shadow: 0 0 8px #00ffcc, 0 0 18px rgba(0,255,204,0.5);
}
.nn-ctl input[type="range"].cyan-range:hover::-webkit-slider-thumb {
  box-shadow: 0 0 14px #00ffcc, 0 0 30px rgba(0,255,204,0.7);
}
.nn-ctl input[type="range"].pink-range::-webkit-slider-thumb {
  background: #ff2d78;
  box-shadow: 0 0 8px #ff2d78, 0 0 18px rgba(255,45,120,0.5);
}
.nn-ctl input[type="range"].pink-range:hover::-webkit-slider-thumb {
  box-shadow: 0 0 14px #ff2d78, 0 0 30px rgba(255,45,120,0.7);
}
.nn-ctl input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.nn-ctl input[type="range"].cyan-range::-moz-range-thumb {
  background: #00ffcc;
  box-shadow: 0 0 8px #00ffcc, 0 0 18px rgba(0,255,204,0.5);
}
.nn-ctl input[type="range"].pink-range::-moz-range-thumb {
  background: #ff2d78;
  box-shadow: 0 0 8px #ff2d78, 0 0 18px rgba(255,45,120,0.5);
}

/* CHECKBOXES */
.nn-ctl .checks { display: flex; gap: 20px; flex-wrap: wrap; }
.nn-ctl .check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.nn-ctl .check-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.nn-ctl .check-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(191,95,255,0.4);
  background: rgba(191,95,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.nn-ctl .check-box svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #bf5fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}
.nn-ctl .check-item input:checked ~ .check-box {
  border-color: #bf5fff;
  background: rgba(191,95,255,0.15);
  box-shadow: 0 0 8px rgba(191,95,255,0.45), inset 0 0 6px rgba(191,95,255,0.1);
}
.nn-ctl .check-item input:checked ~ .check-box svg { opacity: 1; transform: scale(1); }
.nn-ctl .check-text {
  font-size: 11px;
  color: rgba(200,200,240,0.65);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* RADIOS */
.nn-ctl .radios { display: flex; gap: 16px; flex-wrap: wrap; }
.nn-ctl .radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.nn-ctl .radio-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.nn-ctl .radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,220,0,0.35);
  background: rgba(255,220,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.nn-ctl .radio-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffdc00;
  box-shadow: 0 0 6px #ffdc00, 0 0 14px rgba(255,220,0,0.6);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nn-ctl .radio-item input:checked ~ .radio-dot {
  border-color: #ffdc00;
  box-shadow: 0 0 8px rgba(255,220,0,0.4);
}
.nn-ctl .radio-item input:checked ~ .radio-dot::before { transform: scale(1); }
.nn-ctl .radio-text {
  font-size: 11px;
  color: rgba(200,200,240,0.65);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.nn-ctl .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,200,0.12), transparent);
}

@media (max-width: 520px) {
  .nn-ctl .panel { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-ctl * { transition: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped wiring for the System Controls panel. Replaces the source
  // mock's inline onchange/oninput handlers (which called global
  // updateStatus / updateSlider) with a single scoped delegator so
  // multiple instances safely coexist on one page.
  const root = document.querySelector('.nn-ctl');
  if (!root) return;

  // Toggle ON/OFF status text
  function paintToggle(input) {
    const wrap = input.closest('.toggle-wrap');
    if (!wrap) return;
    const status = wrap.querySelector('[data-ctl-status]');
    if (!status) return;
    const on  = status.dataset.onColor  || '#00ffcc';
    const off = status.dataset.offColor || 'rgba(255,255,255,0.5)';
    status.textContent = input.checked ? 'ON' : 'OFF';
    status.style.color = input.checked ? on : off;
    status.style.textShadow = input.checked ? '0 0 8px ' + on : 'none';
  }
  root.querySelectorAll('.toggle-input').forEach(paintToggle);
  root.addEventListener('change', (e) => {
    if (e.target && e.target.matches && e.target.matches('.toggle-input')) {
      paintToggle(e.target);
    }
  });

  // Range slider fill + label
  function paintSlider(range) {
    const wrap = range.closest('.slider-wrap');
    if (!wrap) return;
    const val = wrap.querySelector('[data-ctl-sliderval]');
    const pct = range.value + '%';
    if (val) val.textContent = pct;
    range.style.setProperty('--p', pct);
  }
  root.querySelectorAll('input[type="range"]').forEach(paintSlider);
  root.addEventListener('input', (e) => {
    if (e.target && e.target.matches && e.target.matches('input[type="range"]')) {
      paintSlider(e.target);
    }
  });
})();
```

### 06. Neon Navigation

**Type:** CSS + JS
**Description:** Three production-ready neon nav patterns on a dark grid stage — a horizontal sliding-underline bar in cyan, a pill-tab nav with a violet sliding pill background, and a vertical sidebar with row icons and a pink accent indicator. (1) A horizontal nav bar with a cyan sliding underline that animates left/width between active tabs and corner accent brackets framing the bar. (2) A pill-tab nav where a violet pill background slides under the active item, with all four items reading like Syncopate-cased command labels. (3) A vertical sidebar with row icons, a 2px pink accent bar that slides up/down to the active row, and a translucent row-highlight that follows it. All three navs share one scoped delegator that recomputes offsets relative to the nearest nav container — no global handlers, no shared element IDs, multiple instances coexist safely. Syncopate + Jost. Best for SaaS app shells, admin dashboards, gaming/cyberpunk site navigation, futuristic landing pages.

**HTML:**
```html
<section class="nn-nav" aria-label="Neon navigation demo">
  <div class="stage">

    <nav class="nav-slide" data-nn-nav data-nav-kind="slide" aria-label="Main navigation">
      <span class="indicator" data-nav-indicator aria-hidden="true"></span>
      <a href="#" class="active" data-nav-item>Dashboard</a>
      <a href="#" data-nav-item>Analytics</a>
      <a href="#" data-nav-item>Systems</a>
      <a href="#" data-nav-item>Network</a>
      <a href="#" data-nav-item>Config</a>
    </nav>

    <nav class="nav-pills" data-nn-nav data-nav-kind="pill" aria-label="Section navigation">
      <span class="pill-bg" data-nav-pill aria-hidden="true"></span>
      <a href="#" class="active" data-nav-item>Recon</a>
      <a href="#" data-nav-item>Arsenal</a>
      <a href="#" data-nav-item>Comms</a>
      <a href="#" data-nav-item>Intel</a>
    </nav>

    <nav class="nav-sidebar" data-nn-nav data-nav-kind="side" aria-label="Sidebar navigation">
      <span class="side-indicator" data-nav-indicator aria-hidden="true"></span>
      <span class="row-bg" data-nav-rowbg aria-hidden="true"></span>
      <a href="#" class="active" data-nav-item>
        <svg class="icon" 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>
        Overview
      </a>
      <a href="#" data-nav-item>
        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        Vitals
      </a>
      <a href="#" data-nav-item>
        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
        Signal
      </a>
      <a href="#" data-nav-item>
        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        Security
      </a>
      <a href="#" data-nav-item>
        <svg class="icon" viewBox="0 0 24 24" 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>
        Alerts
      </a>
    </nav>

  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Neon Navigation — slide / pill / sidebar trio ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Jost:wght@300;400;600&display=swap');

.nn-nav {
  position: relative;
  width: 100%;
  min-height: 660px;
  background: #040410;
  font-family: 'Jost', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Subtle blue grid — was body::before fixed; scoped. */
.nn-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

.nn-nav .stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* NAV 1 — SLIDING UNDERLINE */
.nn-nav .nav-slide {
  position: relative;
  display: flex;
  gap: 0;
  background: rgba(8,8,22,0.9);
  border: 1px solid rgba(0,230,255,0.1);
  padding: 0 4px;
  box-shadow: 0 0 30px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.4);
}
.nn-nav .nav-slide a {
  position: relative;
  padding: 18px 28px;
  font-family: 'Syncopate', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(150,180,220,0.55);
  transition: color 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.nn-nav .nav-slide a:hover { color: rgba(200,230,255,0.85); }
.nn-nav .nav-slide a.active {
  color: #00e6ff;
  text-shadow: 0 0 8px rgba(0,230,255,0.8), 0 0 20px rgba(0,230,255,0.4);
}
.nn-nav .nav-slide .indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #00e6ff;
  box-shadow: 0 0 8px #00e6ff, 0 0 20px rgba(0,230,255,0.6), 0 0 40px rgba(0,230,255,0.3);
  transition: left 0.35s cubic-bezier(0.23, 1, 0.32, 1), width 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.nn-nav .nav-slide::before,
.nn-nav .nav-slide::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-color: rgba(0,230,255,0.5);
  border-style: solid;
}
.nn-nav .nav-slide::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.nn-nav .nav-slide::after  { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }

/* NAV 2 — PILL */
.nn-nav .nav-pills {
  position: relative;
  display: flex;
  gap: 8px;
  background: rgba(6,6,18,0.95);
  border: 1px solid rgba(191,95,255,0.15);
  border-radius: 50px;
  padding: 6px;
  box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.3);
}
.nn-nav .nav-pills a {
  position: relative;
  padding: 11px 26px;
  border-radius: 50px;
  font-family: 'Syncopate', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(170,150,210,0.55);
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
  z-index: 1;
}
.nn-nav .nav-pills a:hover { color: rgba(210,180,255,0.85); }
.nn-nav .nav-pills a.active {
  color: #fff;
  text-shadow: 0 0 6px rgba(191,95,255,0.9);
}
.nn-nav .nav-pills .pill-bg {
  position: absolute;
  border-radius: 50px;
  background: rgba(191,95,255,0.18);
  border: 1px solid rgba(191,95,255,0.5);
  box-shadow: 0 0 14px rgba(191,95,255,0.35), inset 0 0 10px rgba(191,95,255,0.07);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  z-index: 0;
}

/* NAV 3 — SIDEBAR */
.nn-nav .nav-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(6,6,20,0.9);
  border: 1px solid rgba(255,45,120,0.12);
  width: 220px;
  padding: 6px;
  box-shadow: 0 0 40px rgba(0,0,0,0.5), 4px 0 30px rgba(255,45,120,0.05);
}
.nn-nav .nav-sidebar a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(180,150,180,0.5);
  transition: all 0.25s ease;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1;
}
.nn-nav .nav-sidebar a:hover { color: rgba(255,180,210,0.85); }
.nn-nav .nav-sidebar a.active {
  color: #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.7);
}
.nn-nav .nav-sidebar a .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  transition: opacity 0.25s;
}
.nn-nav .nav-sidebar a.active .icon {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255,45,120,0.6));
}
.nn-nav .nav-sidebar .side-indicator {
  position: absolute;
  left: 0;
  width: 2px;
  background: #ff2d78;
  box-shadow: 0 0 8px #ff2d78, 0 0 20px rgba(255,45,120,0.5);
  transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), height 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.nn-nav .nav-sidebar .row-bg {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(255,45,120,0.07);
  border-right: 1px solid rgba(255,45,120,0.2);
  transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), height 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 600px) {
  .nn-nav .nav-slide { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-nav .nav-slide .indicator,
  .nn-nav .nav-pills .pill-bg,
  .nn-nav .nav-sidebar .side-indicator,
  .nn-nav .nav-sidebar .row-bg { transition: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped nav delegator — replaces the source mock's three globally
  // referenced setActive/setActivePill/setActiveSide functions with a
  // single delegator that derives state from the clicked link's
  // nearest [data-nn-nav] container. Multiple instances coexist with
  // no global handlers or element-id collisions.
  const root = document.querySelector('.nn-nav');
  if (!root) return;

  function paint(nav) {
    const kind = nav.dataset.navKind;
    const active = nav.querySelector('a.active') || nav.querySelector('a');
    if (!active) return;

    if (kind === 'slide') {
      const ind = nav.querySelector('[data-nav-indicator]');
      if (!ind) return;
      ind.style.left  = active.offsetLeft + 'px';
      ind.style.width = active.offsetWidth + 'px';
    } else if (kind === 'pill') {
      const pill = nav.querySelector('[data-nav-pill]');
      if (!pill) return;
      pill.style.left   = active.offsetLeft   + 'px';
      pill.style.top    = active.offsetTop    + 'px';
      pill.style.width  = active.offsetWidth  + 'px';
      pill.style.height = active.offsetHeight + 'px';
    } else if (kind === 'side') {
      const ind = nav.querySelector('[data-nav-indicator]');
      const bg  = nav.querySelector('[data-nav-rowbg]');
      if (ind) { ind.style.top = active.offsetTop + 'px'; ind.style.height = active.offsetHeight + 'px'; }
      if (bg)  { bg.style.top  = active.offsetTop + 'px'; bg.style.height  = active.offsetHeight + 'px'; }
    }
  }

  function paintAll() {
    root.querySelectorAll('[data-nn-nav]').forEach(paint);
  }

  // Initial paint — need layout to be settled, so do a microtask + rAF.
  paintAll();
  requestAnimationFrame(paintAll);

  root.addEventListener('click', (e) => {
    const link = e.target.closest('[data-nav-item]');
    if (!link) return;
    e.preventDefault();
    const nav = link.closest('[data-nn-nav]');
    if (!nav) return;
    nav.querySelectorAll('a').forEach(a => a.classList.remove('active'));
    link.classList.add('active');
    paint(nav);
  });

  // Repaint on resize (offsets can change with breakpoint shifts).
  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(paintAll, 100);
  });
})();
```

### 07. Neon Flickering Sign

**Type:** Pure CSS
**Description:** Three distinct broken-sign CSS techniques side-by-side — a whole-word fault on "OPEN BAR", per-letter staggered animations on "NIGHTLIF" with two dead-bulb characters, and a vintage amber "Grand Hotel" with mechanical hum. A whole-word "OPEN BAR" fault using precise @keyframes percentage gaps (95% lit, 1–2 frames dark, repeat at irregular intervals so the rhythm never feels mechanical), a per-letter staggered system on "NIGHTLIF" where each character runs its own timing — including two "dead bulb" letters that only occasionally sputter to life — and a missing E gap exposing the broken-tube reality, and a vintage amber "Grand Hotel" script in Yellowtail with a slow mechanical hum (skewX drift) layered over fault cuts. Pink/cyan/amber ambient floor light pools bleed up from below to sell the dirty-wall context. Boogaloo + Yellowtail + Permanent Marker. Best for vintage bar/restaurant sites, dive-bar branding, retrowave horror, neo-noir film promo.

**HTML:**
```html
<section class="nn-flk" aria-label="Neon flickering sign demo">
  <div class="glow-pool pink" aria-hidden="true"></div>
  <div class="glow-pool cyan" aria-hidden="true"></div>
  <div class="glow-pool amber" aria-hidden="true"></div>

  <div class="scene">
    <div class="sign sign-bar">OPEN BAR</div>

    <div class="sign sign-word" aria-label="NIGHTLIF (E missing — dead tube)">
      <span class="letter">N</span>
      <span class="letter">I</span>
      <span class="letter">G</span>
      <span class="letter">H</span>
      <span class="letter">T</span>
      <span class="letter">L</span>
      <span class="letter">I</span>
      <span class="letter">F</span>
    </div>

    <div class="sign sign-hotel">Grand Hotel</div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 07 Neon Flickering Sign — three broken-sign techniques ───── */
@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Yellowtail&family=Permanent+Marker&display=swap');

.nn-flk {
  position: relative;
  width: 100%;
  min-height: 720px;
  background: #07050f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Dirty wall texture — was body::before fixed; scoped. */
.nn-flk::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,0,0,0.04) 8px, rgba(0,0,0,0.04) 9px);
  pointer-events: none;
  z-index: 0;
}

/* Ambient floor light pools — were position:fixed; scoped. */
.nn-flk .glow-pool {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.18;
  z-index: 0;
}
.nn-flk .glow-pool.pink  { width: 300px; height: 80px; left:  12%; background: #ff2d78; animation: nn-flk-poolpulse 5s 0s ease-in-out infinite; }
.nn-flk .glow-pool.cyan  { width: 340px; height: 80px; left:  42%; background: #00eeff; animation: nn-flk-poolpulse 6s 1s ease-in-out infinite; }
.nn-flk .glow-pool.amber { width: 280px; height: 80px; right: 10%; background: #ffd200; animation: nn-flk-poolpulse 7s 2s ease-in-out infinite; }
@keyframes nn-flk-poolpulse { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.08; } }

.nn-flk .scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 60px 20px;
}

.nn-flk .sign {
  font-family: 'Boogaloo', cursive;
  letter-spacing: 0.08em;
  user-select: none;
}

/* SIGN 1 — whole-word flicker */
.nn-flk .sign-bar {
  font-size: 96px;
  color: #ff2d78;
  text-shadow:
    0 0 4px #fff,
    0 0 10px #fff,
    0 0 20px #ff2d78,
    0 0 40px #ff2d78,
    0 0 80px #ff2d78,
    0 0 120px #c0003a;
  animation: nn-flk-sign 6s linear infinite;
}
@keyframes nn-flk-sign {
  0%,  9%,  11%, 30%, 32%, 64%, 70%, 72%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 20px #ff2d78,
      0 0 40px #ff2d78,
      0 0 80px #ff2d78,
      0 0 120px #c0003a;
    color: #ff2d78;
    opacity: 1;
  }
  10% { opacity: 0.08; text-shadow: none; color: rgba(255,45,120,0.15); }
  31% { opacity: 0.12; text-shadow: none; color: rgba(255,45,120,0.2); }
  65%, 71% { opacity: 0.06; text-shadow: none; color: rgba(255,45,120,0.1); }
}

/* SIGN 2 — per-letter staggered fault */
.nn-flk .sign-word {
  display: flex;
  gap: 4px;
  font-size: 80px;
}
.nn-flk .letter {
  display: inline-block;
  color: #00eeff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #00eeff,
    0 0 28px #00eeff,
    0 0 56px #0088aa,
    0 0 100px #0055ff;
}
.nn-flk .letter:nth-child(1) { animation: nn-flk-buzz    4.5s 0.0s infinite; }
.nn-flk .letter:nth-child(2) { animation: nn-flk-buzz    5.2s 0.8s infinite; }
.nn-flk .letter:nth-child(3) { animation: nn-flk-dead    7.0s 1.4s infinite; }
.nn-flk .letter:nth-child(4) { animation: nn-flk-buzz    3.8s 0.3s infinite; }
.nn-flk .letter:nth-child(5) { animation: nn-flk-buzz    6.1s 2.1s infinite; }
.nn-flk .letter:nth-child(6) { animation: nn-flk-stutter 4.0s 0.5s infinite; }
.nn-flk .letter:nth-child(7) { animation: nn-flk-buzz    5.7s 1.0s infinite; }
.nn-flk .letter:nth-child(8) { animation: nn-flk-dead    9.0s 3.2s infinite; }

@keyframes nn-flk-buzz {
  0%, 95%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px #fff,
      0 0 12px #00eeff,
      0 0 28px #00eeff,
      0 0 56px #0088aa;
  }
  96% { opacity: 0.1; text-shadow: none; }
  97% { opacity: 1; text-shadow: 0 0 12px #00eeff, 0 0 28px #00eeff; }
  98% { opacity: 0.05; text-shadow: none; }
  99% { opacity: 1; text-shadow: 0 0 12px #00eeff, 0 0 28px #00eeff; }
}
@keyframes nn-flk-dead {
  0%, 40%, 100% { opacity: 0.08; color: rgba(0,238,255,0.12); text-shadow: none; }
  41%, 52% { opacity: 1; color: #00eeff; text-shadow: 0 0 12px #00eeff, 0 0 28px #00eeff, 0 0 56px #0088aa; }
  53%, 58% { opacity: 0.08; text-shadow: none; color: rgba(0,238,255,0.12); }
  59%, 62% { opacity: 0.9; color: #00eeff; text-shadow: 0 0 10px #00eeff; }
  63% { opacity: 0.08; text-shadow: none; color: rgba(0,238,255,0.12); }
}
@keyframes nn-flk-stutter {
  0%, 85%, 100% {
    opacity: 1;
    text-shadow:
      0 0 4px #fff,
      0 0 12px #00eeff,
      0 0 28px #00eeff,
      0 0 56px #0088aa;
  }
  86% { opacity: 0.2; text-shadow: none; }
  87% { opacity: 1; text-shadow: 0 0 12px #00eeff; }
  88% { opacity: 0.2; text-shadow: none; }
  89% { opacity: 1; text-shadow: 0 0 12px #00eeff; }
  90% { opacity: 0.2; text-shadow: none; }
  91% { opacity: 1; text-shadow: 0 0 28px #00eeff, 0 0 56px #0088aa; }
}

/* SIGN 3 — vintage amber Grand Hotel */
.nn-flk .sign-hotel {
  font-family: 'Yellowtail', cursive;
  font-size: 72px;
  color: #ffd200;
  text-shadow:
    0 0 4px #fff,
    0 0 10px #ffd200,
    0 0 22px #ffd200,
    0 0 42px #ff9500,
    0 0 80px rgba(255,150,0,0.6);
  animation: nn-flk-hum 8s ease-in-out infinite, nn-flk-hotelfault 11s linear infinite;
  transform-origin: center;
}
@keyframes nn-flk-hum {
  0%, 100% { transform: none; }
  25% { transform: skewX(0.3deg); }
  75% { transform: skewX(-0.2deg); }
}
@keyframes nn-flk-hotelfault {
  0%, 20%, 22%, 60%, 100% {
    color: #ffd200;
    text-shadow:
      0 0 4px #fff,
      0 0 10px #ffd200,
      0 0 22px #ffd200,
      0 0 42px #ff9500,
      0 0 80px rgba(255,150,0,0.6);
    opacity: 1;
  }
  21% { color: rgba(255,210,0,0.1); text-shadow: none; opacity: 0.1; }
  61%, 63% { opacity: 0.12; color: rgba(255,210,0,0.15); text-shadow: none; }
  62% { opacity: 1; color: #ffd200; text-shadow: 0 0 10px #ffd200, 0 0 22px #ffd200; }
}

@media (max-width: 640px) {
  .nn-flk .sign-bar   { font-size: 56px; }
  .nn-flk .sign-word  { font-size: 48px; }
  .nn-flk .sign-hotel { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-flk .sign-bar,
  .nn-flk .letter,
  .nn-flk .sign-hotel,
  .nn-flk .glow-pool { animation: none !important; }
}
```

### 08. Neon Cyberpunk Palette

**Type:** Pure CSS
**Description:** A complete design-token showcase for a pink/blue cyberpunk palette — five glowing swatch chips, three italic display headlines, three button variants, and an animated gradient-border card showing the actual CSS custom-property variable list inside. Five glowing swatch chips along the top (cyan #00DBDE, pink #FC00FF, electric blue #0057FF, violet #8B00FF, plus a wide cyan→violet→pink dual-tone gradient). The middle row stacks three italic display headlines — "ELECTRIC" in cyan, "VOLTAGE" in pink, "CYBERPUNK" as a tri-stop gradient — alongside three button variants (cyan pulse, pink-bordered with text-shadow, dual-tone gradient CTA). The bottom card uses mask-composite to draw an animated gradient border (cyan→violet→pink cycling through three rotations) around a Share Tech Mono token list that reads like the actual CSS variable definitions: `--neon-cyan: #00dbde;` etc. Every glow on the page resolves to one of the six CSS custom properties defined at the top. Exo 2 + Share Tech Mono. Best for design system showcases, cyberpunk style guides, branding pages, dev-portfolio palette demos.

**HTML:**
```html
<section class="nn-pal" aria-label="Neon cyberpunk palette demo">
  <div class="stage">

    <div class="swatch-row">
      <div class="swatch">
        <div class="swatch-chip chip-cyan" aria-hidden="true"></div>
        <div class="swatch-hex">#00DBDE</div>
      </div>
      <div class="swatch">
        <div class="swatch-chip chip-pink" aria-hidden="true"></div>
        <div class="swatch-hex">#FC00FF</div>
      </div>
      <div class="swatch">
        <div class="swatch-chip chip-blue" aria-hidden="true"></div>
        <div class="swatch-hex">#0057FF</div>
      </div>
      <div class="swatch">
        <div class="swatch-chip chip-violet" aria-hidden="true"></div>
        <div class="swatch-hex">#8B00FF</div>
      </div>
      <div class="swatch swatch-wide">
        <div class="swatch-chip chip-dual" aria-hidden="true"></div>
        <div class="swatch-hex">Cyberpunk Gradient</div>
      </div>
    </div>

    <div class="text-block">
      <div class="headline-cyan">ELECTRIC</div>
      <div class="headline-pink">VOLTAGE</div>
      <div class="headline-dual">CYBERPUNK</div>
    </div>

    <div class="btn-group">
      <button class="gbtn gbtn-cyan" type="button">◈ Connect Cyan</button>
      <button class="gbtn gbtn-pink" type="button">◈ Engage Pink</button>
      <button class="gbtn gbtn-dual" type="button">◈ Dual Tone CTA</button>
    </div>

    <div class="card-dual">
      <div class="card-label">CSS Custom Properties — Cyberpunk Palette</div>
      <div class="card-dual-inner">
        <div class="token-list">
          <div><span class="var-name">--neon-cyan</span>:   <span class="var-val">#00dbde</span>; <span class="var-comment">/* electric teal */</span></div>
          <div><span class="var-name">--neon-pink</span>:   <span class="var-val">#fc00ff</span>; <span class="var-comment">/* hot magenta  */</span></div>
          <div><span class="var-name">--neon-blue</span>:   <span class="var-val">#0057ff</span>; <span class="var-comment">/* deep electric */</span></div>
          <div><span class="var-name">--neon-violet</span>: <span class="var-val">#8b00ff</span>; <span class="var-comment">/* mid spectrum  */</span></div>
          <div><span class="var-name">--glow-cyan</span>:   <span class="var-val">0 0 6px #fff, 0 0 14px var(--neon-cyan)...</span></div>
          <div><span class="var-name">--glow-pink</span>:   <span class="var-val">0 0 6px #fff, 0 0 14px var(--neon-pink)...</span></div>
        </div>
      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 08 Neon Cyberpunk Palette — design token showcase ────────── */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,700;0,900;1,900&family=Share+Tech+Mono&display=swap');

/* Tokens scoped to .nn-pal — NOT :root — so they don't leak to host. */
.nn-pal {
  --nn-pal-cyan:    #00dbde;
  --nn-pal-pink:    #fc00ff;
  --nn-pal-blue:    #0057ff;
  --nn-pal-violet:  #8b00ff;
  --nn-pal-bg:      #050510;
  --nn-pal-surface: rgba(12, 8, 28, 0.9);

  --nn-pal-glow-cyan: 0 0 6px #fff, 0 0 14px var(--nn-pal-cyan), 0 0 32px var(--nn-pal-cyan), 0 0 64px rgba(0,219,222,0.5);
  --nn-pal-glow-pink: 0 0 6px #fff, 0 0 14px var(--nn-pal-pink), 0 0 32px var(--nn-pal-pink), 0 0 64px rgba(252,0,255,0.5);

  --nn-pal-tshadow-cyan: 0 0 4px #fff, 0 0 10px var(--nn-pal-cyan), 0 0 22px var(--nn-pal-cyan), 0 0 44px rgba(0,219,222,0.7);
  --nn-pal-tshadow-pink: 0 0 4px #fff, 0 0 10px var(--nn-pal-pink), 0 0 22px var(--nn-pal-pink), 0 0 44px rgba(252,0,255,0.7);

  position: relative;
  width: 100%;
  min-height: 780px;
  background: var(--nn-pal-bg);
  font-family: 'Exo 2', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Diagonal gradient wash — was body::before fixed; scoped. */
.nn-pal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 10% 50%, rgba(0,219,222,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 55% 55% at 90% 50%, rgba(252,0,255,0.07) 0%, transparent 70%),
    linear-gradient(135deg, rgba(0,87,255,0.04) 0%, transparent 50%, rgba(139,0,255,0.04) 100%);
  pointer-events: none;
  z-index: 0;
}

.nn-pal .stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  padding: 50px 60px;
  max-width: 860px;
  width: 100%;
}

.nn-pal .swatch-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  align-items: center;
}
.nn-pal .swatch { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nn-pal .swatch-wide { flex: 2; }
.nn-pal .swatch-chip {
  height: 44px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.nn-pal .swatch-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%);
}
.nn-pal .chip-cyan   { background: var(--nn-pal-cyan);   box-shadow: 0 0 20px rgba(0,219,222,0.7), 0 0 50px rgba(0,219,222,0.3); }
.nn-pal .chip-pink   { background: var(--nn-pal-pink);   box-shadow: 0 0 20px rgba(252,0,255,0.7), 0 0 50px rgba(252,0,255,0.3); }
.nn-pal .chip-blue   { background: var(--nn-pal-blue);   box-shadow: 0 0 20px rgba(0,87,255,0.7),  0 0 50px rgba(0,87,255,0.3); }
.nn-pal .chip-violet { background: var(--nn-pal-violet); box-shadow: 0 0 20px rgba(139,0,255,0.7), 0 0 50px rgba(139,0,255,0.3); }
.nn-pal .chip-dual {
  background: linear-gradient(90deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink));
  box-shadow: 0 0 20px rgba(0,219,222,0.5), 0 0 50px rgba(252,0,255,0.4);
}
.nn-pal .swatch-hex {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(200,200,240,0.55);
  text-align: center;
}

.nn-pal .text-block { display: flex; flex-direction: column; gap: 12px; }
.nn-pal .headline-cyan {
  font-size: 44px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--nn-pal-cyan);
  text-shadow: var(--nn-pal-tshadow-cyan);
  line-height: 1;
}
.nn-pal .headline-pink {
  font-size: 44px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--nn-pal-pink);
  text-shadow: var(--nn-pal-tshadow-pink);
  line-height: 1;
}
.nn-pal .headline-dual {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, var(--nn-pal-cyan) 0%, var(--nn-pal-violet) 50%, var(--nn-pal-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0,219,222,0.6)) drop-shadow(0 0 18px rgba(252,0,255,0.5));
}

.nn-pal .btn-group { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.nn-pal .gbtn {
  padding: 14px 28px;
  font-family: 'Exo 2', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.nn-pal .gbtn-cyan {
  background: transparent;
  color: var(--nn-pal-cyan);
  border: 1.5px solid var(--nn-pal-cyan);
  text-shadow: 0 0 8px rgba(0,219,222,0.8);
  box-shadow: var(--nn-pal-glow-cyan);
  animation: nn-pal-pulsecyan 2.5s ease-in-out infinite;
}
@keyframes nn-pal-pulsecyan {
  0%, 100% { box-shadow: 0 0 8px rgba(0,219,222,0.4), 0 0 24px rgba(0,219,222,0.2); }
  50%      { box-shadow: 0 0 18px rgba(0,219,222,0.75), 0 0 50px rgba(0,219,222,0.35); }
}
.nn-pal .gbtn-pink {
  background: linear-gradient(90deg, rgba(252,0,255,0.15), rgba(139,0,255,0.15));
  color: #fff;
  border: 1.5px solid var(--nn-pal-pink);
  text-shadow: 0 0 8px rgba(252,0,255,0.8);
  box-shadow: var(--nn-pal-glow-pink);
}
.nn-pal .gbtn-dual {
  background: linear-gradient(90deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink));
  color: #000;
  border: none;
  box-shadow: 0 0 24px rgba(0,219,222,0.5), 0 0 50px rgba(252,0,255,0.35);
  font-weight: 900;
}

.nn-pal .card-dual {
  grid-column: 1 / -1;
  position: relative;
  padding: 28px 32px;
  background: var(--nn-pal-surface);
  overflow: hidden;
}
.nn-pal .card-dual::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: nn-pal-bordercycle 4s linear infinite;
}
@keyframes nn-pal-bordercycle {
  0%   { background: linear-gradient(135deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink)); }
  33%  { background: linear-gradient(135deg, var(--nn-pal-pink), var(--nn-pal-cyan), var(--nn-pal-violet)); }
  66%  { background: linear-gradient(135deg, var(--nn-pal-violet), var(--nn-pal-pink), var(--nn-pal-cyan)); }
  100% { background: linear-gradient(135deg, var(--nn-pal-cyan), var(--nn-pal-violet), var(--nn-pal-pink)); }
}
.nn-pal .card-dual-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nn-pal .card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,200,240,0.35);
  margin-bottom: 12px;
}
.nn-pal .token-list {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  line-height: 2;
  color: rgba(200,200,240,0.65);
}
.nn-pal .token-list .var-name    { color: var(--nn-pal-cyan); }
.nn-pal .token-list .var-val     { color: var(--nn-pal-pink); }
.nn-pal .token-list .var-comment { color: rgba(150,150,200,0.4); }

@media (max-width: 720px) {
  .nn-pal .stage { grid-template-columns: 1fr; }
  .nn-pal .swatch-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-pal .gbtn-cyan,
  .nn-pal .card-dual::before { animation: none !important; }
}
```

### 09. Tailwind Neon Config

**Type:** Pure CSS
**Description:** A demo of what a Tailwind theme.extend neon config looks like in practice — built in plain CSS so it runs anywhere, but visually identical to the Tailwind output. Four buttons reading `shadow-neon-cyan` / `text-shadow-neon-pink` / etc, three cards each showing one accent (cyan / pink / violet) with the corresponding Tailwind class name printed inline so readers can copy the exact strings. The bottom block is the syntax-highlighted tailwind.config.js theme.extend object: five boxShadow entries, five textShadow entries, plus a tiny plugin that wires textShadow as utilities (`text-shadow-neon-cyan` etc). Token colours match the visible demo above. Inter + Fira Code. Best for Tailwind tutorials, design-system READMEs, dev blogs explaining theme.extend, copy-pasteable config snippets.

**HTML:**
```html
<section class="nn-twl" aria-label="Tailwind neon glow config demo">
  <div class="stage">

    <div class="btn-row">
      <button class="twl-btn cyan" type="button">◈ Neon Cyan</button>
      <button class="twl-btn pink" type="button">◈ Neon Pink</button>
      <button class="twl-btn amber" type="button">◈ Neon Amber</button>
      <button class="twl-btn green" type="button">◈ Neon Green</button>
    </div>

    <div class="card-row">
      <div class="twl-card cyan">
        <div class="card-title">Cyan Card</div>
        <div class="card-body">
          Use <code>shadow-neon-cyan</code> for border glow and
          <code>text-shadow-neon-cyan</code> for text.
        </div>
        <div class="card-rule"></div>
        <div class="card-code">class="shadow-neon-cyan<br/>text-shadow-neon-cyan"</div>
      </div>
      <div class="twl-card pink">
        <div class="card-title">Pink Card</div>
        <div class="card-body">
          Use <code>shadow-neon-pink</code> for border glow and
          <code>text-shadow-neon-pink</code> for text.
        </div>
        <div class="card-rule"></div>
        <div class="card-code">class="shadow-neon-pink<br/>text-shadow-neon-pink"</div>
      </div>
      <div class="twl-card violet">
        <div class="card-title">Violet Card</div>
        <div class="card-body">
          Use <code>shadow-neon-violet</code> for border glow and
          <code>text-shadow-neon-violet</code>.
        </div>
        <div class="card-rule"></div>
        <div class="card-code">class="shadow-neon-violet<br/>text-shadow-neon-violet"</div>
      </div>
    </div>

    <div class="config-block" role="region" aria-label="Tailwind config snippet">
      <div class="config-top"></div>
      <div class="config-label">tailwind.config.js — theme.extend</div>
<pre class="config-pre"><span class="tw-mute">theme: {</span>
  <span class="tw-mute">extend: {</span>
    <span class="tw-key">boxShadow</span><span class="tw-mute">: {</span>
      <span class="tw-name">'neon-cyan'</span><span class="tw-mute">:  </span><span class="tw-val">'0 0 5px #fff, 0 0 12px #00dbde, 0 0 28px #00dbde...'</span><span class="tw-mute">,</span>
      <span class="tw-name">'neon-pink'</span><span class="tw-mute">:  </span><span class="tw-val">'0 0 5px #fff, 0 0 12px #fc00ff, 0 0 28px #fc00ff...'</span><span class="tw-mute">,</span>
      <span class="tw-name">'neon-amber'</span><span class="tw-mute">: </span><span class="tw-val">'0 0 5px #fff, 0 0 12px #ffb300, 0 0 28px #ffb300...'</span><span class="tw-mute">,</span>
      <span class="tw-name">'neon-green'</span><span class="tw-mute">: </span><span class="tw-val">'0 0 5px #fff, 0 0 12px #00ff94, 0 0 28px #00ff94...'</span><span class="tw-mute">,</span>
    <span class="tw-mute">},</span>
    <span class="tw-key">textShadow</span><span class="tw-mute">: {</span>
      <span class="tw-name">'neon-cyan'</span><span class="tw-mute">:  </span><span class="tw-val">'0 0 4px #fff, 0 0 10px #00dbde, 0 0 22px #00dbde...'</span><span class="tw-mute">,</span>
      <span class="tw-name">'neon-pink'</span><span class="tw-mute">:  </span><span class="tw-val">'0 0 4px #fff, 0 0 10px #fc00ff, 0 0 22px #fc00ff...'</span><span class="tw-mute">,</span>
    <span class="tw-mute">}</span>
  <span class="tw-mute">}</span>
<span class="tw-mute">}</span></pre>
      <div class="config-bottom"></div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 09 Tailwind Neon Config — theme.extend showcase ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

.nn-twl {
  position: relative;
  width: 100%;
  min-height: 780px;
  background: #06060f;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Cyan grid backdrop */
.nn-twl::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,219,222,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,219,222,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

.nn-twl .stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Buttons */
.nn-twl .btn-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.nn-twl .twl-btn {
  padding: 12px 28px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.3s ease;
}
.nn-twl .twl-btn.cyan {
  color: #00dbde;
  border-color: #00dbde;
  text-shadow: 0 0 4px #fff, 0 0 10px #00dbde, 0 0 22px #00dbde, 0 0 44px rgba(0,219,222,0.7);
  box-shadow: 0 0 5px #fff, 0 0 12px #00dbde, 0 0 28px #00dbde, 0 0 56px rgba(0,219,222,0.5);
}
.nn-twl .twl-btn.cyan:hover { background: rgba(0,219,222,0.1); box-shadow: 0 0 28px #00dbde, 0 0 70px rgba(0,219,222,0.4); }
.nn-twl .twl-btn.pink {
  color: #fc00ff;
  border-color: #fc00ff;
  text-shadow: 0 0 4px #fff, 0 0 10px #fc00ff, 0 0 22px #fc00ff, 0 0 44px rgba(252,0,255,0.7);
  box-shadow: 0 0 5px #fff, 0 0 12px #fc00ff, 0 0 28px #fc00ff, 0 0 56px rgba(252,0,255,0.5);
}
.nn-twl .twl-btn.pink:hover { background: rgba(252,0,255,0.1); box-shadow: 0 0 28px #fc00ff, 0 0 70px rgba(252,0,255,0.4); }
.nn-twl .twl-btn.amber {
  color: #ffb300;
  border-color: #ffb300;
  text-shadow: 0 0 4px #fff, 0 0 10px #ffb300, 0 0 22px #ffb300, 0 0 44px rgba(255,179,0,0.7);
  box-shadow: 0 0 5px #fff, 0 0 12px #ffb300, 0 0 28px #ffb300, 0 0 56px rgba(255,179,0,0.5);
}
.nn-twl .twl-btn.amber:hover { background: rgba(255,179,0,0.1); }
.nn-twl .twl-btn.green {
  color: #00ff94;
  border-color: #00ff94;
  text-shadow: 0 0 4px #fff, 0 0 10px #00ff94, 0 0 22px #00ff94, 0 0 44px rgba(0,255,148,0.7);
  box-shadow: 0 0 5px #fff, 0 0 12px #00ff94, 0 0 28px #00ff94, 0 0 56px rgba(0,255,148,0.5);
}
.nn-twl .twl-btn.green:hover { background: rgba(0,255,148,0.1); }

/* Cards */
.nn-twl .card-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.nn-twl .twl-card {
  background: #0a0a1e;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid;
}
.nn-twl .twl-card.cyan   { border-color: rgba(0,219,222,0.2); box-shadow: 0 0 5px #fff, 0 0 12px #00dbde, 0 0 28px #00dbde, 0 0 56px rgba(0,219,222,0.5), inset 0 0 14px rgba(0,219,222,0.25); }
.nn-twl .twl-card.pink   { border-color: rgba(252,0,255,0.2); box-shadow: 0 0 5px #fff, 0 0 12px #fc00ff, 0 0 28px #fc00ff, 0 0 56px rgba(252,0,255,0.5), inset 0 0 14px rgba(252,0,255,0.25); }
.nn-twl .twl-card.violet { border-color: rgba(139,0,255,0.2); box-shadow: 0 0 5px #fff, 0 0 12px #8b00ff, 0 0 28px #8b00ff, 0 0 56px rgba(139,0,255,0.5); }
.nn-twl .twl-card .card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nn-twl .twl-card.cyan   .card-title { color: #00dbde; text-shadow: 0 0 4px #fff, 0 0 10px #00dbde, 0 0 22px #00dbde; }
.nn-twl .twl-card.pink   .card-title { color: #fc00ff; text-shadow: 0 0 4px #fff, 0 0 10px #fc00ff, 0 0 22px #fc00ff; }
.nn-twl .twl-card.violet .card-title { color: #8b00ff; text-shadow: 0 0 4px #fff, 0 0 10px #8b00ff, 0 0 22px #8b00ff; }
.nn-twl .twl-card .card-body {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.5);
}
.nn-twl .twl-card .card-body code {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 11px;
}
.nn-twl .twl-card.cyan   .card-body code { color: #00dbde; }
.nn-twl .twl-card.pink   .card-body code { color: #fc00ff; }
.nn-twl .twl-card.violet .card-body code { color: #8b00ff; }
.nn-twl .twl-card .card-rule { height: 1px; }
.nn-twl .twl-card.cyan   .card-rule { background: linear-gradient(90deg, transparent, rgba(0,219,222,0.4), transparent); }
.nn-twl .twl-card.pink   .card-rule { background: linear-gradient(90deg, transparent, rgba(252,0,255,0.4), transparent); }
.nn-twl .twl-card.violet .card-rule { background: linear-gradient(90deg, transparent, rgba(139,0,255,0.4), transparent); }
.nn-twl .twl-card .card-code {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(255,255,255,0.25);
}

/* Config block */
.nn-twl .config-block {
  position: relative;
  background: #080818;
  border: 1px solid rgba(255,255,255,0.07);
  padding: 24px;
  overflow: hidden;
}
.nn-twl .config-top,
.nn-twl .config-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}
.nn-twl .config-top    { top: 0;    background: linear-gradient(90deg, transparent, rgba(0,219,222,0.5), transparent); }
.nn-twl .config-bottom { bottom: 0; background: linear-gradient(90deg, transparent, rgba(252,0,255,0.5), transparent); }
.nn-twl .config-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,219,222,0.6);
  margin-bottom: 16px;
}
.nn-twl .config-pre {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  overflow-x: auto;
  white-space: pre;
}
.nn-twl .tw-mute { color: rgba(255,255,255,0.3); }
.nn-twl .tw-key  { color: rgba(0,219,222,0.8); }
.nn-twl .tw-name { color: rgba(252,0,255,0.8); }
.nn-twl .tw-val  { color: rgba(255,179,0,0.7); }

@media (max-width: 720px) {
  .nn-twl .card-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-twl .twl-btn { transition: none !important; }
}
```

### 10. Neon SVG Icons

**Type:** Pure CSS
**Description:** Six non-rectangular SVG icons each glowing with stacked CSS filter: drop-shadow() — the glow hugs every contour with no rectangular halo, plus a side-by-side comparison of box-shadow vs drop-shadow showing the failure mode. Shield (cyan), lightning bolt (pink), hexagon with center circle (amber), 10-point star (green), crosshair/target (violet), and warning triangle (red). Each item has a pulse ring that expands on hover and a stronger 4-layer drop-shadow stack that fires on hover. The bottom comparison panel puts the same star side-by-side: left uses `box-shadow` (glows the bounding rectangle, looks broken), right uses `filter: drop-shadow()` (traces the actual alpha geometry). The whole demo is the textbook proof that drop-shadow is the only correct choice for non-rect SVG glow. DM Mono + Syne. Best for icon-library demos, cyberpunk dashboards, security/IoT UIs, dev blog posts about CSS filters.

**HTML:**
```html
<section class="nn-ico" aria-label="Neon SVG icons demo">
  <div class="stage">

    <div class="section-label"><span>filter: drop-shadow() — shape-aware neon glow</span></div>

    <div class="icon-grid">
      <div class="icon-item icon-cyan">
        <div class="icon-wrap">
          <div class="icon-ring" aria-hidden="true"></div>
          <svg class="icon-svg" viewBox="0 0 48 48" fill="none" aria-hidden="true">
            <path d="M24 4L8 11v14c0 9.5 6.8 18.4 16 20.6C33.2 43.4 40 34.5 40 25V11L24 4z" stroke="#00dbde" stroke-width="2.5" stroke-linejoin="round" fill="rgba(0,219,222,0.08)"/>
            <path d="M17 24l5 5 9-9" stroke="#00dbde" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="icon-name">Shield</span>
      </div>

      <div class="icon-item icon-pink">
        <div class="icon-wrap">
          <div class="icon-ring" aria-hidden="true"></div>
          <svg class="icon-svg" viewBox="0 0 48 48" fill="none" aria-hidden="true">
            <polygon points="26,4 14,28 24,28 22,44 34,20 24,20" stroke="#fc00ff" stroke-width="2.5" fill="rgba(252,0,255,0.1)" stroke-linejoin="round" stroke-linecap="round"/>
          </svg>
        </div>
        <span class="icon-name">Power</span>
      </div>

      <div class="icon-item icon-amber">
        <div class="icon-wrap">
          <div class="icon-ring" aria-hidden="true"></div>
          <svg class="icon-svg" viewBox="0 0 48 48" fill="none" aria-hidden="true">
            <polygon points="24,4 40,14 40,34 24,44 8,34 8,14" stroke="#ffb300" stroke-width="2.5" fill="rgba(255,179,0,0.08)"/>
            <circle cx="24" cy="24" r="6" stroke="#ffb300" stroke-width="2" fill="rgba(255,179,0,0.15)"/>
          </svg>
        </div>
        <span class="icon-name">Module</span>
      </div>

      <div class="icon-item icon-green">
        <div class="icon-wrap">
          <div class="icon-ring" aria-hidden="true"></div>
          <svg class="icon-svg" viewBox="0 0 48 48" fill="none" aria-hidden="true">
            <polygon points="24,4 29,18 44,18 32,27 37,42 24,33 11,42 16,27 4,18 19,18" stroke="#00ff94" stroke-width="2.5" fill="rgba(0,255,148,0.08)" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="icon-name">Rating</span>
      </div>

      <div class="icon-item icon-violet">
        <div class="icon-wrap">
          <div class="icon-ring" aria-hidden="true"></div>
          <svg class="icon-svg" viewBox="0 0 48 48" fill="none" aria-hidden="true">
            <circle cx="24" cy="24" r="18" stroke="#bf5fff" stroke-width="2.5" fill="none"/>
            <circle cx="24" cy="24" r="10" stroke="#bf5fff" stroke-width="2" fill="rgba(191,95,255,0.08)"/>
            <circle cx="24" cy="24" r="3" fill="#bf5fff"/>
            <line x1="24" y1="4"  x2="24" y2="14" stroke="#bf5fff" stroke-width="2"/>
            <line x1="24" y1="34" x2="24" y2="44" stroke="#bf5fff" stroke-width="2"/>
            <line x1="4"  y1="24" x2="14" y2="24" stroke="#bf5fff" stroke-width="2"/>
            <line x1="34" y1="24" x2="44" y2="24" stroke="#bf5fff" stroke-width="2"/>
          </svg>
        </div>
        <span class="icon-name">Target</span>
      </div>

      <div class="icon-item icon-red">
        <div class="icon-wrap">
          <div class="icon-ring" aria-hidden="true"></div>
          <svg class="icon-svg" viewBox="0 0 48 48" fill="none" aria-hidden="true">
            <path d="M24 6L4 42h40L24 6z" stroke="#ff3c3c" stroke-width="2.5" fill="rgba(255,60,60,0.08)" stroke-linejoin="round"/>
            <line x1="24" y1="20" x2="24" y2="30" stroke="#ff3c3c" stroke-width="3" stroke-linecap="round"/>
            <circle cx="24" cy="36" r="1.5" fill="#ff3c3c"/>
          </svg>
        </div>
        <span class="icon-name">Alert</span>
      </div>
    </div>

    <div class="section-label"><span>box-shadow vs filter: drop-shadow()</span></div>

    <div class="compare-panel">
      <div class="compare-card">
        <div class="compare-title bad">✕ box-shadow — rectangular glow</div>
        <div class="compare-demo">
          <div class="bad-icon-wrap">
            <svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
              <polygon points="24,4 29,18 44,18 32,27 37,42 24,33 11,42 16,27 4,18 19,18" stroke="#fc00ff" stroke-width="2.5" fill="rgba(252,0,255,0.08)" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="compare-text">
            <p><code class="highlight-bad">box-shadow</code> glows the element's bounding rectangle — a square halo appears around non-rect shapes.</p>
          </div>
        </div>
      </div>

      <div class="compare-card">
        <div class="compare-title good">✓ filter: drop-shadow() — shape-hugging</div>
        <div class="compare-demo">
          <div class="good-icon-wrap">
            <svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
              <polygon points="24,4 29,18 44,18 32,27 37,42 24,33 11,42 16,27 4,18 19,18" stroke="#00ff94" stroke-width="2.5" fill="rgba(0,255,148,0.08)" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="compare-text">
            <p><code class="highlight-good">filter: drop-shadow()</code> traces the actual alpha shape — glow wraps perfectly around every contour.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 10 Neon SVG Icons — drop-shadow contour glow showcase ────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&display=swap');

.nn-ico {
  position: relative;
  width: 100%;
  min-height: 720px;
  background: #050512;
  font-family: 'Syne', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Violet grid backdrop */
.nn-ico::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(150,100,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,100,255,0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

.nn-ico .stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding: 50px 60px;
  align-items: center;
  max-width: 820px;
  width: 100%;
}

.nn-ico .section-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(180,150,255,0.4);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.nn-ico .section-label::before,
.nn-ico .section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,150,255,0.2), transparent);
}

.nn-ico .icon-grid {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
}
.nn-ico .icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.nn-ico .icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.nn-ico .icon-wrap:hover { transform: scale(1.14); }
.nn-ico .icon-svg {
  width: 52px;
  height: 52px;
  transition: filter 0.3s ease;
}

.nn-ico .icon-cyan   .icon-svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #00dbde) drop-shadow(0 0 22px #00dbde) drop-shadow(0 0 44px rgba(0,219,222,0.55)); }
.nn-ico .icon-pink   .icon-svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #fc00ff) drop-shadow(0 0 22px #fc00ff) drop-shadow(0 0 44px rgba(252,0,255,0.55)); }
.nn-ico .icon-amber  .icon-svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #ffb300) drop-shadow(0 0 22px #ffb300) drop-shadow(0 0 44px rgba(255,179,0,0.55)); }
.nn-ico .icon-green  .icon-svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #00ff94) drop-shadow(0 0 22px #00ff94) drop-shadow(0 0 44px rgba(0,255,148,0.55)); }
.nn-ico .icon-violet .icon-svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #bf5fff) drop-shadow(0 0 22px #bf5fff) drop-shadow(0 0 44px rgba(191,95,255,0.55)); }
.nn-ico .icon-red    .icon-svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #ff3c3c) drop-shadow(0 0 22px #ff3c3c) drop-shadow(0 0 44px rgba(255,60,60,0.55)); }

.nn-ico .icon-cyan:hover   .icon-svg { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #00dbde) drop-shadow(0 0 40px #00dbde) drop-shadow(0 0 80px rgba(0,219,222,0.7)); }
.nn-ico .icon-pink:hover   .icon-svg { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #fc00ff) drop-shadow(0 0 40px #fc00ff) drop-shadow(0 0 80px rgba(252,0,255,0.7)); }
.nn-ico .icon-amber:hover  .icon-svg { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #ffb300) drop-shadow(0 0 40px #ffb300) drop-shadow(0 0 80px rgba(255,179,0,0.7)); }
.nn-ico .icon-green:hover  .icon-svg { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #00ff94) drop-shadow(0 0 40px #00ff94) drop-shadow(0 0 80px rgba(0,255,148,0.7)); }
.nn-ico .icon-violet:hover .icon-svg { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #bf5fff) drop-shadow(0 0 40px #bf5fff) drop-shadow(0 0 80px rgba(191,95,255,0.7)); }
.nn-ico .icon-red:hover    .icon-svg { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #ff3c3c) drop-shadow(0 0 40px #ff3c3c) drop-shadow(0 0 80px rgba(255,60,60,0.7)); }

.nn-ico .icon-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200,200,240,0.4);
}

.nn-ico .icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}
.nn-ico .icon-cyan   .icon-ring { border-color: #00dbde; }
.nn-ico .icon-pink   .icon-ring { border-color: #fc00ff; }
.nn-ico .icon-amber  .icon-ring { border-color: #ffb300; }
.nn-ico .icon-green  .icon-ring { border-color: #00ff94; }
.nn-ico .icon-violet .icon-ring { border-color: #bf5fff; }
.nn-ico .icon-red    .icon-ring { border-color: #ff3c3c; }
.nn-ico .icon-wrap:hover .icon-ring { opacity: 0.5; transform: scale(1); }

.nn-ico .compare-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}
.nn-ico .compare-card {
  background: rgba(10,10,26,0.9);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nn-ico .compare-title {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nn-ico .compare-title.bad  { color: rgba(255,60,60,0.6); }
.nn-ico .compare-title.good { color: rgba(0,255,148,0.6); }
.nn-ico .compare-demo { display: flex; align-items: center; gap: 20px; }
.nn-ico .bad-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px #fc00ff, 0 0 20px rgba(252,0,255,0.5), 0 0 40px rgba(252,0,255,0.25);
}
.nn-ico .bad-icon-wrap svg { width: 40px; height: 40px; }
.nn-ico .good-icon-wrap {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 10px #00ff94)
    drop-shadow(0 0 22px #00ff94)
    drop-shadow(0 0 44px rgba(0,255,148,0.5));
}
.nn-ico .good-icon-wrap svg { width: 40px; height: 40px; }
.nn-ico .compare-text { flex: 1; }
.nn-ico .compare-text p {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  line-height: 1.7;
  color: rgba(190,190,230,0.55);
}
.nn-ico .compare-text code { color: rgba(255,179,0,0.85); }
.nn-ico .compare-text .highlight-bad  { color: rgba(255,80,80,0.85); }
.nn-ico .compare-text .highlight-good { color: rgba(0,255,148,0.85); }

@media (max-width: 640px) {
  .nn-ico .compare-panel { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-ico .icon-wrap,
  .nn-ico .icon-svg,
  .nn-ico .icon-ring { transition: none !important; }
}
```

### 11. Infinite Neon Grid

**Type:** CSS + JS
**Description:** A pure-CSS infinite synthwave floor grid with perfectly seamless looping — dual-frequency cyan + pink lines on a perspective-rotated plane, a 100-star JS-injected starfield, dual-color horizon glow, two floating HUD panels, and a flickering "GRIDZONE" title. Dual-frequency background-image lines (70px minor cyan + 350px major pink) on a `rotateX(58deg)` plane with `perspective: 280px`. A `background-position: 0→70px` keyframe at constant speed advances the grid one minor cell per cycle, which means the loop wraps invisibly. Layered with a 100-star procedurally generated starfield, a dual-color cyan/pink horizon glow bar (with vertical bleed for atmosphere), four side/bottom fade masks to cover the viewport edges, two floating HUD readout panels (GRID ONLINE / SIGNAL 94%), a center-aligned flickering "GRIDZONE / SECTOR 7 ONLINE" title, and four corner brackets framing the scene. Audiowide + Oxanium. Best for synthwave/vaporwave heros, gaming UIs, retro-futuristic landing pages, cyberpunk product demos.

**HTML:**
```html
<section class="nn-grd" aria-label="Infinite neon grid demo">
  <div class="scene">

    <div class="bracket bracket-tl" aria-hidden="true"></div>
    <div class="bracket bracket-tr" aria-hidden="true"></div>
    <div class="bracket bracket-bl" aria-hidden="true"></div>
    <div class="bracket bracket-br" aria-hidden="true"></div>

    <div class="sky" aria-hidden="true"></div>
    <div class="stars" data-nn-grd-stars aria-hidden="true"></div>

    <div class="hud-panel hud-left" aria-hidden="true">
      <div class="hud-row">GRID <span class="hud-val ok">ONLINE</span></div>
      <div class="hud-row">LAT <span class="hud-val ok">24.6°N</span></div>
      <div class="hud-row">ALT <span class="hud-val warn">⚠ LOW</span></div>
    </div>

    <div class="hud-panel hud-right" aria-hidden="true">
      <div class="hud-row">SIGNAL <span class="hud-val ok">94%</span></div>
      <div class="hud-row">SYNC <span class="hud-val ok">LOCK</span></div>
      <div class="hud-row">NODE <span class="hud-val warn">7/12</span></div>
    </div>

    <div class="horizon" aria-hidden="true"></div>

    <div class="grid-stage" aria-hidden="true">
      <div class="grid-plane"></div>
      <div class="grid-fade-h"></div>
      <div class="grid-fade-v"></div>
    </div>

    <div class="center-title">
      <div class="title-main">GRIDZONE</div>
      <div class="title-sub">SECTOR 7 · ONLINE</div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 11 Infinite Neon Grid — seamless 3D perspective floor ────── */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Oxanium:wght@800&display=swap');

.nn-grd {
  position: relative;
  width: 100%;
  min-height: 600px;
  background: #04000e;
  font-family: 'Audiowide', cursive;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

.nn-grd .scene {
  position: relative;
  width: 800px;
  max-width: 100%;
  height: 520px;
  overflow: hidden;
}

.nn-grd .sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg,
    #04000e 0%,
    #0d0020 40%,
    #1a003a 80%,
    #220050 100%
  );
}

.nn-grd .stars { position: absolute; inset: 0 0 45% 0; overflow: hidden; }
.nn-grd .star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: nn-grd-twinkle var(--d, 2s) var(--dl, 0s) ease-in-out infinite alternate;
}
@keyframes nn-grd-twinkle {
  from { opacity: var(--min, 0.25); }
  to   { opacity: 1; transform: scale(1.5); }
}

.nn-grd .horizon {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 52%;
  height: 6px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,255,210,0.4) 15%,
    #00fff2 35%,
    #ff00ff 50%,
    #00fff2 65%,
    rgba(0,255,210,0.4) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 24px rgba(0,255,240,0.8),
    0 0 60px rgba(0,255,240,0.4),
    0 0 120px rgba(0,200,255,0.2),
    0 -8px 30px rgba(0,255,240,0.15),
    0  8px 30px rgba(0,255,240,0.15);
  z-index: 5;
  animation: nn-grd-horizon 3s ease-in-out infinite;
}
@keyframes nn-grd-horizon {
  0%, 100% { opacity: 1; filter: blur(0px); }
  50%      { opacity: 0.85; filter: blur(0.5px); }
}

.nn-grd .grid-stage {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 53%;
  perspective: 280px;
  perspective-origin: 50% 0%;
  overflow: hidden;
}
.nn-grd .grid-plane {
  position: absolute;
  top: 0;
  left: -30%;
  right: -30%;
  height: 280%;
  transform-origin: top center;
  transform: rotateX(58deg);
  background-image:
    linear-gradient(rgba(0,255,230,0.9) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,255,230,0.9) 2px, transparent 2px),
    linear-gradient(rgba(255,0,240,0.4) 3px, transparent 3px),
    linear-gradient(90deg, rgba(255,0,240,0.4) 3px, transparent 3px);
  background-size:
    70px 70px,
    70px 70px,
    350px 350px,
    350px 350px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: nn-grd-move 1.2s linear infinite;
}
@keyframes nn-grd-move {
  from { background-position: 0 0,    0 0,    0 0,    0 0; }
  to   { background-position: 0 70px, 0 70px, 0 70px, 0 70px; }
}
.nn-grd .grid-fade-h {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, #04000e 100%);
  pointer-events: none;
  z-index: 2;
}
.nn-grd .grid-fade-v {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(4,0,14,0.92) 0%,
    transparent 18%,
    transparent 82%,
    rgba(4,0,14,0.92) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.nn-grd .hud-panel {
  position: absolute;
  border: 1px solid;
  padding: 8px 14px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 10;
  backdrop-filter: blur(4px);
  animation: nn-grd-hud 4s ease-in-out infinite;
}
.nn-grd .hud-left {
  left: 24px;
  top: 30%;
  border-color: rgba(0,255,230,0.35);
  color: rgba(0,255,230,0.7);
  background: rgba(0,40,40,0.4);
  box-shadow: 0 0 14px rgba(0,255,230,0.15), inset 0 0 10px rgba(0,255,230,0.05);
  animation-delay: 0s;
}
.nn-grd .hud-right {
  right: 24px;
  top: 30%;
  border-color: rgba(255,0,240,0.35);
  color: rgba(255,0,240,0.7);
  background: rgba(40,0,40,0.4);
  box-shadow: 0 0 14px rgba(255,0,240,0.15), inset 0 0 10px rgba(255,0,240,0.05);
  animation-delay: 1.5s;
}
@keyframes nn-grd-hud {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.nn-grd .hud-row { display: flex; justify-content: space-between; gap: 20px; line-height: 2; }
.nn-grd .hud-val { font-family: 'Audiowide', cursive; }
.nn-grd .hud-val.ok   { color: #00fff2; text-shadow: 0 0 6px #00fff2; }
.nn-grd .hud-val.warn { color: #ff0090; text-shadow: 0 0 6px #ff0090; }

.nn-grd .center-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
  z-index: 8;
  pointer-events: none;
}
.nn-grd .title-main {
  font-family: 'Oxanium', sans-serif;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 16px #00fff2,
    0 0 36px #00fff2,
    0 0 72px rgba(0,200,255,0.6),
    0 0 120px rgba(0,150,255,0.3);
  animation: nn-grd-flicker 7s ease-in-out infinite;
}
@keyframes nn-grd-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.08; }
  94% { opacity: 1; }
  96% { opacity: 0.1; }
  97% { opacity: 1; }
}
.nn-grd .title-sub {
  font-family: 'Audiowide', cursive;
  font-size: 11px;
  letter-spacing: 0.6em;
  color: rgba(0,255,240,0.65);
  text-shadow: 0 0 10px rgba(0,255,240,0.5);
  margin-top: 6px;
}

.nn-grd .bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(0,255,230,0.5);
  border-style: solid;
  z-index: 10;
}
.nn-grd .bracket-tl { top: 12px;    left: 12px;  border-width: 1.5px 0 0 1.5px; }
.nn-grd .bracket-tr { top: 12px;    right: 12px; border-width: 1.5px 1.5px 0 0; }
.nn-grd .bracket-bl { bottom: 12px; left: 12px;  border-width: 0 0 1.5px 1.5px; }
.nn-grd .bracket-br { bottom: 12px; right: 12px; border-width: 0 1.5px 1.5px 0; }

@media (max-width: 720px) {
  .nn-grd .scene { height: 400px; }
  .nn-grd .title-main { font-size: 40px; }
  .nn-grd .hud-panel { font-size: 8px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-grd .star,
  .nn-grd .grid-plane,
  .nn-grd .horizon,
  .nn-grd .hud-panel,
  .nn-grd .title-main { animation: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped star injection — finds the stars container inside .nn-grd
  // only. Multiple instances on the same page each populate their
  // own starfield independently.
  const root = document.querySelector('.nn-grd');
  if (!root) return;
  const stars = root.querySelector('[data-nn-grd-stars]');
  if (!stars || stars.childElementCount > 0) return;
  for (let i = 0; i < 100; i++) {
    const s = document.createElement('div');
    s.className = 'star';
    const sz = Math.random() * 2 + 0.5;
    s.style.cssText =
      'width:' + sz + 'px;' +
      'height:' + sz + 'px;' +
      'left:' + (Math.random() * 100) + '%;' +
      'top:' + (Math.random() * 100) + '%;' +
      '--d:' + (Math.random() * 2.5 + 1).toFixed(2) + 's;' +
      '--dl:' + (Math.random() * 3).toFixed(2) + 's;' +
      '--min:' + (Math.random() * 0.2 + 0.1).toFixed(2) + ';';
    stars.appendChild(s);
  }
})();
```

### 12. Rainbow Neon Text

**Type:** Pure CSS
**Description:** Five distinct CSS rainbow text techniques stacked side-by-side — hue-rotate gradient spin, sliding background-position, per-letter HSL stagger, outline-only stroke, and a pure text-shadow cycle with no gradient-clip at all. (1) `SPECTRUM` uses `filter: hue-rotate(0→360deg)` on a gradient-clipped text — the whole rainbow spins without layout thrashing. (2) `CHROMATIC` uses `background-position: 0→300%` slide on a 300%-wide rainbow gradient — the gradient itself moves across the letters. (3) `RAINBOW` uses per-letter `--h` CSS variable with `hsl(var(--h), 100%, 65%)` and staggered animation-delay — each character occupies its own hue band of the spectrum. (4) `VOLTAGE` is an outline-only version using `-webkit-text-stroke: 2px transparent` with the gradient clipped to the stroke instead of the fill. (5) `◈ PURE GLOW ◈` uses zero gradient-clip — just a 6-keyframe text-shadow cycle hitting hard colour stops (red→orange→yellow→green→blue→violet). Plus two ambient hue-rotating blobs in the corners. Dela Gothic One + Righteous + Teko. Best for hero animations, music/festival branding, gaming title cards, pride-themed surfaces.

**HTML:**
```html
<section class="nn-rnb" aria-label="Rainbow neon text demo">
  <div class="ambient ambient-1" aria-hidden="true"></div>
  <div class="ambient ambient-2" aria-hidden="true"></div>

  <div class="stage">
    <div class="rainbow-hue">SPECTRUM</div>
    <div class="rainbow-slide">CHROMATIC</div>
    <div class="rainbow-letters" aria-label="RAINBOW">
      <span class="rl" style="--i:0">R</span>
      <span class="rl" style="--i:1">A</span>
      <span class="rl" style="--i:2">I</span>
      <span class="rl" style="--i:3">N</span>
      <span class="rl" style="--i:4">B</span>
      <span class="rl" style="--i:5">O</span>
      <span class="rl" style="--i:6">W</span>
    </div>
    <div class="rainbow-outline">VOLTAGE</div>
    <div class="rainbow-shadow">◈ PURE GLOW ◈</div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 12 Rainbow Neon Text — five gradient-cycling techniques ──── */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Righteous&family=Teko:wght@700&display=swap');

.nn-rnb {
  position: relative;
  width: 100%;
  min-height: 780px;
  background: #040410;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Vignette — was body::after fixed; scoped. */
.nn-rnb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(4,4,16,0.7) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Ambient hue-rotating blobs */
.nn-rnb .ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: nn-rnb-ambient 8s linear infinite;
}
.nn-rnb .ambient-1 { width: 400px; height: 300px; top: -80px; left: -80px; background: rgba(255,0,128,0.06); }
.nn-rnb .ambient-2 { width: 350px; height: 250px; bottom: -60px; right: -60px; background: rgba(0,200,255,0.06); animation-delay: 4s; }
@keyframes nn-rnb-ambient {
  from { filter: blur(90px) hue-rotate(0deg); }
  to   { filter: blur(90px) hue-rotate(360deg); }
}

.nn-rnb .stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 50px 60px;
}

/* 1 — hue-rotate cycle */
.nn-rnb .rainbow-hue {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 88px;
  letter-spacing: 0.04em;
  line-height: 1;
  background: linear-gradient(90deg,
    #ff0080, #ff4500, #ffcc00,
    #00ff94, #00ccff, #8b00ff, #ff0080
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nn-rnb-hue 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,0,128,0.7)) drop-shadow(0 0 20px rgba(255,0,128,0.4));
}
@keyframes nn-rnb-hue {
  from { filter: hue-rotate(0deg)   drop-shadow(0 0 10px rgba(255,0,128,0.8)) drop-shadow(0 0 26px rgba(255,0,128,0.4)); }
  to   { filter: hue-rotate(360deg) drop-shadow(0 0 10px rgba(0,200,255,0.8)) drop-shadow(0 0 26px rgba(0,200,255,0.4)); }
}

/* 2 — sliding gradient */
.nn-rnb .rainbow-slide {
  font-family: 'Righteous', cursive;
  font-size: 60px;
  letter-spacing: 0.12em;
  line-height: 1;
  background: linear-gradient(90deg,
    #ff0080 0%,
    #ff4500 12%,
    #ffcc00 25%,
    #00ff94 38%,
    #00ccff 50%,
    #8b00ff 62%,
    #ff0080 75%,
    #ff4500 88%,
    #ffcc00 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nn-rnb-slide 3.5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,100,0,0.6));
}
@keyframes nn-rnb-slide {
  0%   { background-position: 0%   center; }
  100% { background-position: 300% center; }
}

/* 3 — per-letter stagger + hue */
.nn-rnb .rainbow-letters {
  display: flex;
  gap: 2px;
  font-family: 'Teko', sans-serif;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}
.nn-rnb .rl {
  display: inline-block;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, hsl(var(--h), 100%, 65%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 6px hsl(var(--h), 100%, 60%))
          drop-shadow(0 0 18px hsl(var(--h), 100%, 50%));
  animation: nn-rnb-letter 2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.12s);
  --h: calc(var(--i) * 28);
}
@keyframes nn-rnb-letter {
  from { filter: drop-shadow(0 0 4px hsl(var(--h),100%,60%)) drop-shadow(0 0 12px hsl(var(--h),100%,50%)); }
  to   { filter: drop-shadow(0 0 8px hsl(var(--h),100%,70%)) drop-shadow(0 0 26px hsl(var(--h),100%,55%)) drop-shadow(0 0 50px hsl(var(--h),100%,40%)); }
}

/* 4 — outline only */
.nn-rnb .rainbow-outline {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 56px;
  letter-spacing: 0.08em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px transparent;
  background: linear-gradient(90deg,
    #ff0080, #ff4500, #ffcc00,
    #00ff94, #00ccff, #8b00ff, #ff0080
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: nn-rnb-slide 5s linear infinite;
  filter:
    drop-shadow(0 0 4px rgba(255,0,128,0.5))
    drop-shadow(0 0 12px rgba(0,200,255,0.4));
}

/* 5 — text-shadow-only cycle */
.nn-rnb .rainbow-shadow {
  font-family: 'Righteous', cursive;
  font-size: 40px;
  letter-spacing: 0.28em;
  color: #fff;
  animation: nn-rnb-shadow 6s linear infinite;
}
@keyframes nn-rnb-shadow {
  0%   { text-shadow: 0 0 4px #fff, 0 0 12px #ff0080, 0 0 28px #ff0080, 0 0 56px rgba(255,0,128,0.5); }
  16%  { text-shadow: 0 0 4px #fff, 0 0 12px #ff6600, 0 0 28px #ff6600, 0 0 56px rgba(255,102,0,0.5); }
  33%  { text-shadow: 0 0 4px #fff, 0 0 12px #ffcc00, 0 0 28px #ffcc00, 0 0 56px rgba(255,204,0,0.5); }
  50%  { text-shadow: 0 0 4px #fff, 0 0 12px #00ff94, 0 0 28px #00ff94, 0 0 56px rgba(0,255,148,0.5); }
  66%  { text-shadow: 0 0 4px #fff, 0 0 12px #00ccff, 0 0 28px #00ccff, 0 0 56px rgba(0,204,255,0.5); }
  83%  { text-shadow: 0 0 4px #fff, 0 0 12px #8b00ff, 0 0 28px #8b00ff, 0 0 56px rgba(139,0,255,0.5); }
  100% { text-shadow: 0 0 4px #fff, 0 0 12px #ff0080, 0 0 28px #ff0080, 0 0 56px rgba(255,0,128,0.5); }
}

@media (max-width: 640px) {
  .nn-rnb .rainbow-hue { font-size: 56px; }
  .nn-rnb .rainbow-slide { font-size: 40px; }
  .nn-rnb .rainbow-letters { font-size: 46px; }
  .nn-rnb .rainbow-outline { font-size: 36px; }
  .nn-rnb .rainbow-shadow { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-rnb .rainbow-hue,
  .nn-rnb .rainbow-slide,
  .nn-rnb .rl,
  .nn-rnb .rainbow-outline,
  .nn-rnb .rainbow-shadow,
  .nn-rnb .ambient { animation: none !important; }
}
```

---
## 13 CSS Neumorphism & Soft UI Designs

URL: https://codefronts.com/design-styles/css-neumorphism/
Description: 13 hand-coded CSS neumorphism (soft-UI) widgets — meditation timer, vinyl music player, smart-home panel, button anatomy lab, audio mixing console, form studio, dark teal IoT hub, champagne finance dashboard with animated credit card, ripple-animated calculator, asymmetric weather grid with live clock, pure-CSS form controls showcase, rose parchment profile + testimonial layout, and a dark-mode neon system hub with glowing neumorphism. Fully interactive, palette-scoped, accessible.
Demo count: 13

### 01. Breathe

**Type:** CSS + JS
**Description:** A warm sand-toned neumorphic wellness widget built around a breathing orb. Pulsing concentric-ring progress arc in terracotta gradient, three expanding pulse rings tied to the inhale/exhale cycle, animated phase-label transitions (Inhale → Hold → Exhale → Rest), a live countdown timer, cycle-progress dots, and preset duration pills. Cormorant Garamond for editorial calm. Best for meditation apps, wellness brands, mindfulness tools.

**HTML:**
```html
<section class="nm-bre" aria-label="Breathing meditation timer">
  <div class="card">
    <span class="ambient" aria-hidden="true"></span>

    <div class="phase-label" id="nm-bre-phase">Inhale slowly</div>

    <div class="orb-wrap">
      <div class="ring-track">
        <svg viewBox="0 0 220 220" aria-hidden="true">
          <defs>
            <linearGradient id="nm-bre-grad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" style="stop-color:#c4856a"/>
              <stop offset="100%" style="stop-color:#d9b8a8"/>
            </linearGradient>
          </defs>
          <circle class="track" cx="110" cy="110" r="100"/>
          <circle class="progress" cx="110" cy="110" r="100"/>
        </svg>

        <div class="orb-inner">
          <span class="pulse-ring" aria-hidden="true"></span>
          <span class="pulse-ring" aria-hidden="true"></span>
          <span class="pulse-ring" aria-hidden="true"></span>
          <span class="orb-symbol" aria-hidden="true">☽</span>
        </div>
      </div>
    </div>

    <div class="timer-display">
      <div class="time" id="nm-bre-timer">05:00</div>
      <div class="sub">minutes remaining</div>
    </div>

    <div class="cycles" aria-hidden="true">
      <span class="cycle-dot done"></span>
      <span class="cycle-dot done"></span>
      <span class="cycle-dot done"></span>
      <span class="cycle-dot"></span>
      <span class="cycle-dot"></span>
      <span class="cycle-dot"></span>
      <span class="cycle-dot"></span>
      <span class="cycle-dot"></span>
    </div>

    <div class="controls">
      <button type="button" class="btn-sm" aria-label="Restart">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4"/>
        </svg>
      </button>

      <button type="button" class="btn-main" id="nm-bre-play" aria-label="Play / Pause">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <polygon points="6,4 20,12 6,20"/>
        </svg>
      </button>

      <button type="button" class="btn-sm" aria-label="Settings">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <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-2.83 2.83l-.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>
      </button>
    </div>

    <div class="presets">
      <button type="button" class="preset-pill active" data-mins="5">5 min</button>
      <button type="button" class="preset-pill" data-mins="10">10 min</button>
      <button type="button" class="preset-pill" data-mins="20">20 min</button>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 01 Breathe — sand-toned meditation timer ──────────────────────
   All :root vars from the source mock are scoped to .nm-bre so this
   demo's warm sand palette never leaks. Body styles (centering,
   background) are moved to the wrapper too. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Jost:wght@200;300;400&display=swap');

.nm-bre {
  --nm-bre-bg: #e8e0d8;
  --nm-bre-shadow-dark: #c4bdb5;
  --nm-bre-shadow-light: #ffffff;
  --nm-bre-text-primary: #6b6260;
  --nm-bre-text-muted: #a09896;
  --nm-bre-accent: #c4856a;
  --nm-bre-accent-soft: #d9a08a;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--nm-bre-bg);
  font-family: 'Jost', system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-bre *,
.nm-bre *::before,
.nm-bre *::after { box-sizing: border-box; }

/* The inner card holds the neumorphic shadow */
.nm-bre .card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--nm-bre-bg);
  border-radius: 40px;
  padding: 50px 40px 44px;
  box-shadow:
    12px 12px 28px var(--nm-bre-shadow-dark),
    -10px -10px 24px var(--nm-bre-shadow-light);
}

.nm-bre .ambient {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: -20px;
  right: -20px;
  background: radial-gradient(circle, rgba(196, 133, 106, 0.12), transparent 70%);
  pointer-events: none;
}

/* Phase label */
.nm-bre .phase-label {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--nm-bre-text-muted);
  transition: opacity 0.8s;
}

/* Orb */
.nm-bre .orb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.nm-bre .ring-track {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--nm-bre-bg);
  box-shadow:
    8px 8px 18px var(--nm-bre-shadow-dark),
    -7px -7px 16px var(--nm-bre-shadow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nm-bre .ring-track svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.nm-bre .ring-track svg circle.track {
  fill: none;
  stroke: var(--nm-bre-shadow-dark);
  stroke-width: 3;
  opacity: 0.4;
}
.nm-bre .ring-track svg circle.progress {
  fill: none;
  stroke: url(#nm-bre-grad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 628;
  stroke-dashoffset: 628;
  animation: nm-bre-ring 16s linear infinite;
}
@keyframes nm-bre-ring {
  0%   { stroke-dashoffset: 628; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 628; }
}

.nm-bre .orb-inner {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #f2ebe4, #ddd5cc);
  box-shadow:
    inset 5px 5px 12px var(--nm-bre-shadow-dark),
    inset -4px -4px 10px var(--nm-bre-shadow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.nm-bre .pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--nm-bre-accent-soft);
  opacity: 0;
  animation: nm-bre-pulse 8s ease-in-out infinite;
}
.nm-bre .pulse-ring:nth-of-type(1) { width: 90px; height: 90px; animation-delay: 0s; }
.nm-bre .pulse-ring:nth-of-type(2) { width: 120px; height: 120px; animation-delay: 2s; }
.nm-bre .pulse-ring:nth-of-type(3) { width: 150px; height: 150px; animation-delay: 4s; }
@keyframes nm-bre-pulse {
  0%   { transform: scale(0.7); opacity: 0; }
  30%  { opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}
.nm-bre .orb-symbol {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--nm-bre-text-primary);
  letter-spacing: -1px;
  animation: nm-bre-breathe 8s ease-in-out infinite;
  user-select: none;
}
@keyframes nm-bre-breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* Timer */
.nm-bre .timer-display { text-align: center; margin-bottom: 26px; }
.nm-bre .timer-display .time {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 52px;
  font-weight: 300;
  color: var(--nm-bre-text-primary);
  letter-spacing: -1px;
  line-height: 1;
}
.nm-bre .timer-display .sub {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-bre-text-muted);
  margin-top: 6px;
}

/* Cycle dots */
.nm-bre .cycles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}
.nm-bre .cycle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nm-bre-bg);
  box-shadow:
    2px 2px 5px var(--nm-bre-shadow-dark),
    -2px -2px 4px var(--nm-bre-shadow-light);
  transition: all 0.4s;
}
.nm-bre .cycle-dot.done {
  background: var(--nm-bre-accent-soft);
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.2),
    inset -1px -1px 3px rgba(255, 255, 255, 0.4);
}

/* Controls */
.nm-bre .controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.nm-bre .btn-sm {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--nm-bre-bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    5px 5px 12px var(--nm-bre-shadow-dark),
    -4px -4px 10px var(--nm-bre-shadow-light);
  color: var(--nm-bre-text-muted);
  font-size: 14px;
  transition: all 0.2s;
}
.nm-bre .btn-sm:active {
  box-shadow:
    inset 3px 3px 8px var(--nm-bre-shadow-dark),
    inset -2px -2px 6px var(--nm-bre-shadow-light);
}
.nm-bre .btn-main {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  background: var(--nm-bre-bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    8px 8px 18px var(--nm-bre-shadow-dark),
    -7px -7px 16px var(--nm-bre-shadow-light);
  color: var(--nm-bre-accent);
  font-size: 22px;
  transition: all 0.2s;
  position: relative;
}
.nm-bre .btn-main::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0e9e2, #dcd4cc);
  z-index: 0;
}
.nm-bre .btn-main svg { position: relative; z-index: 1; }
.nm-bre .btn-main:active {
  box-shadow:
    inset 4px 4px 10px var(--nm-bre-shadow-dark),
    inset -3px -3px 8px var(--nm-bre-shadow-light);
}

/* Presets */
.nm-bre .presets {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.nm-bre .preset-pill {
  padding: 6px 16px;
  border-radius: 20px;
  border: none;
  background: var(--nm-bre-bg);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-bre-text-muted);
  cursor: pointer;
  box-shadow:
    3px 3px 8px var(--nm-bre-shadow-dark),
    -2px -2px 6px var(--nm-bre-shadow-light);
  transition: all 0.2s;
}
.nm-bre .preset-pill.active {
  color: var(--nm-bre-accent);
  box-shadow:
    inset 2px 2px 5px var(--nm-bre-shadow-dark),
    inset -2px -2px 4px var(--nm-bre-shadow-light);
}

@media (prefers-reduced-motion: reduce) {
  .nm-bre .ring-track svg circle.progress,
  .nm-bre .pulse-ring,
  .nm-bre .orb-symbol { animation: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.nm-bre');
  if (!root) return;
  const phases = ['Inhale slowly', 'Hold gently', 'Exhale softly', 'Rest'];
  const durations = [4000, 2000, 6000, 2000];
  let phaseIdx = 0;
  const phaseLabel = root.querySelector('#nm-bre-phase');

  function nextPhase() {
    phaseIdx = (phaseIdx + 1) % phases.length;
    if (phaseLabel) {
      phaseLabel.style.opacity = 0;
      setTimeout(() => {
        phaseLabel.textContent = phases[phaseIdx];
        phaseLabel.style.opacity = 1;
      }, 400);
    }
    setTimeout(nextPhase, durations[phaseIdx]);
  }
  setTimeout(nextPhase, durations[0]);

  let totalSecs = 300;
  let timerInterval = null;
  let running = false;
  const timerEl = root.querySelector('#nm-bre-timer');
  const playBtn = root.querySelector('#nm-bre-play');

  const fmt = (s) => String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0');
  const playIcon = '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="6,4 20,12 6,20"/></svg>';
  const pauseIcon = '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>';

  if (playBtn) playBtn.addEventListener('click', () => {
    running = !running;
    if (running) {
      playBtn.innerHTML = pauseIcon;
      timerInterval = setInterval(() => {
        if (totalSecs > 0) {
          totalSecs--;
          if (timerEl) timerEl.textContent = fmt(totalSecs);
        } else {
          clearInterval(timerInterval);
          running = false;
          playBtn.innerHTML = playIcon;
        }
      }, 1000);
    } else {
      clearInterval(timerInterval);
      playBtn.innerHTML = playIcon;
    }
  });

  root.querySelectorAll('.preset-pill').forEach(btn => {
    btn.addEventListener('click', () => {
      root.querySelector('.preset-pill.active')?.classList.remove('active');
      btn.classList.add('active');
      const mins = parseInt(btn.dataset.mins, 10) || 5;
      totalSecs = mins * 60;
      if (timerEl) timerEl.textContent = fmt(totalSecs);
      if (running) {
        clearInterval(timerInterval);
        running = false;
        if (playBtn) playBtn.innerHTML = playIcon;
      }
    });
  });
})();
```

### 02. Vinyl Player

**Type:** CSS + JS
**Description:** A deep-slate dark-neumorphic music player with a spinning vinyl disc featuring real grooves via repeating-radial-gradient. Includes an 18-bar animated EQ visualizer synced to playback state, arc progress scrubber with glowing gradient thumb, tonearm SVG, amber accent label, and a full transport control set (shuffle, prev, play/pause, next, loop). DM Serif Display for warm sophistication. Best for music apps, podcast platforms, audio dashboards.

**HTML:**
```html
<section class="nm-vin" aria-label="Vinyl player widget">
  <div class="card">
    <span class="glow" aria-hidden="true"></span>
    <span class="glow2" aria-hidden="true"></span>

    <div class="disc-wrap">
    <div class="disc-outer">
      <div class="disc" id="nm-vin-disc">
        <div class="disc-label" aria-hidden="true">♪</div>
      </div>
      <div class="tonearm-wrap" aria-hidden="true">
        <svg width="70" height="80" viewBox="0 0 70 80">
          <line x1="10" y1="10" x2="50" y2="65" stroke="#888" stroke-width="2.5" stroke-linecap="round"/>
          <circle cx="10" cy="10" r="6" fill="#444" stroke="#666" stroke-width="1"/>
          <circle cx="50" cy="65" r="4" fill="#e0a86c" opacity="0.9"/>
        </svg>
      </div>
    </div>
  </div>

  <div class="track-info">
    <div class="track-title">Midnight Reverie</div>
    <div class="track-artist">Aurelia Voss &middot; Late Hours</div>
  </div>

  <div class="progress-wrap">
    <div class="progress-track">
      <div class="progress-fill" id="nm-vin-fill">
        <span class="progress-thumb" aria-hidden="true"></span>
      </div>
    </div>
    <div class="progress-times">
      <span id="nm-vin-elapsed">1:28</span>
      <span>3:52</span>
    </div>
  </div>

  <div class="eq-wrap paused" id="nm-vin-eq" aria-hidden="true">
    <span class="eq-bar"></span><span class="eq-bar"></span><span class="eq-bar"></span>
    <span class="eq-bar"></span><span class="eq-bar"></span><span class="eq-bar"></span>
    <span class="eq-bar"></span><span class="eq-bar"></span><span class="eq-bar"></span>
    <span class="eq-bar"></span><span class="eq-bar"></span><span class="eq-bar"></span>
    <span class="eq-bar"></span><span class="eq-bar"></span><span class="eq-bar"></span>
    <span class="eq-bar"></span><span class="eq-bar"></span><span class="eq-bar"></span>
  </div>

  <div class="controls">
    <button type="button" class="ctrl-btn sm" aria-label="Shuffle">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/>
        <polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/>
      </svg>
    </button>
    <button type="button" class="ctrl-btn sm" aria-label="Previous">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <polygon points="19,20 9,12 19,4"/><rect x="5" y="4" width="2" height="16"/>
      </svg>
    </button>
    <button type="button" class="ctrl-btn lg" id="nm-vin-play" aria-label="Play / Pause">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <polygon points="6,4 20,12 6,20"/>
      </svg>
    </button>
    <button type="button" class="ctrl-btn sm" aria-label="Next">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <polygon points="5,4 15,12 5,20"/><rect x="17" y="4" width="2" height="16"/>
      </svg>
    </button>
    <button type="button" class="ctrl-btn sm" aria-label="Loop">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/>
        <polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>
      </svg>
    </button>
  </div>

  <div class="volume-row">
    <span class="vol-icon" aria-hidden="true">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
      </svg>
    </span>
    <div class="vol-track"><div class="vol-fill"></div></div>
    <span class="vol-icon" aria-hidden="true">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
        <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
        <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
      </svg>
    </span>
  </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Vinyl Player — dark-slate dark-neumorphic music widget ───── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400&display=swap');

.nm-vin {
  --nm-vin-bg: #1e2230;
  --nm-vin-neu-dark: #141720;
  --nm-vin-neu-light: #282e40;
  --nm-vin-text-primary: #d0d4e0;
  --nm-vin-text-muted: #606880;
  --nm-vin-accent: #e0a86c;
  --nm-vin-accent2: #7c6cdb;
  --nm-vin-inset: #1b1f2d;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--nm-vin-bg);
  font-family: 'DM Mono', ui-monospace, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-vin *,
.nm-vin *::before,
.nm-vin *::after { box-sizing: border-box; }

/* The inner card holds the dark neumorphic shadow */
.nm-vin .card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--nm-vin-bg);
  border-radius: 36px;
  padding: 40px 34px 36px;
  box-shadow:
    14px 14px 32px var(--nm-vin-neu-dark),
    -10px -10px 28px var(--nm-vin-neu-light);
  overflow: hidden;
}

/* Glows — contained inside the card */
.nm-vin .glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 219, 0.08), transparent 70%);
  top: -60px;
  right: -40px;
  pointer-events: none;
}
.nm-vin .glow2 {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 168, 108, 0.07), transparent 70%);
  bottom: -40px;
  left: -30px;
  pointer-events: none;
}

/* Vinyl disc */
.nm-vin .disc-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}
.nm-vin .disc-outer {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--nm-vin-bg);
  box-shadow:
    10px 10px 24px var(--nm-vin-neu-dark),
    -8px -8px 20px var(--nm-vin-neu-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nm-vin .disc {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0px, transparent 3px,
      rgba(255, 255, 255, 0.02) 3px, rgba(255, 255, 255, 0.02) 4px
    ),
    conic-gradient(from 0deg,
      #1a1d2a 0deg, #242838 90deg, #1a1d2a 180deg, #242838 270deg, #1a1d2a 360deg
    );
  box-shadow:
    inset 4px 4px 12px rgba(0, 0, 0, 0.6),
    inset -3px -3px 8px rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nm-vin-spin 4s linear infinite;
  animation-play-state: paused;
}
.nm-vin .disc.playing { animation-play-state: running; }
@keyframes nm-vin-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.nm-vin .disc-label {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nm-vin-accent), #c4863a);
  box-shadow:
    inset 2px 2px 6px rgba(0, 0, 0, 0.3),
    inset -1px -1px 3px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #1a1d2a;
}

/* Tonearm */
.nm-vin .tonearm-wrap {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 70px;
  height: 80px;
}
.nm-vin .tonearm-wrap svg {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
}

/* Track info */
.nm-vin .track-info { text-align: center; margin-bottom: 22px; }
.nm-vin .track-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  color: var(--nm-vin-text-primary);
  margin-bottom: 5px;
  letter-spacing: -0.3px;
}
.nm-vin .track-artist {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-vin-text-muted);
}

/* Progress bar */
.nm-vin .progress-wrap { margin-bottom: 22px; position: relative; }
.nm-vin .progress-track {
  height: 4px;
  border-radius: 2px;
  background: var(--nm-vin-inset);
  box-shadow:
    inset 2px 2px 4px var(--nm-vin-neu-dark),
    inset -1px -1px 3px rgba(255, 255, 255, 0.04);
  position: relative;
  cursor: pointer;
}
.nm-vin .progress-fill {
  height: 100%;
  width: 38%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nm-vin-accent2), var(--nm-vin-accent));
  position: relative;
}
.nm-vin .progress-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nm-vin-bg);
  box-shadow:
    2px 2px 6px var(--nm-vin-neu-dark),
    -1px -1px 4px var(--nm-vin-neu-light);
  position: absolute;
  right: -6px;
  top: -4px;
}
.nm-vin .progress-times {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.nm-vin .progress-times span {
  font-size: 9px;
  color: var(--nm-vin-text-muted);
  letter-spacing: 1px;
}

/* EQ bars */
.nm-vin .eq-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 30px;
  margin-bottom: 24px;
}
.nm-vin .eq-bar {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--nm-vin-accent2), var(--nm-vin-accent));
  animation: nm-vin-eq 0.6s ease-in-out infinite alternate;
  opacity: 0.7;
}
.nm-vin .eq-bar:nth-child(1)  { height: 40%; animation-duration: 0.5s; animation-delay: 0.0s; }
.nm-vin .eq-bar:nth-child(2)  { height: 70%; animation-duration: 0.7s; animation-delay: 0.1s; }
.nm-vin .eq-bar:nth-child(3)  { height: 90%; animation-duration: 0.4s; animation-delay: 0.2s; }
.nm-vin .eq-bar:nth-child(4)  { height: 60%; animation-duration: 0.6s; animation-delay: 0.05s; }
.nm-vin .eq-bar:nth-child(5)  { height: 100%; animation-duration: 0.8s; animation-delay: 0.15s; }
.nm-vin .eq-bar:nth-child(6)  { height: 75%; animation-duration: 0.5s; animation-delay: 0.25s; }
.nm-vin .eq-bar:nth-child(7)  { height: 50%; animation-duration: 0.7s; animation-delay: 0.1s; }
.nm-vin .eq-bar:nth-child(8)  { height: 85%; animation-duration: 0.4s; animation-delay: 0.3s; }
.nm-vin .eq-bar:nth-child(9)  { height: 60%; animation-duration: 0.6s; animation-delay: 0.0s; }
.nm-vin .eq-bar:nth-child(10) { height: 35%; animation-duration: 0.5s; animation-delay: 0.2s; }
.nm-vin .eq-bar:nth-child(11) { height: 80%; animation-duration: 0.9s; animation-delay: 0.05s; }
.nm-vin .eq-bar:nth-child(12) { height: 55%; animation-duration: 0.6s; animation-delay: 0.15s; }
.nm-vin .eq-bar:nth-child(13) { height: 45%; animation-duration: 0.4s; animation-delay: 0.25s; }
.nm-vin .eq-bar:nth-child(14) { height: 70%; animation-duration: 0.7s; animation-delay: 0.1s; }
.nm-vin .eq-bar:nth-child(15) { height: 90%; animation-duration: 0.5s; animation-delay: 0.35s; }
.nm-vin .eq-bar:nth-child(16) { height: 65%; animation-duration: 0.8s; animation-delay: 0.0s; }
.nm-vin .eq-bar:nth-child(17) { height: 40%; animation-duration: 0.6s; animation-delay: 0.2s; }
.nm-vin .eq-bar:nth-child(18) { height: 55%; animation-duration: 0.4s; animation-delay: 0.1s; }
@keyframes nm-vin-eq {
  0%   { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}
.nm-vin .eq-wrap.paused .eq-bar { animation-play-state: paused; }

/* Controls */
.nm-vin .controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.nm-vin .ctrl-btn {
  border: none;
  background: var(--nm-vin-bg);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nm-vin-text-muted);
  transition: all 0.15s;
}
.nm-vin .ctrl-btn.sm {
  width: 40px;
  height: 40px;
  box-shadow:
    4px 4px 10px var(--nm-vin-neu-dark),
    -3px -3px 8px var(--nm-vin-neu-light);
  font-size: 12px;
}
.nm-vin .ctrl-btn.sm:active {
  box-shadow:
    inset 2px 2px 6px var(--nm-vin-neu-dark),
    inset -1px -1px 4px var(--nm-vin-neu-light);
  color: var(--nm-vin-accent);
}
.nm-vin .ctrl-btn.lg {
  width: 62px;
  height: 62px;
  box-shadow:
    7px 7px 16px var(--nm-vin-neu-dark),
    -6px -6px 14px var(--nm-vin-neu-light);
  color: var(--nm-vin-accent);
  font-size: 20px;
}
.nm-vin .ctrl-btn.lg:active {
  box-shadow:
    inset 3px 3px 8px var(--nm-vin-neu-dark),
    inset -2px -2px 6px var(--nm-vin-neu-light);
}

/* Volume */
.nm-vin .volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nm-vin .vol-icon { color: var(--nm-vin-text-muted); font-size: 11px; }
.nm-vin .vol-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--nm-vin-inset);
  box-shadow:
    inset 2px 2px 4px var(--nm-vin-neu-dark),
    inset -1px -1px 3px rgba(255, 255, 255, 0.04);
  position: relative;
}
.nm-vin .vol-fill {
  height: 100%;
  width: 62%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nm-vin-accent2), var(--nm-vin-accent));
}

@media (prefers-reduced-motion: reduce) {
  .nm-vin .disc,
  .nm-vin .eq-bar { animation: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.nm-vin');
  if (!root) return;
  let playing = false;
  const disc = root.querySelector('#nm-vin-disc');
  const eqWrap = root.querySelector('#nm-vin-eq');
  const playBtn = root.querySelector('#nm-vin-play');
  const pFill = root.querySelector('#nm-vin-fill');
  const elapsedEl = root.querySelector('#nm-vin-elapsed');

  let elapsed = 88;
  const total = 232;
  let interval = null;
  const fmt = (s) => Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0');
  const playIcon = '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="6,4 20,12 6,20"/></svg>';
  const pauseIcon = '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>';

  if (playBtn) playBtn.addEventListener('click', () => {
    playing = !playing;
    if (disc) disc.classList.toggle('playing', playing);
    if (playing) {
      eqWrap?.classList.remove('paused');
      playBtn.innerHTML = pauseIcon;
      interval = setInterval(() => {
        elapsed = Math.min(elapsed + 1, total);
        if (pFill) pFill.style.width = (elapsed / total * 100) + '%';
        if (elapsedEl) elapsedEl.textContent = fmt(elapsed);
        if (elapsed >= total) { clearInterval(interval); playing = false; }
      }, 1000);
    } else {
      eqWrap?.classList.add('paused');
      clearInterval(interval);
      playBtn.innerHTML = playIcon;
    }
  });
})();
```

### 03. Nexus

**Type:** CSS + JS
**Description:** A cool blue-gray light-neumorphic room control dashboard. Features a live arc-dial temperature control with +/− buttons, a 2×2 device card grid (each with inset toggle switches, active color-stripe headers, and individual accent colors), room selector pills, and a security status bar with pulsing indicator dots. Every device card is fully toggleable. Syne typeface for a clean modern edge. Best for smart-home apps, IoT dashboards, control panels.

**HTML:**
```html
<section class="nm-nex" aria-label="Smart home control panel">
  <div class="card">

  <div class="room-row" role="tablist">
    <button type="button" class="room-pill active" role="tab" aria-selected="true">Living Room</button>
    <button type="button" class="room-pill" role="tab" aria-selected="false">Bedroom</button>
    <button type="button" class="room-pill" role="tab" aria-selected="false">Kitchen</button>
    <button type="button" class="room-pill" role="tab" aria-selected="false">Office</button>
  </div>

  <div class="temp-section">
    <div class="dial-wrap" aria-hidden="true">
      <svg viewBox="0 0 90 90">
        <defs>
          <linearGradient id="nm-nex-tempgrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#5b8def"/>
            <stop offset="100%" style="stop-color:#f0a855"/>
          </linearGradient>
        </defs>
        <circle class="track" cx="45" cy="45" r="35"/>
        <circle class="fill" cx="45" cy="45" r="35" id="nm-nex-dialfill"/>
      </svg>
      <div class="dial-center">
        <div class="dial-val" id="nm-nex-tempval">22</div>
        <div class="dial-unit">&deg;C</div>
      </div>
    </div>

    <div class="temp-info">
      <div class="temp-label">Climate Control</div>
      <div class="temp-sub">Humidity 48% &middot; Feels 23&deg;</div>
      <div class="temp-btns">
        <button type="button" class="adj-btn" data-nm-nex-adj="-1" aria-label="Decrease temperature">&minus;</button>
        <button type="button" class="adj-btn" data-nm-nex-adj="1" aria-label="Increase temperature">+</button>
      </div>
    </div>
  </div>

  <div class="devices-grid">
    <button type="button" class="device-card active" data-nm-nex-device="light" style="--device-color: #f0a855;">
      <span class="toggle" aria-hidden="true"></span>
      <span class="device-icon" aria-hidden="true">💡</span>
      <div class="device-name">Main Light</div>
      <div class="device-status">On &middot; 70%</div>
    </button>

    <button type="button" class="device-card active" data-nm-nex-device="air" style="--device-color: #5b8def;">
      <span class="toggle" aria-hidden="true"></span>
      <span class="device-icon" aria-hidden="true">❄️</span>
      <div class="device-name">Air Purifier</div>
      <div class="device-status">Running</div>
    </button>

    <button type="button" class="device-card" data-nm-nex-device="tv" style="--device-color: #5bb87e;">
      <span class="toggle" aria-hidden="true"></span>
      <span class="device-icon" aria-hidden="true">📺</span>
      <div class="device-name">Smart TV</div>
      <div class="device-status">Off</div>
    </button>

    <button type="button" class="device-card active" data-nm-nex-device="speaker" style="--device-color: #5bb87e;">
      <span class="toggle" aria-hidden="true"></span>
      <span class="device-icon" aria-hidden="true">🔊</span>
      <div class="device-name">Speaker</div>
      <div class="device-status">Playing</div>
    </button>
  </div>

  <div class="security-row">
    <div class="sec-left">
      <span class="sec-icon" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
      </span>
      <div class="sec-text">
        <div class="sec-title">Security System</div>
        <div class="sec-sub">All Clear &middot; Armed</div>
      </div>
    </div>
    <div class="status-dots" aria-hidden="true">
      <span class="sdot green pulse"></span>
      <span class="sdot green"></span>
      <span class="sdot"></span>
    </div>
  </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Nexus — cool blue-gray smart home control panel ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700&family=Syne+Mono&display=swap');

.nm-nex {
  --nm-nex-bg: #dce4ee;
  --nm-nex-dark: #b8c4d2;
  --nm-nex-light: #ffffff;
  --nm-nex-text: #5a6880;
  --nm-nex-text-dim: #96a4b8;
  --nm-nex-on: #5b8def;
  --nm-nex-warm: #f0a855;
  --nm-nex-green: #5bb87e;
  --nm-nex-red: #e07070;
  --nm-nex-inset: #d4dce8;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--nm-nex-bg);
  font-family: 'Syne', system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-nex *,
.nm-nex *::before,
.nm-nex *::after { box-sizing: border-box; }

/* The inner card holds the neumorphic shadow */
.nm-nex .card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--nm-nex-bg);
  border-radius: 36px;
  padding: 36px 34px 34px;
  box-shadow:
    14px 14px 30px var(--nm-nex-dark),
    -12px -12px 26px var(--nm-nex-light);
}

/* Room pills */
.nm-nex .room-row {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nm-nex .room-row::-webkit-scrollbar { display: none; }
.nm-nex .room-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  background: var(--nm-nex-bg);
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--nm-nex-text-dim);
  cursor: pointer;
  box-shadow:
    4px 4px 10px var(--nm-nex-dark),
    -3px -3px 8px var(--nm-nex-light);
  transition: all 0.2s;
}
.nm-nex .room-pill.active {
  background: var(--nm-nex-on);
  color: #fff;
  box-shadow:
    4px 4px 12px rgba(91, 141, 239, 0.35),
    -2px -2px 6px rgba(255, 255, 255, 0.5),
    inset 1px 1px 3px rgba(255, 255, 255, 0.2);
}

/* Temp dial */
.nm-nex .temp-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  background: var(--nm-nex-bg);
  border-radius: 24px;
  padding: 18px;
  box-shadow:
    inset 5px 5px 12px var(--nm-nex-dark),
    inset -4px -4px 10px var(--nm-nex-light);
}
.nm-nex .dial-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}
.nm-nex .dial-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-220deg);
}
.nm-nex .dial-wrap svg .track {
  fill: none;
  stroke: var(--nm-nex-dark);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.5;
}
.nm-nex .dial-wrap svg .fill {
  fill: none;
  stroke: url(#nm-nex-tempgrad);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 55;
  transition: stroke-dashoffset 0.5s;
}
.nm-nex .dial-center {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--nm-nex-bg);
  box-shadow:
    3px 3px 8px var(--nm-nex-dark),
    -2px -2px 6px var(--nm-nex-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nm-nex .dial-val {
  font-family: 'Syne Mono', ui-monospace, monospace;
  font-size: 18px;
  color: var(--nm-nex-text);
  line-height: 1;
}
.nm-nex .dial-unit {
  font-size: 8px;
  color: var(--nm-nex-text-dim);
  letter-spacing: 1px;
}
.nm-nex .temp-info { flex: 1; }
.nm-nex .temp-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-nex-text);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.nm-nex .temp-sub {
  font-size: 10px;
  color: var(--nm-nex-text-dim);
  margin-bottom: 14px;
}
.nm-nex .temp-btns { display: flex; gap: 8px; }
.nm-nex .adj-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--nm-nex-bg);
  cursor: pointer;
  font-size: 16px;
  color: var(--nm-nex-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    3px 3px 7px var(--nm-nex-dark),
    -2px -2px 5px var(--nm-nex-light);
  transition: all 0.15s;
  font-weight: 500;
  font-family: inherit;
}
.nm-nex .adj-btn:active {
  box-shadow:
    inset 2px 2px 5px var(--nm-nex-dark),
    inset -1px -1px 4px var(--nm-nex-light);
  color: var(--nm-nex-on);
}

/* Device grid */
.nm-nex .devices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.nm-nex .device-card {
  background: var(--nm-nex-bg);
  border: 0;
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow:
    6px 6px 14px var(--nm-nex-dark),
    -5px -5px 12px var(--nm-nex-light);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  text-align: left;
  font-family: inherit;
}
.nm-nex .device-card.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: var(--device-color, var(--nm-nex-on));
}
.nm-nex .device-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--nm-nex-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 16px;
  box-shadow:
    3px 3px 8px var(--nm-nex-dark),
    -2px -2px 6px var(--nm-nex-light);
  transition: all 0.2s;
}
.nm-nex .device-card.active .device-icon {
  background: var(--device-color, var(--nm-nex-on));
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.15),
    inset 1px 1px 3px rgba(255, 255, 255, 0.25);
  color: #fff;
}
.nm-nex .device-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--nm-nex-text);
  margin-bottom: 2px;
  letter-spacing: 0.3px;
}
.nm-nex .device-status {
  font-size: 9px;
  color: var(--nm-nex-text-dim);
  letter-spacing: 0.5px;
  font-family: 'Syne Mono', ui-monospace, monospace;
}
.nm-nex .device-card.active .device-status { color: var(--device-color, var(--nm-nex-on)); }

/* Toggle switch */
.nm-nex .toggle {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: var(--nm-nex-bg);
  box-shadow:
    inset 2px 2px 5px var(--nm-nex-dark),
    inset -1px -1px 4px var(--nm-nex-light);
  cursor: pointer;
  transition: all 0.2s;
}
.nm-nex .toggle::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nm-nex-text-dim);
  top: 2.5px;
  left: 3px;
  transition: all 0.25s;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.nm-nex .device-card.active .toggle {
  background: var(--device-color, var(--nm-nex-on));
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.25),
    inset -1px -1px 2px rgba(255, 255, 255, 0.2);
}
.nm-nex .device-card.active .toggle::after {
  left: calc(100% - 14px);
  background: #fff;
}

/* Security row */
.nm-nex .security-row {
  background: var(--nm-nex-bg);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow:
    inset 4px 4px 10px var(--nm-nex-dark),
    inset -3px -3px 8px var(--nm-nex-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nm-nex .sec-left { display: flex; align-items: center; gap: 12px; }
.nm-nex .sec-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--nm-nex-bg);
  box-shadow:
    3px 3px 7px var(--nm-nex-dark),
    -2px -2px 5px var(--nm-nex-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--nm-nex-green);
}
.nm-nex .sec-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-nex-text);
  margin-bottom: 2px;
}
.nm-nex .sec-sub {
  font-size: 9px;
  color: var(--nm-nex-green);
  font-family: 'Syne Mono', ui-monospace, monospace;
  letter-spacing: 0.5px;
}
.nm-nex .status-dots { display: flex; gap: 5px; }
.nm-nex .sdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nm-nex-bg);
  box-shadow:
    1px 1px 3px var(--nm-nex-dark),
    -1px -1px 2px var(--nm-nex-light);
}
.nm-nex .sdot.green {
  background: var(--nm-nex-green);
  box-shadow: 0 0 6px rgba(91, 184, 126, 0.5);
}
.nm-nex .sdot.pulse { animation: nm-nex-dot 2s ease-in-out infinite; }
@keyframes nm-nex-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-nex .sdot.pulse { animation: none; }
  .nm-nex .dial-wrap svg .fill { transition: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.nm-nex');
  if (!root) return;
  const statusMap = {
    light:   { on: 'On · 70%', off: 'Off' },
    air:     { on: 'Running',  off: 'Off' },
    tv:      { on: 'On',       off: 'Off' },
    speaker: { on: 'Playing',  off: 'Off' },
  };
  root.querySelectorAll('.device-card').forEach(card => {
    card.addEventListener('click', () => {
      card.classList.toggle('active');
      const key = card.dataset.nmNexDevice;
      const status = card.querySelector('.device-status');
      const labels = statusMap[key];
      if (status && labels) {
        status.textContent = card.classList.contains('active') ? labels.on : labels.off;
      }
    });
  });

  let temp = 22;
  const tempVal = root.querySelector('#nm-nex-tempval');
  const dialFill = root.querySelector('#nm-nex-dialfill');
  root.querySelectorAll('[data-nm-nex-adj]').forEach(btn => {
    btn.addEventListener('click', () => {
      const delta = parseInt(btn.dataset.nmNexAdj, 10) || 0;
      temp = Math.max(16, Math.min(30, temp + delta));
      if (tempVal) tempVal.textContent = temp;
      if (dialFill) {
        const pct = (temp - 16) / 14;
        dialFill.style.strokeDashoffset = String(220 - pct * 220);
      }
    });
  });

  root.querySelectorAll('.room-pill').forEach(p => {
    p.addEventListener('click', () => {
      root.querySelectorAll('.room-pill').forEach(o => {
        o.classList.remove('active');
        o.setAttribute('aria-selected', 'false');
      });
      p.classList.add('active');
      p.setAttribute('aria-selected', 'true');
    });
  });
})();
```

### 04. Soft UI Button Lab

**Type:** CSS + JS
**Description:** A cool-slate showcase panel demonstrating the full neumorphic vocabulary. Section 1 shows the three core shadow states (resting, hover-lifted, pressed-inset) side-by-side with live box-shadow code snippets beneath each. Section 2 is a shapes row — pill, accent-filled, ghost outline, icon squares, FAB, danger, success, plus a spinner-loading state. Section 3 has draggable toggles, neumorphic checkboxes, and a segmented radio control. Syne + DM Sans typefaces. Best for design-system docs, button libraries, component galleries.

**HTML:**
```html
<section class="nm-btn" aria-label="Soft UI button lab">
  <div class="card">

  <div>
    <div class="sec-tag">01 — Shadow State Anatomy</div>
    <div class="states-row">

      <div class="state-demo">
        <button type="button" class="btn-resting">Button</button>
        <span class="state-label">○ Resting</span>
        <div class="shadow-diagram">
          <strong>box-shadow:</strong>
          <code>8px 8px 18px #a3b1c6,<br />-8px -8px 18px #ffffff;</code>
          Extruded. Light from top-left, dark bottom-right.
        </div>
      </div>

      <div class="state-demo">
        <button type="button" class="btn-hover-state">Button</button>
        <span class="state-label">↑ Hover / Lift</span>
        <div class="shadow-diagram">
          <strong>box-shadow:</strong>
          <code>12px 12px 26px #a3b1c6,<br />-12px -12px 26px #ffffff;</code>
          Shadows grow — surface rises.
        </div>
      </div>

      <div class="state-demo">
        <button type="button" class="btn-pressed-state">Button</button>
        <span class="state-label">⬤ Pressed</span>
        <div class="shadow-diagram">
          <strong>box-shadow:</strong>
          <code>inset 6px 6px 14px #a3b1c6,<br />inset -6px -6px 14px #fff;</code>
          Inverted inset — surface sinks in.
        </div>
      </div>

    </div>
  </div>

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

  <div>
    <div class="sec-tag">02 — Shapes &amp; Variants</div>
    <div class="shapes-row">
      <button type="button" class="btn-resting">Default</button>
      <button type="button" class="btn-pill">Pill Shape</button>
      <button type="button" class="btn-accent">★ Primary</button>
      <button type="button" class="btn-ghost">Outline</button>
      <button type="button" class="btn-sq" aria-label="Edit">✏️</button>
      <button type="button" class="btn-sq" aria-label="Search">🔍</button>
      <button type="button" class="btn-sq" aria-label="Settings">⚙</button>
      <button type="button" class="btn-circle" aria-label="Play">▪</button>
      <button type="button" class="btn-fab" aria-label="Add">＋</button>
      <button type="button" class="btn-danger">Delete</button>
      <button type="button" class="btn-success">Confirm</button>
      <button type="button" class="btn-loading"><span class="spinner" aria-hidden="true"></span>Loading…</button>
    </div>
  </div>

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

  <div>
    <div class="sec-tag">03 — Toggles · Radios · Checks</div>
    <div class="toggles-row">

      <div class="toggle-wrap">
        <button type="button" class="toggle on" data-nm-btn-toggle aria-pressed="true">
          <span class="toggle-track" aria-hidden="true"></span>
          <span class="toggle-thumb" aria-hidden="true"></span>
        </button>
        <span class="toggle-lbl">Enabled</span>
      </div>

      <div class="toggle-wrap">
        <button type="button" class="toggle" data-nm-btn-toggle aria-pressed="false">
          <span class="toggle-track" aria-hidden="true"></span>
          <span class="toggle-thumb" aria-hidden="true"></span>
        </button>
        <span class="toggle-lbl">Dark Mode</span>
      </div>

      <div class="toggle-wrap">
        <button type="button" class="toggle on" data-nm-btn-toggle aria-pressed="true">
          <span class="toggle-track" aria-hidden="true"></span>
          <span class="toggle-thumb" aria-hidden="true"></span>
        </button>
        <span class="toggle-lbl">Notifications</span>
      </div>

      <button type="button" class="btn-check checked" data-nm-btn-check>
        <span class="btn-check-box">✓</span>
        Completed
      </button>

      <button type="button" class="btn-check" data-nm-btn-check>
        <span class="btn-check-box"></span>
        Add to cart
      </button>

      <div class="radio-group" role="radiogroup">
        <button type="button" class="radio-opt active" data-nm-btn-radio>Daily</button>
        <button type="button" class="radio-opt" data-nm-btn-radio>Weekly</button>
        <button type="button" class="radio-opt" data-nm-btn-radio>Monthly</button>
      </div>

    </div>
  </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Soft UI Button Lab — cool slate showcase panel ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

.nm-btn {
  --nm-btn-bg:   #e0e5ec;
  --nm-btn-sd:   #a3b1c6;
  --nm-btn-sl:   #ffffff;
  --nm-btn-ib:   #d6dce7;
  --nm-btn-acc:  #6c5ce7;
  --nm-btn-ac2:  #a29bfe;
  --nm-btn-txt:  #4a5568;
  --nm-btn-txt2: #1a202c;
  --nm-btn-r:    16px;
  --nm-btn-neu-out:  8px 8px 18px var(--nm-btn-sd), -8px -8px 18px var(--nm-btn-sl);
  --nm-btn-neu-in:   inset 6px 6px 14px var(--nm-btn-sd), inset -6px -6px 14px var(--nm-btn-sl);
  --nm-btn-neu-sm:   5px 5px 12px var(--nm-btn-sd), -5px -5px 12px var(--nm-btn-sl);
  --nm-btn-neu-sm-in: inset 4px 4px 9px var(--nm-btn-sd), inset -4px -4px 9px var(--nm-btn-sl);

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--nm-btn-bg);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--nm-btn-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-btn *,
.nm-btn *::before,
.nm-btn *::after { box-sizing: border-box; }

.nm-btn .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-btn-bg);
  border-radius: 40px;
  padding: 48px 44px;
  box-shadow: 22px 22px 54px var(--nm-btn-sd), -22px -22px 54px var(--nm-btn-sl);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.nm-btn .sec-tag {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-btn-txt);
  opacity: 0.6;
  margin-bottom: 20px;
}

/* Section 1 — Three states */
.nm-btn .states-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.nm-btn .state-demo {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.nm-btn .state-label {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nm-btn-txt);
  opacity: 0.7;
}

.nm-btn .btn-resting {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 16px 40px;
  border-radius: var(--nm-btn-r);
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--nm-btn-txt2);
  box-shadow: var(--nm-btn-neu-out);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  letter-spacing: 0.3px;
  user-select: none;
}
.nm-btn .btn-resting:hover {
  box-shadow: 10px 10px 22px var(--nm-btn-sd), -10px -10px 22px var(--nm-btn-sl);
  transform: translateY(-1px);
}
.nm-btn .btn-resting:active {
  box-shadow: var(--nm-btn-neu-in);
  transform: translateY(0);
}

.nm-btn .btn-hover-state,
.nm-btn .btn-pressed-state {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 16px 40px;
  border-radius: var(--nm-btn-r);
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--nm-btn-txt2);
  letter-spacing: 0.3px;
}
.nm-btn .btn-hover-state {
  box-shadow: 12px 12px 26px var(--nm-btn-sd), -12px -12px 26px var(--nm-btn-sl);
  transform: translateY(-1px);
}
.nm-btn .btn-pressed-state {
  box-shadow: var(--nm-btn-neu-in);
}

.nm-btn .shadow-diagram {
  width: 100%;
  max-width: 196px;
  background: var(--nm-btn-ib);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--nm-btn-neu-sm-in);
  font-family: 'DM Sans', ui-monospace, monospace;
  font-size: 9px;
  color: var(--nm-btn-txt);
  line-height: 1.6;
}
.nm-btn .shadow-diagram code {
  display: block;
  font-size: 8px;
  color: var(--nm-btn-acc);
  opacity: 0.9;
  margin-top: 4px;
  line-height: 1.5;
}

/* Section 2 — Shapes */
.nm-btn .shapes-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.nm-btn .btn-pill {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-btn-txt2);
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
}
.nm-btn .btn-pill:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
  transform: translateY(-1px);
}
.nm-btn .btn-pill:active {
  box-shadow: var(--nm-btn-neu-sm-in);
  transform: scale(0.98);
}

.nm-btn .btn-accent {
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--nm-btn-acc), #5040cc);
  box-shadow: 8px 8px 18px rgba(108, 92, 231, 0.4), -4px -4px 12px var(--nm-btn-sl);
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
}
.nm-btn .btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 10px 14px 24px rgba(108, 92, 231, 0.45), -4px -4px 12px var(--nm-btn-sl);
}
.nm-btn .btn-accent:active {
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.25);
  transform: scale(0.97);
}

.nm-btn .btn-sq {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.15s ease;
  color: var(--nm-btn-txt2);
}
.nm-btn .btn-sq:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
}
.nm-btn .btn-sq:active {
  box-shadow: var(--nm-btn-neu-sm-in);
}

.nm-btn .btn-circle {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.15s ease;
  color: var(--nm-btn-txt2);
}
.nm-btn .btn-circle:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
  transform: scale(1.05);
}
.nm-btn .btn-circle:active {
  box-shadow: var(--nm-btn-neu-sm-in);
  transform: scale(0.97);
}

.nm-btn .btn-fab {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 12px 12px 28px var(--nm-btn-sd), -12px -12px 28px var(--nm-btn-sl);
  transition: all 0.2s ease;
  color: var(--nm-btn-txt2);
}
.nm-btn .btn-fab:hover {
  box-shadow: 14px 14px 32px var(--nm-btn-sd), -14px -14px 32px var(--nm-btn-sl);
  transform: scale(1.05);
}
.nm-btn .btn-fab:active {
  box-shadow: inset 8px 8px 18px var(--nm-btn-sd), inset -8px -8px 18px var(--nm-btn-sl);
}

.nm-btn .btn-ghost {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 13px 28px;
  border-radius: 100px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-btn-acc);
  box-shadow: var(--nm-btn-neu-sm), inset 0 0 0 2px rgba(108, 92, 231, 0.3);
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
}
.nm-btn .btn-ghost:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl), inset 0 0 0 2px rgba(108, 92, 231, 0.6);
}
.nm-btn .btn-ghost:active {
  box-shadow: inset 4px 4px 9px var(--nm-btn-sd), inset -4px -4px 9px var(--nm-btn-sl), inset 0 0 0 2px rgba(108, 92, 231, 0.5);
}

.nm-btn .btn-danger,
.nm-btn .btn-success {
  border: none;
  cursor: pointer;
  padding: 13px 24px;
  border-radius: 14px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.15s;
}
.nm-btn .btn-danger  { color: #c0392b; }
.nm-btn .btn-success { color: #27ae60; }
.nm-btn .btn-danger:hover,
.nm-btn .btn-success:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
}
.nm-btn .btn-danger:active,
.nm-btn .btn-success:active {
  box-shadow: var(--nm-btn-neu-sm-in);
}

.nm-btn .btn-loading {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-btn-txt);
  box-shadow: var(--nm-btn-neu-in);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
}
.nm-btn .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--nm-btn-sd);
  border-top-color: var(--nm-btn-acc);
  animation: nm-btn-spin 0.8s linear infinite;
}
@keyframes nm-btn-spin {
  to { transform: rotate(360deg); }
}

/* Section 3 — Toggles */
.nm-btn .toggles-row {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.nm-btn .toggle-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nm-btn .toggle {
  position: relative;
  width: 64px;
  height: 34px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.nm-btn .toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 17px;
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm-in);
  transition: all 0.3s ease;
}
.nm-btn .toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}
.nm-btn .toggle.on .toggle-thumb {
  left: 34px;
  background: linear-gradient(145deg, var(--nm-btn-acc), #5040cc);
  box-shadow: 4px 4px 10px rgba(108, 92, 231, 0.4), -2px -2px 6px var(--nm-btn-sl);
}
.nm-btn .toggle-lbl {
  font-size: 13px;
  font-weight: 500;
  color: var(--nm-btn-txt2);
}

.nm-btn .btn-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 14px;
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.15s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--nm-btn-txt2);
}
.nm-btn .btn-check-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.nm-btn .btn-check.checked .btn-check-box {
  background: linear-gradient(145deg, var(--nm-btn-acc), #5040cc);
  box-shadow: 3px 3px 8px rgba(108, 92, 231, 0.4);
  color: #fff;
}
.nm-btn .btn-check:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
}

.nm-btn .radio-group {
  display: inline-flex;
  background: var(--nm-btn-bg);
  border-radius: 14px;
  padding: 5px;
  box-shadow: var(--nm-btn-neu-sm-in);
  gap: 4px;
}
.nm-btn .radio-opt {
  border: none;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--nm-btn-txt);
  background: transparent;
  transition: all 0.2s ease;
}
.nm-btn .radio-opt.active {
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm);
  color: var(--nm-btn-acc);
  font-weight: 600;
}

.nm-btn .divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--nm-btn-sd), transparent);
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .nm-btn .spinner { animation: none; }
  .nm-btn .toggle-thumb,
  .nm-btn .btn-resting,
  .nm-btn .btn-pill,
  .nm-btn .btn-accent,
  .nm-btn .btn-fab,
  .nm-btn .btn-circle,
  .nm-btn .btn-sq { transition: none; }
}

@media (max-width: 720px) {
  .nm-btn .card { padding: 32px 22px; }
  .nm-btn .states-row { gap: 24px; }
}
```

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

  root.querySelectorAll('[data-nm-btn-toggle]').forEach(btn => {
    btn.addEventListener('click', () => {
      const on = btn.classList.toggle('on');
      btn.setAttribute('aria-pressed', String(on));
    });
  });

  root.querySelectorAll('[data-nm-btn-check]').forEach(btn => {
    btn.addEventListener('click', () => {
      const checked = btn.classList.toggle('checked');
      const box = btn.querySelector('.btn-check-box');
      if (box) box.textContent = checked ? '✓' : '';
    });
  });

  root.querySelectorAll('.radio-group').forEach(group => {
    group.querySelectorAll('[data-nm-btn-radio]').forEach(opt => {
      opt.addEventListener('click', () => {
        group.querySelectorAll('.radio-opt').forEach(o => o.classList.remove('active'));
        opt.classList.add('active');
      });
    });
  });
})();
```

### 05. Audio Control Suite

**Type:** CSS + JS
**Description:** A warm-parchment audio mixing console. Interactive range-input scrubber overlaid on a 49-bar waveform that lights up burnt-gold as you drag through the track. The center volume knob is mouse-draggable with SVG tick marks rendered around its perimeter. Five vertical EQ faders are individually draggable with live dB labels (32Hz, 250Hz, 1kHz, 4kHz, 16kHz). Six rotary mini knobs along the bottom row control Bass, Treble, Reverb, Delay, Width, Drive. Playfair Display + Space Mono. Best for music production tools, DAW dashboards, audio plugins.

**HTML:**
```html
<section class="nm-aud" aria-label="Audio control suite">
  <div class="card">

    <div class="track-header">
      <div>
        <div class="track-title">Ember &amp; Ash</div>
        <div class="track-sub">SOLARIS &amp; THE ECHO · LIMINAL HOURS</div>
      </div>
      <div class="track-bpm">BPM <span>124</span></div>
    </div>

    <div class="waveform-row" data-nm-aud-wave aria-hidden="true"></div>

    <div class="scrubber-wrap">
      <div class="scrubber-label-row">
        <span data-nm-aud-time-now>1:42</span>
        <span>3:47</span>
      </div>
      <div class="scrubber-track">
        <div class="scrubber-glow" data-nm-aud-glow></div>
        <div class="scrubber-fill" data-nm-aud-fill></div>
        <div class="scrubber-thumb" data-nm-aud-thumb></div>
        <input type="range" class="scrubber" data-nm-aud-scrub min="0" max="100" value="38" aria-label="Track progress" />
      </div>
    </div>

    <div class="main-controls">

      <div class="play-controls">
        <button type="button" class="ctrl ctrl-sm" aria-label="Shuffle">⇄</button>
        <button type="button" class="ctrl ctrl-md" aria-label="Previous">⏮</button>
        <button type="button" class="ctrl ctrl-play" data-nm-aud-play aria-label="Play / Pause">▶</button>
        <button type="button" class="ctrl ctrl-md" aria-label="Next">⏭</button>
        <button type="button" class="ctrl ctrl-sm" aria-label="Loop">↻</button>
      </div>

      <div class="vol-knob-wrap">
        <div class="vol-knob" data-nm-aud-volknob>
          <svg class="vol-tick-svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" data-nm-aud-volticks aria-hidden="true"></svg>
          <div class="vol-knob-inner"></div>
          <div class="vol-knob-dot" data-nm-aud-voldot></div>
        </div>
        <div class="mini-lbl">Volume</div>
        <div class="vol-val" data-nm-aud-volval>72</div>
      </div>

      <div class="eq-wrap" data-nm-aud-eq></div>

    </div>

    <div class="knobs-row" data-nm-aud-knobs></div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Audio Control Suite — warm parchment audio console ───────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

.nm-aud {
  --nm-aud-bg:  #f0e6d3;
  --nm-aud-sd:  #d0c0a0;
  --nm-aud-sl:  #fffaf0;
  --nm-aud-ib:  #e8ddc8;
  --nm-aud-acc: #c8783a;
  --nm-aud-ac2: #e0a858;
  --nm-aud-ac3: #8a4a20;
  --nm-aud-txt: #7a6a58;
  --nm-aud-txt2:#2a1e10;

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--nm-aud-bg);
  font-family: 'Space Mono', ui-monospace, monospace;
  color: var(--nm-aud-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-aud *,
.nm-aud *::before,
.nm-aud *::after { box-sizing: border-box; }

.nm-aud .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-aud-bg);
  border-radius: 44px;
  padding: 44px 40px 38px;
  box-shadow: 24px 24px 56px var(--nm-aud-sd), -24px -24px 56px var(--nm-aud-sl);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Track header */
.nm-aud .track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.nm-aud .track-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--nm-aud-txt2);
  letter-spacing: -0.5px;
}
.nm-aud .track-sub {
  font-size: 11px;
  color: var(--nm-aud-txt);
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.nm-aud .track-bpm {
  background: var(--nm-aud-bg);
  border-radius: 12px;
  padding: 10px 18px;
  box-shadow: inset 5px 5px 10px var(--nm-aud-sd), inset -5px -5px 10px var(--nm-aud-sl);
  font-size: 11px;
  color: var(--nm-aud-txt);
}
.nm-aud .track-bpm span {
  color: var(--nm-aud-acc);
  font-weight: 700;
  font-size: 15px;
}

/* Waveform */
.nm-aud .waveform-row {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  margin-bottom: 6px;
}
.nm-aud .wf-bar {
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(to top, var(--nm-aud-sd), var(--nm-aud-ib));
  opacity: 0.45;
  min-height: 3px;
}
.nm-aud .wf-bar.played {
  background: linear-gradient(to top, var(--nm-aud-acc), var(--nm-aud-ac2));
  opacity: 0.7;
}

/* Scrubber */
.nm-aud .scrubber-wrap { position: relative; }
.nm-aud .scrubber-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--nm-aud-txt);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.nm-aud .scrubber-track {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--nm-aud-ib);
  box-shadow: inset 5px 5px 10px var(--nm-aud-sd), inset -5px -5px 10px var(--nm-aud-sl);
  position: relative;
  cursor: pointer;
}
.nm-aud .scrubber-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--nm-aud-ac3), var(--nm-aud-acc), var(--nm-aud-ac2));
  pointer-events: none;
}
.nm-aud .scrubber-glow {
  position: absolute;
  top: -4px;
  left: 0;
  height: 18px;
  width: 38%;
  border-radius: 9px;
  background: linear-gradient(90deg, transparent, rgba(200, 120, 58, 0.3));
  filter: blur(6px);
  pointer-events: none;
}
.nm-aud .scrubber {
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  height: 18px;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  z-index: 10;
}
.nm-aud .scrubber-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nm-aud-bg);
  box-shadow: 5px 5px 12px var(--nm-aud-sd), -5px -5px 12px var(--nm-aud-sl);
  left: 38%;
  pointer-events: none;
  transition: box-shadow 0.15s;
}
.nm-aud .scrubber-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--nm-aud-acc), var(--nm-aud-ac2));
  box-shadow: 0 0 6px rgba(200, 120, 58, 0.5);
}

/* Main controls grid */
.nm-aud .main-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
}

/* Play controls */
.nm-aud .play-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.nm-aud .ctrl {
  background: var(--nm-aud-bg);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 7px 7px 15px var(--nm-aud-sd), -7px -7px 15px var(--nm-aud-sl);
  transition: all 0.15s ease;
  color: var(--nm-aud-txt2);
  font-size: 16px;
}
.nm-aud .ctrl:active {
  box-shadow: inset 4px 4px 10px var(--nm-aud-sd), inset -4px -4px 10px var(--nm-aud-sl);
}
.nm-aud .ctrl:hover { transform: scale(1.05); }
.nm-aud .ctrl-sm { width: 42px; height: 42px; }
.nm-aud .ctrl-md { width: 52px; height: 52px; font-size: 18px; }
.nm-aud .ctrl-play {
  width: 66px;
  height: 66px;
  font-size: 22px;
  background: linear-gradient(145deg, var(--nm-aud-acc), var(--nm-aud-ac3));
  color: #fffaf0;
  box-shadow: 10px 10px 22px rgba(200, 120, 58, 0.4), -6px -6px 16px var(--nm-aud-sl);
}
.nm-aud .ctrl-play:hover { transform: scale(1.05); }
.nm-aud .ctrl-play:active {
  box-shadow: inset 6px 6px 14px rgba(0, 0, 0, 0.2);
  transform: scale(0.97);
}

/* Volume knob */
.nm-aud .vol-knob-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.nm-aud .vol-knob {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--nm-aud-bg);
  box-shadow: 14px 14px 32px var(--nm-aud-sd), -14px -14px 32px var(--nm-aud-sl);
  position: relative;
  cursor: grab;
  user-select: none;
}
.nm-aud .vol-knob:active { cursor: grabbing; }
.nm-aud .vol-knob-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--nm-aud-ib);
  box-shadow: inset 6px 6px 14px var(--nm-aud-sd), inset -6px -6px 14px var(--nm-aud-sl);
}
.nm-aud .vol-knob-dot {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nm-aud-acc);
  transform: translateX(-50%);
  transform-origin: 3px 43px;
  box-shadow: 0 0 8px var(--nm-aud-acc);
  transition: transform 0.05s;
}
.nm-aud .vol-tick-svg { position: absolute; inset: 0; }
.nm-aud .mini-lbl {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-aud-txt);
}
.nm-aud .vol-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--nm-aud-txt2);
  margin-top: -6px;
  font-family: 'Space Mono', monospace;
}

/* EQ faders */
.nm-aud .eq-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: flex-end;
}
.nm-aud .fader-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.nm-aud .fader {
  position: relative;
  width: 28px;
  height: 110px;
}
.nm-aud .fader-track {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: var(--nm-aud-ib);
  box-shadow: inset 3px 3px 7px var(--nm-aud-sd), inset -3px -3px 7px var(--nm-aud-sl);
}
.nm-aud .fader-fill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  bottom: 0;
  border-radius: 4px;
  background: linear-gradient(to top, var(--nm-aud-ac3), var(--nm-aud-acc), var(--nm-aud-ac2));
}
.nm-aud .fader-thumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 20px;
  border-radius: 6px;
  background: var(--nm-aud-bg);
  box-shadow: 4px 4px 8px var(--nm-aud-sd), -4px -4px 8px var(--nm-aud-sl);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nm-aud .fader-thumb::before {
  content: '';
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--nm-aud-sd);
  box-shadow: 0 -4px 0 var(--nm-aud-sd), 0 4px 0 var(--nm-aud-sd);
}
.nm-aud .fader-lbl {
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nm-aud-txt);
}
.nm-aud .fader-val {
  font-size: 10px;
  font-weight: 700;
  color: var(--nm-aud-acc);
}

/* Mini knobs */
.nm-aud .knobs-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  border-top: 1px solid rgba(160, 140, 110, 0.2);
  flex-wrap: wrap;
}
.nm-aud .mini-knob-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.nm-aud .mini-knob {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nm-aud-bg);
  box-shadow: 9px 9px 20px var(--nm-aud-sd), -9px -9px 20px var(--nm-aud-sl);
  position: relative;
  cursor: grab;
}
.nm-aud .mini-knob:active { cursor: grabbing; }
.nm-aud .mini-knob-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nm-aud-ib);
  box-shadow: inset 3px 3px 7px var(--nm-aud-sd), inset -3px -3px 7px var(--nm-aud-sl);
}
.nm-aud .mini-knob-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nm-aud-acc);
  transform: translateX(-50%);
  transform-origin: 2.5px 22px;
  box-shadow: 0 0 5px var(--nm-aud-acc);
}
.nm-aud .mini-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--nm-aud-txt2);
  font-family: 'Space Mono', monospace;
}

@media (max-width: 760px) {
  .nm-aud .card { padding: 32px 22px; }
  .nm-aud .main-controls { grid-template-columns: 1fr; }
  .nm-aud .eq-wrap { justify-content: center; }
  .nm-aud .play-controls { justify-content: center; }
}
```

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

  // ─── Waveform ───
  const waveRow = root.querySelector('[data-nm-aud-wave]');
  const waveHeights = [6,10,18,14,24,20,32,28,36,30,40,34,42,38,48,52,44,50,40,46,38,42,32,36,28,30,22,26,18,20,14,16,10,12,8,10,14,18,22,28,32,36,30,24,20,16,12,8,6];
  let scrubberPct = 0.38;
  waveHeights.forEach((h, i) => {
    const bar = document.createElement('div');
    bar.className = 'wf-bar' + (i < waveHeights.length * scrubberPct ? ' played' : '');
    bar.style.height = Math.max(3, h * 0.7) + 'px';
    waveRow.appendChild(bar);
  });

  // ─── Scrubber ───
  const input = root.querySelector('[data-nm-aud-scrub]');
  const fill  = root.querySelector('[data-nm-aud-fill]');
  const glow  = root.querySelector('[data-nm-aud-glow]');
  const thumb = root.querySelector('[data-nm-aud-thumb]');
  const timeNow = root.querySelector('[data-nm-aud-time-now]');
  const totalSec = 227;
  function updateScrubber(val) {
    const pct = val / 100;
    fill.style.width  = (pct * 100) + '%';
    glow.style.width  = (pct * 100) + '%';
    thumb.style.left  = (pct * 100) + '%';
    const sec = Math.round(pct * totalSec);
    timeNow.textContent = Math.floor(sec / 60) + ':' + String(sec % 60).padStart(2, '0');
    waveRow.querySelectorAll('.wf-bar').forEach((b, i) => {
      b.classList.toggle('played', i < waveHeights.length * pct);
    });
  }
  input.addEventListener('input', () => updateScrubber(+input.value));

  // ─── Volume Knob ───
  const volKnob = root.querySelector('[data-nm-aud-volknob]');
  const volDot  = root.querySelector('[data-nm-aud-voldot]');
  const volVal  = root.querySelector('[data-nm-aud-volval]');
  const volTicks = root.querySelector('[data-nm-aud-volticks]');
  let volAngle = -45;
  let volDragging = false, volStartY = 0, volStartAngle = -45;

  // Tick marks
  const svgNS = 'http://www.w3.org/2000/svg';
  for (let t = 0; t <= 20; t++) {
    const frac = t / 20;
    const ang = -225 + frac * 270;
    const rad = ang * Math.PI / 180;
    const r1 = 54, r2 = t % 5 === 0 ? 48 : 51;
    const line = document.createElementNS(svgNS, 'line');
    line.setAttribute('x1', String(60 + r1 * Math.cos(rad)));
    line.setAttribute('y1', String(60 + r1 * Math.sin(rad)));
    line.setAttribute('x2', String(60 + r2 * Math.cos(rad)));
    line.setAttribute('y2', String(60 + r2 * Math.sin(rad)));
    line.setAttribute('stroke', frac < 0.72 ? '#c8783a' : '#d0c0a0');
    line.setAttribute('stroke-width', t % 5 === 0 ? '2' : '1');
    line.setAttribute('stroke-linecap', 'round');
    line.setAttribute('opacity', frac < 0.72 ? '0.8' : '0.4');
    volTicks.appendChild(line);
  }

  function setVol(angle) {
    volAngle = Math.max(-140, Math.min(140, angle));
    volDot.style.transform = 'translateX(-50%) rotate(' + volAngle + 'deg)';
    const pct = Math.round((volAngle + 140) / 280 * 100);
    volVal.textContent = pct;
  }
  setVol(-45);
  volKnob.addEventListener('mousedown', e => {
    volDragging = true; volStartY = e.clientY; volStartAngle = volAngle;
    document.body.style.cursor = 'grabbing';
    e.preventDefault();
  });
  document.addEventListener('mousemove', e => {
    if (!volDragging) return;
    setVol(volStartAngle - (e.clientY - volStartY) * 1.2);
  });
  document.addEventListener('mouseup', () => {
    if (volDragging) { volDragging = false; document.body.style.cursor = ''; }
  });

  // ─── EQ Faders ───
  const eqData = [
    { lbl: '32Hz',  val: 68 },
    { lbl: '250Hz', val: 55 },
    { lbl: '1kHz',  val: 80 },
    { lbl: '4kHz',  val: 62 },
    { lbl: '16kHz', val: 44 },
  ];
  const eqWrap = root.querySelector('[data-nm-aud-eq]');
  eqData.forEach(({ lbl, val }) => {
    const h = 110;
    const fillH = Math.round(val / 100 * h);
    const g = document.createElement('div');
    g.className = 'fader-group';
    g.innerHTML =
      '<div class="fader-val">' + (val >= 50 ? '+' : '') + (val - 50) + '</div>' +
      '<div class="fader">' +
      '  <div class="fader-track"></div>' +
      '  <div class="fader-fill" style="height:' + fillH + 'px"></div>' +
      '  <div class="fader-thumb" style="bottom:' + (fillH - 10) + 'px"></div>' +
      '</div>' +
      '<div class="fader-lbl">' + lbl + '</div>';
    eqWrap.appendChild(g);

    const thumb2 = g.querySelector('.fader-thumb');
    const fill2  = g.querySelector('.fader-fill');
    const valEl  = g.querySelector('.fader-val');
    let dragging = false, startY2 = 0, startPct = val / 100;
    thumb2.addEventListener('mousedown', e => {
      dragging = true; startY2 = e.clientY;
      startPct = parseInt(fill2.style.height, 10) / h;
      document.body.style.cursor = 'ns-resize';
      e.preventDefault();
    });
    document.addEventListener('mousemove', e => {
      if (!dragging) return;
      const delta = (startY2 - e.clientY) / h;
      const pct = Math.max(0, Math.min(1, startPct + delta));
      const fh = Math.round(pct * h);
      fill2.style.height  = fh + 'px';
      thumb2.style.bottom = (fh - 10) + 'px';
      const v = Math.round(pct * 100);
      valEl.textContent = (v >= 50 ? '+' : '') + (v - 50);
    });
    document.addEventListener('mouseup', () => {
      if (dragging) { dragging = false; document.body.style.cursor = ''; }
    });
  });

  // ─── Mini Knobs ───
  const knobData = [
    { lbl: 'Bass',    val: -20 },
    { lbl: 'Treble',  val:  30 },
    { lbl: 'Reverb',  val:  -5 },
    { lbl: 'Delay',   val:  15 },
    { lbl: 'Width',   val:  50 },
    { lbl: 'Drive',   val: -30 },
  ];
  const knobsRow = root.querySelector('[data-nm-aud-knobs]');
  knobData.forEach(({ lbl, val }) => {
    const g = document.createElement('div');
    g.className = 'mini-knob-group';
    g.innerHTML =
      '<div class="mini-knob">' +
      '  <div class="mini-knob-inner"></div>' +
      '  <div class="mini-knob-dot"></div>' +
      '</div>' +
      '<div class="mini-lbl">' + lbl + '</div>' +
      '<div class="mini-val">' + (val > 0 ? '+' : '') + val + '</div>';
    knobsRow.appendChild(g);

    const dot = g.querySelector('.mini-knob-dot');
    const valEl2 = g.querySelector('.mini-val');
    let angle = val;
    dot.style.transform = 'translateX(-50%) rotate(' + angle + 'deg)';
    let drag = false, sy = 0, sa = angle;
    g.querySelector('.mini-knob').addEventListener('mousedown', e => {
      drag = true; sy = e.clientY; sa = angle;
      document.body.style.cursor = 'grabbing';
      e.preventDefault();
    });
    document.addEventListener('mousemove', e => {
      if (!drag) return;
      angle = Math.max(-140, Math.min(140, sa - (e.clientY - sy) * 1.5));
      dot.style.transform = 'translateX(-50%) rotate(' + angle + 'deg)';
      const v = Math.round(angle);
      valEl2.textContent = (v > 0 ? '+' : '') + v;
    });
    document.addEventListener('mouseup', () => {
      if (drag) { drag = false; document.body.style.cursor = ''; }
    });
  });

  // ─── Play toggle ───
  let playing = false;
  const playBtn = root.querySelector('[data-nm-aud-play]');
  playBtn.addEventListener('click', () => {
    playing = !playing;
    playBtn.textContent = playing ? '⏸' : '▶';
  });
})();
```

### 06. Sunken Form Studio

**Type:** CSS + JS
**Description:** A sage-mist neumorphic form panel. Every input is a sunken pocket via deep inset shadows. Section 1: a pill search bar with active-clear button + filter chips. Section 2: a 2-column field grid demonstrating neutral / valid (green ring) / invalid (red ring) states, a password field with show/hide toggle + 4-segment strength bar, a styled native select, and a textarea. Section 3: neumorphic checkboxes and a radio group. Email field runs real blur validation. Mulish + DM Mono. Best for sign-up flows, settings pages, profile editors.

**HTML:**
```html
<section class="nm-frm" aria-label="Sunken form studio">
  <div class="card">

    <div>
      <div class="sec-tag">01 — Search Input</div>
      <div class="search-wrap">
        <span class="search-icon" aria-hidden="true">⌕</span>
        <input type="text" class="search-field" placeholder="Search components, patterns, use cases…" data-nm-frm-search />
        <button type="button" class="search-clear" data-nm-frm-clear aria-label="Clear search">✕</button>
      </div>
      <div class="search-chips" role="tablist">
        <button type="button" class="chip active" data-nm-frm-chip>All</button>
        <button type="button" class="chip" data-nm-frm-chip>Buttons</button>
        <button type="button" class="chip" data-nm-frm-chip>Cards</button>
        <button type="button" class="chip" data-nm-frm-chip>Sliders</button>
        <button type="button" class="chip" data-nm-frm-chip>Forms</button>
        <button type="button" class="chip" data-nm-frm-chip>Dark Mode</button>
      </div>
    </div>

    <div class="div-line" aria-hidden="true"></div>

    <div>
      <div class="sec-tag">02 — Text Input Fields</div>
      <div class="field-grid">

        <div class="field-wrap">
          <label class="field-label">Full Name</label>
          <div class="input-icon-wrap">
            <span class="i-icon" aria-hidden="true">👤</span>
            <input class="neu-input valid" type="text" value="Alex Rivera" placeholder="Your full name" />
          </div>
          <span class="field-hint success">✓ Looks good!</span>
        </div>

        <div class="field-wrap">
          <label class="field-label">Email Address</label>
          <div class="input-icon-wrap">
            <span class="i-icon" aria-hidden="true">✉</span>
            <input class="neu-input invalid" type="email" value="alex@" placeholder="you@example.com" data-nm-frm-email />
          </div>
          <span class="field-hint error">✕ Please enter a valid email.</span>
        </div>

        <div class="field-wrap">
          <label class="field-label">Password</label>
          <div class="input-icon-wrap">
            <span class="i-icon" aria-hidden="true">🔒</span>
            <input class="neu-input" type="password" value="MySuperPass1" placeholder="Create a password" data-nm-frm-pw />
            <button type="button" class="i-badge" data-nm-frm-pw-toggle aria-label="Show password">👁</button>
          </div>
          <div class="strength-bar" aria-hidden="true">
            <div class="str-seg fill-strong"></div>
            <div class="str-seg fill-strong"></div>
            <div class="str-seg fill-strong"></div>
            <div class="str-seg"></div>
          </div>
          <span class="field-hint">Strength: Strong</span>
        </div>

        <div class="field-wrap">
          <label class="field-label">Country</label>
          <div class="select-wrap">
            <select class="neu-select">
              <option>🇺🇸 United States</option>
              <option>🇬🇧 United Kingdom</option>
              <option>🇩🇪 Germany</option>
              <option>🇯🇵 Japan</option>
            </select>
            <span class="select-arrow" aria-hidden="true">▾</span>
          </div>
        </div>

        <div class="field-wrap full">
          <label class="field-label">Bio / Description</label>
          <textarea class="neu-textarea" placeholder="Tell us a little about yourself…">Product designer obsessed with tactile interfaces and the space between hardware and software.</textarea>
        </div>

      </div>
    </div>

    <div class="div-line" aria-hidden="true"></div>

    <div>
      <div class="sec-tag">03 — Checkboxes &amp; Radios</div>
      <div class="check-radio-row">

        <div class="cr-group">
          <button type="button" class="cr-item checked" data-nm-frm-check>
            <span class="cr-box">✓</span>
            <span class="cr-text">Email notifications
              <small>Receive weekly digest</small>
            </span>
          </button>
          <button type="button" class="cr-item checked" data-nm-frm-check>
            <span class="cr-box">✓</span>
            <span class="cr-text">Push notifications
              <small>On mobile &amp; desktop</small>
            </span>
          </button>
          <button type="button" class="cr-item" data-nm-frm-check>
            <span class="cr-box"></span>
            <span class="cr-text">Marketing emails
              <small>Product updates &amp; offers</small>
            </span>
          </button>
        </div>

        <div class="cr-group" role="radiogroup">
          <button type="button" class="cr-item" data-nm-frm-radio>
            <span class="cr-circle"></span>
            <span class="cr-text">Starter plan
              <small>Free forever · 3 projects</small>
            </span>
          </button>
          <button type="button" class="cr-item checked" data-nm-frm-radio>
            <span class="cr-circle"></span>
            <span class="cr-text">Pro plan
              <small>$12/mo · Unlimited</small>
            </span>
          </button>
          <button type="button" class="cr-item" data-nm-frm-radio>
            <span class="cr-circle"></span>
            <span class="cr-text">Enterprise
              <small>Custom pricing · SSO</small>
            </span>
          </button>
        </div>

      </div>
    </div>

    <div class="submit-row">
      <button type="button" class="btn-submit">Create Account →</button>
      <button type="button" class="btn-cancel">Cancel</button>
      <span class="form-note">SSL secured · No spam</span>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Sunken Form Studio — sage mist neumorphic forms ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

.nm-frm {
  --nm-frm-bg:  #eaf0ee;
  --nm-frm-sd:  #c8d4cc;
  --nm-frm-sl:  #f8fff8;
  --nm-frm-ib:  #e2ece6;
  --nm-frm-acc: #3a7d54;
  --nm-frm-ac2: #5aaf7a;
  --nm-frm-ac3: #2a5c3c;
  --nm-frm-txt: #5a6e62;
  --nm-frm-txt2:#1a3028;
  --nm-frm-err: #c05050;
  --nm-frm-warn:#c09040;
  --nm-frm-r:   16px;
  --nm-frm-neu-in:    inset 6px 6px 14px var(--nm-frm-sd), inset -6px -6px 14px var(--nm-frm-sl);
  --nm-frm-neu-sm:    5px 5px 12px var(--nm-frm-sd), -5px -5px 12px var(--nm-frm-sl);
  --nm-frm-neu-sm-in: inset 4px 4px 9px var(--nm-frm-sd), inset -4px -4px 9px var(--nm-frm-sl);

  position: relative;
  width: 100%;
  min-height: 880px;
  background: var(--nm-frm-bg);
  font-family: 'Mulish', system-ui, sans-serif;
  color: var(--nm-frm-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-frm *,
.nm-frm *::before,
.nm-frm *::after { box-sizing: border-box; }

.nm-frm .card {
  position: relative;
  width: 100%;
  max-width: 820px;
  background: var(--nm-frm-bg);
  border-radius: 40px;
  padding: 44px 40px;
  box-shadow: 22px 22px 54px var(--nm-frm-sd), -22px -22px 54px var(--nm-frm-sl);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.nm-frm .sec-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-frm-txt);
  opacity: 0.55;
  margin-bottom: 16px;
}

/* Search */
.nm-frm .search-wrap { position: relative; }
.nm-frm .search-field {
  width: 100%;
  height: 56px;
  border: none;
  outline: none;
  border-radius: 28px;
  background: var(--nm-frm-bg);
  box-shadow: var(--nm-frm-neu-in);
  padding: 0 56px 0 52px;
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--nm-frm-txt2);
  transition: box-shadow 0.25s ease;
}
.nm-frm .search-field::placeholder { color: var(--nm-frm-txt); opacity: 0.5; }
.nm-frm .search-field:focus {
  box-shadow: inset 7px 7px 16px var(--nm-frm-sd), inset -7px -7px 16px var(--nm-frm-sl),
              0 0 0 2px rgba(58, 125, 84, 0.2);
}
.nm-frm .search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  pointer-events: none;
  color: var(--nm-frm-txt);
  opacity: 0.5;
}
.nm-frm .search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--nm-frm-bg);
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nm-frm-neu-sm);
  color: var(--nm-frm-txt);
  font-size: 14px;
  transition: all 0.15s;
  opacity: 0;
}
.nm-frm .search-field:not(:placeholder-shown) ~ .search-clear { opacity: 1; }
.nm-frm .search-clear:hover { box-shadow: 6px 6px 14px var(--nm-frm-sd), -6px -6px 14px var(--nm-frm-sl); }
.nm-frm .search-clear:active { box-shadow: var(--nm-frm-neu-sm-in); }

.nm-frm .search-chips {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.nm-frm .chip {
  background: var(--nm-frm-bg);
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--nm-frm-txt);
  box-shadow: var(--nm-frm-neu-sm);
  transition: all 0.15s;
}
.nm-frm .chip:hover { box-shadow: 6px 6px 14px var(--nm-frm-sd), -6px -6px 14px var(--nm-frm-sl); color: var(--nm-frm-acc); }
.nm-frm .chip:active { box-shadow: var(--nm-frm-neu-sm-in); }
.nm-frm .chip.active { box-shadow: var(--nm-frm-neu-sm-in); color: var(--nm-frm-acc); font-weight: 700; }

/* Field grid */
.nm-frm .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.nm-frm .field-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nm-frm .field-wrap.full { grid-column: 1 / -1; }
.nm-frm .field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--nm-frm-txt);
  opacity: 0.7;
  font-family: 'DM Mono', ui-monospace, monospace;
}

.nm-frm .neu-input {
  width: 100%;
  border: none;
  outline: none;
  border-radius: var(--nm-frm-r);
  background: var(--nm-frm-bg);
  box-shadow: var(--nm-frm-neu-in);
  padding: 14px 18px;
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--nm-frm-txt2);
  transition: box-shadow 0.22s ease, color 0.2s;
}
.nm-frm .neu-input::placeholder { color: var(--nm-frm-txt); opacity: 0.45; }
.nm-frm .neu-input:focus {
  box-shadow: inset 7px 7px 16px var(--nm-frm-sd), inset -7px -7px 16px var(--nm-frm-sl),
              0 0 0 2.5px rgba(58, 125, 84, 0.25);
  color: var(--nm-frm-txt2);
}
.nm-frm .neu-input.valid   { box-shadow: var(--nm-frm-neu-in), 0 0 0 2px rgba(58, 125, 84, 0.4); }
.nm-frm .neu-input.invalid { box-shadow: var(--nm-frm-neu-in), 0 0 0 2px rgba(192, 80, 80, 0.45); }

.nm-frm .input-icon-wrap { position: relative; }
.nm-frm .input-icon-wrap .neu-input { padding-left: 44px; }
.nm-frm .input-icon-wrap .i-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  opacity: 0.5;
}
.nm-frm .input-icon-wrap .i-badge {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
  background: transparent;
  border: 0;
  padding: 4px;
}
.nm-frm .input-icon-wrap .i-badge:hover { opacity: 0.9; }

.nm-frm .field-hint {
  font-size: 11px;
  color: var(--nm-frm-txt);
  opacity: 0.65;
  padding-left: 4px;
}
.nm-frm .field-hint.error   { color: var(--nm-frm-err); opacity: 1; }
.nm-frm .field-hint.success { color: var(--nm-frm-acc); opacity: 1; }

.nm-frm .neu-textarea {
  width: 100%;
  min-height: 88px;
  border: none;
  outline: none;
  resize: none;
  border-radius: var(--nm-frm-r);
  background: var(--nm-frm-bg);
  box-shadow: var(--nm-frm-neu-in);
  padding: 16px 18px;
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--nm-frm-txt2);
  line-height: 1.6;
  transition: box-shadow 0.22s ease;
}
.nm-frm .neu-textarea::placeholder { color: var(--nm-frm-txt); opacity: 0.45; }
.nm-frm .neu-textarea:focus {
  box-shadow: inset 7px 7px 16px var(--nm-frm-sd), inset -7px -7px 16px var(--nm-frm-sl),
              0 0 0 2.5px rgba(58, 125, 84, 0.25);
}

.nm-frm .select-wrap { position: relative; }
.nm-frm .neu-select {
  width: 100%;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--nm-frm-r);
  background: var(--nm-frm-bg);
  box-shadow: var(--nm-frm-neu-in);
  padding: 14px 42px 14px 18px;
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--nm-frm-txt2);
  cursor: pointer;
  transition: box-shadow 0.22s ease;
}
.nm-frm .neu-select:focus {
  box-shadow: inset 7px 7px 16px var(--nm-frm-sd), inset -7px -7px 16px var(--nm-frm-sl),
              0 0 0 2.5px rgba(58, 125, 84, 0.25);
}
.nm-frm .select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
  color: var(--nm-frm-txt);
  opacity: 0.6;
}

/* Strength bar */
.nm-frm .strength-bar {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}
.nm-frm .str-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--nm-frm-sd);
  opacity: 0.4;
  transition: all 0.3s ease;
}
.nm-frm .str-seg.fill-weak   { background: var(--nm-frm-err); opacity: 1; }
.nm-frm .str-seg.fill-mid    { background: var(--nm-frm-warn); opacity: 1; }
.nm-frm .str-seg.fill-strong { background: var(--nm-frm-acc); opacity: 1; }

/* Checks & radios */
.nm-frm .check-radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.nm-frm .cr-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nm-frm .cr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: inherit;
}
.nm-frm .cr-box {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--nm-frm-bg);
  box-shadow: var(--nm-frm-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.nm-frm .cr-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nm-frm-bg);
  box-shadow: var(--nm-frm-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  position: relative;
}
.nm-frm .cr-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nm-frm-acc);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px rgba(58, 125, 84, 0.5);
}
.nm-frm .cr-item.checked .cr-box {
  background: linear-gradient(145deg, var(--nm-frm-acc), var(--nm-frm-ac3));
  box-shadow: 3px 3px 7px rgba(58, 125, 84, 0.4), -2px -2px 5px var(--nm-frm-sl);
  color: #fff;
}
.nm-frm .cr-item.checked .cr-circle::after { transform: translate(-50%, -50%) scale(1); }
.nm-frm .cr-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--nm-frm-txt2);
}
.nm-frm .cr-text small {
  display: block;
  font-size: 11px;
  color: var(--nm-frm-txt);
  font-weight: 400;
  margin-top: 1px;
}

/* Submit row */
.nm-frm .submit-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.nm-frm .btn-submit {
  border: none;
  cursor: pointer;
  padding: 14px 36px;
  border-radius: 100px;
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--nm-frm-acc), var(--nm-frm-ac3));
  box-shadow: 10px 10px 22px rgba(42, 92, 60, 0.35), -5px -5px 14px var(--nm-frm-sl);
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
}
.nm-frm .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 12px 16px 28px rgba(42, 92, 60, 0.4), -5px -5px 14px var(--nm-frm-sl);
}
.nm-frm .btn-submit:active {
  box-shadow: inset 5px 5px 12px rgba(0, 0, 0, 0.2);
  transform: scale(0.98);
}
.nm-frm .btn-cancel {
  border: none;
  cursor: pointer;
  padding: 14px 30px;
  border-radius: 100px;
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nm-frm-txt);
  background: var(--nm-frm-bg);
  box-shadow: var(--nm-frm-neu-sm);
  transition: all 0.15s;
}
.nm-frm .btn-cancel:hover { box-shadow: 7px 7px 16px var(--nm-frm-sd), -7px -7px 16px var(--nm-frm-sl); }
.nm-frm .btn-cancel:active { box-shadow: var(--nm-frm-neu-sm-in); }
.nm-frm .form-note {
  font-size: 11px;
  color: var(--nm-frm-txt);
  opacity: 0.6;
  margin-left: auto;
  font-family: 'DM Mono', ui-monospace, monospace;
}

.nm-frm .div-line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--nm-frm-sd), transparent);
  opacity: 0.5;
}

@media (max-width: 720px) {
  .nm-frm .card { padding: 32px 22px; }
  .nm-frm .field-grid,
  .nm-frm .check-radio-row { grid-template-columns: 1fr; }
  .nm-frm .form-note { margin-left: 0; }
}
```

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

  // Search filter chips
  root.querySelectorAll('[data-nm-frm-chip]').forEach(c => {
    c.addEventListener('click', () => {
      root.querySelectorAll('[data-nm-frm-chip]').forEach(o => o.classList.remove('active'));
      c.classList.add('active');
    });
  });

  // Clear search button
  const search = root.querySelector('[data-nm-frm-search]');
  const clear  = root.querySelector('[data-nm-frm-clear]');
  if (clear && search) {
    clear.addEventListener('click', () => {
      search.value = '';
      search.dispatchEvent(new Event('input'));
      search.focus();
    });
  }

  // Password show/hide toggle
  const pwInput = root.querySelector('[data-nm-frm-pw]');
  const pwToggle = root.querySelector('[data-nm-frm-pw-toggle]');
  if (pwInput && pwToggle) {
    pwToggle.addEventListener('click', () => {
      const showing = pwInput.type === 'text';
      pwInput.type = showing ? 'password' : 'text';
      pwToggle.textContent = showing ? '👁' : '🙈';
    });
  }

  // Email blur validation
  const email = root.querySelector('[data-nm-frm-email]');
  if (email) {
    email.addEventListener('blur', () => {
      const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
      email.classList.toggle('valid', valid);
      email.classList.toggle('invalid', !valid);
      const hint = email.closest('.field-wrap').querySelector('.field-hint');
      if (hint) {
        hint.classList.toggle('success', valid);
        hint.classList.toggle('error', !valid);
        hint.textContent = valid ? '✓ Valid email.' : '✕ Please enter a valid email.';
      }
    });
  }

  // Checkboxes
  root.querySelectorAll('[data-nm-frm-check]').forEach(item => {
    item.addEventListener('click', () => {
      const checked = item.classList.toggle('checked');
      const box = item.querySelector('.cr-box');
      if (box) box.textContent = checked ? '✓' : '';
    });
  });

  // Radios — exclusive selection within a group
  root.querySelectorAll('[data-nm-frm-radio]').forEach(item => {
    item.addEventListener('click', () => {
      const group = item.closest('.cr-group');
      if (!group) return;
      group.querySelectorAll('[data-nm-frm-radio]').forEach(o => o.classList.remove('checked'));
      item.classList.add('checked');
    });
  });
})();
```

### 07. Smart IoT Control Panel

**Type:** CSS + JS
**Description:** The first dark-neumorphic widget in the collection — deep charcoal with glowing teal accents. Left column: 3-ring embossed power button that glows on activation, a live status readout, and 4 scene presets. Center: full thermostat arc-dial with SVG tick marks in a teal-to-amber gradient, live ± temperature buttons, 4 mode chips (Cool/Heat/Fan/Auto), and 3 interactive sliders (brightness, fan speed, humidity). Right column: 6 device toggle cards with animated pill switches that emit a teal glow when on. Five draggable mini rotary dials along the bottom row. Rajdhani + Share Tech Mono. Best for smart-home hubs, IoT dashboards, building automation.

**HTML:**
```html
<section class="nm-iot" aria-label="Smart IoT control panel">
  <div class="card">

    <div class="left-col">
      <div>
        <div class="tag">Power Control</div>
        <div class="power-stage">
          <div class="power-ring on" data-nm-iot-power>
            <div class="power-icon" aria-hidden="true">
              <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
                <path class="power-arc" d="M 22 8 A 16 16 0 1 1 6 22" stroke-dasharray="70 100"/>
                <line class="power-line" x1="22" y1="4" x2="22" y2="22"/>
              </svg>
            </div>
          </div>
          <div class="power-status on" data-nm-iot-status>SYSTEM ON</div>
        </div>
      </div>

      <div class="status-bar">
        <div class="status-row">
          <span class="status-key">Hub Status</span>
          <span class="status-dot on" aria-hidden="true"></span>
        </div>
        <div class="status-row">
          <span class="status-key">Devices</span>
          <span class="status-val">8 / 10</span>
        </div>
        <div class="status-row">
          <span class="status-key">Network</span>
          <span class="status-val">5G ▮▮▮▮</span>
        </div>
        <div class="status-row">
          <span class="status-key">Energy</span>
          <span class="status-val">2.4 kW</span>
        </div>
      </div>

      <div>
        <div class="tag">Scenes</div>
        <div class="scene-grid">
          <button type="button" class="scene-btn active" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌅</span>Morning</button>
          <button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌇</span>Evening</button>
          <button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🎬</span>Movie</button>
          <button type="button" class="scene-btn" data-nm-iot-scene><span class="scene-icon" aria-hidden="true">🌙</span>Sleep</button>
        </div>
      </div>
    </div>

    <div class="center-col">
      <div>
        <div class="tag">Climate Control</div>
        <div class="thermo-wrap">
          <div class="thermo-ring-wrap">
            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <defs>
                <linearGradient id="nm-iot-tg" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stop-color="#00b5b0"/>
                  <stop offset="100%" stop-color="#fdcb6e"/>
                </linearGradient>
                <filter id="nm-iot-glow">
                  <feGaussianBlur stdDeviation="3" result="b"/>
                  <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
                </filter>
              </defs>
              <circle cx="100" cy="100" r="86" fill="none"
                stroke="#2e3a48" stroke-width="12" stroke-linecap="round"
                stroke-dasharray="360 100" stroke-dashoffset="-50"/>
              <circle cx="100" cy="100" r="86" fill="none"
                stroke="url(#nm-iot-tg)" stroke-width="12" stroke-linecap="round"
                stroke-dasharray="196 264" stroke-dashoffset="-50"
                filter="url(#nm-iot-glow)" data-nm-iot-thermo-arc/>
              <g data-nm-iot-ticks opacity="0.4"></g>
            </svg>
            <div class="thermo-center">
              <div class="temp-big" data-nm-iot-temp>22<span class="temp-unit">°</span></div>
              <div class="temp-label">Living Room</div>
            </div>
          </div>
          <div class="temp-adj">
            <button type="button" class="adj" data-nm-iot-temp-adj="-1" aria-label="Decrease temperature">−</button>
            <button type="button" class="adj" data-nm-iot-temp-adj="1" aria-label="Increase temperature">+</button>
          </div>
          <div class="mode-row">
            <button type="button" class="mode-chip active" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">❄️</span>Cool</button>
            <button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">🔥</span>Heat</button>
            <button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">💨</span>Fan</button>
            <button type="button" class="mode-chip" data-nm-iot-mode><span class="mode-emoji" aria-hidden="true">⚡</span>Auto</button>
          </div>
        </div>
      </div>

      <div class="sliders-wrap">
        <div class="slider-row">
          <div class="slider-header">
            <span class="slider-name">☀ Brightness</span>
            <span class="slider-value" data-nm-iot-slider-val="bright">78%</span>
          </div>
          <div class="slider-track">
            <div class="slider-fill" style="width:78%" data-nm-iot-slider-fill="bright"><div class="slider-glow"></div></div>
            <div class="slider-thumb" data-nm-iot-slider-thumb="bright" style="left:calc(78% - 10px)"></div>
            <input type="range" class="hslider" min="0" max="100" value="78" data-nm-iot-slider="bright" data-suffix="%" aria-label="Brightness" />
          </div>
        </div>

        <div class="slider-row">
          <div class="slider-header">
            <span class="slider-name">🌀 Fan Speed</span>
            <span class="slider-value" data-nm-iot-slider-val="fan">3 / 5</span>
          </div>
          <div class="slider-track">
            <div class="slider-fill" style="width:60%" data-nm-iot-slider-fill="fan"><div class="slider-glow"></div></div>
            <div class="slider-thumb" data-nm-iot-slider-thumb="fan" style="left:calc(60% - 10px)"></div>
            <input type="range" class="hslider" min="1" max="5" value="3" data-nm-iot-slider="fan" data-suffix=" / 5" aria-label="Fan speed" />
          </div>
        </div>

        <div class="slider-row">
          <div class="slider-header">
            <span class="slider-name">💧 Humidity</span>
            <span class="slider-value" data-nm-iot-slider-val="hum">55%</span>
          </div>
          <div class="slider-track">
            <div class="slider-fill" style="width:55%" data-nm-iot-slider-fill="hum"><div class="slider-glow"></div></div>
            <div class="slider-thumb" data-nm-iot-slider-thumb="hum" style="left:calc(55% - 10px)"></div>
            <input type="range" class="hslider" min="0" max="100" value="55" data-nm-iot-slider="hum" data-suffix="%" aria-label="Humidity" />
          </div>
        </div>
      </div>
    </div>

    <div class="right-col">
      <div class="tag">Devices</div>

      <button type="button" class="toggle-card on" data-nm-iot-device>
        <span class="toggle-card-icon" aria-hidden="true">💡</span>
        <span class="toggle-info">
          <span class="toggle-device">Ceiling Light</span>
          <span class="toggle-room">Living Room</span>
        </span>
        <span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
      </button>

      <button type="button" class="toggle-card on" data-nm-iot-device>
        <span class="toggle-card-icon" aria-hidden="true">🌡️</span>
        <span class="toggle-info">
          <span class="toggle-device">Thermostat</span>
          <span class="toggle-room">Whole Home</span>
        </span>
        <span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
      </button>

      <button type="button" class="toggle-card" data-nm-iot-device>
        <span class="toggle-card-icon" aria-hidden="true">🔊</span>
        <span class="toggle-info">
          <span class="toggle-device">Speakers</span>
          <span class="toggle-room">Kitchen</span>
        </span>
        <span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
      </button>

      <button type="button" class="toggle-card on" data-nm-iot-device>
        <span class="toggle-card-icon" aria-hidden="true">🔒</span>
        <span class="toggle-info">
          <span class="toggle-device">Front Door</span>
          <span class="toggle-room">Entrance</span>
        </span>
        <span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
      </button>

      <button type="button" class="toggle-card" data-nm-iot-device>
        <span class="toggle-card-icon" aria-hidden="true">🌿</span>
        <span class="toggle-info">
          <span class="toggle-device">Air Purifier</span>
          <span class="toggle-room">Bedroom</span>
        </span>
        <span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
      </button>

      <button type="button" class="toggle-card on" data-nm-iot-device>
        <span class="toggle-card-icon" aria-hidden="true">📷</span>
        <span class="toggle-info">
          <span class="toggle-device">Security Cam</span>
          <span class="toggle-room">Garage</span>
        </span>
        <span class="pill-sw" aria-hidden="true"><span class="pill-thumb"></span></span>
      </button>
    </div>

    <div class="bottom-row" data-nm-iot-dials></div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 07 Smart IoT Control Panel — dark teal smart-home hub ──────── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

.nm-iot {
  --nm-iot-bg:  #1e2530;
  --nm-iot-sd:  #101520;
  --nm-iot-sl:  #2e3a48;
  --nm-iot-ib:  #1a2028;
  --nm-iot-t1:  #00cec9;
  --nm-iot-t2:  #00b5b0;
  --nm-iot-amb: #fdcb6e;
  --nm-iot-grn: #55efc4;
  --nm-iot-txt: #7a90a8;
  --nm-iot-t2x: #c0d8f0;
  --nm-iot-neu:       10px 10px 24px var(--nm-iot-sd), -8px -8px 20px var(--nm-iot-sl);
  --nm-iot-neu-in:    inset 8px 8px 18px var(--nm-iot-sd), inset -6px -6px 14px var(--nm-iot-sl);
  --nm-iot-neu-sm:    6px 6px 14px var(--nm-iot-sd), -5px -5px 12px var(--nm-iot-sl);
  --nm-iot-neu-sm-in: inset 5px 5px 10px var(--nm-iot-sd), inset -4px -4px 8px var(--nm-iot-sl);

  position: relative;
  width: 100%;
  min-height: 880px;
  background: var(--nm-iot-bg);
  font-family: 'Rajdhani', system-ui, sans-serif;
  color: var(--nm-iot-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-iot *,
.nm-iot *::before,
.nm-iot *::after { box-sizing: border-box; }

.nm-iot .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-iot-bg);
  border-radius: 40px;
  padding: 40px 36px;
  box-shadow: 20px 20px 50px var(--nm-iot-sd), -16px -16px 40px var(--nm-iot-sl);
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  grid-template-rows: auto auto;
  gap: 24px;
}

.nm-iot .tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--nm-iot-txt);
  opacity: 0.45;
  margin-bottom: 14px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}

/* Left column */
.nm-iot .left-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  grid-row: 1 / 3;
}

.nm-iot .power-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.nm-iot .power-ring {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--nm-iot-bg);
  box-shadow: var(--nm-iot-neu);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease;
  border: 0;
  padding: 0;
}
.nm-iot .power-ring::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--nm-iot-bg);
  box-shadow: var(--nm-iot-neu-sm-in);
}
.nm-iot .power-ring::after {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--nm-iot-bg);
  box-shadow: var(--nm-iot-neu-sm);
}
.nm-iot .power-icon {
  position: relative;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nm-iot .power-icon svg { width: 100%; height: 100%; }
.nm-iot .power-ring.on { box-shadow: var(--nm-iot-neu-in); }
.nm-iot .power-ring.on .power-arc { stroke: var(--nm-iot-t1); filter: drop-shadow(0 0 8px var(--nm-iot-t1)); }
.nm-iot .power-ring.on .power-line { stroke: var(--nm-iot-t1); filter: drop-shadow(0 0 8px var(--nm-iot-t1)); }
.nm-iot .power-arc {
  stroke: var(--nm-iot-txt);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  transition: stroke 0.4s, filter 0.4s;
}
.nm-iot .power-line {
  stroke: var(--nm-iot-txt);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke 0.4s, filter 0.4s;
}

.nm-iot .power-status {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--nm-iot-txt);
  transition: color 0.3s;
}
.nm-iot .power-status.on {
  color: var(--nm-iot-t1);
  text-shadow: 0 0 10px var(--nm-iot-t1);
}

.nm-iot .status-bar {
  width: 100%;
  background: var(--nm-iot-ib);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--nm-iot-neu-in);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nm-iot .status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nm-iot .status-key { font-size: 11px; color: var(--nm-iot-txt); letter-spacing: 0.5px; }
.nm-iot .status-val {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--nm-iot-t2x);
}
.nm-iot .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--nm-iot-txt);
}
.nm-iot .status-dot.on {
  background: var(--nm-iot-grn);
  box-shadow: 0 0 6px var(--nm-iot-grn);
}

.nm-iot .scene-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.nm-iot .scene-btn {
  background: var(--nm-iot-bg);
  border: none;
  cursor: pointer;
  border-radius: 14px;
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: var(--nm-iot-neu-sm);
  transition: all 0.2s ease;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--nm-iot-txt);
  text-transform: uppercase;
}
.nm-iot .scene-btn.active {
  box-shadow: var(--nm-iot-neu-sm-in);
  color: var(--nm-iot-t1);
}
.nm-iot .scene-icon { font-size: 20px; line-height: 1; }

/* Center column */
.nm-iot .center-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nm-iot .thermo-wrap {
  background: var(--nm-iot-bg);
  border-radius: 28px;
  padding: 26px 20px 20px;
  box-shadow: var(--nm-iot-neu);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.nm-iot .thermo-ring-wrap {
  position: relative;
  width: 200px;
  height: 200px;
}
.nm-iot .thermo-ring-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-135deg);
}
.nm-iot .thermo-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.nm-iot .temp-big {
  font-size: 54px;
  font-weight: 700;
  color: var(--nm-iot-t2x);
  line-height: 1;
  letter-spacing: -2px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.nm-iot .temp-unit { font-size: 20px; color: var(--nm-iot-t1); }
.nm-iot .temp-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-iot-txt);
  margin-top: 4px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}

.nm-iot .temp-adj { display: flex; gap: 14px; }
.nm-iot .adj {
  width: 44px;
  height: 44px;
  background: var(--nm-iot-bg);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  color: var(--nm-iot-t2x);
  box-shadow: var(--nm-iot-neu-sm);
  transition: all 0.15s;
  font-family: 'Rajdhani', system-ui, sans-serif;
}
.nm-iot .adj:active {
  box-shadow: var(--nm-iot-neu-sm-in);
  color: var(--nm-iot-t1);
}

.nm-iot .mode-row { display: flex; gap: 6px; width: 100%; }
.nm-iot .mode-chip {
  flex: 1;
  background: var(--nm-iot-bg);
  border: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 4px;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nm-iot-txt);
  box-shadow: var(--nm-iot-neu-sm);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.nm-iot .mode-chip.active {
  box-shadow: var(--nm-iot-neu-sm-in);
  color: var(--nm-iot-t1);
}
.nm-iot .mode-emoji { font-size: 14px; }

/* Sliders */
.nm-iot .sliders-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nm-iot .slider-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nm-iot .slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nm-iot .slider-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--nm-iot-t2x);
  letter-spacing: 0.5px;
}
.nm-iot .slider-value {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--nm-iot-t1);
}
.nm-iot .slider-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--nm-iot-ib);
  box-shadow: var(--nm-iot-neu-sm-in);
  position: relative;
  cursor: pointer;
}
.nm-iot .slider-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--nm-iot-t2), var(--nm-iot-t1));
  position: relative;
}
.nm-iot .slider-glow {
  position: absolute;
  inset: -3px 0;
  border-radius: 6px;
  background: inherit;
  filter: blur(5px);
  opacity: 0.4;
}
.nm-iot .slider-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nm-iot-bg);
  box-shadow: var(--nm-iot-neu-sm);
  cursor: grab;
}
.nm-iot .slider-thumb::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--nm-iot-t1);
  box-shadow: 0 0 6px var(--nm-iot-t1);
}
.nm-iot .hslider {
  position: absolute;
  inset: -6px 0;
  width: 100%;
  height: 20px;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  margin: 0;
}

/* Right column */
.nm-iot .right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-row: 1 / 3;
}
.nm-iot .toggle-card {
  background: var(--nm-iot-bg);
  border: 0;
  border-radius: 20px;
  padding: 14px 12px;
  box-shadow: var(--nm-iot-neu-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: left;
}
.nm-iot .toggle-card.on { box-shadow: var(--nm-iot-neu-sm-in); }
.nm-iot .toggle-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--nm-iot-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: var(--nm-iot-neu-sm);
  transition: all 0.3s;
  flex-shrink: 0;
}
.nm-iot .toggle-card.on .toggle-card-icon {
  box-shadow: var(--nm-iot-neu-sm-in);
  filter: drop-shadow(0 0 6px var(--nm-iot-t1));
}
.nm-iot .toggle-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nm-iot .toggle-device {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-iot-t2x);
}
.nm-iot .toggle-room {
  font-size: 10px;
  color: var(--nm-iot-txt);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.nm-iot .pill-sw {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--nm-iot-ib);
  box-shadow: var(--nm-iot-neu-sm-in);
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s;
  display: inline-block;
}
.nm-iot .pill-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nm-iot-bg);
  box-shadow: var(--nm-iot-neu-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nm-iot .toggle-card.on .pill-sw { background: rgba(0, 206, 201, 0.12); }
.nm-iot .toggle-card.on .pill-thumb {
  left: 23px;
  background: var(--nm-iot-t1);
  box-shadow: 0 0 8px var(--nm-iot-t1), 3px 3px 6px var(--nm-iot-sd);
}

/* Bottom: mini dials */
.nm-iot .bottom-row {
  grid-column: 2 / 3;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.nm-iot .mini-dial-group {
  flex: 1;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.nm-iot .mini-dial {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nm-iot-bg);
  box-shadow: var(--nm-iot-neu-sm);
  position: relative;
  cursor: grab;
  user-select: none;
}
.nm-iot .mini-dial:active { cursor: grabbing; }
.nm-iot .mini-dial-inner {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--nm-iot-ib);
  box-shadow: var(--nm-iot-neu-sm-in);
}
.nm-iot .mini-dial-dot {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nm-iot-t1);
  box-shadow: 0 0 6px var(--nm-iot-t1);
  transform: translateX(-50%);
  transform-origin: 2.5px 24px;
}
.nm-iot .mini-dial-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--nm-iot-txt);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nm-iot .mini-dial-val {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--nm-iot-t1);
  margin-top: -4px;
}

@media (max-width: 880px) {
  .nm-iot .card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .nm-iot .left-col,
  .nm-iot .right-col,
  .nm-iot .bottom-row { grid-row: auto; grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-iot .power-ring,
  .nm-iot .power-arc,
  .nm-iot .power-line,
  .nm-iot .pill-thumb,
  .nm-iot .toggle-card-icon { transition: none; }
}
```

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

  // Power
  const powerRing = root.querySelector('[data-nm-iot-power]');
  const status = root.querySelector('[data-nm-iot-status]');
  if (powerRing) powerRing.addEventListener('click', () => {
    const on = !powerRing.classList.contains('on');
    powerRing.classList.toggle('on', on);
    status?.classList.toggle('on', on);
    if (status) status.textContent = on ? 'SYSTEM ON' : 'STANDBY';
  });

  // Temp dial
  let temp = 22;
  const tempEl = root.querySelector('[data-nm-iot-temp]');
  const arc = root.querySelector('[data-nm-iot-thermo-arc]');
  root.querySelectorAll('[data-nm-iot-temp-adj]').forEach(btn => {
    btn.addEventListener('click', () => {
      const d = parseInt(btn.dataset.nmIotTempAdj, 10) || 0;
      temp = Math.max(16, Math.min(32, temp + d));
      if (tempEl) tempEl.innerHTML = temp + '<span class="temp-unit">°</span>';
      const pct = (temp - 16) / 16;
      if (arc) arc.setAttribute('stroke-dasharray', (pct * 260) + ' 360');
    });
  });

  // Mode chips
  root.querySelectorAll('[data-nm-iot-mode]').forEach(chip => {
    chip.addEventListener('click', () => {
      root.querySelectorAll('[data-nm-iot-mode]').forEach(c => c.classList.remove('active'));
      chip.classList.add('active');
    });
  });

  // Scene buttons
  root.querySelectorAll('[data-nm-iot-scene]').forEach(btn => {
    btn.addEventListener('click', () => {
      root.querySelectorAll('[data-nm-iot-scene]').forEach(s => s.classList.remove('active'));
      btn.classList.add('active');
    });
  });

  // Sliders
  root.querySelectorAll('[data-nm-iot-slider]').forEach(input => {
    const key = input.dataset.nmIotSlider;
    const suffix = input.dataset.suffix || '';
    const fill = root.querySelector('[data-nm-iot-slider-fill="' + key + '"]');
    const thumb = root.querySelector('[data-nm-iot-slider-thumb="' + key + '"]');
    const val = root.querySelector('[data-nm-iot-slider-val="' + key + '"]');
    input.addEventListener('input', () => {
      const pct = (input.value - input.min) / (input.max - input.min) * 100;
      if (fill) fill.style.width = pct + '%';
      if (thumb) thumb.style.left = 'calc(' + pct + '% - 10px)';
      if (val) val.textContent = parseInt(input.value, 10) + suffix;
    });
  });

  // Tick marks on thermostat
  const ticks = root.querySelector('[data-nm-iot-ticks]');
  if (ticks && !ticks.children.length) {
    const svgNS = 'http://www.w3.org/2000/svg';
    for (let t = 0; t <= 20; t++) {
      const a = Math.PI * (-225 + t * 13.5) / 180;
      const r1 = 96, r2 = t % 5 === 0 ? 88 : 92;
      const line = document.createElementNS(svgNS, 'line');
      line.setAttribute('x1', String(100 + r1 * Math.cos(a)));
      line.setAttribute('y1', String(100 + r1 * Math.sin(a)));
      line.setAttribute('x2', String(100 + r2 * Math.cos(a)));
      line.setAttribute('y2', String(100 + r2 * Math.sin(a)));
      line.setAttribute('stroke', t / 20 < 0.68 ? '#00cec9' : '#2e3a48');
      line.setAttribute('stroke-width', t % 5 === 0 ? '2.5' : '1.5');
      line.setAttribute('stroke-linecap', 'round');
      ticks.appendChild(line);
    }
  }

  // Device toggles
  root.querySelectorAll('[data-nm-iot-device]').forEach(card => {
    card.addEventListener('click', () => card.classList.toggle('on'));
  });

  // Mini dials — render + drag
  const dialSpec = [
    { lbl: 'Color Temp',   start: -60, min: 2700, max: 6500, unit: 'K' },
    { lbl: 'Ambience',     start:  30, min:    0, max:  100, unit: '%' },
    { lbl: 'Eco Limit',    start: -10, min:    0, max:  100, unit: '%' },
    { lbl: 'Sleep Delay',  start:  80, min:    0, max:   60, unit: 'm' },
    { lbl: 'Noise Gate',   start: -90, min:   20, max:   80, unit: 'dB' },
  ];
  const dialsRow = root.querySelector('[data-nm-iot-dials]');
  dialSpec.forEach(({ lbl, start, min, max, unit }) => {
    const pct = (start + 140) / 280;
    const initVal = Math.round(min + pct * (max - min));
    const g = document.createElement('div');
    g.className = 'mini-dial-group';
    g.innerHTML =
      '<div class="mini-dial">' +
      '  <div class="mini-dial-inner"></div>' +
      '  <div class="mini-dial-dot" style="transform:translateX(-50%) rotate(' + start + 'deg)"></div>' +
      '</div>' +
      '<div class="mini-dial-lbl">' + lbl + '</div>' +
      '<div class="mini-dial-val">' + initVal + unit + '</div>';
    dialsRow.appendChild(g);

    const dial = g.querySelector('.mini-dial');
    const dot = g.querySelector('.mini-dial-dot');
    const valEl = g.querySelector('.mini-dial-val');
    let angle = start, dragging = false, sy = 0, sa = start;
    dial.addEventListener('mousedown', e => {
      dragging = true; sy = e.clientY; sa = angle;
      document.body.style.cursor = 'grabbing';
      e.preventDefault();
    });
    document.addEventListener('mousemove', e => {
      if (!dragging) return;
      angle = Math.max(-140, Math.min(140, sa - (e.clientY - sy) * 1.5));
      dot.style.transform = 'translateX(-50%) rotate(' + angle + 'deg)';
      const p = (angle + 140) / 280;
      const v = Math.round(min + p * (max - min));
      valEl.textContent = v + unit;
    });
    document.addEventListener('mouseup', () => {
      if (dragging) { dragging = false; document.body.style.cursor = ''; }
    });
  });
})();
```

### 08. Aurum Finance Dashboard

**Type:** Pure CSS
**Description:** A champagne-toned luxury banking dashboard. The centerpiece is a dark gradient credit card with an animated gold shimmer sweep, an EMV chip with PCB-line detail, masked card-number dots, and a 3D tilt effect on hover. Left column: total balance with up/down change indicator, three stat tiles (Income / Spent / Saved). Right column: three-layer concentric spending ring chart, four category bars, four transactions with debit/credit color coding, and five quick-action buttons including a gold-filled primary CTA. Cormorant Garamond serif for the luxury banking tone. Best for fintech apps, wealth dashboards, banking UIs.

**HTML:**
```html
<section class="nm-fin" aria-label="Aurum Finance Dashboard">
  <div class="card">

    <div class="left-col">
      <div class="tag">Your Card</div>

      <div class="card-wrap">
        <div class="credit-card">
          <div class="card-face" aria-hidden="true"></div>
          <div class="card-shimmer" aria-hidden="true"></div>
          <div class="card-content">

            <div class="card-bank">
              <div>
                <div>AURUM</div>
                <div class="card-bank-sub">Private Banking</div>
              </div>
              <svg class="contactless" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M12 5C8.13 5 5 8.13 5 12s3.13 7 7 7 7-3.13 7-7-3.13-7-7-7z" stroke="rgba(201,168,76,0.7)" stroke-width="1.5" fill="none"/>
                <path d="M12 8.5c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5S13.93 8.5 12 8.5z" stroke="rgba(201,168,76,0.7)" stroke-width="1.5" fill="none"/>
                <circle cx="12" cy="12" r="1" fill="rgba(201,168,76,0.7)"/>
              </svg>
            </div>

            <div class="chip-wrap">
              <div class="chip" aria-hidden="true"><div class="chip-lines"></div></div>
              <span class="card-nfc" aria-hidden="true">))))</span>
            </div>

            <div class="card-number">
              <span class="masked">••••</span>
              <span class="masked">••••</span>
              <span class="masked">••••</span>
              <span>7291</span>
            </div>

            <div class="card-footer">
              <div>
                <div class="card-holder-label">Card Holder</div>
                <div class="card-holder-name">Alex Mercer</div>
              </div>
              <div>
                <div class="card-expiry-label">Valid Thru</div>
                <div class="card-expiry-val">09/28</div>
              </div>
              <div class="visa-logo">VISA</div>
            </div>

          </div>
        </div>
      </div>

      <div class="balance-card">
        <div class="balance-label">Total Balance</div>
        <div class="balance-amount">
          <span class="currency">$</span>48,290<span class="balance-cents">.50</span>
        </div>
        <div class="balance-change">▲ +$1,240.00 <span class="balance-change-sub">this month</span></div>
      </div>

      <div class="stat-trio">
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">💰</div>
          <div class="stat-val stat-val-grn">$6.8k</div>
          <div class="stat-name">Income</div>
        </div>
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">💸</div>
          <div class="stat-val stat-val-red">$3.2k</div>
          <div class="stat-name">Spent</div>
        </div>
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">🏦</div>
          <div class="stat-val stat-val-gld">$3.6k</div>
          <div class="stat-name">Saved</div>
        </div>
      </div>
    </div>

    <div class="right-col">
      <div class="tag">Spending Overview</div>

      <div class="spend-card">
        <div class="ring-wrap">
          <svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="44" cy="44" r="36" fill="none" stroke="#e5e0d6" stroke-width="8"/>
            <circle cx="44" cy="44" r="36" fill="none" stroke="#c9a84c" stroke-width="8"
              stroke-linecap="round" stroke-dasharray="162 226" transform="rotate(-90 44 44)"/>
            <circle cx="44" cy="44" r="26" fill="none" stroke="#e5e0d6" stroke-width="6"/>
            <circle cx="44" cy="44" r="26" fill="none" stroke="#c05858" stroke-width="6"
              stroke-linecap="round" stroke-dasharray="98 163" transform="rotate(-90 44 44)"/>
            <circle cx="44" cy="44" r="17" fill="none" stroke="#e5e0d6" stroke-width="5"/>
            <circle cx="44" cy="44" r="17" fill="none" stroke="#4a8a5a" stroke-width="5"
              stroke-linecap="round" stroke-dasharray="60 107" transform="rotate(-90 44 44)"/>
          </svg>
          <div class="ring-center">
            <div class="ring-pct">72%</div>
            <div class="ring-sub">Budget</div>
          </div>
        </div>
        <div class="spend-info">
          <div class="spend-cats">
            <div class="cat-row">
              <div class="cat-dot cat-dot-gld" aria-hidden="true"></div>
              <div class="cat-name">Housing</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-gld" style="width:72%"></div></div>
              <div class="cat-amt">$1,440</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-red" aria-hidden="true"></div>
              <div class="cat-name">Food</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-red" style="width:43%"></div></div>
              <div class="cat-amt">$860</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-grn" aria-hidden="true"></div>
              <div class="cat-name">Transport</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-grn" style="width:27%"></div></div>
              <div class="cat-amt">$320</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-txt" aria-hidden="true"></div>
              <div class="cat-name">Other</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-txt" style="width:18%"></div></div>
              <div class="cat-amt">$240</div>
            </div>
          </div>
        </div>
      </div>

      <div class="tx-card">
        <div class="tag">Recent Transactions</div>
        <div class="tx-list">
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">🛒</div>
            <div class="tx-meta">
              <div class="tx-name">Whole Foods Market</div>
              <div class="tx-date">Today · 2:34 PM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$84.20</div>
              <div class="tx-cat">Groceries</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">💼</div>
            <div class="tx-meta">
              <div class="tx-name">Salary Deposit</div>
              <div class="tx-date">Yesterday · 9:00 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val credit">+$3,400</div>
              <div class="tx-cat">Income</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">☕</div>
            <div class="tx-meta">
              <div class="tx-name">Blue Bottle Coffee</div>
              <div class="tx-date">May 21 · 8:15 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$7.50</div>
              <div class="tx-cat">Dining</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">✈️</div>
            <div class="tx-meta">
              <div class="tx-name">United Airlines</div>
              <div class="tx-date">May 20 · 11:42 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$342.00</div>
              <div class="tx-cat">Travel</div>
            </div>
          </div>
        </div>
      </div>

      <div class="actions-row">
        <button type="button" class="action-btn accent">
          <span class="action-icon" aria-hidden="true">→</span>
          <span class="action-name">Send</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">←</span>
          <span class="action-name">Request</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">+</span>
          <span class="action-name">Top Up</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">⇄</span>
          <span class="action-name">Transfer</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">📄</span>
          <span class="action-name">Statement</span>
        </button>
      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 08 Aurum Finance Dashboard — champagne luxury banking ───────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Josefin+Sans:wght@300;400;600&display=swap');

.nm-fin {
  --nm-fin-bg:  #ede8df;
  --nm-fin-sd:  #cdc8bc;
  --nm-fin-sl:  #fff8f0;
  --nm-fin-ib:  #e5e0d6;
  --nm-fin-gld: #c9a84c;
  --nm-fin-gl2: #e8c870;
  --nm-fin-gl3: #9a7a2c;
  --nm-fin-txt: #7a7268;
  --nm-fin-txt2:#2a2018;
  --nm-fin-red: #c05858;
  --nm-fin-grn: #4a8a5a;
  --nm-fin-neu:       10px 10px 24px var(--nm-fin-sd), -10px -10px 24px var(--nm-fin-sl);
  --nm-fin-neu-in:    inset 7px 7px 16px var(--nm-fin-sd), inset -7px -7px 16px var(--nm-fin-sl);
  --nm-fin-neu-sm:    6px 6px 14px var(--nm-fin-sd), -6px -6px 14px var(--nm-fin-sl);
  --nm-fin-neu-sm-in: inset 4px 4px 10px var(--nm-fin-sd), inset -4px -4px 10px var(--nm-fin-sl);

  position: relative;
  width: 100%;
  min-height: 940px;
  background: var(--nm-fin-bg);
  font-family: 'Josefin Sans', system-ui, sans-serif;
  color: var(--nm-fin-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-fin *,
.nm-fin *::before,
.nm-fin *::after { box-sizing: border-box; }

.nm-fin .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-fin-bg);
  border-radius: 44px;
  padding: 40px 36px;
  box-shadow: 22px 22px 54px var(--nm-fin-sd), -22px -22px 54px var(--nm-fin-sl);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
}

.nm-fin .tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  opacity: 0.5;
  margin-bottom: 16px;
}

.nm-fin .left-col,
.nm-fin .right-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Credit card */
.nm-fin .card-wrap {
  position: relative;
  perspective: 800px;
}
.nm-fin .credit-card {
  width: 100%;
  height: 200px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 16px 16px 36px rgba(0, 0, 0, 0.28), -8px -8px 20px rgba(255, 255, 255, 0.06);
}
.nm-fin .card-wrap:hover .credit-card { transform: rotateY(6deg) rotateX(-3deg); }

.nm-fin .card-face {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1628 0%, #2a2040 40%, #1e1430 70%, #2e2848 100%);
}
.nm-fin .card-face::before {
  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='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='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.nm-fin .card-shimmer {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(201, 168, 76, 0.04) 40%,
    rgba(232, 200, 112, 0.12) 50%,
    rgba(201, 168, 76, 0.04) 60%,
    transparent 100%);
  transform: skewX(-15deg);
  animation: nm-fin-shimmer 4s ease-in-out infinite;
}
@keyframes nm-fin-shimmer {
  0%, 100% { left: -60%; }
  50% { left: 110%; }
}

.nm-fin .card-content {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nm-fin .card-bank {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nm-fin .card-bank-sub {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 4px;
  color: rgba(201, 168, 76, 0.8);
  text-transform: uppercase;
  margin-top: 2px;
}
.nm-fin .contactless { width: 24px; height: 24px; opacity: 0.7; }

.nm-fin .chip-wrap { display: flex; align-items: center; gap: 16px; }
.nm-fin .chip {
  width: 44px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(145deg, #e8c870, #b88a30, #e0c060, #c8a040);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.nm-fin .chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 20px;
  border: 1.5px solid rgba(180, 140, 40, 0.6);
  border-radius: 3px;
}
.nm-fin .chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(180, 140, 40, 0.5);
  transform: translateY(-50%);
}
.nm-fin .chip-lines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  background: rgba(180, 140, 40, 0.5);
}
.nm-fin .card-nfc {
  opacity: 0.5;
  font-size: 18px;
  color: rgba(201, 168, 76, 0.8);
}

.nm-fin .card-number {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  gap: 18px;
}
.nm-fin .card-number .masked {
  letter-spacing: 3px;
  color: rgba(201, 168, 76, 0.6);
}

.nm-fin .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.nm-fin .card-holder-label,
.nm-fin .card-expiry-label {
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.5);
  margin-bottom: 3px;
}
.nm-fin .card-expiry-label { text-align: right; }
.nm-fin .card-holder-name,
.nm-fin .card-expiry-val {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
}
.nm-fin .card-expiry-val { text-align: right; }
.nm-fin .visa-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -1px;
}

/* Balance card */
.nm-fin .balance-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: var(--nm-fin-neu-in);
}
.nm-fin .balance-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  margin-bottom: 8px;
}
.nm-fin .balance-amount {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
  letter-spacing: -1px;
  line-height: 1;
}
.nm-fin .balance-amount .currency { font-size: 22px; color: var(--nm-fin-gld); }
.nm-fin .balance-cents { font-size: 22px; color: var(--nm-fin-txt); }
.nm-fin .balance-change {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--nm-fin-grn);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nm-fin .balance-change-sub { color: var(--nm-fin-txt); font-weight: 400; }

/* Stat trio */
.nm-fin .stat-trio { display: flex; gap: 12px; }
.nm-fin .stat-tile {
  flex: 1;
  background: var(--nm-fin-bg);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: var(--nm-fin-neu-sm);
  text-align: center;
}
.nm-fin .stat-icon { font-size: 18px; margin-bottom: 6px; }
.nm-fin .stat-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
}
.nm-fin .stat-val-grn { color: var(--nm-fin-grn); }
.nm-fin .stat-val-red { color: var(--nm-fin-red); }
.nm-fin .stat-val-gld { color: var(--nm-fin-gld); }
.nm-fin .stat-name {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  margin-top: 2px;
}

/* Right column: spending rings */
.nm-fin .spend-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--nm-fin-neu);
  display: flex;
  gap: 20px;
  align-items: center;
}
.nm-fin .ring-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.nm-fin .ring-wrap svg { width: 100%; height: 100%; }
.nm-fin .ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.nm-fin .ring-pct {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
}
.nm-fin .ring-sub {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
}
.nm-fin .spend-info { flex: 1; }
.nm-fin .spend-cats { display: flex; flex-direction: column; gap: 8px; }
.nm-fin .cat-row { display: flex; align-items: center; gap: 10px; }
.nm-fin .cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nm-fin .cat-dot-gld { background: var(--nm-fin-gld); }
.nm-fin .cat-dot-red { background: var(--nm-fin-red); }
.nm-fin .cat-dot-grn { background: var(--nm-fin-grn); }
.nm-fin .cat-dot-txt { background: var(--nm-fin-txt); }
.nm-fin .cat-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--nm-fin-txt2);
  flex: 1;
}
.nm-fin .cat-bar-wrap {
  flex: 2;
  height: 5px;
  border-radius: 3px;
  background: var(--nm-fin-ib);
  box-shadow: var(--nm-fin-neu-sm-in);
}
.nm-fin .cat-bar { height: 100%; border-radius: 3px; }
.nm-fin .cat-bar-gld { background: var(--nm-fin-gld); }
.nm-fin .cat-bar-red { background: var(--nm-fin-red); }
.nm-fin .cat-bar-grn { background: var(--nm-fin-grn); }
.nm-fin .cat-bar-txt { background: var(--nm-fin-txt); }
.nm-fin .cat-amt {
  font-size: 11px;
  color: var(--nm-fin-txt);
  font-weight: 600;
  font-family: 'Josefin Sans', system-ui, sans-serif;
  width: 50px;
  text-align: right;
}

/* Transactions */
.nm-fin .tx-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--nm-fin-neu);
  flex: 1;
}
.nm-fin .tx-list { display: flex; flex-direction: column; gap: 2px; }
.nm-fin .tx-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  transition: all 0.2s;
  cursor: pointer;
}
.nm-fin .tx-item:hover {
  background: var(--nm-fin-ib);
  box-shadow: var(--nm-fin-neu-sm-in);
}
.nm-fin .tx-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--nm-fin-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--nm-fin-neu-sm);
  flex-shrink: 0;
}
.nm-fin .tx-meta { flex: 1; }
.nm-fin .tx-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-fin-txt2);
}
.nm-fin .tx-date {
  font-size: 10px;
  color: var(--nm-fin-txt);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.nm-fin .tx-amount { text-align: right; }
.nm-fin .tx-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
}
.nm-fin .tx-val.debit  { color: var(--nm-fin-red); }
.nm-fin .tx-val.credit { color: var(--nm-fin-grn); }
.nm-fin .tx-cat {
  font-size: 9px;
  color: var(--nm-fin-txt);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Quick actions */
.nm-fin .actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nm-fin .action-btn {
  flex: 1;
  min-width: 80px;
  background: var(--nm-fin-bg);
  border: none;
  cursor: pointer;
  border-radius: 18px;
  padding: 14px 10px 12px;
  box-shadow: var(--nm-fin-neu-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
  font-family: 'Josefin Sans', system-ui, sans-serif;
}
.nm-fin .action-btn:hover {
  box-shadow: 8px 8px 18px var(--nm-fin-sd), -8px -8px 18px var(--nm-fin-sl);
  transform: translateY(-1px);
}
.nm-fin .action-btn:active {
  box-shadow: var(--nm-fin-neu-sm-in);
  transform: scale(0.97);
}
.nm-fin .action-icon { font-size: 20px; }
.nm-fin .action-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
}
.nm-fin .action-btn.accent {
  background: linear-gradient(145deg, var(--nm-fin-gld), var(--nm-fin-gl3));
  box-shadow: 8px 8px 18px rgba(180, 130, 40, 0.3), -6px -6px 14px var(--nm-fin-sl);
}
.nm-fin .action-btn.accent .action-name,
.nm-fin .action-btn.accent .action-icon { color: rgba(255, 248, 220, 0.9); }
.nm-fin .action-btn.accent:active { box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2); }

@media (max-width: 880px) {
  .nm-fin .card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-fin .card-shimmer,
  .nm-fin .credit-card,
  .nm-fin .action-btn { transition: none; animation: none; }
  .nm-fin .card-wrap:hover .credit-card { transform: none; }
}
```

### 09. Soft UI Calculator

**Type:** CSS + JS
**Description:** A warm-cream desk calculator where every button is a fully extruded neumorphic circle with a CSS specular shine highlight at the top-left. Pressing triggers an inset shadow flip plus a ripple-ring animation expanding outward. The display is a deep-inset panel with a scanline grid overlay and smooth font-size scaling for long numbers. Operator keys (÷ × − +) are styled in burnt amber, function keys (AC ± %) in slate-gray with a slightly recessed background. The = key spans two columns as a pill-shaped amber gradient. Full keyboard input support — type numbers, operators, Enter, Escape directly. Space Mono numerals + Nunito keys. Best for calculator tools, finance widgets, conversion utilities.

**HTML:**
```html
<section class="nm-clc" aria-label="Soft UI calculator">
  <div class="card">

    <div class="display-wrap">
      <div class="display-expr" data-nm-clc-expr></div>
      <div class="display-result" data-nm-clc-result>0</div>
    </div>

    <div class="mem-row">
      <button type="button" class="mem-key" data-nm-clc-mem="MC">MC</button>
      <button type="button" class="mem-key" data-nm-clc-mem="MR">MR</button>
      <button type="button" class="mem-key" data-nm-clc-mem="M-">M−</button>
      <button type="button" class="mem-key" data-nm-clc-mem="M+">M+</button>
      <button type="button" class="mem-key" data-nm-clc-mem="MS">MS</button>
    </div>

    <div class="keypad">
      <button type="button" class="key fn" data-nm-clc-key="AC">AC</button>
      <button type="button" class="key fn" data-nm-clc-key="+/-">±</button>
      <button type="button" class="key fn" data-nm-clc-key="%">%</button>
      <button type="button" class="key op" data-nm-clc-key="/">÷</button>

      <button type="button" class="key" data-nm-clc-key="7">7</button>
      <button type="button" class="key" data-nm-clc-key="8">8</button>
      <button type="button" class="key" data-nm-clc-key="9">9</button>
      <button type="button" class="key op" data-nm-clc-key="*">×</button>

      <button type="button" class="key" data-nm-clc-key="4">4</button>
      <button type="button" class="key" data-nm-clc-key="5">5</button>
      <button type="button" class="key" data-nm-clc-key="6">6</button>
      <button type="button" class="key op" data-nm-clc-key="-">−</button>

      <button type="button" class="key" data-nm-clc-key="1">1</button>
      <button type="button" class="key" data-nm-clc-key="2">2</button>
      <button type="button" class="key" data-nm-clc-key="3">3</button>
      <button type="button" class="key op" data-nm-clc-key="+">+</button>

      <button type="button" class="key zero" data-nm-clc-key="0">0</button>
      <button type="button" class="key" data-nm-clc-key=".">.</button>
      <button type="button" class="key eq" data-nm-clc-key="=">＝</button>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 09 Soft UI Calculator — warm cream desk calculator ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Nunito:wght@400;600;700;800&display=swap');

.nm-clc {
  --nm-clc-bg:  #f0ebe0;
  --nm-clc-sd:  #d2cdc0;
  --nm-clc-sl:  #fffefc;
  --nm-clc-ib:  #e6e1d6;
  --nm-clc-op:  #c8783a;
  --nm-clc-op2: #a05828;
  --nm-clc-fn:  #5a6e7a;
  --nm-clc-txt: #6a6058;
  --nm-clc-txt2:#1a1510;

  --nm-clc-neu:       9px 9px 20px var(--nm-clc-sd), -9px -9px 20px var(--nm-clc-sl);
  --nm-clc-neu-in:    inset 7px 7px 16px var(--nm-clc-sd), inset -7px -7px 16px var(--nm-clc-sl);
  --nm-clc-neu-sm:    6px 6px 13px var(--nm-clc-sd), -6px -6px 13px var(--nm-clc-sl);
  --nm-clc-neu-sm-in: inset 5px 5px 11px var(--nm-clc-sd), inset -5px -5px 11px var(--nm-clc-sl);

  position: relative;
  width: 100%;
  min-height: 820px;
  background: var(--nm-clc-bg);
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--nm-clc-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-clc *,
.nm-clc *::before,
.nm-clc *::after { box-sizing: border-box; }

.nm-clc .card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--nm-clc-bg);
  border-radius: 40px;
  padding: 36px 32px 32px;
  box-shadow: 20px 20px 50px var(--nm-clc-sd), -20px -20px 50px var(--nm-clc-sl);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.nm-clc .card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: radial-gradient(ellipse at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* Display */
.nm-clc .display-wrap {
  background: var(--nm-clc-bg);
  border-radius: 24px;
  padding: 22px 22px 18px;
  box-shadow: var(--nm-clc-neu-in);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-height: 110px;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.nm-clc .display-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent 0px, transparent 2px,
    rgba(0, 0, 0, 0.012) 2px, rgba(0, 0, 0, 0.012) 3px
  );
  border-radius: 24px;
  pointer-events: none;
}
.nm-clc .display-expr {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--nm-clc-txt);
  opacity: 0.65;
  min-height: 18px;
  letter-spacing: 0.5px;
  text-align: right;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.nm-clc .display-result {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 42px;
  font-weight: 700;
  color: var(--nm-clc-txt2);
  letter-spacing: -1.5px;
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  width: 100%;
}
.nm-clc .display-result.flash {
  color: var(--nm-clc-op);
  transform: scale(1.02);
}
@keyframes nm-clc-slide {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.nm-clc .display-result.fresh { animation: nm-clc-slide 0.18s ease-out; }

/* Memory row */
.nm-clc .mem-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.nm-clc .mem-key {
  flex: 1;
  padding: 10px 0;
  background: var(--nm-clc-bg);
  border: none;
  cursor: pointer;
  border-radius: 14px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--nm-clc-fn);
  box-shadow: var(--nm-clc-neu-sm);
  transition: all 0.12s;
  letter-spacing: 0.5px;
}
.nm-clc .mem-key:hover { box-shadow: 7px 7px 16px var(--nm-clc-sd), -7px -7px 16px var(--nm-clc-sl); }
.nm-clc .mem-key:active {
  box-shadow: var(--nm-clc-neu-sm-in);
  color: var(--nm-clc-op);
}

/* Keypad */
.nm-clc .keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nm-clc .key {
  aspect-ratio: 1;
  background: var(--nm-clc-bg);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nm-clc-txt2);
  box-shadow: var(--nm-clc-neu-sm);
  transition: box-shadow 0.12s ease, transform 0.1s ease, color 0.15s;
  user-select: none;
  position: relative;
  outline: none;
}
.nm-clc .key::before {
  content: '';
  position: absolute;
  top: 12%;
  left: 15%;
  width: 30%;
  height: 25%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(3px);
  pointer-events: none;
}
.nm-clc .key:hover {
  box-shadow: 8px 8px 18px var(--nm-clc-sd), -8px -8px 18px var(--nm-clc-sl);
  transform: translateY(-1px);
}
.nm-clc .key:active,
.nm-clc .key.pressed {
  box-shadow: var(--nm-clc-neu-sm-in);
  transform: scale(0.94);
  color: var(--nm-clc-op);
}

.nm-clc .key.fn {
  background: var(--nm-clc-ib);
  font-size: 14px;
  font-weight: 800;
  color: var(--nm-clc-fn);
  box-shadow: var(--nm-clc-neu-sm);
}
.nm-clc .key.fn:active,
.nm-clc .key.fn.pressed {
  box-shadow: var(--nm-clc-neu-sm-in);
  color: var(--nm-clc-op);
}

.nm-clc .key.op {
  background: var(--nm-clc-bg);
  color: var(--nm-clc-op);
  font-size: 22px;
}
.nm-clc .key.op::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 120, 58, 0.15);
  pointer-events: none;
}
.nm-clc .key.op:active,
.nm-clc .key.op.pressed {
  color: var(--nm-clc-op2);
  box-shadow: var(--nm-clc-neu-sm-in);
}

.nm-clc .key.eq {
  grid-column: span 2;
  border-radius: 32px;
  aspect-ratio: unset;
  padding: 0 24px;
  height: 64px;
  background: linear-gradient(145deg, var(--nm-clc-op), var(--nm-clc-op2));
  color: #fff8f0;
  font-size: 22px;
  box-shadow: 8px 8px 18px rgba(180, 90, 30, 0.35), -5px -5px 14px var(--nm-clc-sl);
}
.nm-clc .key.eq::before { display: none; }
.nm-clc .key.eq:active,
.nm-clc .key.eq.pressed {
  box-shadow: inset 5px 5px 14px rgba(0, 0, 0, 0.22);
  transform: scale(0.97);
  color: rgba(255, 248, 240, 0.85);
}

.nm-clc .key.zero {
  grid-column: span 2;
  border-radius: 32px;
  aspect-ratio: unset;
  padding: 0 24px;
  height: 64px;
  justify-content: flex-start;
}

@keyframes nm-clc-ripple {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.nm-clc .key.rippling::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--nm-clc-op);
  animation: nm-clc-ripple 0.35s ease-out forwards;
  pointer-events: none;
}
.nm-clc .key.op.rippling::after {
  animation: nm-clc-ripple 0.35s ease-out forwards;
  border: 2px solid var(--nm-clc-op);
}

@media (prefers-reduced-motion: reduce) {
  .nm-clc .display-result,
  .nm-clc .key { transition: none; animation: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.nm-clc');
  if (!root) return;
  let display = '0';
  let operand = null;
  let operator = null;
  let waitingForOperand = false;
  let memory = 0;
  const resultEl = root.querySelector('[data-nm-clc-result]');
  const exprEl = root.querySelector('[data-nm-clc-expr]');

  function updateDisplay(val, newExpr) {
    const len = String(val).length;
    resultEl.style.fontSize = len > 10 ? '26px' : len > 7 ? '34px' : '42px';
    resultEl.classList.remove('fresh');
    void resultEl.offsetWidth;
    resultEl.classList.add('fresh');
    resultEl.textContent = val;
    if (newExpr !== undefined) exprEl.textContent = newExpr;
  }

  function compute() {
    const cur = parseFloat(display);
    let result;
    switch (operator) {
      case '+': result = operand + cur; break;
      case '-': result = operand - cur; break;
      case '*': result = operand * cur; break;
      case '/': result = cur !== 0 ? operand / cur : 'Error'; break;
    }
    if (result === 'Error') {
      display = 'Error';
    } else {
      display = parseFloat(result.toFixed(10)).toString();
      if (display.length > 12) display = parseFloat(result.toExponential(4)).toString();
    }
    operand = parseFloat(display);
    waitingForOperand = true;
    updateDisplay(display);
  }

  function ripple(action) {
    const btn = root.querySelector('[data-nm-clc-key="' + action + '"]');
    if (!btn) return;
    btn.classList.add('pressed', 'rippling');
    setTimeout(() => btn.classList.remove('pressed', 'rippling'), 200);
  }

  function action(act) {
    ripple(act);
    if (/^\d$/.test(act)) {
      if (waitingForOperand) {
        display = act;
        waitingForOperand = false;
      } else {
        display = display === '0' ? act : display + act;
      }
      if (display.length > 12) return;
      updateDisplay(display, display);
      return;
    }
    switch (act) {
      case '.':
        if (!display.includes('.')) { display += '.'; updateDisplay(display); }
        break;
      case 'AC':
        display = '0'; operand = null; operator = null; waitingForOperand = false;
        resultEl.classList.add('flash');
        setTimeout(() => resultEl.classList.remove('flash'), 250);
        updateDisplay('0', '');
        break;
      case '+/-':
        display = String(-parseFloat(display));
        updateDisplay(display);
        break;
      case '%':
        display = String(parseFloat(display) / 100);
        updateDisplay(display);
        break;
      case '/': case '*': case '-': case '+':
        if (operator && !waitingForOperand) compute();
        operand = parseFloat(display);
        operator = act;
        waitingForOperand = true;
        updateDisplay(display, display + ' ' + (act === '*' ? '×' : act === '/' ? '÷' : act === '-' ? '−' : act));
        break;
      case '=':
        if (operator && !waitingForOperand) {
          compute();
          operator = null;
          resultEl.classList.add('flash');
          setTimeout(() => resultEl.classList.remove('flash'), 200);
          exprEl.textContent = '';
        }
        break;
    }
  }

  // Click handlers
  root.querySelectorAll('[data-nm-clc-key]').forEach(btn => {
    btn.addEventListener('click', () => action(btn.dataset.nmClcKey));
  });

  // Memory handlers
  root.querySelectorAll('[data-nm-clc-mem]').forEach(btn => {
    btn.addEventListener('click', () => {
      const op = btn.dataset.nmClcMem;
      switch (op) {
        case 'MC': memory = 0; break;
        case 'MR': display = String(memory); waitingForOperand = false; updateDisplay(display); break;
        case 'M+': memory += parseFloat(display); break;
        case 'M-': memory -= parseFloat(display); break;
        case 'MS': memory = parseFloat(display); break;
      }
    });
  });

  // Keyboard support
  document.addEventListener('keydown', e => {
    // Only if the focused element is inside our root, or no input is focused
    const ae = document.activeElement;
    const inField = ae && (ae.tagName === 'INPUT' || ae.tagName === 'TEXTAREA' || ae.tagName === 'SELECT');
    if (inField && !root.contains(ae)) return;
    const map = {
      '0':'0','1':'1','2':'2','3':'3','4':'4','5':'5','6':'6','7':'7','8':'8','9':'9',
      '.':'.', 'Enter':'=', '=':'=',
      '+':'+', '-':'-', '*':'*', '/':'/',
      'Backspace':'AC', 'Escape':'AC', '%':'%'
    };
    if (map[e.key]) { e.preventDefault(); action(map[e.key]); }
  });
})();
```

### 10. Sky Widgets

**Type:** CSS + JS
**Description:** Five asymmetric weather widgets in a sky-mist palette. A main weather card spans two rows with a floating-animated weather emoji, 5-day forecast pills with mini fill bars, and a live stats strip. A real-time clock widget renders both digital (hours/minutes/seconds) and an analog face with CSS-positioned hands updating every second. A sunrise arc traces a gold SVG path with a glowing sun dot at the current position. A semicircular humidity gauge and a wide air-quality widget with five individual pollutant bars round out the bottom row. Nunito + Space Mono. Best for weather apps, dashboard widgets, IoT environmental sensors.

**HTML:**
```html
<section class="nm-sky" aria-label="Sky weather widgets dashboard">
  <div class="card">

    <!-- Main weather widget -->
    <div class="widget w-main">
      <div class="city-row">
        <div>
          <div class="city-name">San Francisco</div>
          <div class="city-country">California, USA · 37.7°N</div>
        </div>
        <div class="live-dot">
          <div class="dot-pulse" aria-hidden="true"></div>
          Live
        </div>
      </div>

      <div class="temp-block">
        <div class="weather-icon-wrap" aria-hidden="true">
          <span class="weather-emoji">☀</span>
        </div>
        <div class="temp-right">
          <div class="temp-value">18<span class="temp-deg">°</span></div>
          <div class="temp-cond">Partly Cloudy</div>
          <div class="temp-feel">Feels like 16° · Wind 14 km/h NW</div>
        </div>
      </div>

      <div class="stats-strip">
        <div class="stat-cell">
          <div class="stat-icon" aria-hidden="true">💧</div>
          <div class="stat-val">72%</div>
          <div class="stat-nm">Humidity</div>
        </div>
        <div class="stat-cell">
          <div class="stat-icon" aria-hidden="true">👁</div>
          <div class="stat-val">14km</div>
          <div class="stat-nm">Visibility</div>
        </div>
        <div class="stat-cell">
          <div class="stat-icon" aria-hidden="true">💨</div>
          <div class="stat-val">14</div>
          <div class="stat-nm">km/h</div>
        </div>
        <div class="stat-cell">
          <div class="stat-icon" aria-hidden="true">☂</div>
          <div class="stat-val">20%</div>
          <div class="stat-nm">Rain</div>
        </div>
      </div>

      <div class="forecast-row">
        <div class="fc-day today">
          <div class="fc-day-name">Today</div>
          <div class="fc-icon" aria-hidden="true">☀</div>
          <div class="fc-bar-wrap" aria-hidden="true"><div class="fc-bar" style="height:65%"></div></div>
          <div class="fc-hi">18°</div>
          <div class="fc-lo">12°</div>
        </div>
        <div class="fc-day">
          <div class="fc-day-name">Sat</div>
          <div class="fc-icon" aria-hidden="true">☀️</div>
          <div class="fc-bar-wrap" aria-hidden="true"><div class="fc-bar" style="height:85%"></div></div>
          <div class="fc-hi">22°</div>
          <div class="fc-lo">14°</div>
        </div>
        <div class="fc-day">
          <div class="fc-day-name">Sun</div>
          <div class="fc-icon" aria-hidden="true">⛅</div>
          <div class="fc-bar-wrap" aria-hidden="true"><div class="fc-bar" style="height:75%"></div></div>
          <div class="fc-hi">20°</div>
          <div class="fc-lo">13°</div>
        </div>
        <div class="fc-day">
          <div class="fc-day-name">Mon</div>
          <div class="fc-icon" aria-hidden="true">🌧</div>
          <div class="fc-bar-wrap" aria-hidden="true"><div class="fc-bar" style="height:40%"></div></div>
          <div class="fc-hi">15°</div>
          <div class="fc-lo">10°</div>
        </div>
        <div class="fc-day">
          <div class="fc-day-name">Tue</div>
          <div class="fc-icon" aria-hidden="true">☁</div>
          <div class="fc-bar-wrap" aria-hidden="true"><div class="fc-bar" style="height:30%"></div></div>
          <div class="fc-hi">13°</div>
          <div class="fc-lo">9°</div>
        </div>
      </div>
    </div>

    <!-- Clock -->
    <div class="widget w-clock">
      <div class="clock-display">
        <div class="clock-time" data-nm-sky-clock>10:42<span class="clock-sec">:00</span></div>
        <div class="clock-date" data-nm-sky-date>Saturday, May 24, 2026</div>
      </div>
      <div class="clock-ampm" data-nm-sky-ampm>AM</div>
      <div class="analog-wrap">
        <div class="analog-face" aria-hidden="true">
          <div class="analog-inner"></div>
          <div class="hand hand-h" data-nm-sky-handh></div>
          <div class="hand hand-m" data-nm-sky-handm></div>
          <div class="hand hand-s" data-nm-sky-hands></div>
          <div class="center-dot"></div>
        </div>
      </div>
    </div>

    <!-- UV + Sunrise -->
    <div class="widget w-uv">
      <div class="uv-ring-wrap">
        <div class="ring-sm">
          <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="36" cy="36" r="28" fill="none" stroke="#dce5f0" stroke-width="7"/>
            <circle cx="36" cy="36" r="28" fill="none" stroke="#e07b50" stroke-width="7"
              stroke-linecap="round" stroke-dasharray="120 176" transform="rotate(-90 36 36)"/>
          </svg>
          <div class="ring-sm-center">
            <div class="ring-sm-val ring-sm-val-warm">4</div>
            <div class="ring-sm-sub">UV</div>
          </div>
        </div>
        <div class="uv-info">
          <div class="uv-level">Moderate</div>
          <div class="uv-advice">SPF 30 recommended. Safe until noon.</div>
        </div>
      </div>

      <div class="sunrise-arc">
        <svg class="sun-arc-svg" viewBox="0 0 240 90" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <defs>
            <linearGradient id="nm-sky-arcGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#f6c94e" stop-opacity="0.3"/>
              <stop offset="60%" stop-color="#f6c94e" stop-opacity="0.8"/>
              <stop offset="100%" stop-color="#e07b50" stop-opacity="0.3"/>
            </linearGradient>
            <filter id="nm-sky-sunGlow">
              <feGaussianBlur stdDeviation="3" result="b"/>
              <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
          </defs>
          <path d="M 20 80 A 100 100 0 0 1 220 80" fill="none" stroke="#dce5f0" stroke-width="6" stroke-linecap="round"/>
          <path d="M 20 80 A 100 100 0 0 1 220 80" fill="none"
            stroke="url(#nm-sky-arcGrad)" stroke-width="6" stroke-linecap="round"
            stroke-dasharray="165 315" stroke-dashoffset="0"/>
          <circle cx="148" cy="22" r="12" fill="#f6c94e" opacity="0.2"/>
          <circle cx="148" cy="22" r="6" fill="#f6c94e" filter="url(#nm-sky-sunGlow)"/>
        </svg>
        <div class="sun-times">
          <span>🌅 6:14 AM</span>
          <span>🌇 8:02 PM</span>
        </div>
      </div>
    </div>

    <!-- Humidity gauge -->
    <div class="widget w-humidity">
      <div class="hum-label">💧 Humidity</div>
      <div class="hum-arc-wrap">
        <svg viewBox="0 0 160 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <defs>
            <linearGradient id="nm-sky-humGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#5b9ec9"/>
              <stop offset="100%" stop-color="#78bda8"/>
            </linearGradient>
          </defs>
          <path d="M 16 88 A 64 64 0 0 1 144 88" fill="none" stroke="#dce5f0" stroke-width="10" stroke-linecap="round"/>
          <path d="M 16 88 A 64 64 0 0 1 144 88" fill="none"
            stroke="url(#nm-sky-humGrad)" stroke-width="10" stroke-linecap="round"
            stroke-dasharray="131 202"/>
        </svg>
        <div class="hum-center">
          <div class="hum-pct">72<span class="hum-unit">%</span></div>
        </div>
      </div>
      <div class="hum-desc">Comfortable range</div>
    </div>

    <!-- Air quality wide -->
    <div class="widget w-air">
      <div class="aqi-chip">
        <div class="aqi-num">38</div>
        <div class="aqi-lbl">AQI</div>
      </div>
      <div class="aqi-bars">
        <div class="aqi-title">🌿 Air Quality · Good</div>
        <div class="aqi-scale" aria-hidden="true">
          <div class="aqi-seg aqi-seg-1"></div>
          <div class="aqi-seg aqi-seg-2"></div>
          <div class="aqi-seg aqi-seg-3"></div>
          <div class="aqi-seg aqi-seg-4"></div>
          <div class="aqi-seg aqi-seg-5"></div>
        </div>
        <div class="pollutants">
          <div class="poll-item">
            <div class="poll-bar-bg" aria-hidden="true"><div class="poll-bar" style="height:35%"></div></div>
            <div class="poll-name">PM2.5</div>
            <div class="poll-val">12</div>
          </div>
          <div class="poll-item">
            <div class="poll-bar-bg" aria-hidden="true"><div class="poll-bar poll-bar-mnt" style="height:28%"></div></div>
            <div class="poll-name">PM10</div>
            <div class="poll-val">22</div>
          </div>
          <div class="poll-item">
            <div class="poll-bar-bg" aria-hidden="true"><div class="poll-bar poll-bar-sun" style="height:18%"></div></div>
            <div class="poll-name">O₃</div>
            <div class="poll-val">38</div>
          </div>
          <div class="poll-item">
            <div class="poll-bar-bg" aria-hidden="true"><div class="poll-bar poll-bar-warm" style="height:10%"></div></div>
            <div class="poll-name">NO₂</div>
            <div class="poll-val">8</div>
          </div>
          <div class="poll-item">
            <div class="poll-bar-bg" aria-hidden="true"><div class="poll-bar" style="height:8%"></div></div>
            <div class="poll-name">CO</div>
            <div class="poll-val">0.4</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 10 Sky Widgets — sky mist weather dashboard ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

.nm-sky {
  --nm-sky-bg:  #e8f0f8;
  --nm-sky-sd:  #c4ccd8;
  --nm-sky-sl:  #f8fdff;
  --nm-sky-ib:  #dce5f0;
  --nm-sky-sun: #f6c94e;
  --nm-sky-sky: #5b9ec9;
  --nm-sky-sky2:#3a7ea8;
  --nm-sky-warm:#e07b50;
  --nm-sky-mnt: #78bda8;
  --nm-sky-txt: #6a7a8a;
  --nm-sky-txt2:#1a2a38;
  --nm-sky-r:   22px;
  --nm-sky-neu:       10px 10px 24px var(--nm-sky-sd), -10px -10px 24px var(--nm-sky-sl);
  --nm-sky-neu-sm:    6px 6px 14px var(--nm-sky-sd), -6px -6px 14px var(--nm-sky-sl);
  --nm-sky-neu-sm-in: inset 5px 5px 10px var(--nm-sky-sd), inset -5px -5px 10px var(--nm-sky-sl);

  position: relative;
  width: 100%;
  min-height: 900px;
  background: var(--nm-sky-bg);
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--nm-sky-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-sky *,
.nm-sky *::before,
.nm-sky *::after { box-sizing: border-box; }

.nm-sky .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-sky-bg);
  border-radius: 40px;
  padding: 24px;
  box-shadow: 24px 24px 58px var(--nm-sky-sd), -24px -24px 58px var(--nm-sky-sl);
  display: grid;
  grid-template-columns: 340px 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 18px;
}

.nm-sky .widget {
  background: var(--nm-sky-bg);
  border-radius: var(--nm-sky-r);
  box-shadow: var(--nm-sky-neu);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.nm-sky .widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 40%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Widget 1 — Main */
.nm-sky .w-main {
  grid-column: 1;
  grid-row: 1 / 3;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nm-sky .city-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.nm-sky .city-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--nm-sky-txt2);
  letter-spacing: -0.5px;
}
.nm-sky .city-country {
  font-size: 12px;
  color: var(--nm-sky-txt);
  font-weight: 500;
  margin-top: 2px;
}

.nm-sky .live-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nm-sky-mnt);
}
.nm-sky .dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nm-sky-mnt);
  animation: nm-sky-pulse 2s ease-in-out infinite;
}
@keyframes nm-sky-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(120, 189, 168, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(120, 189, 168, 0); }
}

.nm-sky .temp-block {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nm-sky .weather-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--nm-sky-bg);
  box-shadow: var(--nm-sky-neu-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.nm-sky .weather-icon-wrap::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--nm-sky-ib);
  box-shadow: var(--nm-sky-neu-sm-in);
}
.nm-sky .weather-emoji {
  font-size: 32px;
  position: relative;
  z-index: 2;
  animation: nm-sky-float 3s ease-in-out infinite;
}
@keyframes nm-sky-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.nm-sky .temp-value {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 58px;
  font-weight: 700;
  color: var(--nm-sky-txt2);
  line-height: 1;
  letter-spacing: -3px;
}
.nm-sky .temp-deg { font-size: 26px; color: var(--nm-sky-sky); }
.nm-sky .temp-cond {
  font-size: 15px;
  font-weight: 700;
  color: var(--nm-sky-txt2);
  margin-top: 2px;
}
.nm-sky .temp-feel {
  font-size: 11px;
  color: var(--nm-sky-txt);
  margin-top: 4px;
  font-weight: 500;
}

.nm-sky .stats-strip {
  display: flex;
  background: var(--nm-sky-ib);
  border-radius: 16px;
  box-shadow: var(--nm-sky-neu-sm-in);
  overflow: hidden;
}
.nm-sky .stat-cell {
  flex: 1;
  padding: 14px 8px;
  text-align: center;
  border-right: 1px solid rgba(150, 170, 190, 0.2);
}
.nm-sky .stat-cell:last-child { border-right: none; }
.nm-sky .stat-icon { font-size: 16px; margin-bottom: 5px; }
.nm-sky .stat-val {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--nm-sky-txt2);
}
.nm-sky .stat-nm {
  font-size: 9px;
  color: var(--nm-sky-txt);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

.nm-sky .forecast-row { display: flex; gap: 6px; }
.nm-sky .fc-day {
  flex: 1;
  background: var(--nm-sky-bg);
  border-radius: 14px;
  box-shadow: var(--nm-sky-neu-sm);
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.nm-sky .fc-day:hover {
  box-shadow: 8px 8px 18px var(--nm-sky-sd), -8px -8px 18px var(--nm-sky-sl);
  transform: translateY(-2px);
}
.nm-sky .fc-day.today { box-shadow: var(--nm-sky-neu-sm-in); }
.nm-sky .fc-day-name {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nm-sky-txt);
}
.nm-sky .fc-icon { font-size: 16px; }
.nm-sky .fc-hi { font-size: 12px; font-weight: 800; color: var(--nm-sky-txt2); }
.nm-sky .fc-lo { font-size: 10px; color: var(--nm-sky-txt); }
.nm-sky .fc-day.today .fc-day-name { color: var(--nm-sky-sky); }
.nm-sky .fc-bar-wrap {
  width: 4px;
  height: 24px;
  background: var(--nm-sky-ib);
  border-radius: 2px;
  box-shadow: inset 1px 1px 3px var(--nm-sky-sd), inset -1px -1px 3px var(--nm-sky-sl);
  position: relative;
}
.nm-sky .fc-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 2px;
  background: linear-gradient(to top, var(--nm-sky-sky2), var(--nm-sky-sky));
}
.nm-sky .fc-day.today .fc-bar { background: linear-gradient(to top, var(--nm-sky-sky2), var(--nm-sky-sun)); }

/* Widget 2 — Clock */
.nm-sky .w-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
}
.nm-sky .clock-display {
  background: var(--nm-sky-ib);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: var(--nm-sky-neu-sm-in);
  text-align: center;
}
.nm-sky .clock-time {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 32px;
  font-weight: 700;
  color: var(--nm-sky-txt2);
  letter-spacing: -1px;
  line-height: 1;
}
.nm-sky .clock-sec { color: var(--nm-sky-sky); }
.nm-sky .clock-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--nm-sky-txt);
  margin-top: 6px;
  letter-spacing: 0.3px;
}
.nm-sky .clock-ampm {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--nm-sky-sky);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nm-sky .analog-wrap { position: relative; width: 76px; height: 76px; }
.nm-sky .analog-face {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--nm-sky-bg);
  box-shadow: var(--nm-sky-neu-sm);
  position: relative;
}
.nm-sky .analog-inner {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--nm-sky-ib);
  box-shadow: var(--nm-sky-neu-sm-in);
}
.nm-sky .hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 3px;
}
.nm-sky .hand-h { width: 3px; height: 18px; margin-left: -1.5px; background: var(--nm-sky-txt2); }
.nm-sky .hand-m { width: 2px; height: 24px; margin-left: -1px; background: var(--nm-sky-sky); }
.nm-sky .hand-s { width: 1px; height: 26px; margin-left: -0.5px; background: var(--nm-sky-sun); }
.nm-sky .center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nm-sky-sky);
  z-index: 10;
  box-shadow: 0 0 4px var(--nm-sky-sky);
}

/* Widget 3 — UV + Sunrise */
.nm-sky .w-uv {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nm-sky .uv-ring-wrap { display: flex; align-items: center; gap: 14px; }
.nm-sky .ring-sm {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}
.nm-sky .ring-sm svg { width: 100%; height: 100%; }
.nm-sky .ring-sm-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.nm-sky .ring-sm-val {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--nm-sky-txt2);
  line-height: 1;
}
.nm-sky .ring-sm-val-warm { color: var(--nm-sky-warm); }
.nm-sky .ring-sm-sub {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nm-sky-txt);
}
.nm-sky .uv-info { flex: 1; }
.nm-sky .uv-level {
  font-size: 14px;
  font-weight: 800;
  color: var(--nm-sky-txt2);
}
.nm-sky .uv-advice {
  font-size: 11px;
  color: var(--nm-sky-txt);
  margin-top: 3px;
  line-height: 1.4;
}

.nm-sky .sunrise-arc { position: relative; }
.nm-sky .sun-arc-svg { width: 100%; display: block; }
.nm-sky .sun-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--nm-sky-txt);
  margin-top: 4px;
}

/* Widget 4 — Humidity */
.nm-sky .w-humidity {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nm-sky .hum-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--nm-sky-txt);
}
.nm-sky .hum-arc-wrap { position: relative; }
.nm-sky .hum-arc-wrap svg { width: 100%; }
.nm-sky .hum-center {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.nm-sky .hum-pct {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--nm-sky-txt2);
}
.nm-sky .hum-unit { font-size: 10px; color: var(--nm-sky-sky); font-weight: 700; }
.nm-sky .hum-desc {
  font-size: 12px;
  color: var(--nm-sky-txt);
  font-weight: 600;
  text-align: center;
}

/* Widget 5 — Air Quality */
.nm-sky .w-air {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nm-sky .aqi-chip {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--nm-sky-bg);
  box-shadow: var(--nm-sky-neu);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.nm-sky .aqi-chip::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--nm-sky-ib);
  box-shadow: var(--nm-sky-neu-sm-in);
}
.nm-sky .aqi-num {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--nm-sky-mnt);
  z-index: 2;
  line-height: 1;
  position: relative;
}
.nm-sky .aqi-lbl {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nm-sky-txt);
  z-index: 2;
  margin-top: 2px;
  position: relative;
}
.nm-sky .aqi-bars { flex: 1; }
.nm-sky .aqi-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--nm-sky-txt2);
  margin-bottom: 8px;
}
.nm-sky .aqi-scale {
  display: flex;
  gap: 4px;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.nm-sky .aqi-seg { border-radius: 3px; }
.nm-sky .aqi-seg-1 { background: var(--nm-sky-mnt); flex: 2; }
.nm-sky .aqi-seg-2 { background: var(--nm-sky-sun); flex: 2; }
.nm-sky .aqi-seg-3 { background: var(--nm-sky-warm); flex: 1.5; }
.nm-sky .aqi-seg-4 { background: #d04040; flex: 1.5; }
.nm-sky .aqi-seg-5 { background: #8040c0; flex: 1; }

.nm-sky .pollutants { display: flex; gap: 12px; margin-top: 10px; }
.nm-sky .poll-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.nm-sky .poll-bar-bg {
  width: 28px;
  height: 36px;
  border-radius: 6px;
  background: var(--nm-sky-ib);
  box-shadow: var(--nm-sky-neu-sm-in);
  position: relative;
  overflow: hidden;
}
.nm-sky .poll-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 4px;
  background: linear-gradient(to top, var(--nm-sky-sky2), var(--nm-sky-sky));
}
.nm-sky .poll-bar-mnt  { background: linear-gradient(to top, var(--nm-sky-mnt), #a0ddc8); }
.nm-sky .poll-bar-sun  { background: linear-gradient(to top, var(--nm-sky-sun), #f8e090); }
.nm-sky .poll-bar-warm { background: linear-gradient(to top, var(--nm-sky-warm), #f0a880); }
.nm-sky .poll-name {
  font-size: 9px;
  font-weight: 700;
  color: var(--nm-sky-txt);
  letter-spacing: 0.5px;
}
.nm-sky .poll-val {
  font-size: 10px;
  font-weight: 800;
  color: var(--nm-sky-txt2);
  font-family: 'Space Mono', ui-monospace, monospace;
}

@media (max-width: 880px) {
  .nm-sky .card {
    grid-template-columns: 1fr;
  }
  .nm-sky .w-main { grid-row: auto; }
  .nm-sky .w-air { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-sky .weather-emoji,
  .nm-sky .dot-pulse { animation: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.nm-sky');
  if (!root) return;
  const clock = root.querySelector('[data-nm-sky-clock]');
  const dateEl = root.querySelector('[data-nm-sky-date]');
  const ampm = root.querySelector('[data-nm-sky-ampm]');
  const handH = root.querySelector('[data-nm-sky-handh]');
  const handM = root.querySelector('[data-nm-sky-handm]');
  const handS = root.querySelector('[data-nm-sky-hands]');

  function update() {
    const now = new Date();
    const h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
    const ap = h >= 12 ? 'PM' : 'AM';
    const h12 = h % 12 || 12;
    if (clock) clock.innerHTML = String(h12).padStart(2, '0') + ':' + String(m).padStart(2, '0') + '<span class="clock-sec">:' + String(s).padStart(2, '0') + '</span>';
    if (ampm) ampm.textContent = ap;
    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    if (dateEl) dateEl.textContent = days[now.getDay()] + ', ' + months[now.getMonth()] + ' ' + now.getDate() + ', ' + now.getFullYear();

    const sdeg = s * 6;
    const mdeg = m * 6 + s * 0.1;
    const hdeg = (h % 12) * 30 + m * 0.5;
    if (handH) handH.style.transform = 'rotate(' + hdeg + 'deg)';
    if (handM) handM.style.transform = 'rotate(' + mdeg + 'deg)';
    if (handS) handS.style.transform = 'rotate(' + sdeg + 'deg)';
  }
  update();
  setInterval(update, 1000);
})();
```

### 11. Soft UI Form Controls

**Type:** Pure CSS
**Description:** A pure-CSS showcase of soft-UI form controls with zero JavaScript. Style A: concave dimple radios — a sunken circle with a dot that bounces in using cubic-bezier(0.34, 1.56, 0.64, 1) spring easing on :checked. Style B: horizontal pill-select groups + a vertical icon pill variant — both invert from inset-track to extruded-active on :checked. Style C: card radios with a floating badge that fills from gray to indigo and reveals a white center dot. Checkboxes mirror the pattern — dimple box with CSS-drawn checkmark (border-right + border-bottom), stamp pills with animated tick circles, and card checkboxes with a green gradient fill. Raleway + DM Mono. Best for design-system docs, form pattern libraries, settings panels.

**HTML:**
```html
<section class="nm-ctl" aria-label="Soft UI form controls showcase">
  <div class="card">

    <div class="sec">
      <div class="sec-head">
        <div class="sec-title">Radio Buttons</div>
        <div class="sec-tag">Custom CSS · No JavaScript</div>
      </div>
      <div class="controls-row">

        <div class="col-stack">
          <div class="sub-tag">Style A — Concave Dimple</div>
          <div class="radio-classic">
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" checked />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Sans-serif<span class="rc-sublabel">Clean · Modern</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Serif<span class="rc-sublabel">Refined · Editorial</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Monospace<span class="rc-sublabel">Code · Precise</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Display<span class="rc-sublabel">Bold · Expressive</span></span>
            </label>
          </div>
        </div>

        <div class="col-stack">
          <div class="sub-tag">Style B — Pill Segment</div>
          <div class="pill-group">
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-d" checked />
            <label class="pill-label" for="nm-ctl-rB1-d">Day</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-w" />
            <label class="pill-label" for="nm-ctl-rB1-w">Week</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-m" />
            <label class="pill-label" for="nm-ctl-rB1-m">Month</label>
          </div>
          <div class="pill-group">
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-s" checked />
            <label class="pill-label" for="nm-ctl-rB2-s">S</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-m" />
            <label class="pill-label" for="nm-ctl-rB2-m">M</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-l" />
            <label class="pill-label" for="nm-ctl-rB2-l">L</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-xl" />
            <label class="pill-label" for="nm-ctl-rB2-xl">XL</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-2xl" />
            <label class="pill-label" for="nm-ctl-rB2-2xl">2XL</label>
          </div>
          <div class="pill-group-v">
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-1" />
            <label class="pill-label-v" for="nm-ctl-rB3-1"><span class="pill-icon" aria-hidden="true">🎨</span>Design</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-2" checked />
            <label class="pill-label-v" for="nm-ctl-rB3-2"><span class="pill-icon" aria-hidden="true">⚡</span>Develop</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-3" />
            <label class="pill-label-v" for="nm-ctl-rB3-3"><span class="pill-icon" aria-hidden="true">🚀</span>Deploy</label>
          </div>
        </div>

        <div class="col-stack col-stack-flex">
          <div class="sub-tag">Style C — Card Select</div>
          <div class="card-radio-group">
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-1" />
            <label class="card-label" for="nm-ctl-rC-1">
              <span class="card-icon" aria-hidden="true">🌱</span>
              <span class="card-title">Starter</span>
              <span class="card-desc">For personal projects</span>
              <span class="card-price">Free</span>
            </label>
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-2" checked />
            <label class="card-label" for="nm-ctl-rC-2">
              <span class="card-icon" aria-hidden="true">⚡</span>
              <span class="card-title">Pro</span>
              <span class="card-desc">Teams up to 10</span>
              <span class="card-price">$12/mo</span>
            </label>
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-3" />
            <label class="card-label" for="nm-ctl-rC-3">
              <span class="card-icon" aria-hidden="true">🏢</span>
              <span class="card-title">Enterprise</span>
              <span class="card-desc">Unlimited seats</span>
              <span class="card-price">Custom</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="div-line" aria-hidden="true"></div>

    <div class="sec">
      <div class="sec-head">
        <div class="sec-title">Checkboxes</div>
        <div class="sec-tag">Pure CSS inset · accent fill transition</div>
      </div>
      <div class="controls-row">

        <div class="col-stack">
          <div class="sub-tag">Style A — Dimple Box</div>
          <div class="check-classic">
            <label class="cb-item">
              <input class="cb-input" type="checkbox" checked />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Dark mode support</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" checked />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Keyboard navigation</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Analytics tracking</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Marketing emails</span>
            </label>
          </div>
        </div>

        <div class="col-stack col-stack-flex">
          <div class="sub-tag">Style B — Stamp Pill</div>
          <div class="stamp-group">
            <input class="stamp-input" type="checkbox" id="nm-ctl-s1" checked />
            <label class="stamp-label" for="nm-ctl-s1">
              <span class="stamp-tick" aria-hidden="true"></span>
              React
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s2" checked />
            <label class="stamp-label" for="nm-ctl-s2">
              <span class="stamp-tick" aria-hidden="true"></span>
              TypeScript
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s3" />
            <label class="stamp-label" for="nm-ctl-s3">
              <span class="stamp-tick" aria-hidden="true"></span>
              Vue
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s4" />
            <label class="stamp-label" for="nm-ctl-s4">
              <span class="stamp-tick" aria-hidden="true"></span>
              Angular
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s5" checked />
            <label class="stamp-label" for="nm-ctl-s5">
              <span class="stamp-tick" aria-hidden="true"></span>
              TailwindCSS
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s6" />
            <label class="stamp-label" for="nm-ctl-s6">
              <span class="stamp-tick" aria-hidden="true"></span>
              GraphQL
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s7" />
            <label class="stamp-label" for="nm-ctl-s7">
              <span class="stamp-tick" aria-hidden="true"></span>
              Node.js
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s8" checked />
            <label class="stamp-label" for="nm-ctl-s8">
              <span class="stamp-tick" aria-hidden="true"></span>
              Figma
            </label>
          </div>
        </div>

        <div class="col-stack">
          <div class="sub-tag">Style C — Card Check</div>
          <div class="card-check-group">
            <input class="cc-input" type="checkbox" id="nm-ctl-cc1" checked />
            <label class="cc-label" for="nm-ctl-cc1">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Sync across devices</span>
                <span class="cc-detail">iCloud · Google Drive</span>
              </span>
              <span class="cc-badge">ON</span>
            </label>
            <input class="cc-input" type="checkbox" id="nm-ctl-cc2" checked />
            <label class="cc-label" for="nm-ctl-cc2">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Offline mode</span>
                <span class="cc-detail">Cache on local storage</span>
              </span>
              <span class="cc-badge">ON</span>
            </label>
            <input class="cc-input" type="checkbox" id="nm-ctl-cc3" />
            <label class="cc-label" for="nm-ctl-cc3">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Crash reporting</span>
                <span class="cc-detail">Send to Sentry · Firebase</span>
              </span>
              <span class="cc-badge">OFF</span>
            </label>
          </div>
        </div>

      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 11 Soft UI Form Controls — pure CSS showcase ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

.nm-ctl {
  --nm-ctl-bg:  #f0ebe2;
  --nm-ctl-sd:  #d0cbbf;
  --nm-ctl-sl:  #fffdf8;
  --nm-ctl-ib:  #e8e2d8;
  --nm-ctl-acc: #5c6bc0;
  --nm-ctl-ac2: #8c9ce0;
  --nm-ctl-ac3: #3a4a9a;
  --nm-ctl-grn: #4a8a68;
  --nm-ctl-txt: #6a6258;
  --nm-ctl-txt2:#1a1510;
  --nm-ctl-neu-sm:    5px 5px 12px var(--nm-ctl-sd), -5px -5px 12px var(--nm-ctl-sl);
  --nm-ctl-neu-sm-in: inset 4px 4px 9px var(--nm-ctl-sd), inset -4px -4px 9px var(--nm-ctl-sl);

  position: relative;
  width: 100%;
  min-height: 880px;
  background: var(--nm-ctl-bg);
  font-family: 'Raleway', system-ui, sans-serif;
  color: var(--nm-ctl-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-ctl *,
.nm-ctl *::before,
.nm-ctl *::after { box-sizing: border-box; }

.nm-ctl .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-ctl-bg);
  border-radius: 40px;
  padding: 40px 36px;
  box-shadow: 20px 20px 50px var(--nm-ctl-sd), -20px -20px 50px var(--nm-ctl-sl);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nm-ctl .sec { display: flex; flex-direction: column; gap: 16px; }
.nm-ctl .sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.nm-ctl .sec-title { font-size: 14px; font-weight: 800; color: var(--nm-ctl-txt2); letter-spacing: 0.3px; }
.nm-ctl .sec-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-ctl-txt);
  opacity: 0.5;
}
.nm-ctl .sub-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-ctl-txt);
  opacity: 0.5;
  margin-bottom: 4px;
}
.nm-ctl .controls-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.nm-ctl .col-stack { display: flex; flex-direction: column; gap: 12px; }
.nm-ctl .col-stack-flex { flex: 1; min-width: 180px; }
.nm-ctl .div-line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--nm-ctl-sd), transparent);
  opacity: 0.5;
}

/* Style A — Classic radio */
.nm-ctl .radio-classic { display: flex; flex-direction: column; gap: 12px; min-width: 160px; }
.nm-ctl .rc-item {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}
.nm-ctl .rc-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .rc-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.2s ease;
  position: relative;
}
.nm-ctl .rc-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 8px rgba(92, 107, 192, 0.5);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nm-ctl .rc-input:checked ~ .rc-circle::after { transform: translate(-50%, -50%) scale(1); }
.nm-ctl .rc-input:checked ~ .rc-circle { box-shadow: var(--nm-ctl-neu-sm); }
.nm-ctl .rc-label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ctl-txt2);
  transition: color 0.2s;
  line-height: 1.3;
}
.nm-ctl .rc-item:hover .rc-label { color: var(--nm-ctl-acc); }
.nm-ctl .rc-sublabel { font-size: 10px; color: var(--nm-ctl-txt); font-weight: 400; margin-top: 1px; }

/* Style B — Pill group */
.nm-ctl .pill-group {
  display: flex;
  background: var(--nm-ctl-ib);
  border-radius: 20px;
  padding: 5px;
  box-shadow: var(--nm-ctl-neu-sm-in);
  gap: 4px;
}
.nm-ctl .pill-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .pill-label {
  flex: 1;
  padding: 9px 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  text-align: center;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.nm-ctl .pill-input:checked + .pill-label {
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  color: var(--nm-ctl-acc);
}

.nm-ctl .pill-group-v {
  display: flex;
  flex-direction: column;
  background: var(--nm-ctl-ib);
  border-radius: 18px;
  padding: 5px;
  box-shadow: var(--nm-ctl-neu-sm-in);
  gap: 4px;
  min-width: 160px;
}
.nm-ctl .pill-label-v {
  padding: 9px 14px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  transition: all 0.22s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nm-ctl .pill-input:checked + .pill-label-v {
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  color: var(--nm-ctl-acc);
}
.nm-ctl .pill-icon { font-size: 16px; }

/* Style C — Card radio */
.nm-ctl .card-radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.nm-ctl .card-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .card-label {
  flex: 1;
  background: var(--nm-ctl-bg);
  border-radius: 18px;
  padding: 16px 12px;
  box-shadow: var(--nm-ctl-neu-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.22s ease;
  min-width: 100px;
  position: relative;
}
.nm-ctl .card-label:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 20px var(--nm-ctl-sd), -8px -8px 20px var(--nm-ctl-sl);
}
.nm-ctl .card-input:checked + .card-label { box-shadow: var(--nm-ctl-neu-sm-in); }
.nm-ctl .card-label::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  transition: all 0.2s;
}
.nm-ctl .card-input:checked + .card-label::before {
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 8px rgba(92, 107, 192, 0.4);
}
.nm-ctl .card-label::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nm-ctl .card-input:checked + .card-label::after { transform: scale(1); }
.nm-ctl .card-icon { font-size: 24px; }
.nm-ctl .card-title { font-size: 12px; font-weight: 800; color: var(--nm-ctl-txt2); letter-spacing: 0.3px; }
.nm-ctl .card-desc { font-size: 10px; color: var(--nm-ctl-txt); text-align: center; line-height: 1.4; }
.nm-ctl .card-price {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--nm-ctl-acc);
  margin-top: 2px;
}

/* Checkboxes Style A — classic box */
.nm-ctl .check-classic { display: flex; flex-direction: column; gap: 12px; min-width: 180px; }
.nm-ctl .cb-item {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}
.nm-ctl .cb-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .cb-box {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}
.nm-ctl .cb-check {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0) rotate(20deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nm-ctl .cb-check::before {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
  margin-top: -4px;
}
.nm-ctl .cb-input:checked ~ .cb-box {
  background: linear-gradient(145deg, var(--nm-ctl-acc), var(--nm-ctl-ac3));
  box-shadow: 3px 3px 8px rgba(92, 107, 192, 0.35), -2px -2px 6px var(--nm-ctl-sl);
}
.nm-ctl .cb-input:checked ~ .cb-box .cb-check { transform: scale(1) rotate(0deg); }
.nm-ctl .cb-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ctl-txt2);
  transition: color 0.2s;
  line-height: 1.3;
}
.nm-ctl .cb-item:hover .cb-txt { color: var(--nm-ctl-acc); }

/* Checkboxes Style B — stamp pill */
.nm-ctl .stamp-group { display: flex; gap: 10px; flex-wrap: wrap; }
.nm-ctl .stamp-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .stamp-label {
  padding: 9px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
.nm-ctl .stamp-label:hover { transform: translateY(-1px); color: var(--nm-ctl-acc); }
.nm-ctl .stamp-input:checked + .stamp-label {
  box-shadow: var(--nm-ctl-neu-sm-in);
  color: var(--nm-ctl-acc);
  font-weight: 800;
}
.nm-ctl .stamp-tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.nm-ctl .stamp-input:checked + .stamp-label .stamp-tick {
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 6px rgba(92, 107, 192, 0.4);
  color: #fff;
  font-size: 10px;
}
.nm-ctl .stamp-input:checked + .stamp-label .stamp-tick::after { content: '\2713'; }

/* Checkboxes Style C — card check */
.nm-ctl .card-check-group { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.nm-ctl .cc-input { position: absolute; opacity: 0; pointer-events: none; }
.nm-ctl .cc-label {
  background: var(--nm-ctl-bg);
  border-radius: 16px;
  padding: 13px 16px;
  box-shadow: var(--nm-ctl-neu-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
  user-select: none;
}
.nm-ctl .cc-label:hover { box-shadow: 7px 7px 16px var(--nm-ctl-sd), -7px -7px 16px var(--nm-ctl-sl); }
.nm-ctl .cc-input:checked + .cc-label { box-shadow: var(--nm-ctl-neu-sm-in); }
.nm-ctl .cc-sq {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.nm-ctl .cc-input:checked + .cc-label .cc-sq {
  background: linear-gradient(145deg, var(--nm-ctl-grn), #2a6a48);
  box-shadow: 2px 2px 6px rgba(74, 138, 104, 0.4);
}
.nm-ctl .cc-sq-inner {
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 12px;
  color: #fff;
}
.nm-ctl .cc-input:checked + .cc-label .cc-sq-inner { transform: scale(1); }
.nm-ctl .cc-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nm-ctl .cc-name { font-size: 13px; font-weight: 700; color: var(--nm-ctl-txt2); }
.nm-ctl .cc-detail { font-size: 10px; color: var(--nm-ctl-txt); margin-top: 2px; }
.nm-ctl .cc-badge {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  padding: 3px 8px;
  background: var(--nm-ctl-ib);
  border-radius: 8px;
  box-shadow: var(--nm-ctl-neu-sm-in);
}

@media (prefers-reduced-motion: reduce) {
  .nm-ctl .rc-circle::after,
  .nm-ctl .pill-label,
  .nm-ctl .pill-label-v,
  .nm-ctl .card-label,
  .nm-ctl .card-label::after,
  .nm-ctl .cb-box,
  .nm-ctl .cb-check,
  .nm-ctl .stamp-label,
  .nm-ctl .cc-label,
  .nm-ctl .cc-sq-inner { transition: none; animation: none; }
}
```

### 12. Aurum Profile & Testimonial

**Type:** Pure CSS
**Description:** A rose-parchment profile layout. The main profile card uses a triple-layer avatar mount: outer extruded ring → inset groove ring → gradient avatar, so the portrait feels poured into the background rather than placed on top. A pulsing green presence indicator adds life. Deeply inset stats strip, individually extruded tag pills, five social hover-lift buttons, and a gradient follow CTA. A large pull-quote testimonial sits beside it with a decorative 120px ghost quotation mark. Four mini connection cards below each have their own embedded circular avatar and a neumorphic connect button. Playfair Display + DM Sans. Best for portfolios, team pages, social profiles.

**HTML:**
```html
<section class="nm-prf" aria-label="Profile and testimonial showcase">
  <div class="card">

    <div class="profile-card">
      <div class="avatar-mount">
        <span class="avatar-ring" aria-hidden="true"></span>
        <span class="avatar-img" aria-hidden="true">🧑‍🎨</span>
        <span class="avatar-status" aria-hidden="true"></span>
      </div>

      <div class="profile-id">
        <div class="profile-name">Jordan Ellis</div>
        <div class="profile-role">Senior Product Designer · Figma</div>
      </div>

      <div class="profile-bio">
        "Crafting interfaces that feel as good as they look. Obsessed with depth, texture, and the tiny details that make users pause."
      </div>

      <div class="stats-strip">
        <div class="stat-cell">
          <div class="stat-n">248</div>
          <div class="stat-l">Projects</div>
        </div>
        <div class="stat-cell">
          <div class="stat-n">14.2k</div>
          <div class="stat-l">Followers</div>
        </div>
        <div class="stat-cell">
          <div class="stat-n">98%</div>
          <div class="stat-l">Rating</div>
        </div>
      </div>

      <div class="tag-row">
        <span class="tag">Neumorphism</span>
        <span class="tag">Design Systems</span>
        <span class="tag">Motion</span>
        <span class="tag">Accessibility</span>
      </div>

      <div class="socials">
        <button type="button" class="social-btn" aria-label="Twitter/X">𝕏</button>
        <button type="button" class="social-btn" aria-label="Dribbble">🏀</button>
        <button type="button" class="social-btn" aria-label="LinkedIn">in</button>
        <button type="button" class="social-btn" aria-label="GitHub">♥</button>
        <button type="button" class="social-btn" aria-label="Behance">Bē</button>
      </div>

      <button type="button" class="follow-btn">+ Follow Jordan</button>
    </div>

    <div class="testimonial-card">
      <div class="stars" aria-label="5 out of 5 stars">
        <span class="star" aria-hidden="true">★</span>
        <span class="star" aria-hidden="true">★</span>
        <span class="star" aria-hidden="true">★</span>
        <span class="star" aria-hidden="true">★</span>
        <span class="star" aria-hidden="true">★</span>
      </div>
      <div class="quote-text">
        The level of craft in Jordan's work is unmatched. The neumorphic design system they built for our fintech product reduced user confusion by 40% — every shadow, every depth cue was deliberate. It genuinely feels like holding a physical object.
      </div>
      <div class="quote-author">
        <div class="q-avatar" aria-hidden="true">
          <span class="q-avatar-img">👩‍💼</span>
        </div>
        <div>
          <div class="q-name">Priya Nair</div>
          <div class="q-role">VP of Design · <span class="q-company">Verse Finance</span></div>
        </div>
      </div>
    </div>

    <div class="connections-row">
      <div class="conn-card">
        <div class="conn-avatar" aria-hidden="true">
          <span class="conn-avatar-img conn-avatar-img-1">🧑‍💻</span>
        </div>
        <div class="conn-name">Lena Park</div>
        <div class="conn-role">UI Engineer · Stripe</div>
        <div class="conn-mutual">6 mutual connections</div>
        <button type="button" class="conn-add">+ Connect</button>
      </div>
      <div class="conn-card">
        <div class="conn-avatar" aria-hidden="true">
          <span class="conn-avatar-img conn-avatar-img-2">👨‍🎨</span>
        </div>
        <div class="conn-name">Marc Osei</div>
        <div class="conn-role">Motion Designer · Apple</div>
        <div class="conn-mutual">12 mutual connections</div>
        <button type="button" class="conn-add">+ Connect</button>
      </div>
      <div class="conn-card">
        <div class="conn-avatar" aria-hidden="true">
          <span class="conn-avatar-img conn-avatar-img-3">👩‍🔬</span>
        </div>
        <div class="conn-name">Aiko Tanaka</div>
        <div class="conn-role">UX Researcher · Google</div>
        <div class="conn-mutual">3 mutual connections</div>
        <button type="button" class="conn-add">+ Connect</button>
      </div>
      <div class="conn-card">
        <div class="conn-avatar" aria-hidden="true">
          <span class="conn-avatar-img conn-avatar-img-4">🧑‍💼</span>
        </div>
        <div class="conn-name">Dele Owusu</div>
        <div class="conn-role">Product Lead · Notion</div>
        <div class="conn-mutual">8 mutual connections</div>
        <button type="button" class="conn-add">+ Connect</button>
      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 12 Aurum Profile & Testimonial — rose parchment ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

.nm-prf {
  --nm-prf-bg:  #f0e8e4;
  --nm-prf-sd:  #d4c8c4;
  --nm-prf-sl:  #fff8f6;
  --nm-prf-ib:  #e8deda;
  --nm-prf-acc: #c4786a;
  --nm-prf-ac2: #e09a8c;
  --nm-prf-ac3: #9a5048;
  --nm-prf-lav: #9a6880;
  --nm-prf-lv2: #c0a0b8;
  --nm-prf-tl:  #5a8a88;
  --nm-prf-txt: #7a6a68;
  --nm-prf-txt2:#2a1a18;
  --nm-prf-neu:       10px 10px 24px var(--nm-prf-sd), -10px -10px 24px var(--nm-prf-sl);
  --nm-prf-neu-sm:    6px 6px 14px var(--nm-prf-sd), -6px -6px 14px var(--nm-prf-sl);
  --nm-prf-neu-sm-in: inset 4px 4px 10px var(--nm-prf-sd), inset -4px -4px 10px var(--nm-prf-sl);

  position: relative;
  width: 100%;
  min-height: 900px;
  background: var(--nm-prf-bg);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--nm-prf-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-prf *,
.nm-prf *::before,
.nm-prf *::after { box-sizing: border-box; }

.nm-prf .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  display: grid;
  grid-template-columns: 290px 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 36px;
  background: var(--nm-prf-bg);
  border-radius: 44px;
  box-shadow: 22px 22px 54px var(--nm-prf-sd), -22px -22px 54px var(--nm-prf-sl);
}

/* Profile card */
.nm-prf .profile-card {
  grid-row: 1 / 3;
  background: var(--nm-prf-bg);
  border-radius: 28px;
  box-shadow: var(--nm-prf-neu);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
}
.nm-prf .profile-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  border-radius: 28px 28px 0 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(196, 120, 106, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.nm-prf .avatar-mount {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--nm-prf-bg);
  box-shadow: var(--nm-prf-neu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.nm-prf .avatar-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--nm-prf-ib);
  box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .avatar-img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--nm-prf-ac2), var(--nm-prf-lav));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
  z-index: 2;
  user-select: none;
  box-shadow: 0 4px 12px rgba(154, 80, 72, 0.2);
}
.nm-prf .avatar-status {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6ab87a;
  box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 8px rgba(106, 184, 122, 0.5);
  z-index: 10;
  animation: nm-prf-status-pulse 2.5s ease-in-out infinite;
}
@keyframes nm-prf-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 6px rgba(106, 184, 122, 0.4); }
  50%      { box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 14px rgba(106, 184, 122, 0.7); }
}

.nm-prf .profile-id { text-align: center; position: relative; }
.nm-prf .profile-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--nm-prf-txt2);
  letter-spacing: -0.5px;
}
.nm-prf .profile-role {
  font-size: 13px;
  color: var(--nm-prf-acc);
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.nm-prf .profile-bio {
  font-size: 12px;
  color: var(--nm-prf-txt);
  text-align: center;
  line-height: 1.7;
  font-style: italic;
  padding: 0 4px;
  position: relative;
}

.nm-prf .stats-strip {
  width: 100%;
  background: var(--nm-prf-ib);
  border-radius: 18px;
  box-shadow: var(--nm-prf-neu-sm-in);
  display: flex;
  position: relative;
}
.nm-prf .stat-cell {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid rgba(180, 160, 155, 0.2);
}
.nm-prf .stat-cell:last-child { border-right: none; }
.nm-prf .stat-n {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nm-prf-txt2);
}
.nm-prf .stat-l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--nm-prf-txt);
  margin-top: 2px;
}

.nm-prf .tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
.nm-prf .tag {
  background: var(--nm-prf-bg);
  border-radius: 100px;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 600;
  color: var(--nm-prf-txt);
  box-shadow: var(--nm-prf-neu-sm);
  transition: all 0.15s;
}
.nm-prf .tag:hover {
  box-shadow: 7px 7px 16px var(--nm-prf-sd), -7px -7px 16px var(--nm-prf-sl);
  color: var(--nm-prf-acc);
}

.nm-prf .socials { display: flex; gap: 10px; position: relative; }
.nm-prf .social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nm-prf-bg);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--nm-prf-txt2);
  box-shadow: var(--nm-prf-neu-sm);
  transition: all 0.18s ease;
}
.nm-prf .social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 18px var(--nm-prf-sd), -8px -8px 18px var(--nm-prf-sl);
}
.nm-prf .social-btn:active { box-shadow: var(--nm-prf-neu-sm-in); transform: scale(0.94); }

.nm-prf .follow-btn {
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 13px;
  border-radius: 100px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  background: linear-gradient(145deg, var(--nm-prf-acc), var(--nm-prf-ac3));
  box-shadow: 8px 8px 18px rgba(154, 80, 72, 0.35), -5px -5px 14px var(--nm-prf-sl);
  transition: all 0.18s;
  position: relative;
}
.nm-prf .follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 10px 14px 24px rgba(154, 80, 72, 0.4), -5px -5px 14px var(--nm-prf-sl);
}
.nm-prf .follow-btn:active {
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2);
  transform: scale(0.98);
}

/* Testimonial card */
.nm-prf .testimonial-card {
  background: var(--nm-prf-bg);
  border-radius: 24px;
  box-shadow: var(--nm-prf-neu);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.nm-prf .testimonial-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 120px;
  font-weight: 700;
  color: var(--nm-prf-acc);
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
}
.nm-prf .stars { display: flex; gap: 4px; }
.nm-prf .star { font-size: 14px; color: var(--nm-prf-acc); }
.nm-prf .quote-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--nm-prf-txt2);
  line-height: 1.7;
  letter-spacing: 0.2px;
}
.nm-prf .quote-author { display: flex; align-items: center; gap: 14px; }
.nm-prf .q-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nm-prf-bg);
  box-shadow: var(--nm-prf-neu-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.nm-prf .q-avatar::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--nm-prf-ib);
  box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .q-avatar-img {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--nm-prf-lv2), var(--nm-prf-tl));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.nm-prf .q-name { font-weight: 700; font-size: 13px; color: var(--nm-prf-txt2); }
.nm-prf .q-role { font-size: 11px; color: var(--nm-prf-txt); margin-top: 2px; }
.nm-prf .q-company { color: var(--nm-prf-acc); font-weight: 600; }

/* Connection cards */
.nm-prf .connections-row { display: flex; gap: 12px; flex-wrap: wrap; }
.nm-prf .conn-card {
  flex: 1;
  min-width: 130px;
  background: var(--nm-prf-bg);
  border-radius: 20px;
  box-shadow: var(--nm-prf-neu-sm);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.nm-prf .conn-card:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 20px var(--nm-prf-sd), -8px -8px 20px var(--nm-prf-sl);
}
.nm-prf .conn-card:active { box-shadow: var(--nm-prf-neu-sm-in); }
.nm-prf .conn-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--nm-prf-bg);
  box-shadow: var(--nm-prf-neu-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nm-prf .conn-avatar::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--nm-prf-ib);
  box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .conn-avatar-img {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.nm-prf .conn-avatar-img-1 { background: linear-gradient(145deg, var(--nm-prf-ac2), var(--nm-prf-acc)); }
.nm-prf .conn-avatar-img-2 { background: linear-gradient(145deg, var(--nm-prf-lv2), var(--nm-prf-lav)); }
.nm-prf .conn-avatar-img-3 { background: linear-gradient(145deg, #a0c8c0, var(--nm-prf-tl)); }
.nm-prf .conn-avatar-img-4 { background: linear-gradient(145deg, #d0b880, #b09060); }

.nm-prf .conn-name { font-size: 12px; font-weight: 700; color: var(--nm-prf-txt2); text-align: center; }
.nm-prf .conn-role { font-size: 10px; color: var(--nm-prf-txt); text-align: center; }
.nm-prf .conn-mutual {
  font-size: 9px;
  color: var(--nm-prf-txt);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.nm-prf .conn-add {
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--nm-prf-bg);
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--nm-prf-acc);
  box-shadow: var(--nm-prf-neu-sm);
  transition: all 0.15s;
}
.nm-prf .conn-add:hover { box-shadow: 6px 6px 12px var(--nm-prf-sd), -6px -6px 12px var(--nm-prf-sl); }
.nm-prf .conn-add:active { box-shadow: var(--nm-prf-neu-sm-in); }

@media (max-width: 720px) {
  .nm-prf .card { grid-template-columns: 1fr; }
  .nm-prf .profile-card { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-prf .avatar-status { animation: none; }
  .nm-prf .social-btn,
  .nm-prf .follow-btn,
  .nm-prf .tag,
  .nm-prf .conn-card { transition: none; }
}
```

### 13. Dark Mode Neumorphism

**Type:** CSS + JS
**Description:** The exact dark-neumorphic formula in action — deep navy with shadow 15% darker / highlight 10% lighter. Three concentric system-monitor rings glow with neon teal, electric violet, and hot pink using filter:drop-shadow layered beneath feGaussianBlur SVG filters. Notifications use colored left-border glows that bleed into the card surface. A live JS clock in teal with luminous text-shadow. An embedded code-snippet widget explains the exact CSS variable formula. A music disc uses repeating-radial-gradient grooves. The bottom metrics grid shows four neon accent colors with sparkline bars, each with a matching box-shadow glow. Exo 2 + JetBrains Mono. Best for dev dashboards, gamer interfaces, futuristic admin panels.

**HTML:**
```html
<section class="nm-drk" aria-label="Dark mode neumorphism showcase">
  <div class="card">

    <!-- System monitor -->
    <div class="sys-card">
      <div class="tag">System Monitor · Dark Neu Formula</div>
      <div class="rings-cluster">
        <div class="mon-ring mon-ring-1">
          <svg viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <defs>
              <filter id="nm-drk-g1"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
            </defs>
            <circle cx="55" cy="55" r="44" fill="none" stroke="#161d2e" stroke-width="9"/>
            <circle cx="55" cy="55" r="44" fill="none" stroke="#00f5d4" stroke-width="9"
              stroke-linecap="round" stroke-dasharray="198 277" filter="url(#nm-drk-g1)" transform="rotate(-90 55 55)" data-nm-drk-ring="cpu"/>
          </svg>
          <div class="mon-center">
            <div class="mon-val mon-val-t1">72%</div>
            <div class="mon-sub">CPU</div>
          </div>
        </div>

        <div class="mon-ring mon-ring-2">
          <svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="45" cy="45" r="36" fill="none" stroke="#161d2e" stroke-width="8"/>
            <circle cx="45" cy="45" r="36" fill="none" stroke="#bd93f9" stroke-width="8"
              stroke-linecap="round" stroke-dasharray="145 226" filter="url(#nm-drk-g1)" transform="rotate(-90 45 45)" data-nm-drk-ring="ram"/>
          </svg>
          <div class="mon-center">
            <div class="mon-val mon-val-vt">64%</div>
            <div class="mon-sub">RAM</div>
          </div>
        </div>

        <div class="mon-ring mon-ring-3">
          <svg viewBox="0 0 76 76" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="38" cy="38" r="30" fill="none" stroke="#161d2e" stroke-width="7"/>
            <circle cx="38" cy="38" r="30" fill="none" stroke="#ff79c6" stroke-width="7"
              stroke-linecap="round" stroke-dasharray="103 189" filter="url(#nm-drk-g1)" transform="rotate(-90 38 38)" data-nm-drk-ring="gpu"/>
          </svg>
          <div class="mon-center">
            <div class="mon-val mon-val-pk">43%</div>
            <div class="mon-sub">GPU</div>
          </div>
        </div>
      </div>

      <div class="sys-metrics">
        <div class="metric-chip">
          <div class="mc-val mc-val-t1">45°C</div>
          <div class="mc-label">Temp</div>
        </div>
        <div class="metric-chip">
          <div class="mc-val mc-val-amb">2.4W</div>
          <div class="mc-label">Power</div>
        </div>
        <div class="metric-chip">
          <div class="mc-val mc-val-vt">4.2G</div>
          <div class="mc-label">VRAM</div>
        </div>
      </div>

      <div class="proc-list">
        <div class="proc-item">
          <span class="proc-name">node server.js</span>
          <div class="proc-bar-bg" aria-hidden="true"><div class="proc-bar proc-bar-t1" style="width:58%"></div></div>
          <span class="proc-pct proc-pct-t1">58%</span>
        </div>
        <div class="proc-item">
          <span class="proc-name">chrome.exe</span>
          <div class="proc-bar-bg" aria-hidden="true"><div class="proc-bar proc-bar-vt" style="width:34%"></div></div>
          <span class="proc-pct proc-pct-vt">34%</span>
        </div>
        <div class="proc-item">
          <span class="proc-name">figma.desktop</span>
          <div class="proc-bar-bg" aria-hidden="true"><div class="proc-bar proc-bar-pk" style="width:20%"></div></div>
          <span class="proc-pct proc-pct-pk">20%</span>
        </div>
      </div>
    </div>

    <!-- Notifications -->
    <div class="notif-card">
      <div class="tag">Notifications · Glow Accent Borders</div>

      <div class="notif-item nt-t1">
        <div class="notif-icon-wrap" aria-hidden="true">🚀</div>
        <div class="notif-body">
          <div class="notif-title">Deploy Successful</div>
          <div class="notif-msg">v2.4.1 is live on production. 0 errors, 3ms build time.</div>
          <div class="notif-time">2 min ago</div>
        </div>
        <div class="notif-badge nt-t1" aria-hidden="true"></div>
      </div>

      <div class="notif-item nt-vt">
        <div class="notif-icon-wrap" aria-hidden="true">💡</div>
        <div class="notif-body">
          <div class="notif-title">Design review ready</div>
          <div class="notif-msg">Jordan shared "Neumorphic System v3" for your feedback.</div>
          <div class="notif-time">18 min ago</div>
        </div>
        <div class="notif-badge nt-vt" aria-hidden="true"></div>
      </div>

      <div class="notif-item nt-pk">
        <div class="notif-icon-wrap" aria-hidden="true">⚠️</div>
        <div class="notif-body">
          <div class="notif-title">RAM threshold exceeded</div>
          <div class="notif-msg">Process usage above 80%. Consider closing Chrome tabs.</div>
          <div class="notif-time">42 min ago</div>
        </div>
        <div class="notif-badge nt-pk" aria-hidden="true"></div>
      </div>

      <div class="notif-item nt-amb">
        <div class="notif-icon-wrap" aria-hidden="true">📦</div>
        <div class="notif-body">
          <div class="notif-title">Dependency update</div>
          <div class="notif-msg">12 packages ready to update. Run npm audit for details.</div>
          <div class="notif-time">1 hr ago</div>
        </div>
        <div class="notif-badge nt-read" aria-hidden="true"></div>
      </div>
    </div>

    <!-- Right sidebar: clock + glow-tip + music -->
    <div class="side-col">
      <div class="clock-card">
        <div class="clock-face">
          <div class="clock-hr" data-nm-drk-clock>10:42</div>
          <div class="clock-sec-txt" data-nm-drk-sec>:00 AM</div>
        </div>

        <div class="glow-tip">
          <div class="glow-code">
            <span class="comment">/* Dark Neu Formula */</span><br />
            <span class="key">--sd:</span> <span class="val">#0e1425</span>;<br />
            <span class="key">--sl:</span> <span class="val">#263050</span>;<br />
            <span class="key">box-shadow:</span><br />
            &nbsp;&nbsp;<span class="val">10px 10px 26px</span> var(--sd),<br />
            &nbsp;&nbsp;<span class="val">-8px -8px 20px</span> var(--sl);
          </div>
        </div>
      </div>

      <div class="music-card" data-nm-drk-music>
        <div class="music-disc" aria-hidden="true">
          <div class="disc-label"></div>
        </div>
        <div class="music-info">
          <div class="music-title">Neon Dusk</div>
          <div class="music-artist">Phantom Circuit · 2026</div>
        </div>
        <div class="mini-progress" aria-hidden="true"><div class="mini-prog-fill"></div></div>
        <div class="music-times">
          <span>1:48</span><span>4:22</span>
        </div>
        <div class="music-controls">
          <button type="button" class="mc-btn" aria-label="Previous">⏮</button>
          <button type="button" class="mc-play" data-nm-drk-play aria-label="Play / Pause">⏸</button>
          <button type="button" class="mc-btn" aria-label="Next">⏭</button>
        </div>
      </div>
    </div>

    <!-- Bottom metrics grid -->
    <div class="metrics-grid">
      <div class="metric-card">
        <div class="mc-top">
          <div class="mc-icon-wrap" aria-hidden="true">📡</div>
          <span class="mc-trend up">▲ +12%</span>
        </div>
        <div class="mc-big mc-big-t1">1.2<span class="mc-unit">Gb</span></div>
        <div class="mc-name">Network In</div>
        <div class="sparkline" data-nm-drk-spark="0" aria-hidden="true"></div>
      </div>

      <div class="metric-card">
        <div class="mc-top">
          <div class="mc-icon-wrap" aria-hidden="true">⚡</div>
          <span class="mc-trend down">▼ −3%</span>
        </div>
        <div class="mc-big mc-big-amb">84<span class="mc-unit">W</span></div>
        <div class="mc-name">Power Draw</div>
        <div class="sparkline" data-nm-drk-spark="1" aria-hidden="true"></div>
      </div>

      <div class="metric-card">
        <div class="mc-top">
          <div class="mc-icon-wrap" aria-hidden="true">💾</div>
          <span class="mc-trend up">▲ +5%</span>
        </div>
        <div class="mc-big mc-big-vt">512<span class="mc-unit">MB</span></div>
        <div class="mc-name">Disk Write</div>
        <div class="sparkline" data-nm-drk-spark="2" aria-hidden="true"></div>
      </div>

      <div class="metric-card">
        <div class="mc-top">
          <div class="mc-icon-wrap" aria-hidden="true">🌡️</div>
          <span class="mc-trend mc-trend-hot">▲ HIGH</span>
        </div>
        <div class="mc-big mc-big-pk">67<span class="mc-unit">°C</span></div>
        <div class="mc-name">GPU Temp</div>
        <div class="sparkline" data-nm-drk-spark="3" aria-hidden="true"></div>
      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 13 Dark Mode Neumorphism — neon system hub ──────────────── */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

.nm-drk {
  --nm-drk-bg:  #1a2035;
  --nm-drk-sd:  #0e1425;
  --nm-drk-sl:  #263050;
  --nm-drk-ib:  #161d2e;
  --nm-drk-t1:  #00f5d4;
  --nm-drk-t2:  #00c8ac;
  --nm-drk-vt:  #bd93f9;
  --nm-drk-pk:  #ff79c6;
  --nm-drk-amb: #ffb86c;
  --nm-drk-grn: #50fa7b;
  --nm-drk-red: #ff5555;
  --nm-drk-txt: #6d8aae;
  --nm-drk-txt2:#cdd9f0;
  --nm-drk-neu:       10px 10px 26px var(--nm-drk-sd), -8px -8px 20px var(--nm-drk-sl);
  --nm-drk-neu-in:    inset 8px 8px 18px var(--nm-drk-sd), inset -6px -6px 14px var(--nm-drk-sl);
  --nm-drk-neu-sm:    6px 6px 14px var(--nm-drk-sd), -5px -5px 12px var(--nm-drk-sl);
  --nm-drk-neu-sm-in: inset 5px 5px 11px var(--nm-drk-sd), inset -4px -4px 9px var(--nm-drk-sl);

  position: relative;
  width: 100%;
  min-height: 1000px;
  background: var(--nm-drk-bg);
  font-family: 'Exo 2', system-ui, sans-serif;
  color: var(--nm-drk-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-drk *,
.nm-drk *::before,
.nm-drk *::after { box-sizing: border-box; }

.nm-drk .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-drk-bg);
  border-radius: 44px;
  padding: 36px 32px;
  box-shadow: 22px 22px 54px var(--nm-drk-sd), -18px -18px 44px var(--nm-drk-sl);
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  grid-template-rows: auto auto;
  gap: 20px;
}

.nm-drk .tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-drk-txt);
  opacity: 0.5;
  margin-bottom: 14px;
}

/* System monitor */
.nm-drk .sys-card {
  background: var(--nm-drk-bg);
  border-radius: 24px;
  box-shadow: var(--nm-drk-neu);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nm-drk .rings-cluster {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.nm-drk .mon-ring {
  position: relative;
  width: 100px;
  height: 100px;
}
.nm-drk .mon-ring-2 { width: 84px; height: 84px; }
.nm-drk .mon-ring-3 { width: 70px; height: 70px; }
.nm-drk .mon-ring svg { width: 100%; height: 100%; }
.nm-drk .mon-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.nm-drk .mon-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--nm-drk-txt2);
  line-height: 1;
}
.nm-drk .mon-val-t1 { color: var(--nm-drk-t1); text-shadow: 0 0 12px rgba(0, 245, 212, 0.5); }
.nm-drk .mon-val-vt { color: var(--nm-drk-vt); text-shadow: 0 0 10px rgba(189, 147, 249, 0.5); font-size: 13px; }
.nm-drk .mon-val-pk { color: var(--nm-drk-pk); text-shadow: 0 0 10px rgba(255, 121, 198, 0.5); font-size: 12px; }
.nm-drk .mon-sub {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-drk-txt);
  margin-top: 3px;
}

.nm-drk .sys-metrics { display: flex; gap: 8px; }
.nm-drk .metric-chip {
  flex: 1;
  background: var(--nm-drk-ib);
  border-radius: 12px;
  padding: 10px 8px;
  box-shadow: var(--nm-drk-neu-sm-in);
  text-align: center;
}
.nm-drk .mc-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--nm-drk-txt2);
}
.nm-drk .mc-val-t1  { color: var(--nm-drk-t1); }
.nm-drk .mc-val-amb { color: var(--nm-drk-amb); }
.nm-drk .mc-val-vt  { color: var(--nm-drk-vt); }
.nm-drk .mc-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--nm-drk-txt);
  text-transform: uppercase;
  margin-top: 3px;
}

.nm-drk .proc-list { display: flex; flex-direction: column; gap: 6px; }
.nm-drk .proc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nm-drk-ib);
  border-radius: 10px;
  padding: 7px 10px;
  box-shadow: var(--nm-drk-neu-sm-in);
}
.nm-drk .proc-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--nm-drk-txt2);
  flex: 1;
}
.nm-drk .proc-bar-bg {
  flex: 2;
  height: 4px;
  border-radius: 2px;
  background: var(--nm-drk-bg);
  overflow: hidden;
}
.nm-drk .proc-bar { height: 100%; border-radius: 2px; }
.nm-drk .proc-bar-t1 { background: linear-gradient(90deg, var(--nm-drk-t2), var(--nm-drk-t1)); }
.nm-drk .proc-bar-vt { background: linear-gradient(90deg, #8050c8, var(--nm-drk-vt)); }
.nm-drk .proc-bar-pk { background: linear-gradient(90deg, #c050a0, var(--nm-drk-pk)); }
.nm-drk .proc-pct {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--nm-drk-txt);
  width: 30px;
  text-align: right;
}
.nm-drk .proc-pct-t1 { color: var(--nm-drk-t1); }
.nm-drk .proc-pct-vt { color: var(--nm-drk-vt); }
.nm-drk .proc-pct-pk { color: var(--nm-drk-pk); }

/* Notifications */
.nm-drk .notif-card {
  background: var(--nm-drk-bg);
  border-radius: 24px;
  box-shadow: var(--nm-drk-neu);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nm-drk .notif-item {
  background: var(--nm-drk-bg);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: var(--nm-drk-neu-sm);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.nm-drk .notif-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 2px 2px 0;
}
.nm-drk .notif-item.nt-t1::before  { background: var(--nm-drk-t1);  box-shadow: 0 0 8px var(--nm-drk-t1); }
.nm-drk .notif-item.nt-vt::before  { background: var(--nm-drk-vt);  box-shadow: 0 0 8px var(--nm-drk-vt); }
.nm-drk .notif-item.nt-pk::before  { background: var(--nm-drk-pk);  box-shadow: 0 0 8px var(--nm-drk-pk); }
.nm-drk .notif-item.nt-amb::before { background: var(--nm-drk-amb); box-shadow: 0 0 8px var(--nm-drk-amb); }
.nm-drk .notif-item:hover {
  box-shadow: 8px 8px 18px var(--nm-drk-sd), -8px -8px 18px var(--nm-drk-sl);
  transform: translateX(2px);
}
.nm-drk .notif-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--nm-drk-bg);
  box-shadow: var(--nm-drk-neu-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.nm-drk .notif-body { flex: 1; }
.nm-drk .notif-title { font-size: 11px; font-weight: 700; color: var(--nm-drk-txt2); }
.nm-drk .notif-msg { font-size: 10px; color: var(--nm-drk-txt); margin-top: 3px; line-height: 1.4; }
.nm-drk .notif-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--nm-drk-txt);
  margin-top: 4px;
}
.nm-drk .notif-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.nm-drk .notif-badge.nt-t1 { background: var(--nm-drk-t1); box-shadow: 0 0 6px var(--nm-drk-t1); }
.nm-drk .notif-badge.nt-vt { background: var(--nm-drk-vt); box-shadow: 0 0 6px var(--nm-drk-vt); }
.nm-drk .notif-badge.nt-pk { background: var(--nm-drk-pk); box-shadow: 0 0 6px var(--nm-drk-pk); }
.nm-drk .notif-badge.nt-read { background: var(--nm-drk-txt); opacity: 0.3; }

/* Right sidebar */
.nm-drk .side-col {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nm-drk .clock-card {
  background: var(--nm-drk-bg);
  border-radius: 22px;
  box-shadow: var(--nm-drk-neu);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.nm-drk .clock-face {
  background: var(--nm-drk-ib);
  border-radius: 14px;
  box-shadow: var(--nm-drk-neu-sm-in);
  padding: 12px 16px;
  text-align: center;
  width: 100%;
}
.nm-drk .clock-hr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 30px;
  font-weight: 700;
  color: var(--nm-drk-t1);
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(0, 245, 212, 0.4);
}
.nm-drk .clock-sec-txt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--nm-drk-txt);
  letter-spacing: 1px;
  margin-top: 3px;
}

.nm-drk .glow-tip {
  background: var(--nm-drk-ib);
  border-radius: 12px;
  box-shadow: var(--nm-drk-neu-sm-in);
  padding: 10px;
  width: 100%;
}
.nm-drk .glow-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px;
  line-height: 1.8;
  color: var(--nm-drk-txt);
}
.nm-drk .glow-code .key { color: var(--nm-drk-vt); }
.nm-drk .glow-code .val { color: var(--nm-drk-t1); }
.nm-drk .glow-code .comment { color: var(--nm-drk-txt); opacity: 0.5; }

.nm-drk .music-card {
  background: var(--nm-drk-bg);
  border-radius: 22px;
  box-shadow: var(--nm-drk-neu);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.nm-drk .music-disc {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--nm-drk-bg);
  box-shadow: var(--nm-drk-neu-sm);
  position: relative;
  animation: nm-drk-spin 6s linear infinite;
}
@keyframes nm-drk-spin { to { transform: rotate(360deg); } }
.nm-drk .music-card.paused .music-disc { animation-play-state: paused; }
.nm-drk .music-disc::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a1e3a 0%, #1a1428 50%, #0e0a18 100%);
  box-shadow: var(--nm-drk-neu-sm-in);
}
.nm-drk .music-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    transparent 0%, transparent 5px,
    rgba(189, 147, 249, 0.06) 5px, rgba(189, 147, 249, 0.06) 6px);
}
.nm-drk .disc-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nm-drk-bg);
  box-shadow: var(--nm-drk-neu-sm);
  z-index: 2;
}
.nm-drk .music-info { text-align: center; }
.nm-drk .music-title { font-size: 12px; font-weight: 700; color: var(--nm-drk-txt2); }
.nm-drk .music-artist { font-size: 10px; color: var(--nm-drk-txt); margin-top: 2px; }

.nm-drk .mini-progress {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--nm-drk-ib);
  box-shadow: var(--nm-drk-neu-sm-in);
}
.nm-drk .mini-prog-fill {
  height: 100%;
  width: 42%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nm-drk-vt), var(--nm-drk-t1));
  box-shadow: 0 0 6px rgba(0, 245, 212, 0.3);
}
.nm-drk .music-times {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--nm-drk-txt);
}

.nm-drk .music-controls { display: flex; gap: 10px; align-items: center; }
.nm-drk .mc-btn {
  width: 32px;
  height: 32px;
  background: var(--nm-drk-bg);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--nm-drk-txt2);
  box-shadow: var(--nm-drk-neu-sm);
  transition: all 0.15s;
}
.nm-drk .mc-btn:active { box-shadow: var(--nm-drk-neu-sm-in); }
.nm-drk .mc-play {
  width: 42px;
  height: 42px;
  font-size: 16px;
  background: linear-gradient(145deg, var(--nm-drk-vt), #8050c8);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 6px 6px 14px rgba(140, 80, 200, 0.4), -4px -4px 10px var(--nm-drk-sl);
}
.nm-drk .mc-play:active { box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.3); }

/* Metrics grid */
.nm-drk .metrics-grid {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nm-drk .metric-card {
  background: var(--nm-drk-bg);
  border-radius: 20px;
  box-shadow: var(--nm-drk-neu-sm);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.nm-drk .metric-card:hover {
  box-shadow: 8px 8px 20px var(--nm-drk-sd), -8px -8px 20px var(--nm-drk-sl);
  transform: translateY(-1px);
}
.nm-drk .mc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.nm-drk .mc-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--nm-drk-bg);
  box-shadow: var(--nm-drk-neu-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.nm-drk .mc-trend {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}
.nm-drk .mc-trend.up { color: var(--nm-drk-grn); }
.nm-drk .mc-trend.down { color: var(--nm-drk-red); }
.nm-drk .mc-trend-hot { color: var(--nm-drk-pk); }

.nm-drk .mc-big {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--nm-drk-txt2);
  line-height: 1;
  letter-spacing: -1px;
}
.nm-drk .mc-big-t1  { color: var(--nm-drk-t1);  text-shadow: 0 0 14px rgba(0, 245, 212, 0.3); }
.nm-drk .mc-big-amb { color: var(--nm-drk-amb); text-shadow: 0 0 14px rgba(255, 184, 108, 0.3); }
.nm-drk .mc-big-vt  { color: var(--nm-drk-vt);  text-shadow: 0 0 14px rgba(189, 147, 249, 0.3); }
.nm-drk .mc-big-pk  { color: var(--nm-drk-pk);  text-shadow: 0 0 14px rgba(255, 121, 198, 0.3); }
.nm-drk .mc-unit { font-size: 12px; color: var(--nm-drk-txt); }
.nm-drk .mc-name {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nm-drk-txt);
}

.nm-drk .sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}
.nm-drk .spark-bar {
  flex: 1;
  border-radius: 2px;
  min-height: 3px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.nm-drk .metric-card:hover .spark-bar { opacity: 1; }
.nm-drk .spark-bar.last { opacity: 1; }

@media (max-width: 880px) {
  .nm-drk .card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .nm-drk .side-col,
  .nm-drk .metrics-grid { grid-row: auto; grid-column: auto; }
  .nm-drk .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .nm-drk .music-disc { animation: none; }
  .nm-drk .notif-item,
  .nm-drk .metric-card { transition: none; }
}
```

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

  // Clock
  const clockHr = root.querySelector('[data-nm-drk-clock]');
  const clockSec = root.querySelector('[data-nm-drk-sec]');
  function updateClock() {
    const now = new Date();
    const h = now.getHours() % 12 || 12;
    const m = String(now.getMinutes()).padStart(2, '0');
    const s = String(now.getSeconds()).padStart(2, '0');
    const ap = now.getHours() >= 12 ? 'PM' : 'AM';
    if (clockHr) clockHr.textContent = h + ':' + m;
    if (clockSec) clockSec.textContent = ':' + s + ' ' + ap;
  }
  updateClock();
  setInterval(updateClock, 1000);

  // Music toggle
  let playing = true;
  const musicCard = root.querySelector('[data-nm-drk-music]');
  const playBtn = root.querySelector('[data-nm-drk-play]');
  if (playBtn) playBtn.addEventListener('click', () => {
    playing = !playing;
    musicCard?.classList.toggle('paused', !playing);
    playBtn.textContent = playing ? '⏸' : '▶';
  });

  // Sparklines
  const sparkColors = ['#00f5d4', '#ffb86c', '#bd93f9', '#ff79c6'];
  const sparkRgb    = ['0,245,212', '255,184,108', '189,147,249', '255,121,198'];
  const sparkData = [
    [14, 22, 18, 30, 26, 38, 28, 40, 34, 42, 38, 44],
    [20, 28, 24, 20, 32, 22, 30, 26, 28, 22, 24, 20],
    [8, 14, 12, 20, 16, 24, 20, 28, 22, 26, 24, 28],
    [18, 22, 24, 28, 32, 30, 34, 38, 42, 44, 48, 52],
  ];
  root.querySelectorAll('[data-nm-drk-spark]').forEach(el => {
    const idx = parseInt(el.dataset.nmDrkSpark, 10);
    const data = sparkData[idx];
    const color = sparkColors[idx];
    const rgb = sparkRgb[idx];
    const max = Math.max(...data);
    data.forEach((v, i) => {
      const bar = document.createElement('div');
      bar.className = 'spark-bar' + (i === data.length - 1 ? ' last' : '');
      bar.style.height = Math.max(3, v / max * 26) + 'px';
      bar.style.background = color;
      bar.style.boxShadow = '0 0 4px rgba(' + rgb + ',0.5)';
      el.appendChild(bar);
    });
  });

  // Animate system rings — gentle ebb-and-flow
  setInterval(() => {
    root.querySelectorAll('[data-nm-drk-ring]').forEach(arc => {
      const totalDash = parseInt(arc.getAttribute('stroke-dasharray').split(' ')[1], 10);
      const pct = 0.35 + Math.random() * 0.5;
      const filled = Math.round(pct * (totalDash * 0.9));
      arc.setAttribute('stroke-dasharray', filled + ' ' + totalDash);
    });
  }, 3000);
})();
```

---
## 15 CSS Number Counter Animations

URL: https://codefronts.com/motion/css-number-counter-animations/
Description: 15 animated number counter examples — count-up stats, flip-digit play counters, fundraising arc meters, product launch countdowns, CO₂ impact dashboards, uptime SLA monitors, stock tickers, fitness rings and full design-language KPI dashboards. Tiny requestAnimationFrame easing in pure JS, the chrome around each counter in pure CSS. Copy, paste, ship.
Demo count: 15

### 01. Fundraising Arc Meter

**Type:** CSS + JS
**Description:** Warm dark card with a half-circle arc that fills from left to right as the raised amount counts up. Fraunces serif numerals, amber gradient stroke, donor avatar stack. Built for nonprofit campaign pages and crowdfunding widgets.

**HTML:**
```html
<div class="cnc-fund">
  <div class="cnc-fund-card">
    <div class="cnc-fund-eyebrow">Reforestation Fund · 2026</div>
    <div class="cnc-fund-arc-wrap">
      <svg width="240" height="130" viewBox="0 0 240 130">
        <defs>
          <linearGradient id="cnc-fund-arcGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#7a3f0a"/>
            <stop offset="100%" stop-color="#ffb347"/>
          </linearGradient>
        </defs>
        <path class="cnc-fund-arc-bg" d="M 20,130 A 100,100 0 0,1 220,130"/>
        <path class="cnc-fund-arc-fill" d="M 20,130 A 100,100 0 0,1 220,130"/>
      </svg>
      <div class="cnc-fund-arc-center">
        <div class="cnc-fund-big-num"><sup>$</sup><span class="cnc-num" data-target="390" data-format="round">0</span></div>
      </div>
    </div>
    <div class="cnc-fund-pct-label"><span class="cnc-num" data-target="78" data-format="round">0</span>% of goal reached</div>
    <div class="cnc-fund-divider"></div>
    <div class="cnc-fund-goal-row">
      <div class="cnc-fund-goal-col">
        <span class="cnc-fund-goal-label">Raised</span>
        <span class="cnc-fund-goal-val">$<span class="cnc-num" data-target="390" data-format="round">0</span>K</span>
      </div>
      <div class="cnc-fund-goal-col cnc-fund-goal-col-right">
        <span class="cnc-fund-goal-label">Goal</span>
        <span class="cnc-fund-goal-val">$500K</span>
      </div>
    </div>
    <div class="cnc-fund-donors">
      <div class="cnc-fund-avatar-stack">
        <div class="cnc-fund-av">🌿</div><div class="cnc-fund-av">🌱</div>
        <div class="cnc-fund-av">🍃</div><div class="cnc-fund-av">🌳</div>
      </div>
      <div class="cnc-fund-donors-text"><strong>2,841 donors</strong> have contributed<br>this month alone</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-fund { display: grid; place-items: center; padding: 32px 16px; background: #f2ede6; font-family: 'Epilogue', sans-serif; }
.cnc-fund *, .cnc-fund *::before, .cnc-fund *::after { box-sizing: border-box; }
.cnc-fund-card {
  width: 360px;
  background: #1c1208;
  border-radius: 28px;
  padding: 48px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cnc-fund-card::before {
  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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}
.cnc-fund-eyebrow { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: #c8893a; margin-bottom: 36px; font-weight: 400; }
.cnc-fund-arc-wrap { position: relative; width: 240px; height: 130px; margin-bottom: 12px; }
.cnc-fund-arc-wrap svg { overflow: visible; }
.cnc-fund-arc-bg { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 12; stroke-linecap: round; }
.cnc-fund-arc-fill { fill: none; stroke: url(#cnc-fund-arcGrad); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 534; stroke-dashoffset: 534; animation: cnc-fund-arcDraw 2.2s cubic-bezier(0.22,1,0.36,1) forwards 0.4s; filter: drop-shadow(0 0 12px rgba(255,160,50,0.6)); }
@keyframes cnc-fund-arcDraw { to { stroke-dashoffset: 117; } }
.cnc-fund-arc-center { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.cnc-fund-big-num { font-family: 'Fraunces', serif; font-size: 64px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -2px; }
.cnc-fund-big-num sup { font-size: 0.35em; font-weight: 300; vertical-align: super; letter-spacing: 0; color: #c8893a; }
.cnc-fund-pct-label { font-size: 11px; color: rgba(255,255,255,0.3); letter-spacing: 3px; text-transform: uppercase; margin-top: 6px; }
.cnc-fund-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.08); margin: 32px 0 24px; }
.cnc-fund-goal-row { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.cnc-fund-goal-col { display: flex; flex-direction: column; gap: 4px; }
.cnc-fund-goal-col-right { text-align: right; }
.cnc-fund-goal-label { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.25); }
.cnc-fund-goal-val { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 300; font-style: italic; color: #fff; letter-spacing: -0.5px; }
.cnc-fund-donors { margin-top: 28px; display: flex; align-items: center; gap: 12px; }
.cnc-fund-avatar-stack { display: flex; }
.cnc-fund-av { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #1c1208; margin-left: -8px; font-size: 13px; display: flex; align-items: center; justify-content: center; background: #2e1e0a; }
.cnc-fund-av:first-child { margin-left: 0; }
.cnc-fund-donors-text { font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.4; }
.cnc-fund-donors-text strong { color: #c8893a; font-weight: 400; }
.cnc-fund-card > * { opacity: 0; animation: cnc-fund-up 0.6s ease forwards; }
.cnc-fund-eyebrow { animation-delay: 0.0s; }
.cnc-fund-arc-wrap { animation-delay: 0.1s; }
.cnc-fund-pct-label { animation-delay: 0.2s; }
.cnc-fund-divider { animation-delay: 0.3s; }
.cnc-fund-goal-row { animation-delay: 0.4s; }
.cnc-fund-donors { animation-delay: 0.5s; }
@keyframes cnc-fund-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-fund-card > *, .cnc-fund-arc-fill { animation: none; opacity: 1; stroke-dashoffset: 117; }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-fund');
  if (!root) return;
  function easeOut(t) { return 1 - Math.pow(1 - t, 4); }
  root.querySelectorAll('.cnc-num[data-target]').forEach(function (el) {
    var target = parseFloat(el.dataset.target);
    var duration = 2200;
    var start = performance.now();
    function tick(now) {
      var t = Math.min((now - start) / duration, 1);
      var v = easeOut(t) * target;
      el.textContent = Math.round(v).toLocaleString();
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  });
})();
```

### 02. Podcast Flip Counter

**Type:** CSS + JS
**Description:** Six mechanical digit tiles that flip individually as the play count climbs to 847,312. Animated red soundwave bars pulse below, a live listener badge blinks at the bottom. Drop-in for podcast show pages and media play milestones.

**HTML:**
```html
<div class="cnc-pod">
  <div class="cnc-pod-block">
    <div class="cnc-pod-show-name">The Deep Dive · Episode 312</div>
    <div class="cnc-pod-flip-row">
      <div class="cnc-pod-flip-digit" data-pos="0"><span class="cnc-pod-digit-val">0</span></div>
      <div class="cnc-pod-flip-digit" data-pos="1"><span class="cnc-pod-digit-val">0</span></div>
      <div class="cnc-pod-flip-digit" data-pos="2"><span class="cnc-pod-digit-val">0</span></div>
      <span class="cnc-pod-sep">,</span>
      <div class="cnc-pod-flip-digit" data-pos="3"><span class="cnc-pod-digit-val">0</span></div>
      <div class="cnc-pod-flip-digit" data-pos="4"><span class="cnc-pod-digit-val">0</span></div>
      <div class="cnc-pod-flip-digit" data-pos="5"><span class="cnc-pod-digit-val">0</span></div>
    </div>
    <div class="cnc-pod-unit-label">Total Plays · All Time</div>
    <div class="cnc-pod-wave">
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
    </div>
    <div class="cnc-pod-milestone">● LIVE · 312 listening now</div>
  </div>
</div>
```

**CSS:**
```css
.cnc-pod { display: grid; place-items: center; padding: 48px 16px; background: #0e0e0e; font-family: 'Syne Mono', monospace; }
.cnc-pod *, .cnc-pod *::before, .cnc-pod *::after { box-sizing: border-box; }
.cnc-pod-block { width: 560px; text-align: center; padding: 24px; font-family: 'Syne Mono', monospace; opacity: 0; animation: cnc-pod-fadeIn 0.5s ease 0.1s forwards; }
.cnc-pod-show-name { font-family: 'Syne', sans-serif; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: #555; margin-bottom: 52px; font-weight: 700; }
.cnc-pod-flip-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.cnc-pod-flip-digit { width: 72px; height: 96px; background: #171717; border-radius: 10px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #000, 0 0 0 1px rgba(255,255,255,0.04); }
.cnc-pod-flip-digit::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.6); z-index: 10; }
.cnc-pod-digit-val { font-family: 'Syne', sans-serif; font-size: 72px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -2px; user-select: none; }
.cnc-pod-flip-digit.is-flip .cnc-pod-digit-val { animation: cnc-pod-flipNum 0.22s ease-in-out; }
@keyframes cnc-pod-flipNum { 0% { transform: scaleY(1); opacity: 1; } 45% { transform: scaleY(0); opacity: 0; } 55% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
.cnc-pod-sep { font-family: 'Syne', sans-serif; font-size: 48px; font-weight: 800; color: #2a2a2a; line-height: 96px; user-select: none; }
.cnc-pod-unit-label { font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: #333; margin-top: 28px; }
.cnc-pod-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; margin: 36px auto 0; }
.cnc-pod-wave-bar { width: 3px; border-radius: 2px; background: #ff3b3b; animation: cnc-pod-wave 1.1s ease-in-out infinite; opacity: 0.7; }
.cnc-pod-wave-bar:nth-child(1) { animation-delay: 0.0s; height: 8px; }
.cnc-pod-wave-bar:nth-child(2) { animation-delay: 0.1s; height: 18px; }
.cnc-pod-wave-bar:nth-child(3) { animation-delay: 0.2s; height: 28px; }
.cnc-pod-wave-bar:nth-child(4) { animation-delay: 0.3s; height: 20px; }
.cnc-pod-wave-bar:nth-child(5) { animation-delay: 0.4s; height: 14px; }
.cnc-pod-wave-bar:nth-child(6) { animation-delay: 0.5s; height: 24px; }
.cnc-pod-wave-bar:nth-child(7) { animation-delay: 0.6s; height: 32px; }
.cnc-pod-wave-bar:nth-child(8) { animation-delay: 0.7s; height: 22px; }
.cnc-pod-wave-bar:nth-child(9) { animation-delay: 0.8s; height: 16px; }
.cnc-pod-wave-bar:nth-child(10) { animation-delay: 0.9s; height: 26px; }
.cnc-pod-wave-bar:nth-child(11) { animation-delay: 1.0s; height: 12px; }
.cnc-pod-wave-bar:nth-child(12) { animation-delay: 0.55s; height: 20px; }
.cnc-pod-wave-bar:nth-child(13) { animation-delay: 0.35s; height: 28px; }
.cnc-pod-wave-bar:nth-child(14) { animation-delay: 0.15s; height: 14px; }
.cnc-pod-wave-bar:nth-child(15) { animation-delay: 0.75s; height: 8px; }
@keyframes cnc-pod-wave { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
.cnc-pod-milestone { margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255,59,59,0.08); border: 1px solid rgba(255,59,59,0.18); border-radius: 100px; padding: 8px 20px; font-size: 11px; color: #ff3b3b; letter-spacing: 2px; }
.cnc-pod-milestone::before { content: ''; width: 6px; height: 6px; background: #ff3b3b; border-radius: 50%; box-shadow: 0 0 8px #ff3b3b; animation: cnc-pod-blip 1s ease-in-out infinite; }
@keyframes cnc-pod-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes cnc-pod-fadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cnc-pod-block, .cnc-pod-wave-bar, .cnc-pod-milestone::before { animation: none; opacity: 1; }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-pod');
  if (!root) return;
  var TARGET = 847312, DURATION = 2600;
  var digits = root.querySelectorAll('.cnc-pod-flip-digit');
  function setDigits(num) {
    var str = String(num).padStart(6, '0');
    digits.forEach(function (el, i) {
      var span = el.querySelector('.cnc-pod-digit-val');
      var newChar = str[i];
      if (span.textContent !== newChar) {
        span.textContent = newChar;
        el.classList.remove('is-flip');
        void el.offsetWidth;
        el.classList.add('is-flip');
      }
    });
  }
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  setTimeout(function () {
    var start = performance.now();
    function tick(now) {
      var t = Math.min((now - start) / DURATION, 1);
      setDigits(Math.round(ease(t) * TARGET));
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 500);
})();
```

### 03. Product Launch Countdown

**Type:** CSS + JS
**Description:** Ultra-clean white layout with massive Rajdhani numerals ticking down days:hours:minutes:seconds in real time. Colons blink, minimal diagonal background shapes add depth. Drop-in for pre-launch landing pages and feature release announcements.

**HTML:**
```html
<div class="cnc-cd">
  <div class="cnc-cd-scene">
    <div class="cnc-cd-inner">
      <div class="cnc-cd-pre-label">Something new is coming</div>
      <div class="cnc-cd-units">
        <div class="cnc-cd-unit"><div class="cnc-cd-num-block" data-cd="d">00</div><div class="cnc-cd-unit-label">Days</div></div>
        <div class="cnc-cd-colon">:</div>
        <div class="cnc-cd-unit"><div class="cnc-cd-num-block" data-cd="h">00</div><div class="cnc-cd-unit-label">Hours</div></div>
        <div class="cnc-cd-colon">:</div>
        <div class="cnc-cd-unit"><div class="cnc-cd-num-block" data-cd="m">00</div><div class="cnc-cd-unit-label">Min</div></div>
        <div class="cnc-cd-colon">:</div>
        <div class="cnc-cd-unit"><div class="cnc-cd-num-block" data-cd="s">00</div><div class="cnc-cd-unit-label">Sec</div></div>
      </div>
      <div class="cnc-cd-tagline">Until <strong>Forma Studio 3.0</strong> is live for everyone.</div>
      <button class="cnc-cd-btn" type="button">Notify Me</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-cd { display: grid; place-items: center; padding: 32px 16px; background: #fff; overflow: hidden; font-family: 'Quicksand', sans-serif; }
.cnc-cd *, .cnc-cd *::before, .cnc-cd *::after { box-sizing: border-box; }
.cnc-cd-scene { position: relative; text-align: center; padding: 60px 40px; width: 560px; }
.cnc-cd-scene::before { content: ''; position: absolute; top: -40px; right: -80px; width: 320px; height: 320px; background: #f0f0f0; transform: rotate(25deg); border-radius: 40px; z-index: 0; }
.cnc-cd-scene::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 260px; height: 260px; background: #f6f6f6; transform: rotate(15deg); border-radius: 40px; z-index: 0; }
.cnc-cd-inner { position: relative; z-index: 1; }
.cnc-cd-pre-label { font-size: 10px; letter-spacing: 6px; text-transform: uppercase; color: #bbb; font-weight: 400; margin-bottom: 48px; opacity: 0; animation: cnc-cd-rise 0.5s ease 0.1s forwards; }
.cnc-cd-units { display: flex; justify-content: center; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
.cnc-cd-unit { display: flex; flex-direction: column; align-items: center; opacity: 0; animation: cnc-cd-rise 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }
.cnc-cd-unit:nth-child(1) { animation-delay: 0.2s; }
.cnc-cd-unit:nth-child(2) { animation-delay: 0.3s; }
.cnc-cd-unit:nth-child(3) { animation-delay: 0.4s; }
.cnc-cd-unit:nth-child(4) { animation-delay: 0.5s; }
.cnc-cd-num-block { font-family: 'Rajdhani', sans-serif; font-size: clamp(72px, 14vw, 110px); font-weight: 700; color: #111; line-height: 0.9; letter-spacing: -4px; min-width: 2ch; text-align: center; position: relative; }
.cnc-cd-num-block::after { content: ''; position: absolute; bottom: -6px; left: 10%; right: 10%; height: 2px; background: #111; transform: scaleX(0); transform-origin: left; animation: cnc-cd-lineIn 0.5s ease forwards; }
.cnc-cd-unit:nth-child(1) .cnc-cd-num-block::after { animation-delay: 0.6s; }
.cnc-cd-unit:nth-child(2) .cnc-cd-num-block::after { animation-delay: 0.75s; }
.cnc-cd-unit:nth-child(3) .cnc-cd-num-block::after { animation-delay: 0.9s; }
.cnc-cd-unit:nth-child(4) .cnc-cd-num-block::after { animation-delay: 1.05s; }
@keyframes cnc-cd-lineIn { to { transform: scaleX(1); } }
.cnc-cd-colon { font-family: 'Rajdhani', sans-serif; font-size: clamp(48px, 10vw, 80px); font-weight: 300; color: #ddd; line-height: 0.9; padding-top: 4px; opacity: 0; animation: cnc-cd-rise 0.4s ease 0.25s forwards, cnc-cd-blink 1s step-end infinite 1.5s; }
@keyframes cnc-cd-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
.cnc-cd-unit-label { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: #ccc; font-weight: 400; margin-top: 18px; }
.cnc-cd-tagline { margin-top: 52px; font-size: 13px; color: #aaa; font-weight: 300; letter-spacing: 0.5px; opacity: 0; animation: cnc-cd-rise 0.6s ease 0.8s forwards; }
.cnc-cd-tagline strong { color: #111; font-weight: 600; }
.cnc-cd-btn { display: inline-block; margin-top: 32px; padding: 14px 36px; background: #111; color: #fff; font-family: 'Quicksand', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; border: none; cursor: pointer; border-radius: 0; opacity: 0; animation: cnc-cd-rise 0.6s ease 1.0s forwards; position: relative; overflow: hidden; transition: background 0.2s; }
.cnc-cd-btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.1); transform: translateX(-100%); transition: transform 0.3s ease; }
.cnc-cd-btn:hover::after { transform: translateX(0); }
@keyframes cnc-cd-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-cd-pre-label, .cnc-cd-unit, .cnc-cd-colon, .cnc-cd-tagline, .cnc-cd-btn, .cnc-cd-num-block::after { animation: none; opacity: 1; transform: none; }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-cd');
  if (!root) return;
  var target = new Date();
  target.setDate(target.getDate() + 14);
  target.setHours(target.getHours() + 6);
  target.setMinutes(target.getMinutes() + 42);
  function pad(n) { return String(Math.max(0, n)).padStart(2, '0'); }
  var slots = {
    d: root.querySelector('[data-cd="d"]'),
    h: root.querySelector('[data-cd="h"]'),
    m: root.querySelector('[data-cd="m"]'),
    s: root.querySelector('[data-cd="s"]'),
  };
  function update() {
    var diff = Math.max(0, target - Date.now());
    slots.d.textContent = pad(Math.floor(diff / 86400000));
    slots.h.textContent = pad(Math.floor((diff % 86400000) / 3600000));
    slots.m.textContent = pad(Math.floor((diff % 3600000) / 60000));
    slots.s.textContent = pad(Math.floor((diff % 60000) / 1000));
  }
  update();
  setInterval(update, 1000);
})();
```

### 04. Community Milestone

**Type:** CSS + JS
**Description:** Giant Anton display number counting to 250K with a faint decorative "+" rotating slowly behind it. A scrolling ticker shows new member joins, and a live counter increments randomly to show real-time growth. Built for SaaS landing pages and community social proof.

**HTML:**
```html
<div class="cnc-com">
  <div class="cnc-com-block">
    <div class="cnc-com-pill">Community Milestone</div>
    <div class="cnc-com-counter-wrap">
      <div class="cnc-com-deco">+</div>
      <span class="cnc-com-counter-val"><span class="cnc-com-val" data-target="250">0</span><span class="cnc-com-counter-suffix">K</span></span>
    </div>
    <div class="cnc-com-tagline"><em>makers, builders &amp; dreamers</em><br>have joined the Forma community.</div>
    <div class="cnc-com-ticker">
      <div class="cnc-com-ticker-inner">
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">🧑</div><div class="cnc-com-tick-text"><strong>@lucasdev</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👤</div><div class="cnc-com-tick-text"><strong>@yuki_m</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👩</div><div class="cnc-com-tick-text"><strong>@hannadesign</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">🧑</div><div class="cnc-com-tick-text"><strong>@tanyabuild</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👨</div><div class="cnc-com-tick-text"><strong>@arjun.io</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👩</div><div class="cnc-com-tick-text"><strong>@camille_ux</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">🧑</div><div class="cnc-com-tick-text"><strong>@lucasdev</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👤</div><div class="cnc-com-tick-text"><strong>@yuki_m</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👩</div><div class="cnc-com-tick-text"><strong>@hannadesign</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">🧑</div><div class="cnc-com-tick-text"><strong>@tanyabuild</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👨</div><div class="cnc-com-tick-text"><strong>@arjun.io</strong> just joined</div></div>
        <div class="cnc-com-tick-item"><div class="cnc-com-tick-av">👩</div><div class="cnc-com-tick-text"><strong>@camille_ux</strong> just joined</div></div>
      </div>
    </div>
    <div class="cnc-com-live-count">
      <div class="cnc-com-live-dot"></div>
      <span class="cnc-com-live-text"><strong>+<span class="cnc-com-live">0</span> this week</strong> · growing fast</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-com { display: grid; place-items: center; padding: 32px 16px; background: #f9f4ee; font-family: 'DM Sans', sans-serif; }
.cnc-com *, .cnc-com *::before, .cnc-com *::after { box-sizing: border-box; }
.cnc-com-block { width: 480px; display: flex; flex-direction: column; align-items: center; padding: 32px; }
.cnc-com-pill { background: #111; color: #f9f4ee; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; font-weight: 400; padding: 8px 20px; border-radius: 100px; margin-bottom: 28px; opacity: 0; animation: cnc-com-drop 0.5s ease 0.0s forwards; }
.cnc-com-counter-wrap { position: relative; text-align: center; opacity: 0; animation: cnc-com-drop 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
.cnc-com-counter-val { font-family: 'Anton', sans-serif; font-size: clamp(96px, 20vw, 160px); line-height: 1; letter-spacing: -4px; color: #111; display: block; position: relative; z-index: 1; }
.cnc-com-counter-suffix { font-family: 'Anton', sans-serif; font-size: 0.45em; color: #d63f00; letter-spacing: -1px; vertical-align: baseline; }
.cnc-com-deco { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Anton', sans-serif; font-size: 260px; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.05); pointer-events: none; user-select: none; line-height: 1; animation: cnc-com-spin 60s linear infinite; z-index: 0; }
@keyframes cnc-com-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cnc-com-tagline { font-size: 15px; font-weight: 300; color: #888; text-align: center; margin-top: 12px; line-height: 1.6; max-width: 320px; opacity: 0; animation: cnc-com-drop 0.6s ease 0.3s forwards; }
.cnc-com-tagline em { font-style: italic; color: #111; }
.cnc-com-ticker { margin-top: 40px; width: 100%; overflow: hidden; opacity: 0; animation: cnc-com-drop 0.5s ease 0.5s forwards; }
.cnc-com-ticker-inner { display: flex; gap: 0; animation: cnc-com-tickerScroll 16s linear infinite; width: max-content; }
@keyframes cnc-com-tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cnc-com-tick-item { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-left: 1px solid rgba(0,0,0,0.08); white-space: nowrap; }
.cnc-com-tick-av { width: 24px; height: 24px; border-radius: 50%; background: #ddd; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.cnc-com-tick-text { font-size: 12px; color: #888; }
.cnc-com-tick-text strong { color: #111; font-weight: 400; }
.cnc-com-live-count { margin-top: 24px; display: flex; align-items: center; gap: 8px; opacity: 0; animation: cnc-com-drop 0.5s ease 0.6s forwards; }
.cnc-com-live-dot { width: 7px; height: 7px; background: #d63f00; border-radius: 50%; box-shadow: 0 0 0 0 rgba(214,63,0,0.4); animation: cnc-com-ripple 1.5s ease-out infinite; }
@keyframes cnc-com-ripple { 0% { box-shadow: 0 0 0 0 rgba(214,63,0,0.4); } 70% { box-shadow: 0 0 0 8px rgba(214,63,0,0); } 100% { box-shadow: 0 0 0 0 rgba(214,63,0,0); } }
.cnc-com-live-text { font-size: 12px; color: #aaa; }
.cnc-com-live-text strong { color: #d63f00; font-weight: 400; }
@keyframes cnc-com-drop { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-com-pill, .cnc-com-counter-wrap, .cnc-com-tagline, .cnc-com-ticker, .cnc-com-live-count, .cnc-com-deco, .cnc-com-ticker-inner, .cnc-com-live-dot { animation: none; opacity: 1; transform: none; }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-com');
  if (!root) return;
  function ease(t) { return 1 - Math.pow(1 - t, 4); }
  var valEl = root.querySelector('.cnc-com-val');
  setTimeout(function () {
    var start = performance.now(), dur = 2000, target = parseFloat(valEl.dataset.target) || 250;
    function tick(now) {
      var t = Math.min((now - start) / dur, 1), v = ease(t) * target;
      valEl.textContent = v < 100 ? v.toFixed(1) : Math.round(v);
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 300);
  var liveEl = root.querySelector('.cnc-com-live');
  var liveCount = 0;
  function tickLive() {
    liveCount += Math.floor(Math.random() * 3) + 1;
    liveEl.textContent = liveCount.toLocaleString();
    setTimeout(tickLive, Math.random() * 1400 + 400);
  }
  setTimeout(tickLive, 1200);
})();
```

### 05. CO₂ Sustainability Impact

**Type:** CSS + JS
**Description:** Deep forest-green animated mesh gradient background with glowing blobs. A single tonnes counter animates up while equivalent trees, flights and homes calculate live below. A progress strip shows annual target completion. Built for climate tech and ESG reporting.

**HTML:**
```html
<div class="cnc-co2">
  <div class="cnc-co2-bg"><div class="cnc-co2-blob cnc-co2-blob1"></div><div class="cnc-co2-blob cnc-co2-blob2"></div><div class="cnc-co2-blob cnc-co2-blob3"></div></div>
  <div class="cnc-co2-block">
    <div class="cnc-co2-label-top">Environmental Impact</div>
    <div class="cnc-co2-icon-ring">
      <svg width="88" height="88" viewBox="0 0 88 88" fill="none">
        <circle cx="44" cy="44" r="40" stroke="rgba(79,192,102,0.25)" stroke-width="1" stroke-dasharray="6 8" stroke-linecap="round"/>
      </svg>
      🌿
    </div>
    <div class="cnc-co2-count-wrap">
      <div class="cnc-co2-count-main"><span class="cnc-num" data-target="12480" data-format="round">0</span></div>
      <span class="cnc-co2-count-unit">tonnes CO₂ saved</span>
    </div>
    <div class="cnc-co2-count-desc">by our fleet this year, equivalent to planting a small forest.</div>
    <div class="cnc-co2-strip">
      <div class="cnc-co2-strip-head"><span>Annual Target</span><span><span class="cnc-num" data-target="68" data-format="round">0</span>% Complete</span></div>
      <div class="cnc-co2-strip-track"><div class="cnc-co2-strip-fill"></div></div>
    </div>
    <div class="cnc-co2-equiv">
      <div class="cnc-co2-eq-item"><div class="cnc-co2-eq-icon">🌳</div><div class="cnc-co2-eq-val"><span class="cnc-num" data-target="499" data-format="round">0</span></div><div class="cnc-co2-eq-label">Trees equiv.</div></div>
      <div class="cnc-co2-eq-item"><div class="cnc-co2-eq-icon">✈️</div><div class="cnc-co2-eq-val"><span class="cnc-num" data-target="4992" data-format="round">0</span></div><div class="cnc-co2-eq-label">Flights offset</div></div>
      <div class="cnc-co2-eq-item"><div class="cnc-co2-eq-icon">🏠</div><div class="cnc-co2-eq-val"><span class="cnc-num" data-target="1686" data-format="round">0</span></div><div class="cnc-co2-eq-label">Homes/yr</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-co2 { min-height: 620px; display: grid; place-items: center; padding: 48px 24px; background: #061208; position: relative; overflow: hidden; font-family: 'Mulish', sans-serif; }
.cnc-co2 *, .cnc-co2 *::before, .cnc-co2 *::after { box-sizing: border-box; }
.cnc-co2-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cnc-co2-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18; animation: cnc-co2-drift 14s ease-in-out infinite; }
.cnc-co2-blob1 { width: 500px; height: 500px; background: #1a7a2e; top: -100px; left: -100px; animation-delay: 0s; }
.cnc-co2-blob2 { width: 400px; height: 400px; background: #0d5c22; bottom: -80px; right: -80px; animation-delay: -5s; }
.cnc-co2-blob3 { width: 300px; height: 300px; background: #4fc066; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -10s; opacity: 0.06; }
@keyframes cnc-co2-drift { 0%, 100% { transform: scale(1) translate(0, 0); } 33% { transform: scale(1.1) translate(30px, -20px); } 66% { transform: scale(0.95) translate(-20px, 30px); } }
.cnc-co2-block { position: relative; z-index: 1; text-align: center; padding: 32px; width: 440px; max-width: 100%; }
.cnc-co2-label-top { font-family: 'Unbounded', sans-serif; font-size: 8px; letter-spacing: 5px; text-transform: uppercase; color: rgba(79,192,102,0.5); font-weight: 300; margin-bottom: 40px; opacity: 0; animation: cnc-co2-rise 0.5s ease 0.1s forwards; }
.cnc-co2-icon-ring { width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(79,192,102,0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 32px; font-size: 28px; position: relative; opacity: 0; animation: cnc-co2-rise 0.6s ease 0.2s forwards; box-shadow: 0 0 30px rgba(79,192,102,0.12), inset 0 0 20px rgba(79,192,102,0.05); }
.cnc-co2-icon-ring::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(79,192,102,0.08); }
.cnc-co2-icon-ring svg { position: absolute; inset: -8px; animation: cnc-co2-slowSpin 10s linear infinite; }
@keyframes cnc-co2-slowSpin { to { transform: rotate(360deg); } }
.cnc-co2-count-wrap { opacity: 0; animation: cnc-co2-rise 0.8s cubic-bezier(0.22,1,0.36,1) 0.35s forwards; margin-bottom: 6px; }
.cnc-co2-count-main { font-family: 'Unbounded', sans-serif; font-size: clamp(64px, 14vw, 96px); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -3px; text-shadow: 0 0 60px rgba(79,192,102,0.4); }
.cnc-co2-count-unit { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 300; color: #4fc066; letter-spacing: 2px; margin-top: 6px; text-transform: uppercase; display: block; opacity: 0; animation: cnc-co2-rise 0.5s ease 0.5s forwards; }
.cnc-co2-count-desc { font-size: 13px; color: rgba(255,255,255,0.3); font-weight: 300; margin-top: 24px; line-height: 1.6; max-width: 280px; margin-left: auto; margin-right: auto; opacity: 0; animation: cnc-co2-rise 0.5s ease 0.6s forwards; }
.cnc-co2-strip { margin-top: 40px; opacity: 0; animation: cnc-co2-rise 0.5s ease 0.7s forwards; }
.cnc-co2-strip-head { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.2); margin-bottom: 10px; }
.cnc-co2-strip-track { height: 3px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.cnc-co2-strip-fill { height: 100%; width: 68%; background: linear-gradient(90deg, #1a6b2e, #4fc066); border-radius: 2px; box-shadow: 0 0 10px rgba(79,192,102,0.5); transform: scaleX(0); transform-origin: left; animation: cnc-co2-fillIn 2s ease 0.9s forwards; }
@keyframes cnc-co2-fillIn { to { transform: scaleX(1); } }
.cnc-co2-equiv { margin-top: 28px; display: flex; gap: 20px; justify-content: center; opacity: 0; animation: cnc-co2-rise 0.5s ease 0.85s forwards; }
.cnc-co2-eq-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cnc-co2-eq-icon { font-size: 22px; }
.cnc-co2-eq-val { font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 700; color: #4fc066; }
.cnc-co2-eq-label { font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.2); }
@keyframes cnc-co2-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-co2-blob, .cnc-co2-label-top, .cnc-co2-icon-ring, .cnc-co2-count-wrap, .cnc-co2-count-unit, .cnc-co2-count-desc, .cnc-co2-strip, .cnc-co2-strip-fill, .cnc-co2-equiv, .cnc-co2-icon-ring svg { animation: none; opacity: 1; transform: none; }
  .cnc-co2-strip-fill { transform: scaleX(1); }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-co2');
  if (!root) return;
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  setTimeout(function () {
    var start = performance.now(), dur = 2400;
    var nums = root.querySelectorAll('.cnc-num[data-target]');
    function tick(now) {
      var t = Math.min((now - start) / dur, 1), e = ease(t);
      nums.forEach(function (el) {
        var target = parseFloat(el.dataset.target);
        el.textContent = Math.round(e * target).toLocaleString();
      });
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 400);
})();
```

### 06. Uptime SLA Monitor

**Type:** CSS + JS
**Description:** Stark white industrial card with corner tick marks and JetBrains Mono throughout. Uptime counts from 99.000% up to 99.997% with satisfying precision. Thirty incident-history bars scale up sequentially, color-coded green and yellow. Built for status pages and infrastructure dashboards.

**HTML:**
```html
<div class="cnc-up">
  <div class="cnc-up-block">
    <div class="cnc-up-status-row">
      <span class="cnc-up-status-id">SYS-MONITOR / API</span>
      <span class="cnc-up-status-badge"><div class="cnc-up-badge-dot"></div>Operational</span>
    </div>
    <div class="cnc-up-uptime-wrap">
      <div class="cnc-up-uptime-num"><span class="cnc-up-uptime" data-target="99.997">99.000</span><span class="cnc-up-uptime-suffix">%</span></div>
    </div>
    <div class="cnc-up-uptime-label">Uptime · Rolling 90 Days</div>
    <hr class="cnc-up-hr">
    <div class="cnc-up-bars-label">Daily incident history · 30 days</div>
    <div class="cnc-up-bars">
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 1 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 2 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 3 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 4 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-warn" data-tip="May 5 · Degraded"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 6 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 7 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 8 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 9 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 10 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 11 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 12 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 13 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 14 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-warn" data-tip="May 15 · Degraded"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 16 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 17 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 18 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 19 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 20 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 21 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 22 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 23 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 24 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 25 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 26 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 27 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 28 · OK"></div>
      <div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 29 · OK"></div><div class="cnc-up-bar cnc-up-bar-ok" data-tip="May 30 · OK"></div>
    </div>
    <div class="cnc-up-bars-sub"><span>30 days ago</span><span>Today</span></div>
    <div class="cnc-up-footer">
      <div class="cnc-up-foot-item"><span class="cnc-up-foot-label">Incidents</span><span class="cnc-up-foot-val">2</span></div>
      <div class="cnc-up-foot-item"><span class="cnc-up-foot-label">Avg Response</span><span class="cnc-up-foot-val"><span class="cnc-up-resp" data-target="142">0</span>ms</span></div>
      <div class="cnc-up-foot-item"><span class="cnc-up-foot-label">SLA Target</span><span class="cnc-up-foot-val">99.9%</span></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-up { display: grid; place-items: center; padding: 32px 16px; background: #f4f4f0; font-family: 'JetBrains Mono', monospace; }
.cnc-up *, .cnc-up *::before, .cnc-up *::after { box-sizing: border-box; }
.cnc-up-block { width: 420px; border: 1px solid #d8d8d0; background: #fff; padding: 48px 44px; position: relative; }
.cnc-up-block::before { content: ''; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-top: 2px solid #111; border-left: 2px solid #111; }
.cnc-up-block::after { content: ''; position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-bottom: 2px solid #111; border-right: 2px solid #111; }
.cnc-up-status-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; opacity: 0; animation: cnc-up-in 0.4s ease 0.0s forwards; }
.cnc-up-status-id { font-size: 9px; letter-spacing: 3px; color: #aaa; text-transform: uppercase; }
.cnc-up-status-badge { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #16a34a; display: flex; align-items: center; gap: 6px; }
.cnc-up-badge-dot { width: 6px; height: 6px; background: #16a34a; border-radius: 50%; box-shadow: 0 0 0 0 rgba(22,163,74,0.4); animation: cnc-up-ping 2s ease-out infinite; }
@keyframes cnc-up-ping { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.4); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.cnc-up-uptime-wrap { opacity: 0; animation: cnc-up-in 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; margin-bottom: 6px; }
.cnc-up-uptime-num { font-size: clamp(72px, 14vw, 100px); font-weight: 700; color: #111; letter-spacing: -3px; line-height: 1; display: flex; align-items: baseline; }
.cnc-up-uptime-suffix { font-size: 0.3em; font-weight: 100; color: #bbb; letter-spacing: 0; margin-left: 2px; }
.cnc-up-uptime-label { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: #bbb; font-weight: 100; margin-bottom: 36px; opacity: 0; animation: cnc-up-in 0.4s ease 0.25s forwards; }
.cnc-up-hr { border: none; border-top: 1px solid #ebebeb; margin: 0 0 28px; opacity: 0; animation: cnc-up-in 0.3s ease 0.3s forwards; }
.cnc-up-bars-label { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: #bbb; margin-bottom: 12px; opacity: 0; animation: cnc-up-in 0.3s ease 0.35s forwards; }
.cnc-up-bars { display: flex; gap: 3px; align-items: flex-end; height: 32px; margin-bottom: 8px; opacity: 0; animation: cnc-up-in 0.4s ease 0.4s forwards; }
.cnc-up-bar { flex: 1; background: #eee; border-radius: 1px; position: relative; cursor: default; transform: scaleY(0); transform-origin: bottom; animation: cnc-up-barRise 0.5s ease forwards; }
.cnc-up-bar-ok { background: #d1fae5; }
.cnc-up-bar-warn { background: #fef3c7; }
.cnc-up-bar:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111; color: #fff; font-size: 8px; padding: 3px 7px; white-space: nowrap; letter-spacing: 1px; pointer-events: none; }
.cnc-up-bar:nth-child(1) { animation-delay: 0.42s; height: 100%; }
.cnc-up-bar:nth-child(2) { animation-delay: 0.44s; height: 100%; }
.cnc-up-bar:nth-child(3) { animation-delay: 0.46s; height: 100%; }
.cnc-up-bar:nth-child(4) { animation-delay: 0.48s; height: 100%; }
.cnc-up-bar:nth-child(5) { animation-delay: 0.50s; height: 40%; }
.cnc-up-bar:nth-child(6) { animation-delay: 0.52s; height: 100%; }
.cnc-up-bar:nth-child(7) { animation-delay: 0.54s; height: 100%; }
.cnc-up-bar:nth-child(8) { animation-delay: 0.56s; height: 100%; }
.cnc-up-bar:nth-child(9) { animation-delay: 0.58s; height: 100%; }
.cnc-up-bar:nth-child(10) { animation-delay: 0.60s; height: 100%; }
.cnc-up-bar:nth-child(11) { animation-delay: 0.62s; height: 100%; }
.cnc-up-bar:nth-child(12) { animation-delay: 0.64s; height: 100%; }
.cnc-up-bar:nth-child(13) { animation-delay: 0.66s; height: 100%; }
.cnc-up-bar:nth-child(14) { animation-delay: 0.68s; height: 100%; }
.cnc-up-bar:nth-child(15) { animation-delay: 0.70s; height: 70%; }
.cnc-up-bar:nth-child(16) { animation-delay: 0.72s; height: 100%; }
.cnc-up-bar:nth-child(17) { animation-delay: 0.74s; height: 100%; }
.cnc-up-bar:nth-child(18) { animation-delay: 0.76s; height: 100%; }
.cnc-up-bar:nth-child(19) { animation-delay: 0.78s; height: 100%; }
.cnc-up-bar:nth-child(20) { animation-delay: 0.80s; height: 100%; }
.cnc-up-bar:nth-child(21) { animation-delay: 0.82s; height: 100%; }
.cnc-up-bar:nth-child(22) { animation-delay: 0.84s; height: 100%; }
.cnc-up-bar:nth-child(23) { animation-delay: 0.86s; height: 100%; }
.cnc-up-bar:nth-child(24) { animation-delay: 0.88s; height: 100%; }
.cnc-up-bar:nth-child(25) { animation-delay: 0.90s; height: 100%; }
.cnc-up-bar:nth-child(26) { animation-delay: 0.92s; height: 100%; }
.cnc-up-bar:nth-child(27) { animation-delay: 0.94s; height: 100%; }
.cnc-up-bar:nth-child(28) { animation-delay: 0.96s; height: 100%; }
.cnc-up-bar:nth-child(29) { animation-delay: 0.98s; height: 100%; }
.cnc-up-bar:nth-child(30) { animation-delay: 1.00s; height: 100%; }
@keyframes cnc-up-barRise { to { transform: scaleY(1); } }
.cnc-up-bars-sub { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 2px; color: #ccc; opacity: 0; animation: cnc-up-in 0.3s ease 0.5s forwards; }
.cnc-up-footer { display: flex; justify-content: space-between; margin-top: 28px; opacity: 0; animation: cnc-up-in 0.4s ease 0.55s forwards; }
.cnc-up-foot-item { display: flex; flex-direction: column; gap: 4px; }
.cnc-up-foot-label { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: #ccc; }
.cnc-up-foot-val { font-size: 18px; font-weight: 700; color: #111; letter-spacing: -0.5px; }
@keyframes cnc-up-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-up-status-row, .cnc-up-uptime-wrap, .cnc-up-uptime-label, .cnc-up-hr, .cnc-up-bars-label, .cnc-up-bars, .cnc-up-bars-sub, .cnc-up-footer, .cnc-up-bar, .cnc-up-badge-dot { animation: none; opacity: 1; transform: none; }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-up');
  if (!root) return;
  function ease(t) { return 1 - Math.pow(1 - t, 4); }
  setTimeout(function () {
    var el = root.querySelector('.cnc-up-uptime');
    var target = parseFloat(el.dataset.target);
    var start = performance.now(), dur = 1800;
    function tick(now) {
      var t = Math.min((now - start) / dur, 1);
      el.textContent = Math.min(99 + ease(t) * (target - 99), target).toFixed(3);
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 400);
  setTimeout(function () {
    var el = root.querySelector('.cnc-up-resp');
    var target = parseFloat(el.dataset.target);
    var start = performance.now(), dur = 1400;
    function tick(now) {
      var t = Math.min((now - start) / dur, 1);
      el.textContent = Math.round(ease(t) * target);
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 600);
})();
```

### 07. Reading Progress Counter

**Type:** CSS + JS
**Description:** Warm parchment card with a thin red progress bar across the top — like a real reading indicator. Lora serif counts up words read, with pages, hours, and minutes remaining below. Twenty chapter dots show exact position. Built for e-reader apps and Substack-style blogs.

**HTML:**
```html
<div class="cnc-read">
  <div class="cnc-read-card">
    <div class="cnc-read-progress-bar"><div class="cnc-read-progress-fill"></div></div>
    <div class="cnc-read-body">
      <div class="cnc-read-chapter">Chapter 14 · The Inheritance</div>
      <div class="cnc-read-count-row">
        <span class="cnc-read-big" data-words data-target="74320">0</span>
        <span class="cnc-read-count-unit">words</span>
      </div>
      <div class="cnc-read-sublabel">read so far · <span data-pct data-target="73">0</span>% of this book</div>
      <hr class="cnc-read-rule">
      <div class="cnc-read-stats">
        <div class="cnc-read-stat"><div class="cnc-read-stat-n" data-pages data-target="248">0</div><div class="cnc-read-stat-l">Pages</div></div>
        <div class="cnc-read-stat"><div class="cnc-read-stat-n" data-hrs data-target="4.9">0</div><div class="cnc-read-stat-l">Hours</div></div>
        <div class="cnc-read-stat"><div class="cnc-read-stat-n" data-left data-target="162">0</div><div class="cnc-read-stat-l">Min left</div></div>
      </div>
      <div class="cnc-read-dots">
        <div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div>
        <div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div>
        <div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div>
        <div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div>
        <div class="cnc-read-dot cnc-read-dot-read"></div><div class="cnc-read-dot cnc-read-dot-read"></div>
        <div class="cnc-read-dot cnc-read-dot-current"></div>
        <div class="cnc-read-dot"></div><div class="cnc-read-dot"></div><div class="cnc-read-dot"></div>
        <div class="cnc-read-dot"></div><div class="cnc-read-dot"></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-read { display: grid; place-items: center; padding: 32px 16px; background: #f0ebe3; font-family: 'Karla', sans-serif; }
.cnc-read *, .cnc-read *::before, .cnc-read *::after { box-sizing: border-box; }
.cnc-read-card { width: 340px; background: #faf8f4; border-radius: 4px; box-shadow: 0 2px 0 #d6cfc4, 0 12px 48px rgba(0,0,0,0.06); overflow: hidden; position: relative; }
.cnc-read-progress-bar { height: 3px; background: #e8e0d4; position: relative; }
.cnc-read-progress-fill { height: 100%; background: #c1440e; transform: scaleX(0); transform-origin: left; animation: cnc-read-progFill 2.4s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; width: 73%; }
@keyframes cnc-read-progFill { to { transform: scaleX(1); } }
.cnc-read-body { padding: 40px 36px 36px; }
.cnc-read-chapter { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: #b8a898; margin-bottom: 20px; font-weight: 400; opacity: 0; animation: cnc-read-fadeUp 0.5s ease 0.1s forwards; }
.cnc-read-count-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; opacity: 0; animation: cnc-read-fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; }
.cnc-read-big { font-family: 'Lora', serif; font-size: 80px; font-weight: 600; color: #1a1410; line-height: 1; letter-spacing: -3px; }
.cnc-read-count-unit { font-family: 'Lora', serif; font-style: italic; font-size: 18px; color: #a09080; font-weight: 400; letter-spacing: 0; padding-bottom: 6px; }
.cnc-read-sublabel { font-size: 11px; color: #b8a898; font-weight: 300; letter-spacing: 0.3px; margin-bottom: 32px; opacity: 0; animation: cnc-read-fadeUp 0.5s ease 0.3s forwards; }
.cnc-read-rule { border: none; border-top: 1px solid #ede7de; margin-bottom: 24px; opacity: 0; animation: cnc-read-fadeUp 0.4s ease 0.35s forwards; }
.cnc-read-stats { display: flex; gap: 0; opacity: 0; animation: cnc-read-fadeUp 0.5s ease 0.4s forwards; }
.cnc-read-stat { flex: 1; border-right: 1px solid #ede7de; padding-right: 16px; margin-right: 16px; }
.cnc-read-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.cnc-read-stat-n { font-family: 'Lora', serif; font-size: 24px; font-weight: 600; color: #1a1410; letter-spacing: -0.5px; line-height: 1; }
.cnc-read-stat-l { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #b8a898; margin-top: 5px; font-weight: 300; }
.cnc-read-dots { display: flex; gap: 4px; margin-top: 28px; opacity: 0; animation: cnc-read-fadeUp 0.4s ease 0.5s forwards; flex-wrap: wrap; }
.cnc-read-dot { width: 6px; height: 6px; border-radius: 50%; background: #e0d8ce; }
.cnc-read-dot-read { background: #c1440e; }
.cnc-read-dot-current { background: #c1440e; box-shadow: 0 0 0 2px #faf8f4, 0 0 0 3px #c1440e; }
@keyframes cnc-read-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-read-progress-fill, .cnc-read-chapter, .cnc-read-count-row, .cnc-read-sublabel, .cnc-read-rule, .cnc-read-stats, .cnc-read-dots { animation: none; opacity: 1; transform: none; }
  .cnc-read-progress-fill { transform: scaleX(0.73); }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-read');
  if (!root) return;
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  setTimeout(function () {
    var start = performance.now(), dur = 2000;
    var wordsEl = root.querySelector('[data-words]');
    var pctEl   = root.querySelector('[data-pct]');
    var pagesEl = root.querySelector('[data-pages]');
    var hrsEl   = root.querySelector('[data-hrs]');
    var leftEl  = root.querySelector('[data-left]');
    var wordsTarget = parseFloat(wordsEl.dataset.target);
    var pctTarget   = parseFloat(pctEl.dataset.target);
    var pagesTarget = parseFloat(pagesEl.dataset.target);
    var hrsTarget   = parseFloat(hrsEl.dataset.target);
    var leftTarget  = parseFloat(leftEl.dataset.target);
    function tick(now) {
      var t = Math.min((now - start) / dur, 1), e = ease(t);
      wordsEl.textContent = Math.round(e * wordsTarget).toLocaleString();
      pctEl.textContent   = Math.round(e * pctTarget);
      pagesEl.textContent = Math.round(e * pagesTarget);
      hrsEl.textContent   = (e * hrsTarget).toFixed(1);
      leftEl.textContent  = Math.round((1 - e) * leftTarget);
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 400);
})();
```

### 08. Stock Price Ticker

**Type:** CSS + JS
**Description:** Dark Bloomberg-esque block with a massive Barlow Condensed price counting up to $924.18, a green sparkline drawing itself in, and live decimal micro-flicker. OHLC row counts up simultaneously. Built for fintech apps, portfolio trackers and trading dashboards.

**HTML:**
```html
<div class="cnc-stk">
  <div class="cnc-stk-block">
    <div class="cnc-stk-ticker-head">
      <span class="cnc-stk-ticker-sym">NVDA · NASDAQ</span>
      <span class="cnc-stk-market-status"><div class="cnc-stk-ms-dot"></div>Open</span>
    </div>
    <div class="cnc-stk-price-row">
      <span class="cnc-stk-currency">$</span>
      <div class="cnc-stk-price"><span class="cnc-stk-price-int" data-target="924">0</span><span class="cnc-stk-price-dec">.<span class="cnc-stk-dec" data-target="18">00</span></span></div>
    </div>
    <div class="cnc-stk-change">
      <span class="cnc-stk-change-val cnc-stk-up" data-chg-abs data-target="18.42">+0.00</span>
      <span class="cnc-stk-change-pct cnc-stk-up" data-chg-pct data-target="2.03">+0.00%</span>
      <span class="cnc-stk-change-time">May 19 · 14:32 ET</span>
    </div>
    <div class="cnc-stk-spark">
      <svg width="100%" height="64" viewBox="0 0 320 64" preserveAspectRatio="none">
        <defs><linearGradient id="cnc-stk-sparkGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#22c55e" stop-opacity="0.15"/><stop offset="100%" stop-color="#22c55e" stop-opacity="0"/></linearGradient></defs>
        <path fill="url(#cnc-stk-sparkGrad)" d="M0,52 L22,48 L44,50 L66,42 L88,44 L110,36 L132,38 L154,28 L176,32 L198,20 L220,24 L242,14 L264,18 L286,10 L320,8 L320,64 L0,64 Z"/>
        <path class="cnc-stk-spark-line" d="M0,52 L22,48 L44,50 L66,42 L88,44 L110,36 L132,38 L154,28 L176,32 L198,20 L220,24 L242,14 L264,18 L286,10 L320,8"/>
      </svg>
    </div>
    <div class="cnc-stk-ohlc">
      <div class="cnc-stk-ohlc-item"><div class="cnc-stk-ohlc-label">Open</div><div class="cnc-stk-ohlc-val">$<span data-ohlc="open" data-target="905.76">0</span></div></div>
      <div class="cnc-stk-ohlc-item"><div class="cnc-stk-ohlc-label">High</div><div class="cnc-stk-ohlc-val cnc-stk-ohlc-high">$<span data-ohlc="high" data-target="931.07">0</span></div></div>
      <div class="cnc-stk-ohlc-item"><div class="cnc-stk-ohlc-label">Low</div><div class="cnc-stk-ohlc-val cnc-stk-ohlc-low">$<span data-ohlc="low" data-target="901.33">0</span></div></div>
      <div class="cnc-stk-ohlc-item"><div class="cnc-stk-ohlc-label">Vol</div><div class="cnc-stk-ohlc-val"><span data-ohlc="vol" data-target="42.3">0</span>M</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-stk { display: grid; place-items: center; padding: 32px 16px; background: #080c10; font-family: 'Barlow', sans-serif; }
.cnc-stk *, .cnc-stk *::before, .cnc-stk *::after { box-sizing: border-box; }
.cnc-stk-block { width: 400px; padding: 48px 40px; position: relative; }
.cnc-stk-block::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.cnc-stk-ticker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; position: relative; }
.cnc-stk-ticker-sym { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 5px; color: rgba(255,255,255,0.25); text-transform: uppercase; }
.cnc-stk-market-status { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: #22c55e; display: flex; align-items: center; gap: 6px; }
.cnc-stk-ms-dot { width: 5px; height: 5px; background: #22c55e; border-radius: 50%; animation: cnc-stk-msBlink 2s ease-in-out infinite; box-shadow: 0 0 6px #22c55e; }
@keyframes cnc-stk-msBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.cnc-stk-price-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; opacity: 0; animation: cnc-stk-appear 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s forwards; }
.cnc-stk-currency { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 300; color: rgba(255,255,255,0.3); margin-top: 10px; }
.cnc-stk-price { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(80px, 16vw, 108px); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -3px; }
.cnc-stk-price-dec { font-size: 0.45em; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,0.6); align-self: flex-end; padding-bottom: 14px; }
.cnc-stk-change { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; opacity: 0; animation: cnc-stk-appear 0.5s ease 0.25s forwards; }
.cnc-stk-change-val { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
.cnc-stk-change-val.cnc-stk-up { color: #22c55e; }
.cnc-stk-change-val.cnc-stk-dn { color: #ef4444; }
.cnc-stk-change-pct { font-size: 13px; padding: 4px 10px; border-radius: 3px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 1px; }
.cnc-stk-change-pct.cnc-stk-up { background: rgba(34,197,94,0.12); color: #22c55e; }
.cnc-stk-change-time { font-size: 10px; color: rgba(255,255,255,0.2); letter-spacing: 1px; margin-left: auto; }
.cnc-stk-spark { margin-bottom: 32px; opacity: 0; animation: cnc-stk-appear 0.5s ease 0.4s forwards; }
.cnc-stk-spark svg { overflow: visible; }
.cnc-stk-spark-line { fill: none; stroke: #22c55e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: cnc-stk-drawSpark 1.6s ease 0.6s forwards; }
@keyframes cnc-stk-drawSpark { to { stroke-dashoffset: 0; } }
.cnc-stk-ohlc { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.05); padding-top: 24px; opacity: 0; animation: cnc-stk-appear 0.5s ease 0.5s forwards; }
.cnc-stk-ohlc-item { border-right: 1px solid rgba(255,255,255,0.05); padding-right: 16px; }
.cnc-stk-ohlc-item:last-child { border-right: none; }
.cnc-stk-ohlc-label { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.2); margin-bottom: 6px; }
.cnc-stk-ohlc-val { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.7); }
.cnc-stk-ohlc-high { color: #22c55e; }
.cnc-stk-ohlc-low { color: #ef4444; }
@keyframes cnc-stk-flash { 0% { color: #22c55e; } 100% { color: #fff; } }
.cnc-stk-flash { animation: cnc-stk-flash 0.6s ease forwards; }
@keyframes cnc-stk-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-stk-ms-dot, .cnc-stk-price-row, .cnc-stk-change, .cnc-stk-spark, .cnc-stk-spark-line, .cnc-stk-ohlc { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-stk');
  if (!root) return;
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  setTimeout(function () {
    var start = performance.now(), dur = 2000;
    var intEl = root.querySelector('.cnc-stk-price-int');
    var decEl = root.querySelector('.cnc-stk-dec');
    var chgAbs = root.querySelector('[data-chg-abs]');
    var chgPct = root.querySelector('[data-chg-pct]');
    var ohlc = root.querySelectorAll('[data-ohlc]');
    var intTarget = parseFloat(intEl.dataset.target);
    var decTarget = parseInt(decEl.dataset.target, 10);
    var chgAbsTarget = parseFloat(chgAbs.dataset.target);
    var chgPctTarget = parseFloat(chgPct.dataset.target);
    function tick(now) {
      var t = Math.min((now - start) / dur, 1), e = ease(t);
      intEl.textContent = Math.floor(e * intTarget).toLocaleString();
      decEl.textContent = String(Math.round(e * decTarget)).padStart(2, '0');
      chgAbs.textContent = '+' + (e * chgAbsTarget).toFixed(2);
      chgPct.textContent = '+' + (e * chgPctTarget).toFixed(2) + '%';
      ohlc.forEach(function (el) {
        var target = parseFloat(el.dataset.target);
        el.textContent = (e * target).toFixed(el.dataset.ohlc === 'vol' ? 1 : 2);
      });
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 300);
  function flicker() {
    var el = root.querySelector('.cnc-stk-dec');
    var next = Math.max(0, Math.min(99, Math.round(Math.random() * 99)));
    el.textContent = String(next).padStart(2, '0');
    el.classList.remove('cnc-stk-flash');
    void el.offsetWidth;
    el.classList.add('cnc-stk-flash');
    setTimeout(flicker, 800 + Math.random() * 1200);
  }
  setTimeout(flicker, 2600);
})();
```

### 09. Fitness Step Counter

**Type:** CSS + JS
**Description:** Warm pastel scene with morphing blob shapes in the background. A circular gradient ring fills to 75% with a bouncing flame at the center. The step count springs up with a playful overshoot. Milestone pills mark 5K and 7.5K as done, 10K actively pulsing. Built for health apps and wearable dashboards.

**HTML:**
```html
<div class="cnc-fit">
  <div class="cnc-fit-shape cnc-fit-s1"></div>
  <div class="cnc-fit-shape cnc-fit-s2"></div>
  <div class="cnc-fit-shape cnc-fit-s3"></div>
  <div class="cnc-fit-block">
    <div class="cnc-fit-day-label">Tuesday · May 19</div>
    <div class="cnc-fit-ring-outer">
      <svg class="cnc-fit-ring-svg" width="220" height="220" viewBox="0 0 220 220">
        <defs><linearGradient id="cnc-fit-ringGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#ffaa66"/><stop offset="100%" stop-color="#ff4e4e"/></linearGradient></defs>
        <circle class="cnc-fit-ring-track" cx="110" cy="110" r="95"/>
        <circle class="cnc-fit-ring-prog"  cx="110" cy="110" r="95"/>
      </svg>
      <div class="cnc-fit-ring-center">
        <div class="cnc-fit-ring-emoji">🔥</div>
        <div class="cnc-fit-ring-num"><span class="cnc-fit-pct" data-target="75">0</span>%</div>
        <div class="cnc-fit-ring-unit">of goal</div>
      </div>
    </div>
    <div class="cnc-fit-step-num" data-steps data-target="7534">0</div>
    <div class="cnc-fit-step-label">Steps Today</div>
    <div class="cnc-fit-milestones">
      <div class="cnc-fit-ms cnc-fit-ms-done">5K</div>
      <div class="cnc-fit-ms cnc-fit-ms-done">7.5K</div>
      <div class="cnc-fit-ms cnc-fit-ms-active">10K</div>
      <div class="cnc-fit-ms cnc-fit-ms-next">15K</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-fit { min-height: 540px; display: grid; place-items: center; padding: 48px 24px; background: #fff4e6; position: relative; overflow: hidden; font-family: 'Nunito', sans-serif; }
.cnc-fit *, .cnc-fit *::before, .cnc-fit *::after { box-sizing: border-box; }
.cnc-fit-shape { position: absolute; pointer-events: none; }
.cnc-fit-s1 { width: 320px; height: 320px; background: #ffe0c2; top: -80px; right: -80px; border-radius: 40% 60% 55% 45%; animation: cnc-fit-morph 10s ease-in-out infinite; }
.cnc-fit-s2 { width: 240px; height: 240px; background: #ffd0f0; bottom: -60px; left: -60px; border-radius: 60% 40% 45% 55%; animation: cnc-fit-morph 14s ease-in-out infinite reverse; }
.cnc-fit-s3 { width: 140px; height: 140px; background: #c8f0e0; top: 30%; right: 5%; border-radius: 55% 45%; animation: cnc-fit-morph 8s ease-in-out infinite; opacity: 0.7; }
@keyframes cnc-fit-morph { 0%, 100% { border-radius: 60% 40% 55% 45%; } 50% { border-radius: 40% 60% 45% 55%; } }
.cnc-fit-block { position: relative; z-index: 1; text-align: center; padding: 32px; width: 420px; max-width: 100%; }
.cnc-fit-day-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #ffaa66; font-weight: 700; margin-bottom: 28px; opacity: 0; animation: cnc-fit-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.0s forwards; }
.cnc-fit-ring-outer { width: 220px; height: 220px; margin: 0 auto 24px; position: relative; opacity: 0; animation: cnc-fit-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.15s forwards; }
.cnc-fit-ring-svg { transform: rotate(-90deg); overflow: visible; }
.cnc-fit-ring-track { fill: none; stroke: #ffe8d0; stroke-width: 14; stroke-linecap: round; }
.cnc-fit-ring-prog { fill: none; stroke: url(#cnc-fit-ringGrad); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 597; stroke-dashoffset: 597; filter: drop-shadow(0 0 8px rgba(255,130,60,0.4)); animation: cnc-fit-ringFill 2s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; }
@keyframes cnc-fit-ringFill { to { stroke-dashoffset: 149; } }
.cnc-fit-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cnc-fit-ring-emoji { font-size: 38px; animation: cnc-fit-bounce 2s ease-in-out infinite; line-height: 1; margin-bottom: 4px; }
@keyframes cnc-fit-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.cnc-fit-ring-num { font-family: 'Righteous', sans-serif; font-size: 32px; color: #222; letter-spacing: -1px; line-height: 1; }
.cnc-fit-ring-unit { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #ccc; font-weight: 700; margin-top: 3px; }
.cnc-fit-step-num { font-family: 'Righteous', sans-serif; font-size: clamp(64px, 14vw, 88px); color: #1a1a1a; letter-spacing: -2px; line-height: 1; opacity: 0; animation: cnc-fit-pop 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.3s forwards; display: inline-block; }
.cnc-fit-step-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #ccc; font-weight: 700; margin-top: 4px; margin-bottom: 28px; opacity: 0; animation: cnc-fit-pop 0.5s ease 0.45s forwards; }
.cnc-fit-milestones { display: flex; gap: 8px; justify-content: center; opacity: 0; animation: cnc-fit-pop 0.5s ease 0.55s forwards; }
.cnc-fit-ms { padding: 8px 16px; border-radius: 100px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; border: 2px solid transparent; }
.cnc-fit-ms-done { background: #fff; border-color: #22c55e; color: #22c55e; }
.cnc-fit-ms-done::before { content: '✓'; }
.cnc-fit-ms-next { background: #fff; border-color: #e0e0e0; color: #ccc; }
.cnc-fit-ms-active { background: #ff823c; color: #fff; animation: cnc-fit-pulse 1.5s ease-in-out infinite; }
@keyframes cnc-fit-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,130,60,0.4); } 50% { box-shadow: 0 0 0 8px rgba(255,130,60,0); } }
@keyframes cnc-fit-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-fit-shape, .cnc-fit-day-label, .cnc-fit-ring-outer, .cnc-fit-ring-prog, .cnc-fit-ring-emoji, .cnc-fit-step-num, .cnc-fit-step-label, .cnc-fit-milestones, .cnc-fit-ms-active { animation: none; opacity: 1; transform: none; }
  .cnc-fit-ring-prog { stroke-dashoffset: 149; }
}
```

**JS:**
```js
(function () {
  var root = document.querySelector('.cnc-fit');
  if (!root) return;
  function ease(t) { return 1 - Math.pow(1 - t, 4); }
  setTimeout(function () {
    var start = performance.now(), dur = 2200;
    var stepsEl = root.querySelector('[data-steps]');
    var pctEl   = root.querySelector('.cnc-fit-pct');
    var GOAL    = 10000;
    var stepsTarget = parseFloat(stepsEl.dataset.target);
    function tick(now) {
      var t = Math.min((now - start) / dur, 1), e = ease(t), v = e * stepsTarget;
      stepsEl.textContent = Math.round(v).toLocaleString();
      pctEl.textContent = Math.round(v / GOAL * 100);
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 300);
})();
```

### 10. Brutalist Finance Terminal

**Type:** CSS + JS
**Description:** Raw high-contrast trading-desk dashboard with a live scrolling ticker tape, a featured portfolio counter, scanline overlay and neon-yellow progress bars. IBM Plex Mono and Bebas Neue carry the brutalist tone.

**HTML:**
```html
<div class="cnc-bft">
  <div class="cnc-bft-grid">
    <div class="cnc-bft-ticker">
      <div class="cnc-bft-ticker-inner">
        <span>NASDAQ +2.41%</span><span>DOW +0.87%</span><span>S&amp;P500 +1.23%</span>
        <span>BTC $68,420</span><span>ETH $3,810</span><span>GOLD $2,341/oz</span>
        <span>VIX 14.2</span><span>10Y YIELD 4.38%</span><span>DXY 104.1</span>
        <span>NASDAQ +2.41%</span><span>DOW +0.87%</span><span>S&amp;P500 +1.23%</span>
        <span>BTC $68,420</span><span>ETH $3,810</span><span>GOLD $2,341/oz</span>
        <span>VIX 14.2</span><span>10Y YIELD 4.38%</span><span>DXY 104.1</span>
      </div>
    </div>
    <div class="cnc-bft-stat cnc-bft-featured">
      <span class="cnc-bft-index">01 · Portfolio Value</span>
      <div class="cnc-bft-number">
        <span class="cnc-bft-prefix">$</span>
        <span class="cnc-num" data-target="2847391">0</span>
      </div>
      <div class="cnc-bft-label">Total AUM · All Positions</div>
      <div class="cnc-bft-progress-line"><div class="cnc-bft-progress-fill"></div></div>
      <div class="cnc-bft-sub">Updated 0.3s ago · 24h change: +$48,210</div>
    </div>
    <div class="cnc-bft-stat cnc-bft-danger">
      <span class="cnc-bft-badge cnc-bft-down">▼ SHORT</span>
      <span class="cnc-bft-index">02 · Drawdown</span>
      <div class="cnc-bft-number">
        <span class="cnc-num" data-target="4.7" data-decimals="1">0</span>
        <span class="cnc-bft-suffix">%</span>
      </div>
      <div class="cnc-bft-label">Max Drawdown · 30D</div>
      <div class="cnc-bft-progress-line"><div class="cnc-bft-progress-fill"></div></div>
    </div>
    <div class="cnc-bft-stat">
      <span class="cnc-bft-badge cnc-bft-up">▲ LONG</span>
      <span class="cnc-bft-index">03 · Win Rate</span>
      <div class="cnc-bft-number">
        <span class="cnc-num" data-target="78">0</span>
        <span class="cnc-bft-suffix">%</span>
      </div>
      <div class="cnc-bft-label">Closed Trades · YTD</div>
      <div class="cnc-bft-progress-line"><div class="cnc-bft-progress-fill"></div></div>
    </div>
    <div class="cnc-bft-stat">
      <span class="cnc-bft-index">04 · Sharpe Ratio</span>
      <div class="cnc-bft-number">
        <span class="cnc-num" data-target="2.38" data-decimals="2">0</span>
      </div>
      <div class="cnc-bft-label">Risk-Adjusted Return</div>
      <div class="cnc-bft-progress-line"><div class="cnc-bft-progress-fill"></div></div>
    </div>
    <div class="cnc-bft-stat">
      <span class="cnc-bft-index">05 · Open Positions</span>
      <div class="cnc-bft-number">
        <span class="cnc-num" data-target="312">0</span>
      </div>
      <div class="cnc-bft-label">Across 14 Exchanges</div>
      <div class="cnc-bft-progress-line"><div class="cnc-bft-progress-fill"></div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-bft {
  --bft-black: #0a0a0a;
  --bft-white: #f0ede8;
  --bft-yellow: #ffe600;
  --bft-red: #ff2d2d;
  --bft-gray: #1c1c1c;
  --bft-mid: #333;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: var(--bft-black);
  color: var(--bft-white);
  font-family: 'IBM Plex Mono', monospace;
  overflow: hidden;
}
.cnc-bft::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
  pointer-events: none; z-index: 100;
}
.cnc-bft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 980px;
  border: 3px solid var(--bft-white);
}
.cnc-bft-stat {
  border: 1.5px solid var(--bft-mid);
  padding: 36px 28px 28px;
  position: relative; overflow: hidden;
  transition: background 0.1s;
}
.cnc-bft-stat:hover { background: var(--bft-gray); }
.cnc-bft-stat::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; width: 100%; height: 3px;
  background: var(--bft-yellow);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.cnc-bft-stat:hover::after { transform: scaleX(1); }
.cnc-bft-featured {
  grid-column: span 2;
  background: var(--bft-yellow);
  color: var(--bft-black);
  border-color: var(--bft-yellow);
}
.cnc-bft-featured .cnc-bft-label,
.cnc-bft-featured .cnc-bft-sub { color: var(--bft-black); opacity: 0.6; }
.cnc-bft-danger { border-top: 4px solid var(--bft-red); }
.cnc-bft-index {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  opacity: 0.35; margin-bottom: 20px; display: block;
}
.cnc-bft-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 7vw, 88px);
  line-height: 1; letter-spacing: -1px;
  display: flex; align-items: baseline; gap: 4px;
}
.cnc-bft-featured .cnc-bft-number { font-size: clamp(72px, 9vw, 120px); }
.cnc-bft-prefix, .cnc-bft-suffix {
  font-size: 0.38em;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700; letter-spacing: 2px;
  align-self: flex-end; padding-bottom: 0.15em;
}
.cnc-bft-label {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  opacity: 0.45; margin-top: 12px;
}
.cnc-bft-sub {
  font-size: 11px; opacity: 0.35; margin-top: 6px; letter-spacing: 1px;
}
.cnc-bft-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid currentColor; opacity: 0.5;
}
.cnc-bft-up { color: #39ff14; }
.cnc-bft-down { color: var(--bft-red); }
.cnc-bft-ticker {
  grid-column: span 3;
  background: var(--bft-yellow);
  color: var(--bft-black);
  padding: 8px 0; overflow: hidden; position: relative;
  font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; font-weight: 700;
}
.cnc-bft-ticker-inner {
  display: flex; gap: 60px;
  animation: cnc-bft-ticker 18s linear infinite;
  white-space: nowrap; width: max-content;
}
@keyframes cnc-bft-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.cnc-bft-progress-line {
  height: 2px; background: rgba(255,255,255,0.08);
  margin-top: 16px; position: relative; overflow: hidden;
}
.cnc-bft-progress-fill {
  height: 100%; background: var(--bft-yellow);
  animation: cnc-bft-fillBar 1.5s ease forwards;
  transform-origin: left; transform: scaleX(0);
}
.cnc-bft-featured .cnc-bft-progress-fill { background: var(--bft-black); }
@keyframes cnc-bft-fillBar { to { transform: scaleX(1); } }
.cnc-bft-stat:nth-child(2) .cnc-bft-progress-fill { animation-delay: 0.3s; width: 73%; }
.cnc-bft-stat:nth-child(3) .cnc-bft-progress-fill { animation-delay: 0.5s; width: 91%; }
.cnc-bft-stat:nth-child(4) .cnc-bft-progress-fill { animation-delay: 0.7s; width: 47%; }
.cnc-bft-stat:nth-child(5) .cnc-bft-progress-fill { animation-delay: 0.9s; width: 85%; }
.cnc-bft-stat:nth-child(6) .cnc-bft-progress-fill { animation-delay: 1.1s; width: 62%; }
@media (prefers-reduced-motion: reduce) {
  .cnc-bft-ticker-inner, .cnc-bft-progress-fill { animation: none; }
}
```

**JS:**
```js
(function () {
  function easeOut(t) { return 1 - Math.pow(1 - t, 4); }
  document.querySelectorAll('.cnc-bft .cnc-num').forEach(function (el) {
    var target = parseFloat(el.dataset.target);
    var decimals = parseInt(el.dataset.decimals || 0, 10);
    var duration = 1800;
    var start = performance.now();
    function tick(now) {
      var t = Math.min((now - start) / duration, 1);
      var val = easeOut(t) * target;
      el.textContent = decimals > 0
        ? val.toFixed(decimals)
        : Math.floor(val).toLocaleString();
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  });
})();
```

### 11. Bioluminescent Health Tracker

**Type:** CSS + JS
**Description:** Deep-forest dark dashboard with breathing organic blobs, glowing pulse dots and Cormorant Garamond serif numerals. Heart-rate sparklines, sleep-phase bars, VO₂ max trends and a half-page recovery score ring.

**HTML:**
```html
<div class="cnc-bio">
  <div class="cnc-bio-container">
    <div class="cnc-bio-card">
      <div class="cnc-bio-metric-tag"><span class="cnc-bio-dot"></span> Cardiac</div>
      <div class="cnc-bio-number-row">
        <span class="cnc-bio-num cnc-num" data-target="72">0</span>
        <span class="cnc-bio-unit">bpm</span>
      </div>
      <div class="cnc-bio-label">Resting Heart Rate</div>
      <div class="cnc-bio-sparkline">
        <svg width="100%" height="40" viewBox="0 0 200 40" fill="none" preserveAspectRatio="none">
          <path d="M0 20 L20 20 L30 5 L40 35 L50 10 L60 20 L80 20 L95 8 L110 32 L125 15 L140 20 L160 20 L170 12 L180 28 L190 18 L200 20"
            stroke="#00ff8c" stroke-width="2" fill="none"
            style="filter: drop-shadow(0 0 4px #00ff8c);"/>
        </svg>
      </div>
      <span class="cnc-bio-delta cnc-bio-delta-up">↓ 3 bpm vs last week</span>
    </div>
    <div class="cnc-bio-card">
      <div class="cnc-bio-metric-tag"><span class="cnc-bio-dot"></span> Recovery</div>
      <div class="cnc-bio-number-row">
        <span class="cnc-bio-num cnc-num" data-target="7" data-decimals="1">0</span>
        <span class="cnc-bio-unit">hrs</span>
      </div>
      <div class="cnc-bio-label">Deep Sleep Duration</div>
      <div class="cnc-bio-bars">
        <div class="cnc-bio-bar-row">
          <span class="cnc-bio-bar-label">REM</span>
          <div class="cnc-bio-bar-track"><div class="cnc-bio-bar-fill cnc-bio-c1" style="width:72%"></div></div>
          <span class="cnc-bio-bar-val">72%</span>
        </div>
        <div class="cnc-bio-bar-row">
          <span class="cnc-bio-bar-label">DEEP</span>
          <div class="cnc-bio-bar-track"><div class="cnc-bio-bar-fill cnc-bio-c2" style="width:58%"></div></div>
          <span class="cnc-bio-bar-val">58%</span>
        </div>
        <div class="cnc-bio-bar-row">
          <span class="cnc-bio-bar-label">LIGHT</span>
          <div class="cnc-bio-bar-track"><div class="cnc-bio-bar-fill cnc-bio-c3" style="width:85%"></div></div>
          <span class="cnc-bio-bar-val">85%</span>
        </div>
      </div>
    </div>
    <div class="cnc-bio-card">
      <div class="cnc-bio-metric-tag"><span class="cnc-bio-dot"></span> Aerobic</div>
      <div class="cnc-bio-number-row">
        <span class="cnc-bio-num cnc-num" data-target="54" data-decimals="1">0</span>
        <span class="cnc-bio-unit">ml/kg</span>
      </div>
      <div class="cnc-bio-label">VO₂ Max · Excellent</div>
      <div class="cnc-bio-bars">
        <div class="cnc-bio-bar-row">
          <span class="cnc-bio-bar-label">30D</span>
          <div class="cnc-bio-bar-track"><div class="cnc-bio-bar-fill cnc-bio-c4" style="width:82%"></div></div>
          <span class="cnc-bio-bar-val">52.1</span>
        </div>
        <div class="cnc-bio-bar-row">
          <span class="cnc-bio-bar-label">60D</span>
          <div class="cnc-bio-bar-track"><div class="cnc-bio-bar-fill cnc-bio-c5" style="width:76%"></div></div>
          <span class="cnc-bio-bar-val">51.3</span>
        </div>
        <div class="cnc-bio-bar-row">
          <span class="cnc-bio-bar-label">90D</span>
          <div class="cnc-bio-bar-track"><div class="cnc-bio-bar-fill cnc-bio-c6" style="width:70%"></div></div>
          <span class="cnc-bio-bar-val">49.8</span>
        </div>
      </div>
    </div>
    <div class="cnc-bio-card">
      <div class="cnc-bio-metric-tag"><span class="cnc-bio-dot"></span> Nervous System</div>
      <div class="cnc-bio-number-row">
        <span class="cnc-bio-num cnc-num" data-target="89">0</span>
        <span class="cnc-bio-unit">ms</span>
      </div>
      <div class="cnc-bio-label">Heart Rate Variability</div>
      <div class="cnc-bio-sparkline">
        <svg width="100%" height="40" viewBox="0 0 200 40" fill="none" preserveAspectRatio="none">
          <path d="M0 25 Q25 10 50 22 Q75 34 100 18 Q125 8 150 20 Q175 30 200 15"
            stroke="#b06eff" stroke-width="2" fill="none"
            style="filter: drop-shadow(0 0 4px #b06eff);"/>
        </svg>
      </div>
      <span class="cnc-bio-delta cnc-bio-delta-up">↑ 12ms vs baseline</span>
    </div>
    <div class="cnc-bio-card cnc-bio-wide">
      <div class="cnc-bio-ring-wrap">
        <svg width="130" height="130" viewBox="0 0 130 130">
          <circle class="cnc-bio-ring-bg" cx="65" cy="65" r="55"/>
          <circle class="cnc-bio-ring-fill" cx="65" cy="65" r="55"/>
        </svg>
        <div class="cnc-bio-ring-label">
          <span class="cnc-bio-ring-pct cnc-num" data-target="80">0</span>
          <span class="cnc-bio-ring-sub">score</span>
        </div>
      </div>
      <div class="cnc-bio-wide-text">
        <div class="cnc-bio-metric-tag"><span class="cnc-bio-dot"></span> Overall Recovery</div>
        <div class="cnc-bio-number-row">
          <span class="cnc-bio-num cnc-num" style="font-size: 52px;" data-target="80">0</span>
          <span class="cnc-bio-unit">/ 100</span>
        </div>
        <div class="cnc-bio-label">Body is ready · Optimal Training Zone</div>
        <div class="cnc-bio-bars">
          <div class="cnc-bio-bar-row">
            <span class="cnc-bio-bar-label" style="width:60px">STRAIN</span>
            <div class="cnc-bio-bar-track"><div class="cnc-bio-bar-fill cnc-bio-c1" style="width:65%"></div></div>
            <span class="cnc-bio-bar-val">6.5</span>
          </div>
          <div class="cnc-bio-bar-row">
            <span class="cnc-bio-bar-label" style="width:60px">CALORIES</span>
            <div class="cnc-bio-bar-track"><div class="cnc-bio-bar-fill cnc-bio-c7" style="width:88%"></div></div>
            <span class="cnc-bio-bar-val">2,840</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-bio {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
  background: #05120f;
  font-family: 'DM Sans', sans-serif;
  overflow: hidden;
}
.cnc-bio::before {
  content: ''; position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,255,140,0.06) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.cnc-bio-container {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; width: 760px;
}
.cnc-bio-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(0,255,140,0.12);
  border-radius: 24px; padding: 36px 32px;
  position: relative; overflow: hidden;
  backdrop-filter: blur(10px);
  transition: border-color 0.4s, transform 0.3s;
  opacity: 0; animation: cnc-bio-fadeUp 0.7s ease forwards;
}
.cnc-bio-card:hover {
  border-color: rgba(0,255,140,0.35);
  transform: translateY(-3px);
}
.cnc-bio-card::before {
  content: ''; position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  filter: blur(60px); opacity: 0.12;
  pointer-events: none; bottom: -60px; right: -60px;
  animation: cnc-bio-breathe 6s ease-in-out infinite;
}
.cnc-bio-card:nth-child(1)::before { background: #00ff8c; }
.cnc-bio-card:nth-child(2)::before { background: #00c2ff; animation-delay: -2s; }
.cnc-bio-card:nth-child(3)::before { background: #ff6b35; animation-delay: -4s; }
.cnc-bio-card:nth-child(4)::before { background: #b06eff; animation-delay: -1s; }
@keyframes cnc-bio-breathe {
  0%, 100% { transform: scale(1); opacity: 0.12; }
  50% { transform: scale(1.3); opacity: 0.2; }
}
.cnc-bio-card.cnc-bio-wide {
  grid-column: span 2;
  display: flex; align-items: center; gap: 48px;
  padding: 40px;
}
.cnc-bio-metric-tag {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.cnc-bio-dot {
  width: 6px; height: 6px; border-radius: 50%;
  animation: cnc-bio-pulse 2s ease-in-out infinite;
}
@keyframes cnc-bio-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.cnc-bio-card:nth-child(1) .cnc-bio-dot { background: #00ff8c; box-shadow: 0 0 8px #00ff8c; }
.cnc-bio-card:nth-child(2) .cnc-bio-dot { background: #00c2ff; box-shadow: 0 0 8px #00c2ff; animation-delay: -1s; }
.cnc-bio-card:nth-child(3) .cnc-bio-dot { background: #ff6b35; box-shadow: 0 0 8px #ff6b35; animation-delay: -0.5s; }
.cnc-bio-card:nth-child(4) .cnc-bio-dot { background: #b06eff; box-shadow: 0 0 8px #b06eff; animation-delay: -1.5s; }
.cnc-bio-card.cnc-bio-wide .cnc-bio-dot { background: #00ff8c; box-shadow: 0 0 8px #00ff8c; }
.cnc-bio-number-row {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px;
}
.cnc-bio-num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(52px, 6vw, 72px);
  color: #fff; line-height: 1; letter-spacing: -2px;
}
.cnc-bio-wide .cnc-bio-num { font-size: clamp(64px, 8vw, 96px); }
.cnc-bio-unit {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; font-style: italic;
  font-size: 1.4em; color: rgba(255,255,255,0.45); letter-spacing: 1px;
}
.cnc-bio-label {
  font-size: 13px; color: rgba(255,255,255,0.4);
  font-weight: 300; letter-spacing: 0.5px; margin-bottom: 20px;
}
.cnc-bio-ring-wrap {
  flex-shrink: 0; position: relative;
  width: 130px; height: 130px;
}
.cnc-bio-ring-wrap svg { transform: rotate(-90deg); }
.cnc-bio-ring-bg {
  fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 8;
}
.cnc-bio-ring-fill {
  fill: none; stroke: #00ff8c; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 345; stroke-dashoffset: 345;
  animation: cnc-bio-ringFill 2s ease forwards 0.5s;
  filter: drop-shadow(0 0 8px #00ff8c);
}
@keyframes cnc-bio-ringFill { to { stroke-dashoffset: 69; } }
.cnc-bio-ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff;
}
.cnc-bio-ring-pct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 600; line-height: 1;
}
.cnc-bio-ring-sub {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-top: 4px;
}
.cnc-bio-wide-text { flex: 1; }
.cnc-bio-bars {
  display: flex; flex-direction: column; gap: 10px; margin-top: 18px;
}
.cnc-bio-bar-row { display: flex; align-items: center; gap: 12px; }
.cnc-bio-bar-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  color: rgba(255,255,255,0.3); width: 28px; flex-shrink: 0;
}
.cnc-bio-bar-track {
  flex: 1; height: 4px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden;
}
.cnc-bio-bar-fill {
  height: 100%; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: cnc-bio-barIn 1.2s ease forwards;
}
.cnc-bio-c1 { background: linear-gradient(90deg, #00ff8c, #00c2ff); animation-delay: 0.8s; }
.cnc-bio-c2 { background: linear-gradient(90deg, #00c2ff, #b06eff); animation-delay: 1.0s; }
.cnc-bio-c3 { background: linear-gradient(90deg, #b06eff, #ff6b35); animation-delay: 1.2s; }
.cnc-bio-c4 { background: linear-gradient(90deg, #ff6b35, #ff2d7a); animation-delay: 1.4s; }
.cnc-bio-c5 { background: linear-gradient(90deg, #00ff8c, #00c2ff); animation-delay: 1.6s; }
.cnc-bio-c6 { background: linear-gradient(90deg, #00c2ff, #b06eff); animation-delay: 1.8s; }
.cnc-bio-c7 { background: linear-gradient(90deg, #b06eff, #00ff8c); animation-delay: 2.0s; }
@keyframes cnc-bio-barIn { to { transform: scaleX(1); } }
.cnc-bio-bar-val {
  font-size: 11px; color: rgba(255,255,255,0.35);
  width: 32px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.cnc-bio-sparkline { margin-top: 20px; }
.cnc-bio-sparkline svg path {
  stroke-dasharray: 500; stroke-dashoffset: 500;
  animation: cnc-bio-drawLine 2s ease forwards 0.8s;
}
@keyframes cnc-bio-drawLine { to { stroke-dashoffset: 0; } }
.cnc-bio-card:nth-child(1) { animation-delay: 0.0s; }
.cnc-bio-card:nth-child(2) { animation-delay: 0.15s; }
.cnc-bio-card:nth-child(3) { animation-delay: 0.3s; }
.cnc-bio-card:nth-child(4) { animation-delay: 0.45s; }
.cnc-bio-card.cnc-bio-wide { animation-delay: 0.6s; }
@keyframes cnc-bio-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.cnc-bio-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 10px;
  border-radius: 20px; margin-top: 6px;
}
.cnc-bio-delta-up { background: rgba(0,255,140,0.1); color: #00ff8c; }
.cnc-bio-delta-down { background: rgba(255,107,53,0.1); color: #ff6b35; }
@media (prefers-reduced-motion: reduce) {
  .cnc-bio-card::before, .cnc-bio-dot, .cnc-bio-bar-fill,
  .cnc-bio-ring-fill, .cnc-bio-sparkline svg path, .cnc-bio-card {
    animation: none;
  }
  .cnc-bio-card { opacity: 1; }
}
```

**JS:**
```js
(function () {
  function easeOut(t) { return 1 - Math.pow(1 - t, 3); }
  var root = document.querySelector('.cnc-bio');
  if (!root) return;
  var cards = [].slice.call(root.querySelectorAll('.cnc-bio-card'));
  root.querySelectorAll('.cnc-num[data-target]').forEach(function (el) {
    var target = parseFloat(el.dataset.target);
    var decimals = parseInt(el.dataset.decimals || 0, 10);
    var duration = 2000;
    var idx = cards.indexOf(el.closest('.cnc-bio-card'));
    var delay = (idx * 150 + 300);
    setTimeout(function () {
      var start = performance.now();
      function tick(now) {
        var t = Math.min((now - start) / duration, 1);
        var val = easeOut(t) * target;
        el.textContent = decimals > 0 ? val.toFixed(decimals) : Math.round(val);
        if (t < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    }, delay);
  });
})();
```

### 12. Art Deco Real Estate

**Type:** CSS + JS
**Description:** Cream parchment dashboard with gold ornamental borders, corner flourishes and diamond dividers. Playfair Display serif numerals animate up to luxury portfolio KPIs and property-type cards with SVG ring charts.

**HTML:**
```html
<div class="cnc-deco">
  <div class="cnc-deco-frame">
    <div class="cnc-deco-frame-inner">
      <div class="cnc-deco-corner cnc-deco-tl"></div>
      <div class="cnc-deco-corner cnc-deco-tr"></div>
      <div class="cnc-deco-corner cnc-deco-bl"></div>
      <div class="cnc-deco-corner cnc-deco-br"></div>
      <div class="cnc-deco-eyebrow">Q1 2026 · Market Intelligence Report</div>
      <h2 class="cnc-deco-section-title">Luxury Real Estate <em>Portfolio</em></h2>
      <div class="cnc-deco-ornament"><span class="cnc-deco-ornament-icon">◆ ◆ ◆</span></div>
      <div class="cnc-deco-stats-row">
        <div class="cnc-deco-stat">
          <span class="cnc-deco-stat-pre">Portfolio</span>
          <div class="cnc-deco-stat-num">
            <span class="cnc-deco-stat-sym">$</span>
            <span class="cnc-num" data-target="4.2" data-decimals="1">0</span>
            <span class="cnc-deco-stat-suf">B</span>
          </div>
          <span class="cnc-deco-stat-label">Total Value</span>
        </div>
        <div class="cnc-deco-divider-v"></div>
        <div class="cnc-deco-stat">
          <span class="cnc-deco-stat-pre">Properties</span>
          <div class="cnc-deco-stat-num">
            <span class="cnc-num" data-target="214">0</span>
          </div>
          <span class="cnc-deco-stat-label">Active Listings</span>
        </div>
        <div class="cnc-deco-divider-v"></div>
        <div class="cnc-deco-stat">
          <span class="cnc-deco-stat-pre">Avg. Price</span>
          <div class="cnc-deco-stat-num">
            <span class="cnc-deco-stat-sym">$</span>
            <span class="cnc-num" data-target="8.7" data-decimals="1">0</span>
            <span class="cnc-deco-stat-suf">M</span>
          </div>
          <span class="cnc-deco-stat-label">Per Property</span>
        </div>
        <div class="cnc-deco-divider-v"></div>
        <div class="cnc-deco-stat">
          <span class="cnc-deco-stat-pre">Return</span>
          <div class="cnc-deco-stat-num">
            <span class="cnc-num" data-target="23.4" data-decimals="1">0</span>
            <span class="cnc-deco-stat-suf">%</span>
          </div>
          <span class="cnc-deco-stat-label">Annualized</span>
        </div>
      </div>
      <div class="cnc-deco-ornament"><span class="cnc-deco-ornament-icon">◆ ✦ ◆</span></div>
      <div class="cnc-deco-prop-grid">
        <div class="cnc-deco-prop-card">
          <div class="cnc-deco-ring-mini">
            <svg width="44" height="44" viewBox="0 0 44 44">
              <circle class="cnc-deco-rb" cx="22" cy="22" r="18"/>
              <circle class="cnc-deco-rf" cx="22" cy="22" r="18" data-pct="85"/>
            </svg>
          </div>
          <span class="cnc-deco-prop-icon">Residential</span>
          <div class="cnc-deco-prop-num-wrap">
            <span class="cnc-deco-prop-num cnc-num" data-target="127">0</span>
          </div>
          <div class="cnc-deco-prop-bar"><div class="cnc-deco-prop-bar-fill"></div></div>
          <span class="cnc-deco-prop-sublabel">Units Occupied</span>
          <span class="cnc-deco-tag">Prime</span>
        </div>
        <div class="cnc-deco-prop-card">
          <div class="cnc-deco-ring-mini">
            <svg width="44" height="44" viewBox="0 0 44 44">
              <circle class="cnc-deco-rb" cx="22" cy="22" r="18"/>
              <circle class="cnc-deco-rf" cx="22" cy="22" r="18" data-pct="62"/>
            </svg>
          </div>
          <span class="cnc-deco-prop-icon">Commercial</span>
          <div class="cnc-deco-prop-num-wrap">
            <span class="cnc-deco-prop-num cnc-num" data-target="53">0</span>
          </div>
          <div class="cnc-deco-prop-bar"><div class="cnc-deco-prop-bar-fill"></div></div>
          <span class="cnc-deco-prop-sublabel">Active Leases</span>
          <span class="cnc-deco-tag">Trophy</span>
        </div>
        <div class="cnc-deco-prop-card">
          <div class="cnc-deco-ring-mini">
            <svg width="44" height="44" viewBox="0 0 44 44">
              <circle class="cnc-deco-rb" cx="22" cy="22" r="18"/>
              <circle class="cnc-deco-rf" cx="22" cy="22" r="18" data-pct="91"/>
            </svg>
          </div>
          <span class="cnc-deco-prop-icon">Hospitality</span>
          <div class="cnc-deco-prop-num-wrap">
            <span class="cnc-deco-prop-num cnc-num" data-target="34">0</span>
          </div>
          <div class="cnc-deco-prop-bar"><div class="cnc-deco-prop-bar-fill"></div></div>
          <span class="cnc-deco-prop-sublabel">Keys Managed</span>
          <span class="cnc-deco-tag">Ultra-Lux</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-deco {
  --deco-gold: #c9a84c;
  --deco-gold-light: #e8c96b;
  --deco-cream: #faf6ee;
  --deco-dark: #1a1510;
  --deco-ink: #2c2318;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
  background: var(--deco-cream);
  background-image:
    radial-gradient(ellipse at top, #ede5d0 0%, transparent 60%),
    repeating-linear-gradient(45deg,
      transparent, transparent 20px,
      rgba(201,168,76,0.04) 20px, rgba(201,168,76,0.04) 21px);
  font-family: 'Josefin Sans', sans-serif;
  color: var(--deco-ink);
}
.cnc-deco-frame {
  width: 900px;
  border: 1px solid var(--deco-gold);
  padding: 3px; position: relative;
}
.cnc-deco-frame-inner {
  border: 1px solid rgba(201,168,76,0.4);
  padding: 48px 52px; position: relative;
}
.cnc-deco-corner {
  position: absolute; width: 40px; height: 40px;
  border-color: var(--deco-gold); border-style: solid;
}
.cnc-deco-tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.cnc-deco-tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.cnc-deco-bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; }
.cnc-deco-br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }
.cnc-deco-ornament {
  display: flex; align-items: center; gap: 16px;
  margin: 36px 0; color: var(--deco-gold);
}
.cnc-deco-ornament::before, .cnc-deco-ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--deco-gold), transparent);
}
.cnc-deco-ornament-icon { font-size: 18px; letter-spacing: 8px; }
.cnc-deco-eyebrow {
  font-size: 9px; letter-spacing: 6px; text-transform: uppercase;
  color: var(--deco-gold); text-align: center;
  margin-bottom: 8px; font-weight: 300;
}
.cnc-deco-section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 44px); font-weight: 400;
  text-align: center; color: var(--deco-dark);
  letter-spacing: -0.5px; margin: 0 0 4px;
}
.cnc-deco-section-title em { font-style: italic; color: var(--deco-gold); }
.cnc-deco-stats-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center; gap: 0; margin-top: 8px;
}
.cnc-deco-divider-v {
  width: 1px; height: 80px;
  background: linear-gradient(180deg, transparent, var(--deco-gold), transparent);
  margin: auto;
}
.cnc-deco-stat {
  text-align: center; padding: 24px 12px;
  opacity: 0; transform: translateY(16px);
  animation: cnc-deco-statIn 0.8s ease forwards;
}
.cnc-deco-stat:nth-child(1) { animation-delay: 0.2s; }
.cnc-deco-stat:nth-child(3) { animation-delay: 0.4s; }
.cnc-deco-stat:nth-child(5) { animation-delay: 0.6s; }
.cnc-deco-stat:nth-child(7) { animation-delay: 0.8s; }
@keyframes cnc-deco-statIn { to { opacity: 1; transform: translateY(0); } }
.cnc-deco-stat-pre {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--deco-gold); font-weight: 100;
  margin-bottom: 8px; display: block;
}
.cnc-deco-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 58px); font-weight: 700;
  color: var(--deco-dark); line-height: 1; letter-spacing: -1px;
  display: flex; justify-content: center; align-items: baseline; gap: 3px;
}
.cnc-deco-stat-sym {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.4em; font-weight: 100; letter-spacing: 2px;
  color: var(--deco-gold); align-self: flex-start; margin-top: 6px;
}
.cnc-deco-stat-suf {
  font-size: 0.35em; font-weight: 100;
  color: var(--deco-gold); letter-spacing: 2px;
}
.cnc-deco-stat-label {
  font-size: 9px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(44,35,24,0.4); font-weight: 300;
  margin-top: 8px; display: block;
}
.cnc-deco-prop-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 8px;
}
.cnc-deco-prop-card {
  border: 1px solid rgba(201,168,76,0.25);
  padding: 28px 24px; position: relative; overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  opacity: 0; animation: cnc-deco-statIn 0.8s ease forwards;
}
.cnc-deco-prop-card:nth-child(1) { animation-delay: 0.3s; }
.cnc-deco-prop-card:nth-child(2) { animation-delay: 0.5s; }
.cnc-deco-prop-card:nth-child(3) { animation-delay: 0.7s; }
.cnc-deco-prop-card::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--deco-gold), var(--deco-gold-light), var(--deco-gold));
  transform: scaleX(0); transition: transform 0.4s ease;
}
.cnc-deco-prop-card:hover {
  border-color: var(--deco-gold);
  box-shadow: 0 8px 40px rgba(201,168,76,0.1);
}
.cnc-deco-prop-card:hover::after { transform: scaleX(1); }
.cnc-deco-prop-icon {
  font-size: 10px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--deco-gold); font-weight: 100;
  margin-bottom: 20px; display: block;
}
.cnc-deco-prop-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 5vw, 54px); font-weight: 700;
  color: var(--deco-dark); line-height: 1; letter-spacing: -1px;
}
.cnc-deco-prop-num-wrap {
  display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px;
}
.cnc-deco-ring-mini {
  position: absolute; top: 24px; right: 24px;
}
.cnc-deco-ring-mini svg { transform: rotate(-90deg); }
.cnc-deco-rb { fill: none; stroke: rgba(201,168,76,0.12); stroke-width: 3; }
.cnc-deco-rf {
  fill: none; stroke: var(--deco-gold); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 138; stroke-dashoffset: 138;
  transition: stroke-dashoffset 1.6s ease;
}
.cnc-deco-prop-sublabel {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(44,35,24,0.35); font-weight: 300;
}
.cnc-deco-prop-bar {
  height: 1px; background: rgba(201,168,76,0.15);
  margin: 16px 0; position: relative; overflow: hidden;
}
.cnc-deco-prop-bar-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, var(--deco-gold), var(--deco-gold-light));
  transform: scaleX(0); transform-origin: left;
  animation: cnc-deco-barFill 1.5s ease forwards;
}
.cnc-deco-prop-card:nth-child(1) .cnc-deco-prop-bar-fill { animation-delay: 0.8s; width: 85%; }
.cnc-deco-prop-card:nth-child(2) .cnc-deco-prop-bar-fill { animation-delay: 1.0s; width: 62%; }
.cnc-deco-prop-card:nth-child(3) .cnc-deco-prop-bar-fill { animation-delay: 1.2s; width: 91%; }
@keyframes cnc-deco-barFill { to { transform: scaleX(1); } }
.cnc-deco-tag {
  display: inline-block;
  font-size: 8px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--deco-gold); border: 1px solid var(--deco-gold);
  padding: 2px 8px; margin-top: 12px; font-weight: 300;
}
@media (prefers-reduced-motion: reduce) {
  .cnc-deco-stat, .cnc-deco-prop-card,
  .cnc-deco-prop-bar-fill, .cnc-deco-rf { animation: none; transition: none; }
  .cnc-deco-stat, .cnc-deco-prop-card { opacity: 1; transform: none; }
}
```

**JS:**
```js
(function () {
  function ease(t) { return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2; }
  var root = document.querySelector('.cnc-deco');
  if (!root) return;
  root.querySelectorAll('.cnc-num[data-target]').forEach(function (el) {
    var target = parseFloat(el.dataset.target);
    var decimals = parseInt(el.dataset.decimals || 0, 10);
    var duration = 1800;
    setTimeout(function () {
      var start = performance.now();
      function tick(now) {
        var t = Math.min((now - start) / duration, 1);
        var val = ease(t) * target;
        el.textContent = decimals > 0
          ? val.toFixed(decimals)
          : Math.round(val).toLocaleString();
        if (t < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    }, 400);
  });
  root.querySelectorAll('.cnc-deco-rf[data-pct]').forEach(function (rf) {
    var pct = parseFloat(rf.dataset.pct) / 100;
    var circumference = 2 * Math.PI * 18;
    setTimeout(function () {
      rf.style.strokeDashoffset = circumference * (1 - pct);
    }, 800);
  });
})();
```

### 13. Cyberpunk Gaming HUD

**Type:** CSS + JS
**Description:** Pitch-black gaming dashboard with cyan and magenta neon glows, clipped hexagonal panels and Orbitron display font. A glitching player name, animated skill bars with arrow-tip indicators and three oversized kill / win / damage counters.

**HTML:**
```html
<div class="cnc-cyber">
  <div class="cnc-cyber-layout">
    <div class="cnc-cyber-panel cnc-cyber-profile">
      <div class="cnc-cyber-ph">Player Profile · Online</div>
      <div style="padding-top: 16px;">
        <div class="cnc-cyber-avatar">
          <div class="cnc-cyber-avatar-hex">⚡</div>
          <div class="cnc-cyber-rank-badge">#1</div>
        </div>
        <div class="cnc-cyber-player-name cnc-cyber-glitch">NEXUS_V</div>
        <div class="cnc-cyber-player-tag">// APEX · SEASON 12</div>
        <div class="cnc-cyber-stat-row">
          <span class="cnc-cyber-stat-row-label">K/D Ratio</span>
          <span class="cnc-cyber-stat-row-val cnc-cyber-cyan cnc-num" data-target="4.87" data-decimals="2">0</span>
        </div>
        <div class="cnc-cyber-stat-row">
          <span class="cnc-cyber-stat-row-label">Win Rate</span>
          <span class="cnc-cyber-stat-row-val cnc-cyber-green cnc-num" data-target="71.4" data-decimals="1">0</span>
        </div>
        <div class="cnc-cyber-stat-row">
          <span class="cnc-cyber-stat-row-label">Headshots</span>
          <span class="cnc-cyber-stat-row-val cnc-cyber-magenta cnc-num" data-target="38.2" data-decimals="1">0</span>
        </div>
        <div class="cnc-cyber-stat-row">
          <span class="cnc-cyber-stat-row-label">Playtime</span>
          <span class="cnc-cyber-stat-row-val" style="color:#fff">2,841h</span>
        </div>
        <div class="cnc-cyber-stat-row">
          <span class="cnc-cyber-stat-row-label">MMR</span>
          <span class="cnc-cyber-stat-row-val cnc-cyber-cyan cnc-num" data-target="8420">0</span>
        </div>
      </div>
    </div>
    <div class="cnc-cyber-panel cnc-cyber-xp-panel">
      <div class="cnc-cyber-ph">Season XP Progress</div>
      <div style="padding-top: 12px;">
        <div class="cnc-cyber-xp-label">
          <span>Level 847 · Prestige V</span>
          <span><span class="cnc-num" data-target="73">0</span>% to 848</span>
        </div>
        <div class="cnc-cyber-xp-track"><div class="cnc-cyber-xp-fill"></div></div>
      </div>
    </div>
    <div class="cnc-cyber-counter-row">
      <div class="cnc-cyber-panel cnc-cyber-big-counter">
        <div class="cnc-cyber-bc-label">Total Kills</div>
        <div class="cnc-cyber-bc-num cnc-num" data-target="48291">0</div>
        <div class="cnc-cyber-bc-sub">+312 this session</div>
      </div>
      <div class="cnc-cyber-panel cnc-cyber-big-counter">
        <div class="cnc-cyber-bc-label">Matches Won</div>
        <div class="cnc-cyber-bc-num cnc-cyber-magenta-glow cnc-num" data-target="1847">0</div>
        <div class="cnc-cyber-bc-sub">3W streak active</div>
      </div>
      <div class="cnc-cyber-panel cnc-cyber-big-counter">
        <div class="cnc-cyber-bc-label">Damage / Round</div>
        <div class="cnc-cyber-bc-num cnc-cyber-green-glow cnc-num" data-target="847">0</div>
        <div class="cnc-cyber-bc-sub">Top 0.1% global</div>
      </div>
    </div>
    <div class="cnc-cyber-panel cnc-cyber-skill-grid">
      <div class="cnc-cyber-ph">Combat Skills · Analysis</div>
      <div style="padding-top: 12px;">
        <div class="cnc-cyber-skill-item">
          <span class="cnc-cyber-skill-name">Accuracy</span>
          <div class="cnc-cyber-skill-bar"><div class="cnc-cyber-skill-fill cnc-cyber-sf1"></div></div>
          <span class="cnc-cyber-skill-pct">94%</span>
        </div>
        <div class="cnc-cyber-skill-item">
          <span class="cnc-cyber-skill-name">Reaction</span>
          <div class="cnc-cyber-skill-bar"><div class="cnc-cyber-skill-fill cnc-cyber-sf2"></div></div>
          <span class="cnc-cyber-skill-pct">87%</span>
        </div>
        <div class="cnc-cyber-skill-item">
          <span class="cnc-cyber-skill-name">Strategy</span>
          <div class="cnc-cyber-skill-bar"><div class="cnc-cyber-skill-fill cnc-cyber-sf3"></div></div>
          <span class="cnc-cyber-skill-pct">78%</span>
        </div>
        <div class="cnc-cyber-skill-item">
          <span class="cnc-cyber-skill-name">Aggression</span>
          <div class="cnc-cyber-skill-bar"><div class="cnc-cyber-skill-fill cnc-cyber-sf4"></div></div>
          <span class="cnc-cyber-skill-pct">91%</span>
        </div>
        <div class="cnc-cyber-skill-item">
          <span class="cnc-cyber-skill-name">Support</span>
          <div class="cnc-cyber-skill-bar"><div class="cnc-cyber-skill-fill cnc-cyber-sf5"></div></div>
          <span class="cnc-cyber-skill-pct">65%</span>
        </div>
        <div class="cnc-cyber-skill-item">
          <span class="cnc-cyber-skill-name">Movement</span>
          <div class="cnc-cyber-skill-bar"><div class="cnc-cyber-skill-fill cnc-cyber-sf6"></div></div>
          <span class="cnc-cyber-skill-pct">82%</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-cyber {
  --cyber-bg: #070b14;
  --cyber-panel: #0d1424;
  --cyber-cyan: #00f5ff;
  --cyber-magenta: #ff00c8;
  --cyber-green: #00ff87;
  --cyber-orange: #ff6b00;
  --cyber-border: rgba(0,245,255,0.2);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: var(--cyber-bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0,245,255,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(255,0,200,0.05) 0%, transparent 50%);
  font-family: 'Share Tech Mono', monospace;
  color: var(--cyber-cyan);
  overflow: hidden;
}
.cnc-cyber::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none;
}
.cnc-cyber-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px; width: 960px;
  position: relative;
}
.cnc-cyber-panel {
  background: var(--cyber-panel);
  border: 1px solid var(--cyber-border);
  position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.cnc-cyber-panel::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,245,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.cnc-cyber-ph {
  padding: 10px 16px;
  border-bottom: 1px solid var(--cyber-border);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(0,245,255,0.5);
  display: flex; align-items: center; gap: 8px;
}
.cnc-cyber-ph::before {
  content: ''; width: 6px; height: 6px;
  background: var(--cyber-cyan);
  box-shadow: 0 0 8px var(--cyber-cyan);
  animation: cnc-cyber-blink 1.5s step-end infinite;
}
@keyframes cnc-cyber-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}
.cnc-cyber-profile { grid-row: span 3; padding: 24px 20px; }
.cnc-cyber-avatar {
  width: 100px; height: 100px;
  margin: 8px auto 20px;
  position: relative;
}
.cnc-cyber-avatar-hex {
  width: 100%; height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, #1a2540, #0d1424);
  border: 2px solid var(--cyber-cyan);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  box-shadow: 0 0 20px rgba(0,245,255,0.3), inset 0 0 20px rgba(0,245,255,0.05);
  animation: cnc-cyber-hexPulse 3s ease-in-out infinite;
}
@keyframes cnc-cyber-hexPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,245,255,0.3), inset 0 0 20px rgba(0,245,255,0.05); }
  50% { box-shadow: 0 0 40px rgba(0,245,255,0.5), inset 0 0 30px rgba(0,245,255,0.1); }
}
.cnc-cyber-rank-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--cyber-magenta); color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700;
  padding: 3px 7px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%);
  box-shadow: 0 0 12px var(--cyber-magenta);
}
.cnc-cyber-player-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; font-weight: 900;
  text-align: center; color: #fff;
  text-shadow: 0 0 20px var(--cyber-cyan);
  letter-spacing: 2px; margin-bottom: 4px;
}
.cnc-cyber-player-tag {
  font-size: 11px; color: rgba(0,245,255,0.4);
  text-align: center; margin-bottom: 24px; letter-spacing: 1px;
}
.cnc-cyber-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,245,255,0.08);
}
.cnc-cyber-stat-row-label {
  font-size: 10px; color: rgba(0,245,255,0.4);
  letter-spacing: 2px; text-transform: uppercase;
}
.cnc-cyber-stat-row-val {
  font-size: 15px; color: #fff;
  font-family: 'Orbitron', sans-serif; font-weight: 700;
}
.cnc-cyber-cyan { color: var(--cyber-cyan); text-shadow: 0 0 10px var(--cyber-cyan); }
.cnc-cyber-magenta { color: var(--cyber-magenta); text-shadow: 0 0 10px var(--cyber-magenta); }
.cnc-cyber-green { color: var(--cyber-green); text-shadow: 0 0 10px var(--cyber-green); }
.cnc-cyber-big-counter {
  padding: 20px 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.cnc-cyber-bc-label {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(0,245,255,0.4); margin-bottom: 8px;
}
.cnc-cyber-bc-num {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(40px, 5vw, 62px); font-weight: 900;
  line-height: 1; color: #fff;
  text-shadow: 0 0 30px var(--cyber-cyan), 0 0 60px rgba(0,245,255,0.3);
  letter-spacing: -1px;
}
.cnc-cyber-magenta-glow { text-shadow: 0 0 30px var(--cyber-magenta), 0 0 60px rgba(255,0,200,0.3); color: var(--cyber-magenta); }
.cnc-cyber-green-glow { text-shadow: 0 0 30px var(--cyber-green), 0 0 60px rgba(0,255,135,0.3); color: var(--cyber-green); }
.cnc-cyber-bc-sub {
  font-size: 10px; color: rgba(0,245,255,0.3);
  margin-top: 8px; letter-spacing: 1px;
}
.cnc-cyber-skill-grid { padding: 16px 20px; }
.cnc-cyber-skill-item {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center; gap: 12px; margin-bottom: 10px;
}
.cnc-cyber-skill-name {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(0,245,255,0.5);
}
.cnc-cyber-skill-bar {
  height: 6px; background: rgba(255,255,255,0.05);
  position: relative; overflow: visible;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%);
}
.cnc-cyber-skill-fill {
  height: 100%; transform: scaleX(0); transform-origin: left;
  animation: cnc-cyber-fillSkill 1.2s ease forwards;
  position: relative;
}
.cnc-cyber-skill-fill::after {
  content: ''; position: absolute; right: -2px; top: 50%;
  transform: translateY(-50%); width: 8px; height: 8px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.cnc-cyber-sf1 { background: var(--cyber-cyan); color: var(--cyber-cyan); width: 94%; animation-delay: 0.4s; }
.cnc-cyber-sf2 { background: var(--cyber-magenta); color: var(--cyber-magenta); width: 87%; animation-delay: 0.55s; }
.cnc-cyber-sf3 { background: var(--cyber-green); color: var(--cyber-green); width: 78%; animation-delay: 0.7s; }
.cnc-cyber-sf4 { background: var(--cyber-orange); color: var(--cyber-orange); width: 91%; animation-delay: 0.85s; }
.cnc-cyber-sf5 { background: var(--cyber-cyan); color: var(--cyber-cyan); width: 65%; animation-delay: 1.0s; }
.cnc-cyber-sf6 { background: var(--cyber-magenta); color: var(--cyber-magenta); width: 82%; animation-delay: 1.15s; }
@keyframes cnc-cyber-fillSkill { to { transform: scaleX(1); } }
.cnc-cyber-skill-pct {
  font-size: 11px; text-align: right;
  color: rgba(255,255,255,0.5);
}
.cnc-cyber-counter-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; grid-column: 2;
}
.cnc-cyber-xp-panel { padding: 16px 20px; grid-column: 2; }
.cnc-cyber-xp-label {
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(0,245,255,0.4); margin-bottom: 8px;
}
.cnc-cyber-xp-track {
  height: 8px; background: rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.cnc-cyber-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta), var(--cyber-green));
  transform: scaleX(0); transform-origin: left;
  animation: cnc-cyber-xpFill 2s ease forwards 0.5s;
  width: 73%;
  box-shadow: 0 0 12px var(--cyber-cyan);
}
@keyframes cnc-cyber-xpFill { to { transform: scaleX(1); } }
@keyframes cnc-cyber-glitch {
  0%, 90%, 100% { text-shadow: 0 0 30px var(--cyber-cyan); clip-path: none; transform: none; }
  92% { clip-path: inset(20% 0 60% 0); transform: translateX(-3px); text-shadow: -2px 0 var(--cyber-magenta); }
  94% { clip-path: inset(60% 0 10% 0); transform: translateX(3px); text-shadow: 2px 0 var(--cyber-cyan); }
  96% { clip-path: none; transform: none; }
}
.cnc-cyber-glitch { animation: cnc-cyber-glitch 5s infinite; }
@media (prefers-reduced-motion: reduce) {
  .cnc-cyber-ph::before, .cnc-cyber-avatar-hex, .cnc-cyber-skill-fill,
  .cnc-cyber-xp-fill, .cnc-cyber-glitch { animation: none; }
}
```

**JS:**
```js
(function () {
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  var root = document.querySelector('.cnc-cyber');
  if (!root) return;
  root.querySelectorAll('.cnc-num[data-target]').forEach(function (el) {
    var target = parseFloat(el.dataset.target);
    var decimals = parseInt(el.dataset.decimals || 0, 10);
    var duration = 1600;
    setTimeout(function () {
      var start = performance.now();
      function tick(now) {
        var t = Math.min((now - start) / duration, 1);
        var val = ease(t) * target;
        el.textContent = decimals > 0
          ? val.toFixed(decimals)
          : Math.round(val).toLocaleString();
        if (t < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    }, 200);
  });
})();
```

### 14. Swiss SaaS Analytics

**Type:** CSS + JS
**Description:** Off-white editorial dashboard with precise 1px borders and zero decoration. Instrument Serif numerals across a 4-column MRR / users / churn / NPS hero row, an animated revenue bar chart and a D7 / D30 / D90 retention ring.

**HTML:**
```html
<div class="cnc-swiss">
  <div class="cnc-swiss-page">
    <div class="cnc-swiss-meta">
      <span class="cnc-swiss-date-range">Jan 1 — Mar 31, 2026 · Q1 Report</span>
      <div class="cnc-swiss-period-tabs">
        <div class="cnc-swiss-tab">7D</div>
        <div class="cnc-swiss-tab">1M</div>
        <div class="cnc-swiss-tab cnc-swiss-active">Q1</div>
        <div class="cnc-swiss-tab">YTD</div>
      </div>
    </div>
    <div class="cnc-swiss-hero-row">
      <div class="cnc-swiss-hero-stat">
        <span class="cnc-swiss-h-label">Monthly Recurring Revenue</span>
        <div class="cnc-swiss-h-num"><span class="cnc-swiss-h-sym">$</span><span class="cnc-num" data-target="2.84" data-decimals="2">0</span><span class="cnc-swiss-h-sym">M</span></div>
        <div class="cnc-swiss-h-delta cnc-swiss-up">↑ 18.4% <span class="cnc-swiss-h-delta-label">vs Q4 '25</span></div>
      </div>
      <div class="cnc-swiss-hero-stat">
        <span class="cnc-swiss-h-label">Active Users</span>
        <div class="cnc-swiss-h-num"><span class="cnc-num" data-target="94710">0</span></div>
        <div class="cnc-swiss-h-delta cnc-swiss-up">↑ 12.1% <span class="cnc-swiss-h-delta-label">vs Q4 '25</span></div>
      </div>
      <div class="cnc-swiss-hero-stat">
        <span class="cnc-swiss-h-label">Churn Rate</span>
        <div class="cnc-swiss-h-num"><span class="cnc-num" data-target="1.8" data-decimals="1">0</span><span class="cnc-swiss-h-sym">%</span></div>
        <div class="cnc-swiss-h-delta cnc-swiss-dn">↓ 0.3pp <span class="cnc-swiss-h-delta-label">vs Q4 '25</span></div>
      </div>
      <div class="cnc-swiss-hero-stat">
        <span class="cnc-swiss-h-label">NPS Score</span>
        <div class="cnc-swiss-h-num"><span class="cnc-num" data-target="72">0</span></div>
        <div class="cnc-swiss-h-delta cnc-swiss-up">↑ 4 pts <span class="cnc-swiss-h-delta-label">vs Q4 '25</span></div>
      </div>
    </div>
    <div class="cnc-swiss-content-row">
      <div class="cnc-swiss-left">
        <div class="cnc-swiss-box">
          <div class="cnc-swiss-box-head">
            <span class="cnc-swiss-box-title">Revenue by Month</span>
            <span class="cnc-swiss-box-meta">USD · 2025–2026</span>
          </div>
          <div class="cnc-swiss-chart-area">
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:38%"></div><span class="cnc-swiss-bar-label">Apr</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:42%"></div><span class="cnc-swiss-bar-label">May</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:45%"></div><span class="cnc-swiss-bar-label">Jun</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:51%"></div><span class="cnc-swiss-bar-label">Jul</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:47%"></div><span class="cnc-swiss-bar-label">Aug</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:55%"></div><span class="cnc-swiss-bar-label">Sep</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:62%"></div><span class="cnc-swiss-bar-label">Oct</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:58%"></div><span class="cnc-swiss-bar-label">Nov</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-muted" style="height:68%"></div><span class="cnc-swiss-bar-label">Dec</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-accent" style="height:75%"></div><span class="cnc-swiss-bar-label">Jan</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar cnc-swiss-accent" style="height:82%"></div><span class="cnc-swiss-bar-label">Feb</span></div>
            <div class="cnc-swiss-bar-wrap"><div class="cnc-swiss-cbar" style="height:91%"></div><span class="cnc-swiss-bar-label">Mar</span></div>
          </div>
        </div>
        <div class="cnc-swiss-box">
          <div class="cnc-swiss-box-head">
            <span class="cnc-swiss-box-title">Acquisition Channels</span>
            <span class="cnc-swiss-box-meta">Q1 2026</span>
          </div>
          <table class="cnc-swiss-table">
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#111"></span>Organic Search</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:84%; background:#111"></div></div><span>34,820</span></div></td>
              <td>36.7%</td>
            </tr>
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#2563eb"></span>Paid Ads</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:62%; background:#2563eb"></div></div><span>22,190</span></div></td>
              <td>23.4%</td>
            </tr>
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#16a34a"></span>Referral</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:51%; background:#16a34a"></div></div><span>18,140</span></div></td>
              <td>19.1%</td>
            </tr>
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#9333ea"></span>Social</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:38%; background:#9333ea"></div></div><span>11,810</span></div></td>
              <td>12.5%</td>
            </tr>
            <tr>
              <td><span class="cnc-swiss-channel-dot" style="background:#ea580c"></span>Direct</td>
              <td><div class="cnc-swiss-bar-mini"><div class="cnc-swiss-mini-track"><div class="cnc-swiss-mini-fill" style="width:29%; background:#ea580c"></div></div><span>7,750</span></div></td>
              <td>8.2%</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="cnc-swiss-right">
        <div class="cnc-swiss-box">
          <div class="cnc-swiss-box-head"><span class="cnc-swiss-box-title">Key Metrics</span></div>
          <div class="cnc-swiss-kpi-list">
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">⏱</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">Avg. Session</div><div class="cnc-swiss-kpi-sub">Per active user</div></div>
              <div class="cnc-swiss-kpi-val"><span class="cnc-num" data-target="24" data-decimals="0">0</span>m</div>
            </div>
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">💰</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">ARPU</div><div class="cnc-swiss-kpi-sub">Monthly average</div></div>
              <div class="cnc-swiss-kpi-val">$<span class="cnc-num" data-target="29.90" data-decimals="2">0</span></div>
            </div>
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">📈</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">LTV</div><div class="cnc-swiss-kpi-sub">Avg customer</div></div>
              <div class="cnc-swiss-kpi-val">$<span class="cnc-num" data-target="1240">0</span></div>
            </div>
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">⚡</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">CAC</div><div class="cnc-swiss-kpi-sub">Blended</div></div>
              <div class="cnc-swiss-kpi-val">$<span class="cnc-num" data-target="148">0</span></div>
            </div>
            <div class="cnc-swiss-kpi-item">
              <div class="cnc-swiss-kpi-icon">🎯</div>
              <div class="cnc-swiss-kpi-text"><div class="cnc-swiss-kpi-name">Conv. Rate</div><div class="cnc-swiss-kpi-sub">Trial to paid</div></div>
              <div class="cnc-swiss-kpi-val"><span class="cnc-num" data-target="31.4" data-decimals="1">0</span>%</div>
            </div>
          </div>
        </div>
        <div class="cnc-swiss-box" style="padding:24px;">
          <div class="cnc-swiss-box-title" style="margin-bottom:20px;">Retention Cohorts</div>
          <div style="display:flex; gap:16px; align-items:center;">
            <svg width="90" height="90" viewBox="0 0 90 90" style="transform:rotate(-90deg); flex-shrink:0;">
              <circle cx="45" cy="45" r="35" fill="none" stroke="#e8e8e4" stroke-width="8"/>
              <circle cx="45" cy="45" r="35" fill="none" stroke="#111" stroke-width="8"
                stroke-linecap="round"
                stroke-dasharray="220"
                stroke-dashoffset="220"
                class="cnc-swiss-ring-main"/>
            </svg>
            <div>
              <div style="font-family:'Instrument Serif',serif; font-size:32px; letter-spacing:-1px; line-height:1;"><span class="cnc-num" data-target="78">0</span>%</div>
              <div style="font-size:11px; color:#888; margin-top:4px;">D30 Retention</div>
              <div style="font-size:11px; color:#16a34a; margin-top:8px;">↑ 5pp vs benchmark</div>
            </div>
          </div>
          <div style="margin-top:16px; display:flex; flex-direction:column; gap:8px;">
            <div style="display:flex; justify-content:space-between; font-size:11px; color:#888;">
              <span>D7</span><div style="flex:1; height:3px; background:#e8e8e4; margin:auto 12px; border-radius:2px; overflow:hidden;"><div class="cnc-swiss-cohort-bar" style="background:#111;width:91%; animation-delay:0.7s;"></div></div><span>91%</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:11px; color:#888;">
              <span>D30</span><div style="flex:1; height:3px; background:#e8e8e4; margin:auto 12px; border-radius:2px; overflow:hidden;"><div class="cnc-swiss-cohort-bar" style="background:#111;width:78%; animation-delay:0.9s;"></div></div><span>78%</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:11px; color:#888;">
              <span>D90</span><div style="flex:1; height:3px; background:#e8e8e4; margin:auto 12px; border-radius:2px; overflow:hidden;"><div class="cnc-swiss-cohort-bar" style="background:#111;width:61%; animation-delay:1.1s;"></div></div><span>61%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-swiss {
  --swiss-bg: #f7f7f5;
  --swiss-ink: #111;
  --swiss-mid: #888;
  --swiss-faint: #e8e8e4;
  --swiss-blue: #2563eb;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 32px;
  background: var(--swiss-bg);
  font-family: 'Instrument Sans', sans-serif;
  color: var(--swiss-ink);
}
.cnc-swiss-page { width: 1000px; }
.cnc-swiss-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 48px; padding-bottom: 20px;
  border-bottom: 1px solid var(--swiss-faint);
}
.cnc-swiss-date-range {
  font-size: 12px; color: var(--swiss-mid); letter-spacing: 0.5px;
}
.cnc-swiss-period-tabs {
  display: flex; gap: 2px;
  background: var(--swiss-faint);
  padding: 3px; border-radius: 6px;
}
.cnc-swiss-tab {
  font-size: 11px; padding: 4px 12px;
  border-radius: 4px; cursor: pointer;
  color: var(--swiss-mid); letter-spacing: 0.5px;
  transition: background 0.15s, color 0.15s;
}
.cnc-swiss-tab.cnc-swiss-active {
  background: #fff; color: var(--swiss-ink);
  font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cnc-swiss-hero-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--swiss-faint);
  margin-bottom: 24px;
}
.cnc-swiss-hero-stat {
  padding: 32px 28px;
  border-right: 1px solid var(--swiss-faint);
  position: relative;
  transition: background 0.15s;
  opacity: 0; animation: cnc-swiss-fadeIn 0.5s ease forwards;
}
.cnc-swiss-hero-stat:last-child { border-right: none; }
.cnc-swiss-hero-stat:hover { background: #fff; }
.cnc-swiss-hero-stat::after {
  content: ''; position: absolute;
  bottom: 0; left: 28px; right: 28px;
  height: 1px; background: var(--swiss-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.cnc-swiss-hero-stat:hover::after { transform: scaleX(1); }
.cnc-swiss-hero-stat:nth-child(1) { animation-delay: 0.0s; }
.cnc-swiss-hero-stat:nth-child(2) { animation-delay: 0.08s; }
.cnc-swiss-hero-stat:nth-child(3) { animation-delay: 0.16s; }
.cnc-swiss-hero-stat:nth-child(4) { animation-delay: 0.24s; }
@keyframes cnc-swiss-fadeIn { to { opacity: 1; } }
.cnc-swiss-h-label {
  font-size: 11px; color: var(--swiss-mid);
  letter-spacing: 0.5px; margin-bottom: 12px; display: block;
}
.cnc-swiss-h-num {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--swiss-ink); line-height: 1; letter-spacing: -1.5px;
  display: flex; align-items: baseline; gap: 4px;
}
.cnc-swiss-h-sym {
  font-size: 0.45em;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400; color: var(--swiss-mid); letter-spacing: 0;
}
.cnc-swiss-h-delta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 10px; font-size: 12px; font-weight: 500;
}
.cnc-swiss-up { color: #16a34a; }
.cnc-swiss-dn { color: #dc2626; }
.cnc-swiss-h-delta-label {
  font-size: 11px; color: var(--swiss-mid);
  font-weight: 400; margin-left: 2px;
}
.cnc-swiss-content-row {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px;
}
.cnc-swiss-left { display: flex; flex-direction: column; gap: 24px; }
.cnc-swiss-right { display: flex; flex-direction: column; gap: 24px; }
.cnc-swiss-box {
  border: 1px solid var(--swiss-faint);
  background: #fff;
  opacity: 0; animation: cnc-swiss-fadeIn 0.5s ease forwards;
}
.cnc-swiss-left .cnc-swiss-box:nth-child(1) { animation-delay: 0.3s; }
.cnc-swiss-left .cnc-swiss-box:nth-child(2) { animation-delay: 0.4s; }
.cnc-swiss-right .cnc-swiss-box:nth-child(1) { animation-delay: 0.35s; }
.cnc-swiss-right .cnc-swiss-box:nth-child(2) { animation-delay: 0.45s; }
.cnc-swiss-box-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--swiss-faint);
  display: flex; align-items: center; justify-content: space-between;
}
.cnc-swiss-box-title {
  font-size: 12px; font-weight: 500;
  color: var(--swiss-ink); letter-spacing: 0.3px;
}
.cnc-swiss-box-meta { font-size: 11px; color: var(--swiss-mid); }
.cnc-swiss-chart-area {
  padding: 24px 20px 16px;
  display: flex; align-items: flex-end; gap: 6px;
  height: 180px; position: relative;
}
.cnc-swiss-chart-area::before {
  content: ''; position: absolute;
  left: 20px; right: 20px; top: 24px; bottom: 32px;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent calc(25% - 1px),
    var(--swiss-faint) calc(25%), var(--swiss-faint) 25%);
}
.cnc-swiss-bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 6px; height: 100%; position: relative; z-index: 1;
}
.cnc-swiss-cbar {
  width: 100%; background: var(--swiss-ink);
  border-radius: 2px 2px 0 0;
  transform: scaleY(0); transform-origin: bottom;
  animation: cnc-swiss-barUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  min-height: 2px;
}
.cnc-swiss-muted { background: var(--swiss-faint); }
.cnc-swiss-accent { background: var(--swiss-blue); }
.cnc-swiss-bar-label {
  font-size: 9px; color: var(--swiss-mid); letter-spacing: 0.5px;
}
.cnc-swiss-bar-wrap:nth-child(1) .cnc-swiss-cbar { animation-delay: 0.05s; }
.cnc-swiss-bar-wrap:nth-child(2) .cnc-swiss-cbar { animation-delay: 0.1s; }
.cnc-swiss-bar-wrap:nth-child(3) .cnc-swiss-cbar { animation-delay: 0.15s; }
.cnc-swiss-bar-wrap:nth-child(4) .cnc-swiss-cbar { animation-delay: 0.2s; }
.cnc-swiss-bar-wrap:nth-child(5) .cnc-swiss-cbar { animation-delay: 0.25s; }
.cnc-swiss-bar-wrap:nth-child(6) .cnc-swiss-cbar { animation-delay: 0.3s; }
.cnc-swiss-bar-wrap:nth-child(7) .cnc-swiss-cbar { animation-delay: 0.35s; }
.cnc-swiss-bar-wrap:nth-child(8) .cnc-swiss-cbar { animation-delay: 0.4s; }
.cnc-swiss-bar-wrap:nth-child(9) .cnc-swiss-cbar { animation-delay: 0.45s; }
.cnc-swiss-bar-wrap:nth-child(10) .cnc-swiss-cbar { animation-delay: 0.5s; }
.cnc-swiss-bar-wrap:nth-child(11) .cnc-swiss-cbar { animation-delay: 0.55s; }
.cnc-swiss-bar-wrap:nth-child(12) .cnc-swiss-cbar { animation-delay: 0.6s; }
@keyframes cnc-swiss-barUp { to { transform: scaleY(1); } }
.cnc-swiss-table { width: 100%; border-collapse: collapse; }
.cnc-swiss-table tr { border-bottom: 1px solid var(--swiss-faint); }
.cnc-swiss-table tr:last-child { border-bottom: none; }
.cnc-swiss-table td {
  padding: 12px 20px; font-size: 12px; vertical-align: middle;
}
.cnc-swiss-table td:last-child { text-align: right; font-weight: 500; }
.cnc-swiss-channel-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 8px;
}
.cnc-swiss-bar-mini { display: flex; align-items: center; gap: 8px; }
.cnc-swiss-mini-track {
  width: 80px; height: 3px;
  background: var(--swiss-faint); border-radius: 2px; overflow: hidden;
}
.cnc-swiss-mini-fill {
  height: 100%; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: cnc-swiss-barXup 1s ease forwards;
}
.cnc-swiss-table tr:nth-child(1) .cnc-swiss-mini-fill { animation-delay: 0.6s; }
.cnc-swiss-table tr:nth-child(2) .cnc-swiss-mini-fill { animation-delay: 0.75s; }
.cnc-swiss-table tr:nth-child(3) .cnc-swiss-mini-fill { animation-delay: 0.9s; }
.cnc-swiss-table tr:nth-child(4) .cnc-swiss-mini-fill { animation-delay: 1.05s; }
.cnc-swiss-table tr:nth-child(5) .cnc-swiss-mini-fill { animation-delay: 1.2s; }
@keyframes cnc-swiss-barXup { to { transform: scaleX(1); } }
.cnc-swiss-kpi-list { padding: 4px 0; }
.cnc-swiss-kpi-item {
  display: flex; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--swiss-faint); gap: 12px;
}
.cnc-swiss-kpi-item:last-child { border-bottom: none; }
.cnc-swiss-kpi-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: var(--swiss-faint);
  border-radius: 6px; flex-shrink: 0;
}
.cnc-swiss-kpi-text { flex: 1; }
.cnc-swiss-kpi-name { font-size: 12px; font-weight: 500; }
.cnc-swiss-kpi-sub { font-size: 11px; color: var(--swiss-mid); margin-top: 1px; }
.cnc-swiss-kpi-val {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; letter-spacing: -0.5px;
}
.cnc-swiss-ring-main {
  transition: stroke-dashoffset 1.5s ease 0.6s;
}
.cnc-swiss-cohort-bar {
  height: 100%; transform: scaleX(0); transform-origin: left;
  animation: cnc-swiss-barXup 1s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .cnc-swiss-hero-stat, .cnc-swiss-box, .cnc-swiss-cbar,
  .cnc-swiss-mini-fill, .cnc-swiss-cohort-bar { animation: none; }
  .cnc-swiss-hero-stat, .cnc-swiss-box { opacity: 1; }
  .cnc-swiss-cbar { transform: scaleY(1); }
  .cnc-swiss-mini-fill, .cnc-swiss-cohort-bar { transform: scaleX(1); }
}
```

**JS:**
```js
(function () {
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  var root = document.querySelector('.cnc-swiss');
  if (!root) return;
  root.querySelectorAll('.cnc-num[data-target]').forEach(function (el) {
    var target = parseFloat(el.dataset.target);
    var decimals = parseInt(el.dataset.decimals || 0, 10);
    var duration = 1600;
    setTimeout(function () {
      var start = performance.now();
      function tick(now) {
        var t = Math.min((now - start) / duration, 1);
        var val = ease(t) * target;
        el.textContent = decimals > 0
          ? val.toFixed(decimals)
          : Math.round(val).toLocaleString();
        if (t < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    }, 300);
  });
  setTimeout(function () {
    var ring = root.querySelector('.cnc-swiss-ring-main');
    if (ring) ring.style.strokeDashoffset = 220 * (1 - 0.78);
  }, 600);
})();
```

### 15. Space Mission Control

**Type:** CSS + JS
**Description:** Three-column dashboard with a rotating orbital SVG, glowing planet, live mission-elapsed-time clock and amber-tinted telemetry. Status dots with blinking error states, a scrolling data feed and crew / comms / thermal counters.

**HTML:**
```html
<div class="cnc-space">
  <div class="cnc-space-mission">
    <div class="cnc-space-left-col">
      <div class="cnc-space-p">
        <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>Propulsion</div>
        <div class="cnc-space-side-stat">
          <div class="cnc-space-ss-label">Thrust Output</div>
          <div class="cnc-space-ss-num cnc-space-amber"><span class="cnc-num" data-target="98.4" data-decimals="1">0</span><span class="cnc-space-ss-unit">%</span></div>
          <div class="cnc-space-ss-sub">All engines nominal</div>
        </div>
      </div>
      <div class="cnc-space-p">
        <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>Navigation</div>
        <div class="cnc-space-side-stat">
          <div class="cnc-space-ss-label">Velocity</div>
          <div class="cnc-space-ss-num cnc-space-teal"><span class="cnc-num" data-target="28400">0</span><span class="cnc-space-ss-unit">km/h</span></div>
          <div class="cnc-space-ss-sub">Orbital insertion achieved</div>
        </div>
      </div>
      <div class="cnc-space-p">
        <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>System Status</div>
        <div class="cnc-space-status-grid">
          <div class="cnc-space-status-item"><div class="cnc-space-s-dot cnc-space-ok"></div>LIFE SUPPORT</div>
          <div class="cnc-space-status-item"><div class="cnc-space-s-dot cnc-space-ok"></div>POWER GRID</div>
          <div class="cnc-space-status-item"><div class="cnc-space-s-dot cnc-space-ok"></div>COMMS LINK</div>
          <div class="cnc-space-status-item"><div class="cnc-space-s-dot cnc-space-warn"></div>SOLAR PNL B</div>
          <div class="cnc-space-status-item"><div class="cnc-space-s-dot cnc-space-ok"></div>NAVIGATION</div>
          <div class="cnc-space-status-item"><div class="cnc-space-s-dot cnc-space-ok"></div>PROPULSION</div>
          <div class="cnc-space-status-item"><div class="cnc-space-s-dot cnc-space-err"></div>GYRO 3</div>
          <div class="cnc-space-status-item"><div class="cnc-space-s-dot cnc-space-ok"></div>THERMAL</div>
        </div>
      </div>
      <div class="cnc-space-p">
        <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>Data Feed</div>
        <div class="cnc-space-feed">
          <div class="cnc-space-feed-line cnc-space-fl1">[02:14:33] ALT 408.2km · STABLE</div>
          <div class="cnc-space-feed-line cnc-space-fl2">[02:14:35] WARN: GYRO-3 DRIFT +0.04°</div>
          <div class="cnc-space-feed-line cnc-space-fl3">[02:14:38] THRUSTER B OK 98.4%</div>
          <div class="cnc-space-feed-line cnc-space-fl4">[02:14:41] TELEMETRY UPLINK OK</div>
          <div class="cnc-space-feed-line cnc-space-fl5">[02:14:44] ORBIT PERIOD 92.4MIN</div>
          <div class="cnc-space-feed-line cnc-space-fl6">[02:14:47] SOLAR-B OUTPUT −12%</div>
        </div>
      </div>
    </div>
    <div class="cnc-space-p cnc-space-center-main">
      <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>Mission Control · ISS-NEXUS · Day 47</div>
      <div class="cnc-space-orbital">
        <svg class="cnc-space-orbit-svg" viewBox="0 0 220 220" fill="none">
          <ellipse cx="110" cy="110" rx="100" ry="40" stroke="rgba(0,212,200,0.2)" stroke-width="1" stroke-dasharray="4 4"/>
          <circle cx="210" cy="110" r="5" fill="#00d4c8" style="filter:drop-shadow(0 0 6px #00d4c8)"/>
        </svg>
        <svg class="cnc-space-orbit-svg-inner" viewBox="0 0 160 160" fill="none">
          <ellipse cx="80" cy="80" rx="70" ry="28" stroke="rgba(255,180,0,0.15)" stroke-width="1"/>
          <circle cx="150" cy="80" r="3" fill="#ffb400" style="filter:drop-shadow(0 0 4px #ffb400)"/>
        </svg>
        <div class="cnc-space-orbit-center">
          <div class="cnc-space-planet"></div>
        </div>
      </div>
      <div class="cnc-space-readout">
        <div class="cnc-space-readout-label">Altitude · Current Orbit</div>
        <div class="cnc-space-readout-num">
          <span class="cnc-num" data-target="408" data-decimals="1">0</span>
          <span class="cnc-space-readout-unit">km</span>
        </div>
      </div>
      <div class="cnc-space-mission-clock">
        <div class="cnc-space-clock-label">Mission Elapsed Time</div>
        <div class="cnc-space-clock-time">47:02:14:33</div>
      </div>
      <div class="cnc-space-p" style="border:none; background:transparent;">
        <div class="cnc-space-ph" style="border-color: rgba(0,212,200,0.1)"><div class="cnc-space-ph-dot"></div>Telemetry</div>
        <div class="cnc-space-telem">
          <div class="cnc-space-telem-row">
            <span class="cnc-space-telem-id">PWR</span>
            <div class="cnc-space-telem-track"><div class="cnc-space-telem-fill cnc-space-tc" style="width:91%"></div></div>
            <span class="cnc-space-telem-val">91%</span>
          </div>
          <div class="cnc-space-telem-row">
            <span class="cnc-space-telem-id">TEMP</span>
            <div class="cnc-space-telem-track"><div class="cnc-space-telem-fill cnc-space-ta" style="width:67%"></div></div>
            <span class="cnc-space-telem-val">67%</span>
          </div>
          <div class="cnc-space-telem-row">
            <span class="cnc-space-telem-id">O₂</span>
            <div class="cnc-space-telem-track"><div class="cnc-space-telem-fill cnc-space-tg" style="width:88%"></div></div>
            <span class="cnc-space-telem-val">88%</span>
          </div>
          <div class="cnc-space-telem-row">
            <span class="cnc-space-telem-id">FUEL</span>
            <div class="cnc-space-telem-track"><div class="cnc-space-telem-fill cnc-space-tb" style="width:74%"></div></div>
            <span class="cnc-space-telem-val">74%</span>
          </div>
          <div class="cnc-space-telem-row">
            <span class="cnc-space-telem-id">LOAD</span>
            <div class="cnc-space-telem-track"><div class="cnc-space-telem-fill cnc-space-tr" style="width:52%"></div></div>
            <span class="cnc-space-telem-val">52%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="cnc-space-right-col">
      <div class="cnc-space-p">
        <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>Crew</div>
        <div class="cnc-space-side-stat">
          <div class="cnc-space-ss-label">Aboard</div>
          <div class="cnc-space-ss-num cnc-space-green"><span class="cnc-num" data-target="7">0</span><span class="cnc-space-ss-unit">crew</span></div>
          <div class="cnc-space-ss-sub">All crew nominal</div>
        </div>
      </div>
      <div class="cnc-space-p">
        <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>Comms</div>
        <div class="cnc-space-side-stat">
          <div class="cnc-space-ss-label">Signal Strength</div>
          <div class="cnc-space-ss-num cnc-space-teal"><span class="cnc-num" data-target="99.7" data-decimals="1">0</span><span class="cnc-space-ss-unit">%</span></div>
          <div class="cnc-space-ss-sub">Uplink: 3 satellites</div>
        </div>
      </div>
      <div class="cnc-space-p">
        <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>Thermal</div>
        <div class="cnc-space-side-stat">
          <div class="cnc-space-ss-label">External Temp</div>
          <div class="cnc-space-ss-num cnc-space-amber"><span class="cnc-num" data-target="-157">0</span><span class="cnc-space-ss-unit">°C</span></div>
          <div class="cnc-space-ss-sub">Shadow pass cycle</div>
        </div>
      </div>
      <div class="cnc-space-p">
        <div class="cnc-space-ph"><div class="cnc-space-ph-dot"></div>Orbits Completed</div>
        <div class="cnc-space-side-stat">
          <div class="cnc-space-ss-label">Total Revolutions</div>
          <div class="cnc-space-ss-num cnc-space-red"><span class="cnc-num" data-target="736">0</span></div>
          <div class="cnc-space-ss-sub">Next: 47d 3h 22m</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cnc-space {
  --space-bg: #020b18;
  --space-panel: rgba(8, 28, 55, 0.85);
  --space-amber: #ffb400;
  --space-amber-dim: rgba(255,180,0,0.5);
  --space-teal: #00d4c8;
  --space-red: #ff3d3d;
  --space-green: #39ff14;
  --space-blue: #4da6ff;
  --space-border: rgba(0,212,200,0.2);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
  background: var(--space-bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(0,212,200,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(255,180,0,0.03) 0%, transparent 50%);
  font-family: 'Space Mono', monospace;
  color: var(--space-teal);
  overflow: hidden;
}
.cnc-space::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 10%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 45%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.3) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.cnc-space-mission {
  position: relative; z-index: 1;
  width: 1000px;
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto auto auto;
  gap: 10px;
}
.cnc-space-p {
  background: var(--space-panel);
  border: 1px solid var(--space-border);
  backdrop-filter: blur(12px);
  position: relative; overflow: hidden;
  opacity: 0; animation: cnc-space-panelIn 0.6s ease forwards;
}
.cnc-space-p::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--space-teal), transparent);
  opacity: 0.5;
}
@keyframes cnc-space-panelIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.cnc-space-left-col > .cnc-space-p:nth-child(1) { animation-delay: 0.0s; }
.cnc-space-left-col > .cnc-space-p:nth-child(2) { animation-delay: 0.1s; }
.cnc-space-left-col > .cnc-space-p:nth-child(3) { animation-delay: 0.2s; }
.cnc-space-left-col > .cnc-space-p:nth-child(4) { animation-delay: 0.3s; }
.cnc-space-center-main { animation-delay: 0.15s; }
.cnc-space-right-col > .cnc-space-p:nth-child(1) { animation-delay: 0.25s; }
.cnc-space-right-col > .cnc-space-p:nth-child(2) { animation-delay: 0.35s; }
.cnc-space-right-col > .cnc-space-p:nth-child(3) { animation-delay: 0.45s; }
.cnc-space-right-col > .cnc-space-p:nth-child(4) { animation-delay: 0.55s; }
.cnc-space-ph {
  padding: 8px 12px;
  border-bottom: 1px solid var(--space-border);
  font-size: 7px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--space-amber);
  display: flex; align-items: center; gap: 6px;
}
.cnc-space-ph-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--space-amber);
  box-shadow: 0 0 6px var(--space-amber);
  animation: cnc-space-blinkAmber 2s step-end infinite;
}
@keyframes cnc-space-blinkAmber {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.cnc-space-center-main {
  grid-column: 2; grid-row: 1 / 4;
  padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.cnc-space-orbital {
  display: flex; justify-content: center; align-items: center;
  padding: 16px 0; position: relative;
}
.cnc-space-orbit-svg {
  width: 220px; height: 220px;
  animation: cnc-space-orbitSpin 30s linear infinite;
  position: absolute;
}
@keyframes cnc-space-orbitSpin { to { transform: rotate(360deg); } }
.cnc-space-orbit-svg-inner {
  width: 160px; height: 160px;
  animation: cnc-space-orbitSpin 20s linear infinite reverse;
  position: absolute;
}
.cnc-space-orbit-center {
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
.cnc-space-planet {
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4da6ff, #021830);
  box-shadow:
    0 0 30px rgba(77,166,255,0.4),
    inset 0 0 20px rgba(0,0,0,0.5);
}
.cnc-space-readout { text-align: center; }
.cnc-space-readout-label {
  font-size: 8px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--space-amber); margin-bottom: 6px;
}
.cnc-space-readout-num {
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(48px, 6vw, 72px); font-weight: 900;
  color: #fff; letter-spacing: -2px; line-height: 1;
  text-shadow: 0 0 30px var(--space-teal), 0 0 60px rgba(0,212,200,0.3);
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
}
.cnc-space-readout-unit {
  font-size: 0.3em;
  font-family: 'Space Mono', monospace;
  font-weight: 400; color: var(--space-teal); letter-spacing: 3px;
}
.cnc-space-telem {
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cnc-space-telem-row {
  display: flex; align-items: center; gap: 8px;
}
.cnc-space-telem-id {
  font-size: 7px; letter-spacing: 2px;
  color: var(--space-amber-dim); width: 36px; flex-shrink: 0;
}
.cnc-space-telem-track {
  flex: 1; height: 3px;
  background: rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
}
.cnc-space-telem-fill {
  height: 100%; transform: scaleX(0); transform-origin: left;
  animation: cnc-space-tlFill 1.5s ease forwards;
}
.cnc-space-tc { background: var(--space-teal); animation-delay: 0.8s; }
.cnc-space-ta { background: var(--space-amber); animation-delay: 0.95s; }
.cnc-space-tg { background: var(--space-green); animation-delay: 1.1s; }
.cnc-space-tb { background: var(--space-blue); animation-delay: 1.25s; }
.cnc-space-tr { background: var(--space-red); animation-delay: 1.4s; }
@keyframes cnc-space-tlFill { to { transform: scaleX(1); } }
.cnc-space-telem-val {
  font-size: 9px; color: rgba(255,255,255,0.5);
  width: 32px; text-align: right; flex-shrink: 0;
}
.cnc-space-side-stat { padding: 12px 14px; }
.cnc-space-ss-label {
  font-size: 7px; letter-spacing: 3px;
  color: var(--space-amber-dim); text-transform: uppercase;
  margin-bottom: 6px;
}
.cnc-space-ss-num {
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 900;
  line-height: 1; letter-spacing: -1px;
}
.cnc-space-teal { color: var(--space-teal); text-shadow: 0 0 16px var(--space-teal); }
.cnc-space-amber { color: var(--space-amber); text-shadow: 0 0 16px var(--space-amber); }
.cnc-space-green { color: var(--space-green); text-shadow: 0 0 16px var(--space-green); }
.cnc-space-red { color: var(--space-red); text-shadow: 0 0 16px var(--space-red); }
.cnc-space-ss-unit {
  font-size: 0.35em;
  font-family: 'Space Mono', monospace;
  font-weight: 400; opacity: 0.5; margin-left: 2px;
}
.cnc-space-ss-sub {
  font-size: 8px; color: rgba(255,255,255,0.2);
  margin-top: 4px; letter-spacing: 1px;
}
.cnc-space-mission-clock {
  text-align: center; padding: 10px;
  background: rgba(0,212,200,0.04);
  border: 1px solid rgba(0,212,200,0.1);
  margin: 0 8px;
}
.cnc-space-clock-label {
  font-size: 7px; letter-spacing: 4px;
  color: var(--space-amber); margin-bottom: 4px;
}
.cnc-space-clock-time {
  font-size: 22px; font-weight: 700;
  color: var(--space-teal);
  text-shadow: 0 0 12px var(--space-teal);
  letter-spacing: 3px;
}
.cnc-space-status-grid {
  padding: 10px 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.cnc-space-status-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 7px; letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
}
.cnc-space-s-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.cnc-space-ok { background: var(--space-green); box-shadow: 0 0 6px var(--space-green); }
.cnc-space-warn { background: var(--space-amber); box-shadow: 0 0 6px var(--space-amber); }
.cnc-space-err {
  background: var(--space-red);
  box-shadow: 0 0 6px var(--space-red);
  animation: cnc-space-blinkAmber 0.8s step-end infinite;
}
.cnc-space-feed {
  padding: 10px 12px;
  font-size: 7px; letter-spacing: 1px;
  overflow: hidden; height: 90px; position: relative;
}
.cnc-space-feed-line {
  padding: 3px 0;
  border-bottom: 1px solid rgba(0,212,200,0.05);
  white-space: nowrap;
  animation: cnc-space-feedScroll 12s linear infinite;
}
@keyframes cnc-space-feedScroll {
  0% { opacity: 0; }
  5%, 85% { opacity: 1; }
  100% { opacity: 0; }
}
.cnc-space-fl1 { color: var(--space-teal); animation-delay: 0s; }
.cnc-space-fl2 { color: var(--space-amber); animation-delay: 2s; }
.cnc-space-fl3 { color: var(--space-green); animation-delay: 4s; }
.cnc-space-fl4 { color: rgba(255,255,255,0.4); animation-delay: 6s; }
.cnc-space-fl5 { color: var(--space-teal); animation-delay: 8s; }
.cnc-space-fl6 { color: var(--space-red); animation-delay: 10s; }
.cnc-space-left-col {
  grid-column: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.cnc-space-right-col {
  grid-column: 3;
  display: flex; flex-direction: column; gap: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .cnc-space-p, .cnc-space-orbit-svg, .cnc-space-orbit-svg-inner,
  .cnc-space-telem-fill, .cnc-space-ph-dot, .cnc-space-s-dot.cnc-space-err,
  .cnc-space-feed-line { animation: none; }
  .cnc-space-p { opacity: 1; }
  .cnc-space-telem-fill { transform: scaleX(1); }
}
```

**JS:**
```js
(function () {
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  var root = document.querySelector('.cnc-space');
  if (!root) return;
  root.querySelectorAll('.cnc-num[data-target]').forEach(function (el) {
    var target = parseFloat(el.dataset.target);
    var decimals = parseInt(el.dataset.decimals || 0, 10);
    var duration = 2000;
    setTimeout(function () {
      var start = performance.now();
      function tick(now) {
        var t = Math.min((now - start) / duration, 1);
        var val = ease(t) * target;
        el.textContent = decimals > 0
          ? val.toFixed(decimals)
          : Math.round(val).toLocaleString();
        if (t < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    }, 300);
  });
  var clockEl = root.querySelector('.cnc-space-clock-time');
  if (clockEl) {
    var baseSec = 47 * 24 * 3600 + 2 * 3600 + 14 * 60 + 33;
    var startMs = Date.now();
    function updateClock() {
      var elapsed = Math.floor((Date.now() - startMs) / 1000);
      var total = baseSec + elapsed;
      var d = Math.floor(total / 86400);
      var h = String(Math.floor((total % 86400) / 3600)).padStart(2, '0');
      var m = String(Math.floor((total % 3600) / 60)).padStart(2, '0');
      var s = String(total % 60).padStart(2, '0');
      clockEl.textContent = d + ':' + h + ':' + m + ':' + s;
    }
    updateClock();
    setInterval(updateClock, 1000);
  }
})();
```

---
## 11 CSS Page Transitions

URL: https://codefronts.com/motion/css-page-transitions/
Description: 11 free CSS page transition patterns — fade, slide, scale/zoom, clip-path wipe, blur morph, 3D page turn, ink bleed, triangle shatter, split curtain, matrix rain and brushstroke. Complete interactive demos with copy-paste HTML, CSS and JavaScript.
Demo count: 11

### 01. Fade Transition

**Type:** CSS + JS
**Description:** An elegant crossfade between content panels. Best for dashboards, CMS screens, and tab navigation where the surrounding context stays stable.

**HTML:**
```html
<div class="shell">

  <!-- Sidebar -->
  <nav class="sidebar">
    <div class="sidebar-brand">Atelier<br><span>Studio</span></div>
    <div class="nav-label">Navigation</div>
    <button class="nav-link active" data-target="home">
      <span class="nav-dot"></span> Overview
    </button>
    <button class="nav-link" data-target="collection">
      <span class="nav-dot"></span> Collection
    </button>
    <button class="nav-link" data-target="analytics">
      <span class="nav-dot"></span> Analytics
    </button>
    <button class="nav-link" data-target="settings">
      <span class="nav-dot"></span> Settings
    </button>
  </nav>

  <!-- Page Stack -->
  <main class="page-stack">

    <!-- Home -->
    <section class="page active" id="home">
      <div class="page-eyebrow">Welcome back</div>
      <h1 class="page-title">Good morning,<br><em>Constance.</em></h1>
      <p class="page-body">Your studio has 3 new inquiries and 2 pending approvals. The autumn collection launches in 12 days — everything is on track.</p>
      <div class="badge">New season ready</div>
      <div class="card-grid">
        <div class="card">
          <div class="card-img" style="background:#f0ebe0">🎨</div>
          <div class="card-info"><h3>Design Review</h3><p>Due tomorrow</p></div>
        </div>
        <div class="card">
          <div class="card-img" style="background:#e8f0ed">📦</div>
          <div class="card-info"><h3>Shipment #44</h3><p>In transit</p></div>
        </div>
        <div class="card">
          <div class="card-img" style="background:#f0e8e8">✉️</div>
          <div class="card-info"><h3>3 Inquiries</h3><p>Unread</p></div>
        </div>
      </div>
    </section>

    <!-- Collection -->
    <section class="page" id="collection">
      <div class="page-eyebrow">Autumn / Winter 2024</div>
      <h1 class="page-title">The<br><em>Collection</em></h1>
      <p class="page-body">Twelve pieces exploring the tension between restraint and excess. Hand-finished in our Milan atelier using deadstock fabrics sourced from Lyon.</p>
      <div class="card-grid">
        <div class="card">
          <div class="card-img" style="background:#2a241c;color:white">01</div>
          <div class="card-info"><h3>Overcoat Noir</h3><p>€2,400 · 4 left</p></div>
        </div>
        <div class="card">
          <div class="card-img" style="background:#c9a84c;color:white">02</div>
          <div class="card-info"><h3>Blazer Doré</h3><p>€1,800 · 2 left</p></div>
        </div>
        <div class="card">
          <div class="card-img" style="background:#8a7e6e;color:white">03</div>
          <div class="card-info"><h3>Trouser Taupe</h3><p>€980 · 8 left</p></div>
        </div>
        <div class="card">
          <div class="card-img" style="background:#e8e2d8">04</div>
          <div class="card-info"><h3>Shirt Ivoire</h3><p>€640 · 12 left</p></div>
        </div>
      </div>
    </section>

    <!-- Analytics -->
    <section class="page" id="analytics">
      <div class="page-eyebrow">Season performance</div>
      <h1 class="page-title">Analytics<br><em>& Insights</em></h1>
      <div class="stat-row">
        <div class="stat-box">
          <div class="stat-num">94k</div>
          <div class="stat-label">Revenue</div>
        </div>
        <div class="stat-box">
          <div class="stat-num">38</div>
          <div class="stat-label">Orders</div>
        </div>
        <div class="stat-box">
          <div class="stat-num">4.9</div>
          <div class="stat-label">Avg Rating</div>
        </div>
      </div>
      <p class="page-body">Revenue is up 22% versus the same period last year. The Overcoat Noir continues to be your strongest performer, accounting for 41% of total sales.</p>
    </section>

    <!-- Settings -->
    <section class="page" id="settings">
      <div class="page-eyebrow">Account</div>
      <h1 class="page-title">Settings &<br><em>Preferences</em></h1>
      <div class="setting-row">
        <div>
          <div class="setting-label">Email Notifications</div>
          <div class="setting-desc">Receive alerts for new orders and inquiries</div>
        </div>
        <div class="toggle on" onclick="this.classList.toggle('on')"></div>
      </div>
      <div class="setting-row">
        <div>
          <div class="setting-label">Two-factor Authentication</div>
          <div class="setting-desc">Extra layer of security for your account</div>
        </div>
        <div class="toggle on" onclick="this.classList.toggle('on')"></div>
      </div>
      <div class="setting-row">
        <div>
          <div class="setting-label">Public Profile</div>
          <div class="setting-desc">Make your studio visible in directory listings</div>
        </div>
        <div class="toggle" onclick="this.classList.toggle('on')"></div>
      </div>
      <div class="setting-row">
        <div>
          <div class="setting-label">Beta Features</div>
          <div class="setting-desc">Access experimental features before public launch</div>
        </div>
        <div class="toggle" onclick="this.classList.toggle('on')"></div>
      </div>
    </section>

  </main>
</div>
```

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

  :root {
    --cream: #f5f0e8;
    --ink:   #1a1410;
    --gold:  #c9a84c;
    --muted: #8a7e6e;
    --card-bg: #fff;
    --transition-dur: 600ms;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  }

  html, body { height: 100%; font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--ink); overflow: hidden; }

  /* Layout */
  .shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100vh;
  }

  /* Sidebar nav */
  .sidebar {
    background: var(--ink);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .sidebar-brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 300;
    color: var(--cream);
    letter-spacing: 0.08em;
    margin-bottom: 56px;
    line-height: 1.3;
  }
  .sidebar-brand span { color: var(--gold); }

  .nav-label {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
  }

  .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: #6b5f50;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.25s;
    background: none; border-top: none; border-left: none; border-right: none;
    border-bottom: 1px solid #2a241c;
    width: 100%; text-align: left;
  }
  .nav-link:hover { color: var(--cream); }
  .nav-link.active { color: var(--gold); }

  .nav-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  /* Page stack */
  .page-stack {
    position: relative;
    overflow: hidden;
  }

  .page {
    position: absolute;
    inset: 0;
    padding: 64px 72px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-dur) var(--transition-ease);
    will-change: opacity;
  }

  .page.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Page content styles */
  .page-eyebrow {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
  }

  .page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 28px;
  }

  .page-title em { font-style: italic; color: var(--muted); }

  .page-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 540px;
    margin-bottom: 48px;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-width: 680px;
  }

  .card {
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }

  .card-img {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }

  .card-info { padding: 16px; }
  .card-info h3 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
  .card-info p { font-size: 12px; color: var(--muted); }

  /* Stats page */
  .stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 600px;
    margin-bottom: 40px;
  }

  .stat-box {
    background: white;
    border-radius: 4px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }

  .stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 300;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 8px;
  }

  .stat-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

  /* Settings page */
  .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #e8e2d8;
    max-width: 520px;
  }
  .setting-label { font-size: 14px; }
  .setting-desc { font-size: 12px; color: var(--muted); margin-top: 4px; }

  .toggle {
    width: 44px; height: 24px;
    background: #d1c9bc;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
  }
  .toggle.on { background: var(--gold); }
  .toggle::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: transform 0.3s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
  .toggle.on::after { transform: translateX(20px); }

  /* Badge */
  .badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--gold);
    color: white;
    margin-bottom: 32px;
  }

  /* Mobile */
  @media (max-width: 640px) {
    .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .sidebar { padding: 24px 20px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
    .sidebar-brand { margin-bottom: 0; font-size: 18px; flex: 1; }
    .nav-label { display: none; }
    .nav-link { padding: 10px 16px; border: 1px solid #2a241c; border-radius: 20px; font-size: 12px; }
    .page { padding: 32px 24px; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .card-grid { grid-template-columns: 1fr 1fr; }
  }
```

**JS:**
```js
const links = document.querySelectorAll('.nav-link');
  const pages = document.querySelectorAll('.page');

  links.forEach(link => {
    link.addEventListener('click', () => {
      const target = link.dataset.target;

      links.forEach(l => l.classList.remove('active'));
      link.classList.add('active');

      pages.forEach(page => {
        if (page.id === target) {
          page.classList.add('active');
        } else {
          page.classList.remove('active');
        }
      });
    });
  });
```

### 02. Slide Transition

**Type:** CSS + JS
**Description:** A directional slide that communicates sequence. The spatial metaphor helps users follow linear flows like onboarding and multi-step wizards.

**HTML:**
```html
<div class="scene">

  <!-- Phone mockup -->
  <div class="phone">
    <div class="slider-viewport">
      <div class="slider-track" id="track">

        <!-- Slide 1 -->
        <div class="slide slide-1">
          <div class="slide-icon">⚡</div>
          <div class="slide-step">01 / 04</div>
          <h2 class="slide-title">Welcome to <span class="accent">Flux</span></h2>
          <p class="slide-body">The creative workspace that adapts to how you think — not the other way around.</p>
          <div class="pill-row">
            <span class="pill">AI-powered</span>
            <span class="pill">Real-time sync</span>
            <span class="pill">Offline first</span>
          </div>
          <div class="slide-footer">
            <div class="dots">
              <div class="dot dot-1 active" id="d1"></div>
              <div class="dot dot-2" id="d2"></div>
              <div class="dot dot-3" id="d3"></div>
              <div class="dot dot-4" id="d4"></div>
            </div>
            <div class="btn-row">
              <button class="btn btn-ghost" onclick="skip()">Skip</button>
              <button class="btn btn-primary" onclick="next()">Continue →</button>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="slide slide-2">
          <div class="slide-icon">🧠</div>
          <div class="slide-step">02 / 04</div>
          <h2 class="slide-title">Ideas that <span class="accent">connect</span></h2>
          <p class="slide-body">Flux maps relationships between your thoughts automatically. Watch patterns emerge as you work.</p>
          <div class="pill-row">
            <span class="pill">Knowledge graph</span>
            <span class="pill">Smart links</span>
          </div>
          <div class="slide-footer">
            <div class="dots">
              <div class="dot" id="d1b"></div>
              <div class="dot active dot-1" id="d2b"></div>
              <div class="dot" id="d3b"></div>
              <div class="dot" id="d4b"></div>
            </div>
            <div class="btn-row">
              <button class="btn btn-ghost" onclick="prev()">← Back</button>
              <button class="btn btn-primary" onclick="next()">Continue →</button>
            </div>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="slide slide-3">
          <div class="slide-icon">🔒</div>
          <div class="slide-step">03 / 04</div>
          <h2 class="slide-title">Your data, <span class="accent">yours</span></h2>
          <p class="slide-body">End-to-end encrypted. Zero-knowledge architecture. We literally cannot read your notes — and we wouldn't want to.</p>
          <div class="pill-row">
            <span class="pill">E2E encrypted</span>
            <span class="pill">Zero-knowledge</span>
            <span class="pill">GDPR ready</span>
          </div>
          <div class="slide-footer">
            <div class="dots">
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot active dot-1"></div>
              <div class="dot"></div>
            </div>
            <div class="btn-row">
              <button class="btn btn-ghost" onclick="prev()">← Back</button>
              <button class="btn btn-primary" onclick="next()">Continue →</button>
            </div>
          </div>
        </div>

        <!-- Slide 4 -->
        <div class="slide slide-4">
          <div class="slide-icon">🚀</div>
          <div class="slide-step">04 / 04</div>
          <h2 class="slide-title">Ready to <span class="accent">launch</span></h2>
          <p class="slide-body">You're all set. Create your workspace and start building something extraordinary today.</p>
          <div class="pill-row">
            <span class="pill">Free 14-day trial</span>
            <span class="pill">No card needed</span>
          </div>
          <div class="slide-footer">
            <div class="dots">
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot active dot-1"></div>
            </div>
            <div class="btn-row">
              <button class="btn btn-ghost" onclick="prev()">← Back</button>
            </div>
            <button class="btn-finish" style="display:block">Get Started Free</button>
          </div>
        </div>

      </div><!-- /slider-track -->
    </div><!-- /slider-viewport -->
  </div><!-- /phone -->

</div>
```

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

  :root {
    --bg: #0a0a0f;
    --surface: #13131a;
    --border: #1e1e2e;
    --text: #e8e8f0;
    --muted: #5c5c78;
    --accent-1: #6c63ff;
    --accent-2: #ff6584;
    --accent-3: #43e97b;
    --accent-4: #ffd700;
    --slide-dur: 500ms;
    --slide-ease: cubic-bezier(0.77, 0, 0.175, 1);
  }

  html, body {
    height: 100%; background: var(--bg);
    font-family: 'Syne', sans-serif;
    color: var(--text);
    overflow: hidden;
  }

  /* Scene — centers the phone */
  .scene {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse 60% 40% at 20% 20%, rgba(108,99,255,0.12) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255,101,132,0.08) 0%, transparent 60%),
      var(--bg);
    padding: 24px;
  }

  .phone {
    width: 340px;
    height: 680px;
    background: var(--surface);
    border-radius: 44px;
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04),
      0 40px 80px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.08);
    flex-shrink: 0;
  }

  /* Notch */
  .phone::before {
    content: '';
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    width: 110px; height: 30px;
    background: var(--bg);
    border-radius: 20px;
    z-index: 10;
  }

  /* Slide viewport */
  .slider-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .slider-track {
    display: flex;
    height: 100%;
    transition: transform var(--slide-dur) var(--slide-ease);
    will-change: transform;
  }

  .slide {
    min-width: 340px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 80px 28px 40px;
    position: relative;
    overflow: hidden;
  }

  /* Individual slide themes */
  .slide-1 { background: linear-gradient(160deg, #0d0d1a 0%, #1a0d2e 100%); }
  .slide-2 { background: linear-gradient(160deg, #0d1a15 0%, #0d1a2e 100%); }
  .slide-3 { background: linear-gradient(160deg, #1a0d0d 0%, #2e1a0d 100%); }
  .slide-4 { background: linear-gradient(160deg, #0d1a1a 0%, #0d2e1a 100%); }

  /* Background orbs */
  .slide::after {
    content: '';
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    bottom: -80px; right: -80px;
    opacity: 0.15;
    filter: blur(60px);
    pointer-events: none;
  }
  .slide-1::after { background: var(--accent-1); }
  .slide-2::after { background: var(--accent-3); }
  .slide-3::after { background: var(--accent-2); }
  .slide-4::after { background: var(--accent-4); }

  /* Slide content */
  .slide-icon {
    width: 72px; height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 32px;
    flex-shrink: 0;
  }

  .slide-1 .slide-icon { background: rgba(108,99,255,0.2); box-shadow: 0 0 0 1px rgba(108,99,255,0.4); }
  .slide-2 .slide-icon { background: rgba(67,233,123,0.15); box-shadow: 0 0 0 1px rgba(67,233,123,0.3); }
  .slide-3 .slide-icon { background: rgba(255,101,132,0.15); box-shadow: 0 0 0 1px rgba(255,101,132,0.3); }
  .slide-4 .slide-icon { background: rgba(255,215,0,0.15); box-shadow: 0 0 0 1px rgba(255,215,0,0.3); }

  .slide-step {
    font-family: 'Syne Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--muted);
    margin-bottom: 16px;
  }

  .slide-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    color: var(--text);
  }

  .slide-1 .accent { color: var(--accent-1); }
  .slide-2 .accent { color: var(--accent-3); }
  .slide-3 .accent { color: var(--accent-2); }
  .slide-4 .accent { color: var(--accent-4); }

  .slide-body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
    margin-bottom: 32px;
    font-weight: 400;
  }

  /* Feature pills */
  .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
  }
  .pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--muted);
  }

  /* Bottom controls */
  .slide-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dots {
    display: flex;
    gap: 6px;
    justify-content: center;
  }
  .dot {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
    transition: width 0.3s var(--slide-ease), background 0.3s;
  }
  .dot.active { background: white; }
  .dot-1 { width: 24px; }
  .dot-2, .dot-3, .dot-4 { width: 8px; }

  .btn-row { display: flex; gap: 12px; }

  .btn {
    flex: 1;
    height: 52px;
    border-radius: 14px;
    border: none;
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
  }
  .btn:active { transform: scale(0.97); }
  .btn-ghost {
    background: rgba(255,255,255,0.06);
    color: var(--muted);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.1); }
  .btn-primary {
    background: white;
    color: #0a0a0f;
  }
  .btn-primary:hover { opacity: 0.9; }

  .btn-finish {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    border: none;
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-4), #ffaa00);
    color: #0a0a0f;
    cursor: pointer;
    display: none;
  }

  @media (max-width: 420px) {
    .phone { width: 100%; height: 100vh; border-radius: 0; }
    .scene { padding: 0; }
  }
```

**JS:**
```js
const track = document.getElementById('track');
  const slideWidth = 340;
  let current = 0;
  const total = 4;

  function goTo(idx) {
    current = Math.max(0, Math.min(total - 1, idx));
    track.style.transform = `translateX(-${current * slideWidth}px)`;
  }

  function next() { goTo(current + 1); }
  function prev() { goTo(current - 1); }
  function skip() { goTo(total - 1); }

  // Touch/swipe support
  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 (dx < -40) next();
    if (dx > 40) prev();
  });
```

### 03. Scale / Zoom Transition

**Type:** CSS + JS
**Description:** A card expands to reveal more detail. The zoom-in metaphor intuitively signals drilling deeper into content without a full page load.

**HTML:**
```html
<!-- Header -->
<header class="header">
  <div class="logo">Bloom</div>
  <div class="header-right">
    <span>Shop</span>
    <span>Lookbook</span>
    <span>🛍 3</span>
  </div>
</header>

<!-- Product Grid -->
<div class="grid" id="grid"></div>

<!-- Detail Overlay -->
<div class="detail-overlay" id="overlay">
  <div class="detail-backdrop" id="backdrop"></div>
  <div class="detail-panel">
    <div class="detail-handle"></div>
    <button class="close-btn" id="closeBtn">✕</button>
    <div class="detail-layout">
      <div class="detail-visual" id="detailVisual"></div>
      <div>
        <div class="detail-cat" id="detailCat"></div>
        <h2 class="detail-title" id="detailTitle"></h2>
        <div class="tag-row" id="detailTags"></div>
        <p class="detail-desc" id="detailDesc"></p>
        <div class="detail-price-row">
          <div class="detail-price" id="detailPrice"></div>
          <div class="detail-old-price" id="detailOld"></div>
        </div>
        <div class="detail-actions">
          <button class="btn-add">Add to Cart</button>
          <button class="btn-wish">♡</button>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

  :root {
    --bg: #f2ede4;
    --card-bg: #fff;
    --ink: #1c1814;
    --muted: #8c8278;
    --detail-dur: 480ms;
    --detail-ease: cubic-bezier(0.32, 0.72, 0, 1);
  }

  html, body {
    min-height: 100%; font-family: 'Cabinet Grotesk', sans-serif;
    background: var(--bg); color: var(--ink);
  }

  /* Header */
  .header {
    padding: 32px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; top: 0; z-index: 5;
    background: var(--bg);
  }

  .logo {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 300;
    font-style: italic;
    color: var(--ink);
  }

  .header-right {
    display: flex;
    gap: 24px;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
  }

  /* Grid */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2px;
    padding: 0 2px 2px;
  }

  /* Card */
  .card {
    background: var(--card-bg);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s;
  }
  .card:hover { z-index: 2; }

  .card-thumb {
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .card:hover .card-thumb { transform: scale(1.04); }

  .card-meta {
    padding: 20px 24px 28px;
  }

  .card-cat {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }

  .card-title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .card-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
  }

  /* Detail overlay */
  .detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
  }

  .detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 24, 20, 0);
    transition: background var(--detail-dur) var(--detail-ease);
  }

  .detail-panel {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 40px 48px 56px;
    transform: translateY(100%) scale(0.92);
    transform-origin: center bottom;
    transition:
      transform var(--detail-dur) var(--detail-ease),
      opacity var(--detail-dur) var(--detail-ease);
    opacity: 0;
    max-height: 85vh;
    overflow-y: auto;
  }

  .detail-overlay.open {
    pointer-events: auto;
  }

  .detail-overlay.open .detail-backdrop {
    background: rgba(28, 24, 20, 0.6);
  }

  .detail-overlay.open .detail-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .detail-handle {
    width: 40px; height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 32px;
  }

  .detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .detail-visual {
    aspect-ratio: 1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    transition: transform 0.6s var(--detail-ease);
  }

  .detail-overlay.open .detail-visual {
    transform: scale(1);
  }

  .detail-cat {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }

  .detail-title {
    font-family: 'Fraunces', serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 16px;
  }

  .detail-desc {
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 28px;
  }

  .detail-price-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
  }

  .detail-price {
    font-size: 28px;
    font-weight: 900;
  }

  .detail-old-price {
    font-size: 16px;
    color: var(--muted);
    text-decoration: line-through;
  }

  .detail-actions {
    display: flex;
    gap: 12px;
  }

  .btn-add {
    flex: 1;
    height: 52px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .btn-add:hover { opacity: 0.85; }

  .btn-wish {
    width: 52px; height: 52px;
    background: var(--bg);
    border: none;
    border-radius: 8px;
    font-size: 22px;
    cursor: pointer;
  }

  .close-btn {
    position: absolute;
    top: 32px; right: 40px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: background 0.2s;
  }
  .close-btn:hover { background: #e8e2d8; }

  /* Tags */
  .tag-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .tag {
    padding: 5px 14px;
    background: var(--bg);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
  }

  @media (max-width: 640px) {
    .header { padding: 20px 20px; }
    .grid { grid-template-columns: 1fr 1fr; }
    .detail-layout { grid-template-columns: 1fr; }
    .detail-panel { padding: 28px 24px 40px; }
    .detail-visual { max-height: 200px; }
  }
```

**JS:**
```js
const products = [
    { emoji: '🌸', bg: '#fce8f0', cat: 'Florals', title: 'Cherry Blossom Silk', price: '$128', old: '$180', tags: ['New', 'Limited', 'Silk'], desc: 'Hand-dyed in small batches using traditional Japanese techniques. Each piece is unique, with natural variations that make it truly one-of-a-kind.' },
    { emoji: '🌿', bg: '#e8f0e8', cat: 'Botanicals', title: 'Eucalyptus Linen', price: '$94', old: '', tags: ['Organic', 'Linen'], desc: 'Sustainably grown and minimally processed. Our eucalyptus linen is GOTS certified and biodegradable from thread to packaging.' },
    { emoji: '🍋', bg: '#f8f0d8', cat: 'Citrus', title: 'Lemon Grove Tee', price: '$56', old: '$72', tags: ['Sale', 'Cotton'], desc: 'A relaxed, slightly oversized silhouette in 100% organic cotton. Pre-washed for softness. Looks better the more you wear it.' },
    { emoji: '🌊', bg: '#dceef8', cat: 'Ocean', title: 'Coastal Linen Shirt', price: '$112', old: '', tags: ['Linen', 'Unisex'], desc: 'Inspired by Mediterranean mornings. The loose fit and breathable linen make it ideal for warm days from breakfast to sunset.' },
    { emoji: '🌙', bg: '#e8e0f8', cat: 'Celestial', title: 'Midnight Modal Dress', price: '$168', old: '$220', tags: ['Sale', 'Modal', 'New'], desc: 'Ultra-soft TENCEL modal in a deep midnight hue. The bias-cut drapes beautifully and the fabric moves with you — not against you.' },
    { emoji: '🍂', bg: '#f0e8d8', cat: 'Autumn', title: 'Terracotta Knit', price: '$136', old: '', tags: ['Knit', 'Wool'], desc: 'Hand-knitted in a relaxed, chunky stitch using undyed alpaca-merino blend. Warm without bulk, and gets softer with every wash.' },
  ];

  const grid = document.getElementById('grid');
  const overlay = document.getElementById('overlay');
  const backdrop = document.getElementById('backdrop');
  const closeBtn = document.getElementById('closeBtn');

  // Render cards
  products.forEach((p, i) => {
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `
      <div class="card-thumb" style="background:${p.bg}">${p.emoji}</div>
      <div class="card-meta">
        <div class="card-cat">${p.cat}</div>
        <div class="card-title">${p.title}</div>
        <div class="card-price">${p.price}</div>
      </div>
    `;
    card.addEventListener('click', () => openDetail(p));
    grid.appendChild(card);
  });

  function openDetail(p) {
    document.getElementById('detailVisual').style.background = p.bg;
    document.getElementById('detailVisual').textContent = p.emoji;
    document.getElementById('detailCat').textContent = p.cat;
    document.getElementById('detailTitle').textContent = p.title;
    document.getElementById('detailPrice').textContent = p.price;
    document.getElementById('detailOld').textContent = p.old;
    document.getElementById('detailDesc').textContent = p.desc;
    const tagsEl = document.getElementById('detailTags');
    tagsEl.innerHTML = p.tags.map(t => `<span class="tag">${t}</span>`).join('');
    overlay.classList.add('open');
    document.body.style.overflow = 'hidden';
  }

  function closeDetail() {
    overlay.classList.remove('open');
    document.body.style.overflow = '';
  }

  closeBtn.addEventListener('click', closeDetail);
  backdrop.addEventListener('click', closeDetail);
```

### 04. Clip-Path Wipe

**Type:** CSS + JS
**Description:** A dramatic clip-path reveal that wipes the new page into view. High-impact and memorable — best reserved for creative portfolios and brand sites.

**HTML:**
```html
<!-- Pages -->
<div class="page" id="page-0">
  <div class="bg-word">STUDIO</div>
  <div class="hero-grid">
    <div>
      <div class="hero-eyebrow">Creative Studio · Est. 2019</div>
      <h1 class="hero-title">WE BUILD<br><span>BOLD</span><br>FUTURES</h1>
      <p class="hero-body">A multi-disciplinary studio pushing the boundaries of brand, motion, and digital experience design.</p>
      <button class="btn-hero" onclick="goTo(1)">View Work →</button>
    </div>
    <div class="hero-side">
      <div class="hero-stat">
        <div class="hero-stat-num">142</div>
        <div class="hero-stat-label">Projects</div>
      </div>
      <div class="hero-stat">
        <div class="hero-stat-num">8yr</div>
        <div class="hero-stat-label">Experience</div>
      </div>
      <div class="hero-stat">
        <div class="hero-stat-num">4.9</div>
        <div class="hero-stat-label">Avg Rating</div>
      </div>
    </div>
  </div>
</div>

<div class="page page-incoming" id="page-1">
  <div class="page-header">
    <h1>SELECTED<br>WORK</h1>
  </div>
  <div class="proj-grid">
    <div class="proj-card"><div class="proj-num">01</div><div class="proj-cat">Brand Identity</div><div class="proj-title">Luminary<br>Financial</div><div class="proj-arrow">→</div></div>
    <div class="proj-card"><div class="proj-num">02</div><div class="proj-cat">Digital Experience</div><div class="proj-title">Atlas<br>Platform</div><div class="proj-arrow">→</div></div>
    <div class="proj-card"><div class="proj-num">03</div><div class="proj-cat">Motion & Film</div><div class="proj-title">Epoch<br>Campaign</div><div class="proj-arrow">→</div></div>
    <div class="proj-card"><div class="proj-num">04</div><div class="proj-cat">Product Design</div><div class="proj-title">Nova<br>Wearables</div><div class="proj-arrow">→</div></div>
  </div>
</div>

<div class="page page-incoming" id="page-2">
  <div class="about-grid">
    <div>
      <h1>WE ARE<br><em>FORM</em><br>STUDIO</h1>
    </div>
    <div>
      <p class="about-body">A tight team of designers, developers, and strategists who believe that great work comes from obsessing over every pixel, every word, and every interaction.</p>
      <p class="about-body">We've partnered with everyone from pre-seed startups to Fortune 500s — always bringing the same level of care.</p>
      <div class="skill-row">
        <div class="skill-item">
          <div class="skill-name"><span>Brand Design</span><span>97%</span></div>
          <div class="skill-bar"><div class="skill-fill" style="width:97%"></div></div>
        </div>
        <div class="skill-item">
          <div class="skill-name"><span>Web Development</span><span>92%</span></div>
          <div class="skill-bar"><div class="skill-fill" style="width:92%"></div></div>
        </div>
        <div class="skill-item">
          <div class="skill-name"><span>Motion Design</span><span>88%</span></div>
          <div class="skill-bar"><div class="skill-fill" style="width:88%"></div></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Nav -->
<nav class="site-nav">
  <div class="nav-logo">FORM</div>
  <div class="nav-links">
    <button class="nav-link active" data-idx="0" onclick="goTo(0)">Home</button>
    <button class="nav-link" data-idx="1" onclick="goTo(1)">Work</button>
    <button class="nav-link" data-idx="2" onclick="goTo(2)">About</button>
  </div>
</nav>

<!-- Page dots -->
<div class="page-indicator">
  <button class="ind-dot active" data-idx="0" onclick="goTo(0)"></button>
  <button class="ind-dot" data-idx="1" onclick="goTo(1)"></button>
  <button class="ind-dot" data-idx="2" onclick="goTo(2)"></button>
</div>
```

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

  :root {
    --dur: 800ms;
    --ease: cubic-bezier(0.76, 0, 0.24, 1);
  }

  html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
  }

  /* Pages */
  .page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }

  /* Base state: clipped to nothing (right side) */
  .page-incoming {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    transition: clip-path var(--dur) var(--ease);
    pointer-events: none;
    z-index: 2;
  }

  /* Fully revealed */
  .page-incoming.reveal {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  /* Exiting page stays visible beneath */
  .page-outgoing {
    z-index: 1;
  }

  /* Page 0 — Hero */
  #page-0 {
    background: #0e0e14;
    justify-content: flex-end;
    padding: 80px;
    color: white;
  }

  #page-0 .bg-word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: min(25vw, 240px);
    line-height: 1;
    color: rgba(255,255,255,0.04);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: -0.02em;
  }

  #page-0 .hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
    width: 100%;
    max-width: 1100px;
  }

  #page-0 .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #8888aa;
    margin-bottom: 24px;
  }

  #page-0 .hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 9vw, 120px);
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: 32px;
  }

  #page-0 .hero-title span { color: #c8ff00; }

  #page-0 .hero-body {
    font-size: 15px;
    line-height: 1.75;
    color: #8888aa;
    max-width: 420px;
    margin-bottom: 48px;
  }

  .btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #c8ff00;
    color: #0e0e14;
    border: none;
    padding: 18px 36px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    transition: transform 0.2s, background 0.2s;
  }
  .btn-hero:hover { background: #d4ff33; transform: translateX(3px); }

  .hero-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }

  .hero-stat {
    text-align: right;
    border-right: 2px solid #c8ff00;
    padding-right: 20px;
  }

  .hero-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    color: white;
    line-height: 1;
  }

  .hero-stat-label {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #555570;
  }

  /* Page 1 — Projects */
  #page-1 {
    background: #c8ff00;
    overflow-y: auto;
    padding: 80px;
    color: #0e0e14;
  }

  #page-1 .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 64px;
  }

  #page-1 h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 9vw, 112px);
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: #0e0e14;
  }

  .proj-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }

  .proj-card {
    background: #0e0e14;
    padding: 36px;
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.3s;
  }

  .proj-card:nth-child(even) { background: #1a1a24; }
  .proj-card:hover { background: #2a2a3a; }

  .proj-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 64px;
    color: rgba(200,255,0,0.15);
    line-height: 1;
    position: absolute;
    top: 16px;
    right: 24px;
    letter-spacing: -0.04em;
  }

  .proj-cat {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #555570;
    margin-bottom: 12px;
  }

  .proj-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: white;
    margin-bottom: auto;
  }

  .proj-arrow {
    margin-top: 32px;
    font-size: 20px;
    color: #c8ff00;
  }

  /* Page 2 — About */
  #page-2 {
    background: #1a0a2e;
    color: white;
    padding: 80px;
    display: flex;
    align-items: center;
  }

  #page-2 .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
  }

  #page-2 h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 8vw, 100px);
    line-height: 0.9;
    letter-spacing: -0.01em;
  }

  #page-2 h1 em {
    color: #c8ff00;
    font-style: italic;
    font-family: inherit;
  }

  #page-2 .about-body {
    font-size: 15px;
    line-height: 1.8;
    color: #8888aa;
    margin-bottom: 32px;
  }

  .skill-row { margin-top: 32px; }
  .skill-item { margin-bottom: 16px; }
  .skill-name {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: #aaaacc;
  }
  .skill-bar {
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
    overflow: hidden;
  }
  .skill-fill {
    height: 100%;
    background: #c8ff00;
    border-radius: 1px;
  }

  /* Nav */
  .site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 28px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    mix-blend-mode: difference;
  }

  .nav-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 0.05em;
    color: white;
    cursor: pointer;
  }

  .nav-links {
    display: flex;
    gap: 32px;
  }

  .nav-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
    border: none;
    background: none;
    position: relative;
    padding-bottom: 4px;
    transition: opacity 0.2s;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0%; height: 1px;
    background: white;
    transition: width 0.3s;
  }
  .nav-link:hover::after,
  .nav-link.active::after { width: 100%; }

  /* Page indicator */
  .page-indicator {
    position: fixed;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    mix-blend-mode: difference;
  }

  .ind-dot {
    width: 4px; height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    transition: height 0.3s, background 0.3s;
    cursor: pointer;
    border: none;
  }
  .ind-dot.active {
    height: 24px;
    background: white;
  }

  @media (max-width: 640px) {
    #page-0, #page-1, #page-2 { padding: 80px 24px 40px; }
    #page-0 .hero-grid { grid-template-columns: 1fr; }
    .hero-side { display: none; }
    .proj-grid { grid-template-columns: 1fr; }
    #page-2 .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .site-nav { padding: 20px 24px; }
    .nav-links { gap: 16px; }
  }
```

**JS:**
```js
const pages = document.querySelectorAll('.page');
  const navLinks = document.querySelectorAll('.nav-link');
  const indDots = document.querySelectorAll('.ind-dot');
  let current = 0;
  let transitioning = false;

  function goTo(idx) {
    if (idx === current || transitioning) return;
    transitioning = true;

    const prev = current;
    current = idx;

    // Update nav & dots
    navLinks.forEach(l => l.classList.toggle('active', +l.dataset.idx === current));
    indDots.forEach(d => d.classList.toggle('active', +d.dataset.idx === current));

    // Set the incoming page visible but clipped
    const incoming = pages[current];
    incoming.classList.add('page-incoming');
    incoming.classList.remove('reveal');
    incoming.style.zIndex = 2;

    // Trigger reflow then animate
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        incoming.classList.add('reveal');
      });
    });

    // After animation, clean up old page
    setTimeout(() => {
      pages[prev].style.zIndex = 1;
      incoming.style.zIndex = 1;

      // Reset all other pages to hidden state
      pages.forEach((p, i) => {
        if (i !== current) {
          p.classList.add('page-incoming');
          p.classList.remove('reveal');
          p.style.zIndex = '';
        } else {
          p.classList.remove('page-incoming');
          p.classList.remove('reveal');
          p.style.zIndex = '';
        }
      });

      transitioning = false;
    }, 850);
  }

  // Initialize: show first page, hide rest
  pages.forEach((p, i) => {
    if (i === 0) {
      p.classList.remove('page-incoming');
    } else {
      p.classList.add('page-incoming');
    }
  });

  // Keyboard
  document.addEventListener('keydown', e => {
    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') goTo(Math.min(current + 1, pages.length - 1));
    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') goTo(Math.max(current - 1, 0));
  });

  // Wheel
  let lastWheel = 0;
  document.addEventListener('wheel', e => {
    const now = Date.now();
    if (now - lastWheel < 900) return;
    lastWheel = now;
    if (e.deltaY > 0) goTo(Math.min(current + 1, pages.length - 1));
    if (e.deltaY < 0) goTo(Math.max(current - 1, 0));
  });
```

### 05. Blur Morph Transition

**Type:** CSS + JS
**Description:** Content softly de-focuses then re-focuses as the new view emerges. Calm and considered — ideal for data-heavy SaaS dashboards and admin apps.

**HTML:**
```html
<div class="app">
  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="sidebar-brand">
      <div class="brand-icon">◆</div>
      <div class="brand-name">Velocity</div>
    </div>

    <div class="nav-section">Main</div>
    <button class="nav-item active" data-page="overview">
      <span class="nav-icon">▦</span> Overview
    </button>
    <button class="nav-item" data-page="analytics">
      <span class="nav-icon">▲</span> Analytics
      <span class="nav-badge">3</span>
    </button>
    <button class="nav-item" data-page="transactions">
      <span class="nav-icon">≡</span> Transactions
    </button>

    <div class="nav-section">System</div>
    <button class="nav-item" data-page="settings">
      <span class="nav-icon">⚙</span> Settings
    </button>
  </aside>

  <!-- Main -->
  <div class="main">
    <!-- Topbar -->
    <div class="topbar">
      <div class="topbar-title" id="topbarTitle">Overview</div>
      <div class="topbar-right">
        <div class="search-bar">🔍 Search...</div>
        <div class="avatar">KL</div>
      </div>
    </div>

    <!-- Pages -->
    <div class="page-stack">

      <!-- Overview -->
      <div class="dash-page active" id="overview">
        <div class="page-heading">Good afternoon, Kayla 👋</div>
        <div class="page-sub">Here's what's happening with your business today.</div>

        <div class="kpi-row">
          <div class="kpi-card" style="--glow-a: var(--blue)">
            <div class="kpi-icon" style="background:rgba(59,130,246,0.15);color:var(--blue)">💰</div>
            <div class="kpi-value">$84.2k</div>
            <div class="kpi-label">Total Revenue</div>
            <div class="kpi-delta up">↑ 12.4% vs last month</div>
          </div>
          <div class="kpi-card" style="--glow-a: var(--purple)">
            <div class="kpi-icon" style="background:rgba(139,92,246,0.15);color:var(--purple)">👥</div>
            <div class="kpi-value">3,241</div>
            <div class="kpi-label">Active Users</div>
            <div class="kpi-delta up">↑ 8.1% vs last month</div>
          </div>
          <div class="kpi-card" style="--glow-a: var(--green)">
            <div class="kpi-icon" style="background:rgba(16,185,129,0.15);color:var(--green)">✓</div>
            <div class="kpi-value">98.2%</div>
            <div class="kpi-label">Uptime</div>
            <div class="kpi-delta up">↑ 0.3% vs last month</div>
          </div>
          <div class="kpi-card" style="--glow-a: var(--orange)">
            <div class="kpi-icon" style="background:rgba(245,158,11,0.15);color:var(--orange)">⚡</div>
            <div class="kpi-value">142ms</div>
            <div class="kpi-label">Avg Response</div>
            <div class="kpi-delta down">↓ 18ms vs last month</div>
          </div>
        </div>

        <div class="charts-row">
          <div class="chart-card">
            <div class="chart-title">Revenue by Month</div>
            <div class="chart-sub">January — June 2025</div>
            <div class="bar-chart">
              <div class="bar" style="height:55%;background:rgba(59,130,246,0.3)"></div>
              <div class="bar" style="height:70%;background:rgba(59,130,246,0.4)"></div>
              <div class="bar" style="height:45%;background:rgba(59,130,246,0.3)"></div>
              <div class="bar" style="height:85%;background:rgba(59,130,246,0.5)"></div>
              <div class="bar" style="height:72%;background:rgba(59,130,246,0.4)"></div>
              <div class="bar" style="height:95%;background:var(--blue)"></div>
            </div>
          </div>
          <div class="chart-card">
            <div class="chart-title">Traffic Sources</div>
            <div class="chart-sub">Current month breakdown</div>
            <div class="donut-wrap">
              <div class="donut"></div>
              <div class="legend">
                <div class="legend-item"><div class="legend-dot" style="background:var(--blue)"></div>Direct 42%</div>
                <div class="legend-item"><div class="legend-dot" style="background:var(--purple)"></div>Search 26%</div>
                <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div>Social 16%</div>
                <div class="legend-item"><div class="legend-dot" style="background:var(--muted)"></div>Other 16%</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Analytics -->
      <div class="dash-page" id="analytics">
        <div class="page-heading">Analytics</div>
        <div class="page-sub">Funnel performance and conversion data.</div>

        <div class="charts-row">
          <div class="chart-card">
            <div class="chart-title">Conversion Funnel</div>
            <div class="chart-sub">Visitors → Paying customers</div>
            <div class="funnel">
              <div class="funnel-row">
                <div class="funnel-label">Visitors</div>
                <div class="funnel-bar-bg"><div class="funnel-bar-fill" style="width:100%;background:var(--blue)">48,291</div></div>
              </div>
              <div class="funnel-row">
                <div class="funnel-label">Sign-ups</div>
                <div class="funnel-bar-bg"><div class="funnel-bar-fill" style="width:62%;background:var(--purple)">29,940</div></div>
              </div>
              <div class="funnel-row">
                <div class="funnel-label">Activated</div>
                <div class="funnel-bar-bg"><div class="funnel-bar-fill" style="width:38%;background:var(--green)">18,350</div></div>
              </div>
              <div class="funnel-row">
                <div class="funnel-label">Trial</div>
                <div class="funnel-bar-bg"><div class="funnel-bar-fill" style="width:21%;background:var(--orange)">10,141</div></div>
              </div>
              <div class="funnel-row">
                <div class="funnel-label">Paid</div>
                <div class="funnel-bar-bg"><div class="funnel-bar-fill" style="width:9%;background:var(--pink)">4,346</div></div>
              </div>
            </div>
          </div>
          <div class="chart-card">
            <div class="chart-title">Key Metrics</div>
            <div class="chart-sub">Rolling 30-day averages</div>
            <div style="display:flex;flex-direction:column;gap:20px;margin-top:8px">
              <div>
                <div class="kpi-label">Conversion Rate</div>
                <div class="kpi-value" style="font-size:22px">8.9%</div>
                <div class="kpi-delta up">↑ 1.2pp this month</div>
              </div>
              <div>
                <div class="kpi-label">Avg Session Duration</div>
                <div class="kpi-value" style="font-size:22px">4m 32s</div>
                <div class="kpi-delta up">↑ 14s this month</div>
              </div>
              <div>
                <div class="kpi-label">Bounce Rate</div>
                <div class="kpi-value" style="font-size:22px">34.1%</div>
                <div class="kpi-delta down">↓ 2.4pp this month</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Transactions -->
      <div class="dash-page" id="transactions">
        <div class="page-heading">Transactions</div>
        <div class="page-sub">Recent payment activity across all accounts.</div>

        <div class="table-card">
          <div class="table-header">
            <div class="table-title">Recent Transactions</div>
            <div style="font-size:12px;color:var(--blue);cursor:pointer">Export CSV</div>
          </div>
          <div class="table-row head">
            <div>Customer</div><div>Amount</div><div>Date</div><div>Status</div>
          </div>
          <div class="table-row"><div>Acme Corp</div><div>$4,200.00</div><div>Jun 12</div><div><span class="status-pill status-active">Paid</span></div></div>
          <div class="table-row"><div>GlobalTech</div><div>$11,800.00</div><div>Jun 11</div><div><span class="status-pill status-pending">Pending</span></div></div>
          <div class="table-row"><div>Sunrise Co</div><div>$860.00</div><div>Jun 10</div><div><span class="status-pill status-active">Paid</span></div></div>
          <div class="table-row"><div>Nova Labs</div><div>$2,100.00</div><div>Jun 9</div><div><span class="status-pill status-failed">Failed</span></div></div>
          <div class="table-row"><div>Peak Media</div><div>$7,450.00</div><div>Jun 8</div><div><span class="status-pill status-active">Paid</span></div></div>
          <div class="table-row"><div>Drift Studio</div><div>$3,300.00</div><div>Jun 7</div><div><span class="status-pill status-active">Paid</span></div></div>
          <div class="table-row"><div>Cloud Nine</div><div>$18,000.00</div><div>Jun 6</div><div><span class="status-pill status-pending">Pending</span></div></div>
        </div>
      </div>

      <!-- Settings -->
      <div class="dash-page" id="settings">
        <div class="page-heading">Settings</div>
        <div class="page-sub">Manage your account and preferences.</div>

        <div class="settings-grid">
          <div class="settings-nav">
            <div class="settings-nav-item active">General</div>
            <div class="settings-nav-item">Security</div>
            <div class="settings-nav-item">Billing</div>
            <div class="settings-nav-item">Notifications</div>
            <div class="settings-nav-item">Integrations</div>
          </div>
          <div class="settings-section">
            <div class="settings-row">
              <div>
                <div class="settings-label">Email Notifications</div>
                <div class="settings-desc">Receive alerts for new transactions and reports</div>
              </div>
              <button class="toggle-switch on" onclick="this.classList.toggle('on')"></button>
            </div>
            <div class="settings-row">
              <div>
                <div class="settings-label">Two-Factor Authentication</div>
                <div class="settings-desc">Add an extra layer of security to your account</div>
              </div>
              <button class="toggle-switch on" onclick="this.classList.toggle('on')"></button>
            </div>
            <div class="settings-row">
              <div>
                <div class="settings-label">Weekly Digest</div>
                <div class="settings-desc">Get a summary of your metrics every Monday</div>
              </div>
              <button class="toggle-switch" onclick="this.classList.toggle('on')"></button>
            </div>
            <div class="settings-row">
              <div>
                <div class="settings-label">Beta Features</div>
                <div class="settings-desc">Access new features before public release</div>
              </div>
              <button class="toggle-switch" onclick="this.classList.toggle('on')"></button>
            </div>
            <div class="settings-row">
              <div>
                <div class="settings-label">Usage Analytics</div>
                <div class="settings-desc">Help us improve by sharing anonymous usage data</div>
              </div>
              <button class="toggle-switch on" onclick="this.classList.toggle('on')"></button>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /page-stack -->
  </div><!-- /main -->
</div><!-- /app -->
```

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

  :root {
    --bg: #090912;
    --surface: #0f0f1c;
    --surface-2: #161627;
    --border: rgba(255,255,255,0.06);
    --text: #e2e2f0;
    --muted: #6060a0;
    --blue: #3b82f6;
    --purple: #8b5cf6;
    --green: #10b981;
    --orange: #f59e0b;
    --red: #ef4444;
    --pink: #ec4899;
    --dur: 500ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
  }

  html, body {
    height: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
  }

  /* App Shell */
  .app {
    display: grid;
    grid-template-columns: 220px 1fr;
    height: 100vh;
  }

  /* Sidebar */
  .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 24px;
  }

  .brand-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .brand-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }

  .nav-section { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); padding: 16px 12px 8px; }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s, color 0.15s;
  }

  .nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
  .nav-item.active { background: rgba(59,130,246,0.12); color: var(--blue); }

  .nav-icon { font-size: 15px; width: 20px; text-align: center; }

  .nav-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: var(--blue);
    color: white;
  }

  /* Main area */
  .main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Top bar */
  .topbar {
    height: 60px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    flex-shrink: 0;
  }

  .topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    transition: all var(--dur) var(--ease);
  }

  .topbar-right { display: flex; gap: 16px; align-items: center; }

  .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--pink));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
  }

  .search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--muted);
    width: 200px;
  }

  /* Page stack */
  .page-stack {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  .dash-page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 32px;
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.98) translateY(8px);
    pointer-events: none;
    transition:
      opacity var(--dur) var(--ease),
      filter var(--dur) var(--ease),
      transform var(--dur) var(--ease);
    will-change: opacity, filter, transform;
  }

  .dash-page.active {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) translateY(0px);
    pointer-events: auto;
  }

  /* Dashboard components */
  .page-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }

  .page-sub {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 28px;
  }

  /* KPI row */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }

  .kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
  }

  .kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--glow-a) 0%, transparent 60%);
    opacity: 0.06;
    pointer-events: none;
  }

  .kpi-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    margin-bottom: 14px;
  }

  .kpi-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 4px;
  }

  .kpi-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
  }

  .kpi-delta {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .kpi-delta.up { color: var(--green); }
  .kpi-delta.down { color: var(--red); }

  /* Charts row */
  .charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
  }

  .chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
  }

  .chart-sub { font-size: 11px; color: var(--muted); margin-bottom: 20px; }

  /* Fake bar chart */
  .bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
  }

  .bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    transition: height 1s cubic-bezier(0.32, 0.72, 0, 1);
    min-width: 0;
  }

  /* Fake donut */
  .donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .donut {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: conic-gradient(
      var(--blue) 0% 42%,
      var(--purple) 42% 68%,
      var(--green) 68% 84%,
      var(--muted) 84% 100%
    );
    position: relative;
  }

  .donut::after {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: var(--surface);
  }

  .legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
    width: 100%;
  }

  .legend-item { display: flex; align-items: center; gap: 6px; }
  .legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

  /* Table */
  .table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }

  .table-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .table-title { font-size: 13px; font-weight: 600; }

  .table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 80px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    align-items: center;
    transition: background 0.15s;
  }

  .table-row:last-child { border-bottom: none; }
  .table-row:hover { background: rgba(255,255,255,0.02); }
  .table-row.head { color: var(--muted); font-size: 11px; font-weight: 500; }

  .status-pill {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .status-active { background: rgba(16,185,129,0.15); color: var(--green); }
  .status-pending { background: rgba(245,158,11,0.15); color: var(--orange); }
  .status-failed { background: rgba(239,68,68,0.15); color: var(--red); }

  /* Analytics page */
  .funnel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
  }

  .funnel-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .funnel-label { font-size: 12px; color: var(--muted); width: 100px; flex-shrink: 0; }

  .funnel-bar-bg {
    flex: 1;
    height: 28px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
  }

  .funnel-bar-fill {
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
  }

  /* Settings page */
  .settings-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }

  .settings-nav { display: flex; flex-direction: column; gap: 2px; }
  .settings-nav-item {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
  }
  .settings-nav-item.active { background: rgba(59,130,246,0.12); color: var(--blue); }
  .settings-nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }

  .settings-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }

  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
  }
  .settings-row:last-child { border-bottom: none; }

  .settings-label { font-size: 13.5px; font-weight: 500; margin-bottom: 3px; }
  .settings-desc { font-size: 12px; color: var(--muted); }

  .toggle-switch {
    width: 40px; height: 22px;
    background: rgba(255,255,255,0.1);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s;
    border: none;
    flex-shrink: 0;
  }
  .toggle-switch.on { background: var(--blue); }
  .toggle-switch::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: transform 0.25s;
  }
  .toggle-switch.on::after { transform: translateX(18px); }

  @media (max-width: 768px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .kpi-row { grid-template-columns: 1fr 1fr; }
    .charts-row { grid-template-columns: 1fr; }
  }

  @media (max-width: 500px) {
    .kpi-row { grid-template-columns: 1fr; }
  }
```

**JS:**
```js
const navItems = document.querySelectorAll('.nav-item');
  const pages = document.querySelectorAll('.dash-page');
  const titles = { overview: 'Overview', analytics: 'Analytics', transactions: 'Transactions', settings: 'Settings' };

  navItems.forEach(item => {
    item.addEventListener('click', () => {
      const target = item.dataset.page;

      navItems.forEach(n => n.classList.remove('active'));
      item.classList.add('active');

      pages.forEach(p => p.classList.remove('active'));
      document.getElementById(target).classList.add('active');

      document.getElementById('topbarTitle').textContent = titles[target];
    });
  });
```

### 06. Book Page Turn

**Type:** CSS + JS
**Description:** A real 3D page curl using CSS preserve-3d and rotateY — the right leaf lifts off and turns to reveal the next spread. An antiquarian book floating in a dark ambient scene.

**HTML:**
```html
<div class="scene">
  <div class="book" id="book">

    <!-- Spread 0 -->
    <div class="spread active" id="s0">
      <div class="leaf leaf-left s0-left">
        <div style="position:relative;z-index:1;text-align:center;padding:48px 32px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;">
          <div class="cover-ornament">✦ ✦ ✦</div>
          <div class="cover-title">The Invisible <em>Library</em></div>
          <div class="cover-subtitle">A Novel in Four Books</div>
          <div class="cover-rule"></div>
          <div class="cover-author">Marguerite Vane</div>
          <div class="cover-year">MDCCCXCII</div>
        </div>
      </div>
      <div class="leaf leaf-right">
        <div class="s0-right-inner">
          <div class="title-page-label">First Edition · London</div>
          <div class="title-page-title">The Invisible<br><em>Library</em></div>
          <div class="title-page-sub">Being a Complete & Faithful Account of the Travels of Miss Helena Voss Through the Rooms of Memory</div>
          <div class="title-page-meta">
            Printed by Alderman & Sons · Paternoster Row<br>
            Set in 12pt Garamond · Hand-bound in vellum<br>
            Edition of 250 copies
          </div>
          <div class="page-num">ii</div>
        </div>
      </div>
    </div>

    <!-- Spread 1 -->
    <div class="spread" id="s1">
      <div class="leaf leaf-left">
        <div class="page-inner">
          <div class="running-head">The Invisible Library</div>
          <div class="rule"></div>
          <div class="chapter-heading">
            <span class="chapter-num">Chapter the First</span>
            <div class="chapter-title">In Which a Letter<br>Arrives at Dusk</div>
          </div>
          <div class="rule"></div>
          <div class="body-text">
            <span class="dropcap">T</span>he letter came on a Thursday, which Helena had always considered an unreliable day — too far from the comfort of Wednesday, not close enough to the relief of Friday. It arrived not by post but by the hand of a boy no older than ten, who pressed it into her palm without a word and turned and ran before she could ask him anything sensible.
            <br><br>
            It was addressed in a hand she did not recognise, though the ink had an odd quality: too dark for iron gall, too warm for carbon, as if whoever had written it had dipped their pen in something between midnight and rust.
          </div>
          <div class="page-num">3</div>
        </div>
      </div>
      <div class="leaf leaf-right">
        <div class="page-inner">
          <div class="running-head">Chapter the First</div>
          <div class="rule"></div>
          <div class="body-text">
            She broke the seal — a figure-eight pressed in wax the colour of dried blood — and read the four lines inside twice, then a third time, in the failing light of her sitting room window. They said only this:
            <br><br>
            <em>The library is open. You were expected. Come before the candles go out, which they will at midnight. Bring nothing that matters to you, for it will not return as it was.</em>
            <br><br>
            Helena set the letter on her writing desk and looked at it for a long time. Then she put on her coat, took her lamp, and went out into the street, which had begun, very quietly, to rain.
            <br><br>
            She did not bring anything that mattered to her. She was not certain she had anything left that did.
          </div>
          <div class="marginal-note">cf. Borges, Labyrinths, pp.51–58</div>
          <div class="page-num">4</div>
        </div>
      </div>
    </div>

    <!-- Spread 2 -->
    <div class="spread" id="s2">
      <div class="leaf leaf-left">
        <div class="page-inner">
          <div class="running-head">The Invisible Library</div>
          <div class="rule"></div>
          <div class="poem-title">An Interlude: The Catalogue</div>
          <div class="poem-body">
            <p>Here are the books that were never written,<br>shelved between the ones that were.<br>Here are the thoughts that stopped mid-sentence<br>and dried before they could occur.</p>
            <p>The index to a lost cartography.<br>A grammar of a wordless tongue.<br>The history of a city founded<br>in a country that has come undone.</p>
            <p>All present. All accounted for.<br>All alphabetised by what they lack.<br>The library collects the absent<br>as faithfully as what came back.</p>
          </div>
          <div class="rule" style="margin-top:auto"></div>
          <div class="page-num">47</div>
        </div>
      </div>
      <div class="leaf leaf-right">
        <div class="page-inner">
          <div class="running-head">An Interlude</div>
          <div class="rule"></div>
          <div style="height:60px"></div>
          <div class="poem-body">
            <p>She read the catalogue by lamplight,<br>running her finger down the spines<br>of volumes that existed only<br>as an entry between the lines.</p>
            <p><em>Dreams of the Paralysed Mathematician.</em><br><em>A Psalter Written Left to Right.</em><br><em>Everything Your Mother Almost Said</em><br><em>on the particular Tuesday night.</em></p>
            <p>She closed it carefully. She set it back.<br>She understood, now, what this place required:<br>not the books she'd brought, nor those she'd read,<br>but the ones she'd always half-desired.</p>
          </div>
          <div class="page-num">48</div>
        </div>
      </div>
    </div>

    <!-- Spread 3 -->
    <div class="spread" id="s3">
      <div class="leaf leaf-left">
        <div class="page-inner">
          <div class="running-head">The Invisible Library</div>
          <div class="rule"></div>
          <div class="body-text">
            <span class="dropcap">S</span>he emerged at dawn into a street she did not recognise, though she had lived in the city all her life. The library was gone — or rather, it had returned to being the unremarkable stone building on the corner of Cloth Fair that had stood there, according to the Parish records, since 1742.
            <br><br>
            Her notebook, which she had not brought, was in her hand. It was full.
            <br><br>
            She walked home, reading as she went, which is the most dangerous form of walking, and by the time she reached her door she had understood that the library had not given her the books inside it. It had given her back the ones she'd lost — the ones she had been, without knowing it, writing all along.
          </div>
          <div class="rule" style="margin-top:auto"></div>
          <div style="text-align:center;font-style:italic;font-size:12px;color:rgba(28,16,8,0.4);margin-top:12px">Finis</div>
          <div class="page-num">214</div>
        </div>
      </div>
      <div class="leaf leaf-right">
        <div class="page-inner">
          <div class="colophon">
            <div class="colophon-mark">…</div>
            <div class="colophon-text">
              This book was composed and set by hand at the Alderman Press, London, in the autumn of 1892. The typeface is Garamond, cut in the manner of Granjon. The paper is Arches mould-made.
            </div>
            <div class="colophon-pub">Alderman &amp; Sons · Paternoster Row · London</div>
          </div>
          <div class="page-num">215</div>
        </div>
      </div>
    </div>

    <!-- Turning page element -->
    <div class="page-turn-container" id="turner">
      <div class="turn-front" id="turnFront">
        <div class="fold-shadow"></div>
      </div>
      <div class="turn-back" id="turnBack"></div>
    </div>

  </div>
</div>

<!-- Nav -->
<div class="book-nav">
  <button class="bnav-btn" id="prevBtn">‹</button>
  <div class="page-indicator" id="pageInd">pp. i–ii</div>
  <button class="bnav-btn" id="nextBtn">›</button>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#f4edd8;
  --parchment:#e8dbb8;
  --burg:#4a1020;
  --burg-light:#7a2838;
  --ink:#1c1008;
  --gold:#b8922a;
}
html,body{height:100%;overflow:hidden;background:#2a1a10;font-family:'Crimson Pro',serif;}

/* Scene */
.scene{
  position:fixed;inset:0;
  perspective:2000px;
  perspective-origin:50% 40%;
  display:flex;align-items:center;justify-content:center;
}

.book{
  width:min(900px,95vw);
  height:min(600px,90vh);
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-2deg);
  box-shadow:
    0 60px 120px rgba(0,0,0,0.6),
    0 20px 40px rgba(0,0,0,0.4);
}

/* Book pages sit side by side */
.book-spread{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
}

/* Spine shadow */
.book-spread::before{
  content:'';
  position:absolute;
  top:0;bottom:0;
  left:50%;width:4px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(0,0,0,0.3),rgba(0,0,0,0.1),rgba(255,255,255,0.08),rgba(0,0,0,0.1),rgba(0,0,0,0.3));
  z-index:100;
}

/* Page spread */
.spread{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1fr 1fr;
  transform-style:preserve-3d;
  visibility:hidden;
}
.spread.active{visibility:visible;}

/* Each leaf is half the spread */
.leaf{
  position:relative;
  overflow:hidden;
}

.leaf-left{background:var(--cream);}
.leaf-right{background:var(--parchment);}

/* Thin paper texture via gradient */
.leaf::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(0,0,0,0.018) 28px,rgba(0,0,0,0.018) 29px),
    linear-gradient(180deg,rgba(255,255,255,0.4) 0%,transparent 20%,transparent 80%,rgba(0,0,0,0.04) 100%);
  pointer-events:none;z-index:10;
}

/* Turning leaf */
.page-turn-container{
  position:absolute;
  top:0;bottom:0;
  right:0;left:50%;
  transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(0deg);
  z-index:500;
  pointer-events:none;
}

.turn-front,.turn-back{
  position:absolute;inset:0;
  backface-visibility:hidden;
  overflow:hidden;
}

.turn-back{
  transform:rotateY(180deg);
  background:var(--parchment);
}

.turn-back::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,0.12),transparent 30%);
  pointer-events:none;z-index:10;
}

/* Shadow that rides the fold */
.fold-shadow{
  position:absolute;
  top:0;bottom:0;left:0;width:40px;
  background:linear-gradient(90deg,rgba(0,0,0,0.25),transparent);
  pointer-events:none;z-index:20;
}

/* SPREAD CONTENT STYLES */
.page-inner{
  padding:48px 44px;
  height:100%;
  display:flex;flex-direction:column;
  position:relative;
  overflow:hidden;
}

/* Page number */
.page-num{
  position:absolute;bottom:20px;
  font-size:9px;letter-spacing:0.15em;
  color:rgba(28,16,8,0.3);
  font-family:'Crimson Pro',serif;
  font-style:italic;
}
.leaf-left .page-num{left:44px;}
.leaf-right .page-num{right:44px;}

/* Decorative rule */
.rule{
  width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:12px 0;
}

/* Drop cap */
.dropcap{
  float:left;
  font-family:'IM Fell English',serif;
  font-size:72px;line-height:0.85;
  margin-right:6px;margin-top:8px;
  color:var(--burg);
}

.running-head{
  font-size:8px;letter-spacing:0.3em;text-transform:uppercase;
  color:rgba(28,16,8,0.4);
  text-align:center;margin-bottom:8px;
  font-family:'Crimson Pro',serif;
}

/* Spread 0 — cover / title page */
.s0-left{
  align-items:center;justify-content:center;
  text-align:center;
  background:var(--burg);
  color:var(--cream);
}
.s0-left::before{display:none;}
.s0-left::after{
  content:'';position:absolute;inset:16px;
  border:1px solid rgba(184,146,42,0.3);
  pointer-events:none;
}

.cover-ornament{
  font-size:28px;color:rgba(184,146,42,0.5);
  letter-spacing:0.2em;margin-bottom:20px;
}
.cover-title{
  font-family:'IM Fell English',serif;
  font-size:36px;font-weight:400;
  line-height:1.2;color:var(--parchment);
  margin-bottom:8px;
}
.cover-title em{font-style:italic;color:var(--gold);}
.cover-subtitle{
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(232,219,184,0.45);margin-bottom:32px;
}
.cover-rule{
  width:60px;height:1px;background:var(--gold);
  margin:0 auto 28px;opacity:0.5;
}
.cover-author{
  font-size:14px;letter-spacing:0.12em;
  color:rgba(232,219,184,0.6);
  font-style:italic;
}
.cover-year{
  font-size:9px;letter-spacing:0.2em;
  color:rgba(232,219,184,0.3);
  margin-top:16px;
}

.s0-right{
  background:var(--cream);
}
.s0-right-inner{
  padding:48px 44px;height:100%;
  display:flex;flex-direction:column;
  justify-content:center;
  position:relative;
}

.title-page-label{
  font-size:8px;letter-spacing:0.3em;text-transform:uppercase;
  color:rgba(28,16,8,0.3);margin-bottom:28px;
}
.title-page-title{
  font-family:'IM Fell English',serif;
  font-size:44px;line-height:1.1;
  color:var(--ink);margin-bottom:12px;
}
.title-page-title em{font-style:italic;color:var(--burg);}
.title-page-sub{
  font-size:14px;font-style:italic;
  color:rgba(28,16,8,0.5);margin-bottom:32px;
  line-height:1.6;
}
.title-page-meta{
  font-size:10px;letter-spacing:0.08em;
  color:rgba(28,16,8,0.3);line-height:2;
  border-top:1px solid rgba(28,16,8,0.1);
  padding-top:20px;margin-top:auto;
}

/* Spread 1 — chapter */
.chapter-heading{
  text-align:center;margin-bottom:24px;
}
.chapter-num{
  font-size:9px;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--burg);margin-bottom:12px;display:block;
}
.chapter-title{
  font-family:'IM Fell English',serif;
  font-size:30px;color:var(--ink);line-height:1.2;
}

.body-text{
  font-family:'EB Garamond',serif;
  font-size:13.5px;line-height:1.85;
  color:rgba(28,16,8,0.8);
  text-align:justify;
  hyphens:auto;
}

/* Spread 2 — poetry */
.poem-title{
  font-family:'IM Fell English',serif;
  font-size:22px;font-style:italic;
  color:var(--burg);margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(74,16,32,0.15);
}
.poem-body{
  font-family:'EB Garamond',serif;
  font-size:14px;line-height:2.1;
  color:rgba(28,16,8,0.75);
  font-style:italic;
  padding-left:20px;
}
.poem-body p{margin-bottom:16px;}

.marginal-note{
  position:absolute;right:12px;top:30%;
  width:44px;
  font-size:7px;line-height:1.6;
  color:rgba(28,16,8,0.35);
  text-align:center;
  transform:rotate(90deg);
  transform-origin:center;
  letter-spacing:0.1em;
  font-style:italic;
}

/* Spread 3 — colophon */
.colophon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;height:100%;
}
.colophon-mark{
  font-size:48px;color:var(--burg);opacity:0.3;
  margin-bottom:24px;
}
.colophon-text{
  font-size:11px;line-height:1.9;
  color:rgba(28,16,8,0.4);
  font-style:italic;max-width:220px;
  border-top:1px solid rgba(28,16,8,0.1);
  border-bottom:1px solid rgba(28,16,8,0.1);
  padding:20px 0;margin-bottom:20px;
}
.colophon-pub{
  font-size:9px;letter-spacing:0.2em;
  color:rgba(28,16,8,0.25);text-transform:uppercase;
}

/* Nav arrows */
.book-nav{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%);
  z-index:1000;display:flex;align-items:center;gap:16px;
}
.bnav-btn{
  width:44px;height:44px;
  border:1px solid rgba(232,219,184,0.25);
  background:rgba(28,16,8,0.7);
  color:rgba(232,219,184,0.6);
  font-size:20px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(12px);
  transition:all .2s;font-family:serif;
}
.bnav-btn:hover{border-color:var(--gold);color:var(--gold);}

.page-indicator{
  font-family:'Crimson Pro',serif;font-style:italic;
  font-size:12px;color:rgba(232,219,184,0.4);
  letter-spacing:0.08em;
  min-width:80px;text-align:center;
}

/* Ambient bg */
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,#3a2015,#1a0e08);
  z-index:-1;
}
```

**JS:**
```js
const spreads=document.querySelectorAll('.spread');
const turner=document.getElementById('turner');
const turnFront=document.getElementById('turnFront');
const turnBack=document.getElementById('turnBack');
const pageInd=document.getElementById('pageInd');
const labels=['pp. i–ii','pp. 3–4','pp. 47–48','pp. 214–215'];
let cur=0,total=spreads.length,busy=false;

function cloneSpreadContent(spreadEl,side){
  const leaves=spreadEl.querySelectorAll('.leaf');
  const idx=side==='left'?0:1;
  if(!leaves[idx])return;
  const clone=leaves[idx].cloneNode(true);
  clone.style.cssText='position:absolute;inset:0;margin:0;';
  return clone;
}

function turnPage(direction){
  if(busy)return;
  const next=direction>0?cur+1:cur-1;
  if(next<0||next>=total)return;
  busy=true;

  const fromSpread=spreads[cur];
  const toSpread=spreads[next];

  turnFront.innerHTML='';
  const frontClone=cloneSpreadContent(fromSpread,'right');
  if(frontClone)turnFront.appendChild(frontClone);
  turnFront.appendChild(Object.assign(document.createElement('div'),{className:'fold-shadow'}));

  turnBack.innerHTML='';
  const backClone=cloneSpreadContent(toSpread,'right');
  if(backClone){
    backClone.style.transform='scaleX(-1)';
    turnBack.appendChild(backClone);
  }

  turner.style.transition='none';
  turner.style.transform=direction>0?'rotateY(0deg)':'rotateY(-180deg)';
  turner.style.display='block';

  fromSpread.classList.add('active');
  toSpread.classList.remove('active');

  requestAnimationFrame(()=>{
    requestAnimationFrame(()=>{
      turner.style.transition='transform 900ms cubic-bezier(0.6,0,0.4,1)';
      turner.style.transform=direction>0?'rotateY(-180deg)':'rotateY(0deg)';
    });
  });

  setTimeout(()=>{
    fromSpread.classList.remove('active');
    toSpread.classList.add('active');
  },450);

  setTimeout(()=>{
    turner.style.display='none';
    cur=next;
    pageInd.textContent=labels[cur];
    busy=false;
  },920);
}

document.getElementById('nextBtn').onclick=()=>turnPage(1);
document.getElementById('prevBtn').onclick=()=>turnPage(-1);

document.addEventListener('keydown',e=>{
  if(e.key==='ArrowRight')turnPage(1);
  if(e.key==='ArrowLeft')turnPage(-1);
});

let wt=0;
window.addEventListener('wheel',e=>{
  const now=Date.now();if(now-wt<1100)return;wt=now;
  turnPage(e.deltaY>0?1:-1);
},{passive:true});
```

### 07. Ink Bleed

**Type:** CSS + JS
**Description:** A Canvas ink drop radiates organically from the centre with seismic roughness — like sumi ink spreading on wet paper, covering, then receding. Set in a Japanese ceramics studio.

**HTML:**
```html
<canvas id="inkCanvas"></canvas>

<div class="pages">

  <div class="page active" id="p0">
    <div class="p0-left">
      <div class="studio-mark">白泥窯 · Hakudei Kiln</div>
      <div class="kanji-bg">器</div>
      <div class="p0-hero">
        <div class="p0-tagline">Handmade · Raku · Seasonal</div>
        <h1 class="p0-title">Things made<br>to last</h1>
        <div class="p0-title-jp">一期一会の器</div>
        <p class="p0-body">Each piece is made once, in the way the clay demands. We do not repeat ourselves. We do not sell in quantity. We work with fire and patience.</p>
      </div>
      <div class="p0-footer">
        <div class="season-badge">Autumn 2025</div>
        <div style="font-size:11px;font-style:italic;color:var(--smoke)">Kyoto, Japan</div>
      </div>
    </div>
    <div class="p0-right">
      <div class="brush-art">
        <div class="bowl-art">
          <div class="ceramic-ring ring-1"></div>
          <div class="ceramic-ring ring-2"></div>
          <div class="ceramic-ring ring-3"></div>
          <div class="ring-inner"></div>
          <div class="stroke stroke-1"></div>
          <div class="stroke stroke-2"></div>
          <div class="stroke stroke-3"></div>
        </div>
      </div>
      <div class="p0-caption">茶碗 · Chawan · Tea Bowl · Shino glaze · 2025</div>
    </div>
  </div>

  <div class="page" id="p1">
    <div class="p1-bg">器</div>
    <div class="p1-eyebrow">Autumn Collection 2025</div>
    <h2 class="p1-title">New work<br>from the kiln</h2>
    <div class="p1-grid">
      <div class="ceramic-card">
        <div class="ceramic-thumb"><div class="c-shape"></div></div>
        <div class="ceramic-name">Shino Chawan</div>
        <div class="ceramic-series">Tea Series · No.01</div>
        <div class="ceramic-price">¥ 68,000</div>
      </div>
      <div class="ceramic-card">
        <div class="ceramic-thumb" style="aspect-ratio:1"><div class="c-shape" style="border-radius:50%"></div></div>
        <div class="ceramic-name">Ash Katakuchi</div>
        <div class="ceramic-series">Vessel Series · No.04</div>
        <div class="ceramic-price">¥ 42,000</div>
      </div>
      <div class="ceramic-card">
        <div class="ceramic-thumb"><div class="c-shape" style="height:100px;border-radius:20% 20% 50% 50%"></div></div>
        <div class="ceramic-name">Raku Guinomi</div>
        <div class="ceramic-series">Sake Series · No.07</div>
        <div class="ceramic-price">¥ 24,000</div>
      </div>
      <div class="ceramic-card">
        <div class="ceramic-thumb"><div class="c-shape" style="width:80px;height:60px;border-radius:50%"></div></div>
        <div class="ceramic-name">Oribe Hachi</div>
        <div class="ceramic-series">Bowl Series · No.02</div>
        <div class="ceramic-price">¥ 38,000</div>
      </div>
    </div>
  </div>

  <div class="page" id="p2">
    <div class="p2-left">
      <div class="p2-eyebrow">The Process</div>
      <h2 class="p2-title">Made by<br>hand and<br>fire</h2>
      <p class="p2-body">Nothing here is hurried. The kiln dictates the schedule, not the calendar. Each firing takes three days and reveals results that cannot be predicted or reproduced.</p>
      <div class="process-list">
        <div class="proc-item"><div class="proc-num">一</div><div class="proc-text">Clay reclaimed from mountain sources and aged for one year</div></div>
        <div class="proc-item"><div class="proc-num">二</div><div class="proc-text">Hand-thrown or slab-built, each piece unique in form</div></div>
        <div class="proc-item"><div class="proc-num">三</div><div class="proc-text">Wood-fired in anagama kiln at cone 12 over 60 hours</div></div>
        <div class="proc-item"><div class="proc-num">四</div><div class="proc-text">Unboxed by hand and inspected. Most pieces are not kept.</div></div>
      </div>
    </div>
    <div class="p2-right">
      <div class="form-lg"></div>
      <div class="form-sm"></div>
      <div style="font-size:10px;letter-spacing:0.2em;color:var(--smoke);text-align:center;font-style:italic">木灰釉薬 · Wood-ash glaze</div>
    </div>
  </div>

  <div class="page" id="p3">
    <div class="p3-bg"></div>
    <div class="p3-content">
      <div class="p3-jp">白泥窯 · 一九八九年創業</div>
      <h2 class="p3-title">Making is<br>a form of<br><em>listening</em></h2>
      <blockquote class="p3-quote">The clay knows what it wants to become. Our work is only to be present for long enough to hear it — and skilled enough to help it arrive.</blockquote>
      <div class="p3-meta">
        <div class="p3-meta-item"><div class="p3-meta-num">36</div><div class="p3-meta-label">Years at the kiln</div></div>
        <div class="p3-meta-item"><div class="p3-meta-num">4</div><div class="p3-meta-label">Annual firings</div></div>
        <div class="p3-meta-item"><div class="p3-meta-num">~60</div><div class="p3-meta-label">Pieces kept per year</div></div>
      </div>
    </div>
  </div>

</div>

<div class="dot-nav" id="dotNav">
  <button class="dot active" data-i="0"></button>
  <button class="dot" data-i="1"></button>
  <button class="dot" data-i="2"></button>
  <button class="dot" data-i="3"></button>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ash:#e8e2d8;
  --pale:#f4f0ea;
  --clay:#c4a882;
  --smoke:#8a8070;
  --ink:#1a1410;
  --charcoal:#2a2420;
}
html,body{height:100%;overflow:hidden;background:var(--pale);font-family:'Cormorant',serif;color:var(--ink);}

/* Ink canvas overlay */
#inkCanvas{
  position:fixed;inset:0;z-index:800;
  pointer-events:none;
}

/* Pages */
.pages{position:fixed;inset:0;}
.page{
  position:absolute;inset:0;
  visibility:hidden;pointer-events:none;
}
.page.active{visibility:visible;pointer-events:auto;}

/* PAGE 0 — STUDIO */
#p0{
  background:var(--pale);
  display:grid;grid-template-columns:1fr 1fr;
}

.p0-left{
  padding:80px 70px;
  display:flex;flex-direction:column;justify-content:space-between;
  border-right:1px solid rgba(26,20,16,0.08);
  position:relative;
}

.studio-mark{
  font-family:'Noto Serif JP',serif;
  font-size:13px;letter-spacing:0.2em;
  color:rgba(26,20,16,0.3);
  font-weight:200;
}

.p0-hero{
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:20px;
}

.kanji-bg{
  position:absolute;
  font-family:'Noto Serif JP',serif;
  font-size:40vw;font-weight:200;
  color:rgba(26,20,16,0.025);
  line-height:1;
  top:50%;left:50%;
  transform:translate(-35%,-55%);
  pointer-events:none;
  user-select:none;
}

.p0-tagline{
  font-size:9px;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--smoke);margin-bottom:20px;
}

.p0-title{
  font-size:clamp(48px,7vw,88px);
  font-weight:300;line-height:0.95;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:20px;
  position:relative;
}

.p0-title-jp{
  font-family:'Noto Serif JP',serif;
  font-size:11px;letter-spacing:0.2em;
  color:var(--clay);font-weight:300;
  margin-bottom:32px;
}

.p0-body{
  font-size:15px;line-height:1.8;font-weight:300;
  color:rgba(26,20,16,0.5);
  max-width:360px;font-style:italic;
}

.p0-footer{
  display:flex;align-items:center;justify-content:space-between;
}

.season-badge{
  font-size:9px;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--clay);
  border:1px solid rgba(196,168,130,0.4);
  padding:6px 16px;
}

.p0-right{
  display:flex;flex-direction:column;
  background:var(--ash);
  position:relative;overflow:hidden;
}

/* Sumi-e brush artwork area */
.brush-art{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}

.bowl-art{
  position:relative;
  width:240px;height:240px;
}

.ceramic-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(26,20,16,0.12);
}
.ring-1{inset:0;background:rgba(196,168,130,0.15);}
.ring-2{inset:16px;background:rgba(196,168,130,0.1);border-color:rgba(26,20,16,0.08);}
.ring-3{inset:40px;background:rgba(196,168,130,0.08);border-color:rgba(26,20,16,0.05);}
.ring-inner{
  position:absolute;inset:80px;
  border-radius:50%;
  background:var(--ink);opacity:0.06;
}

.stroke{
  position:absolute;
  background:rgba(26,20,16,0.12);
  border-radius:50% 20% 50% 20%;
  transform-origin:center;
}
.stroke-1{width:3px;height:80px;top:-40px;left:50%;transform:translateX(-50%) rotate(-10deg);}
.stroke-2{width:2px;height:60px;top:20px;right:20px;transform:rotate(35deg);opacity:0.6;}
.stroke-3{width:2px;height:40px;bottom:20px;left:24px;transform:rotate(-20deg);opacity:0.4;}

.p0-caption{
  padding:32px 48px;
  border-top:1px solid rgba(26,20,16,0.08);
  font-size:11px;letter-spacing:0.12em;
  color:rgba(26,20,16,0.35);
  text-align:center;font-style:italic;
}

/* PAGE 1 — COLLECTION */
#p1{
  background:var(--charcoal);
  color:var(--ash);
  display:flex;flex-direction:column;
  padding:80px;
  position:relative;
  overflow:hidden;
}

.p1-bg{
  position:absolute;
  font-family:'Noto Serif JP',serif;
  font-size:500px;font-weight:200;
  color:rgba(255,255,255,0.015);
  line-height:1;
  bottom:-100px;right:-60px;
  pointer-events:none;
}

.p1-eyebrow{
  font-size:9px;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--clay);margin-bottom:40px;
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;
}
.p1-eyebrow::after{
  content:'';flex:1;height:1px;
  background:rgba(196,168,130,0.2);
}

.p1-title{
  font-size:clamp(40px,6vw,72px);
  font-weight:300;color:var(--ash);
  letter-spacing:-0.02em;line-height:1.05;
  margin-bottom:60px;position:relative;z-index:1;
}

.p1-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  flex:1;align-content:start;
  position:relative;z-index:1;
}

.ceramic-card{
  display:flex;flex-direction:column;gap:12px;
  cursor:pointer;
  transition:transform .3s;
}
.ceramic-card:hover{transform:translateY(-4px);}

.ceramic-thumb{
  aspect-ratio:3/4;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(232,226,216,0.08);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  transition:border-color .3s;
}
.ceramic-card:hover .ceramic-thumb{border-color:rgba(196,168,130,0.3);}

.c-shape{
  width:60px;height:80px;
  background:linear-gradient(160deg,rgba(196,168,130,0.3),rgba(196,168,130,0.1));
  border-radius:50% 50% 40% 40%;
  border:1px solid rgba(196,168,130,0.2);
  position:relative;
}
.c-shape::before{
  content:'';position:absolute;
  top:-8px;left:50%;transform:translateX(-50%);
  width:24px;height:12px;
  background:rgba(196,168,130,0.25);
  border-radius:50% 50% 0 0;
  border:1px solid rgba(196,168,130,0.2);
  border-bottom:none;
}

.ceramic-name{
  font-size:13px;font-weight:300;color:var(--ash);
  letter-spacing:0.04em;
}
.ceramic-series{
  font-size:9px;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(232,226,216,0.3);
}
.ceramic-price{
  font-size:11px;color:var(--clay);letter-spacing:0.08em;
}

/* PAGE 2 — PROCESS */
#p2{
  background:var(--pale);
  display:grid;grid-template-columns:480px 1fr;
}

.p2-left{
  padding:80px 70px;
  display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid rgba(26,20,16,0.08);
}

.p2-eyebrow{
  font-size:9px;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--clay);margin-bottom:28px;
}

.p2-title{
  font-size:clamp(36px,5vw,64px);
  font-weight:300;color:var(--ink);
  letter-spacing:-0.02em;line-height:1.05;
  margin-bottom:24px;
}

.p2-body{
  font-size:15px;line-height:1.85;font-weight:300;font-style:italic;
  color:rgba(26,20,16,0.5);margin-bottom:48px;
}

.process-list{
  display:flex;flex-direction:column;gap:20px;
}

.proc-item{
  display:flex;align-items:flex-start;gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(26,20,16,0.06);
}
.proc-num{
  font-family:'Noto Serif JP',serif;
  font-size:9px;color:var(--clay);
  width:20px;flex-shrink:0;
  padding-top:2px;font-weight:300;
}
.proc-text{
  font-size:13px;line-height:1.7;
  color:rgba(26,20,16,0.5);letter-spacing:0.03em;
}

.p2-right{
  background:var(--ash);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px;
  position:relative;overflow:hidden;
  gap:48px;
}

.form-lg{
  width:160px;height:220px;
  background:linear-gradient(160deg,rgba(196,168,130,0.4),rgba(26,20,16,0.06));
  border-radius:50% 50% 40% 40%;
  border:1px solid rgba(196,168,130,0.3);
  box-shadow:12px 24px 40px rgba(26,20,16,0.08);
}
.form-sm{
  width:100px;height:60px;
  background:linear-gradient(160deg,rgba(196,168,130,0.3),rgba(26,20,16,0.04));
  border-radius:50%;
  border:1px solid rgba(196,168,130,0.2);
}

/* PAGE 3 — ABOUT */
#p3{
  background:var(--ink);
  color:var(--ash);
  display:flex;align-items:center;justify-content:center;
  padding:80px;
  position:relative;overflow:hidden;
}

.p3-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 30% 50%,rgba(196,168,130,0.04),transparent);
}

.p3-content{max-width:640px;position:relative;}

.p3-jp{
  font-family:'Noto Serif JP',serif;
  font-size:11px;letter-spacing:0.3em;font-weight:200;
  color:rgba(196,168,130,0.5);margin-bottom:32px;
}

.p3-title{
  font-size:clamp(36px,6vw,72px);
  font-weight:300;color:var(--ash);
  line-height:1.05;letter-spacing:-0.02em;
  margin-bottom:32px;
}
.p3-title em{font-style:italic;color:var(--clay);}

.p3-quote{
  font-size:17px;line-height:1.8;font-style:italic;font-weight:300;
  color:rgba(232,226,216,0.55);
  border-left:2px solid rgba(196,168,130,0.3);
  padding-left:24px;margin-bottom:40px;
}

.p3-meta{
  display:flex;gap:48px;
  padding-top:32px;
  border-top:1px solid rgba(232,226,216,0.08);
}
.p3-meta-item{display:flex;flex-direction:column;gap:6px;}
.p3-meta-num{
  font-size:32px;font-weight:300;color:var(--clay);
}
.p3-meta-label{
  font-size:9px;letter-spacing:0.25em;text-transform:uppercase;
  color:rgba(232,226,216,0.25);
}

/* Nav */
.dot-nav{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%);
  z-index:900;display:flex;gap:10px;align-items:center;
}
.dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(26,20,16,0.2);border:none;cursor:pointer;
  transition:transform .35s,background .25s;
}
.dot.on-dark{background:rgba(232,226,216,0.2);}
.dot.active{transform:scale(1.8);background:var(--clay);}
.dot.on-dark.active{background:var(--clay);}

@media(max-width:768px){
  #p0,#p2{grid-template-columns:1fr;}
  .p0-right,.p2-right{display:none;}
  .p0-left,.p2-left,.p3-content{padding:48px 28px;}
  #p1{padding:48px 28px;}
  .p1-grid{grid-template-columns:1fr 1fr;}
  .p3-meta{gap:24px;}
}
```

**JS:**
```js
const canvas=document.getElementById('inkCanvas');
const ctx=canvas.getContext('2d');
const pages=document.querySelectorAll('.page');
const dots=document.querySelectorAll('.dot');
const darkPages=[1,3];
let cur=0,busy=false;

function resize(){
  canvas.width=window.innerWidth;
  canvas.height=window.innerHeight;
}
resize();
window.addEventListener('resize',resize);

function inkTransition(x,y,color,midCallback,done){
  const W=canvas.width,H=canvas.height;
  const maxR=Math.sqrt(W*W+H*H)*0.6;
  let r=0,phase=0;
  const speed=28;
  const roughnessSeeds=Array.from({length:16},(_,i)=>({
    angle:i/16*Math.PI*2,
    amp:Math.random()*0.15+0.05,
    freq:Math.random()*3+2,
    phase:Math.random()*Math.PI*2
  }));

  function draw(){
    ctx.clearRect(0,0,W,H);
    if(phase===0&&r>maxR*0.45&&!midCallback._called){
      midCallback();midCallback._called=true;
    }

    if(phase===1&&r<=0){
      ctx.clearRect(0,0,W,H);done&&done();return;
    }

    ctx.beginPath();
    const steps=120;
    for(let i=0;i<=steps;i++){
      const a=i/steps*Math.PI*2;
      let rad=r;
      roughnessSeeds.forEach(s=>{
        rad+=r*s.amp*Math.sin(a*s.freq+s.phase+(phase===0?r*0.01:-r*0.01));
      });
      rad=Math.max(0,rad);
      const px=x+Math.cos(a)*rad;
      const py=y+Math.sin(a)*rad;
      i===0?ctx.moveTo(px,py):ctx.lineTo(px,py);
    }
    ctx.closePath();

    const g=ctx.createRadialGradient(x,y,0,x,y,r*1.1);
    g.addColorStop(0,color);
    g.addColorStop(0.7,color);
    g.addColorStop(1,'transparent');
    ctx.fillStyle=g;
    ctx.fill();

    ctx.beginPath();
    for(let i=0;i<=steps;i++){
      const a=i/steps*Math.PI*2;
      let rad=r;
      roughnessSeeds.forEach(s=>{rad+=r*s.amp*Math.sin(a*s.freq+s.phase+(phase===0?r*0.01:-r*0.01));});
      const edgeR=rad*0.92;
      const px=x+Math.cos(a)*edgeR;
      const py=y+Math.sin(a)*edgeR;
      i===0?ctx.moveTo(px,py):ctx.lineTo(px,py);
    }
    ctx.closePath();
    ctx.fillStyle='rgba(0,0,0,0.08)';
    ctx.fill();

    if(phase===0){
      r+=speed;
      if(r>=maxR){phase=1;}
    }else{
      r-=speed*1.4;
    }
    requestAnimationFrame(draw);
  }
  draw();
}

const inkColors=['#1a1410','#e8e2d8','#1a1410','#1a1410'];

function goTo(n,ex,ey){
  if(busy||n===cur)return;
  busy=true;
  const prev=cur;cur=n;

  const x=ex||window.innerWidth/2;
  const y=ey||window.innerHeight/2;
  const color=inkColors[cur];

  const mid=()=>{
    pages[prev].classList.remove('active');
    pages[cur].classList.add('active');
    dots.forEach((d,i)=>{
      d.classList.toggle('active',i===cur);
      d.classList.toggle('on-dark',darkPages.includes(cur));
    });
  };
  mid._called=false;
  inkTransition(x,y,color,mid,()=>{busy=false;});
}

dots.forEach(d=>d.addEventListener('click',e=>{
  const r=e.currentTarget.getBoundingClientRect();
  goTo(+d.dataset.i,r.left+r.width/2,r.top+r.height/2);
}));

let wt=0;
window.addEventListener('wheel',e=>{
  const now=Date.now();if(now-wt<1000)return;wt=now;
  goTo(Math.max(0,Math.min(3,cur+(e.deltaY>0?1:-1))),window.innerWidth/2,window.innerHeight/2);
},{passive:true});

document.addEventListener('keydown',e=>{
  const c=window.innerWidth/2,m=window.innerHeight/2;
  if(e.key==='ArrowRight')goTo(Math.min(3,cur+1),c,m);
  if(e.key==='ArrowLeft')goTo(Math.max(0,cur-1),c,m);
});
```

### 08. Triangle Shatter

**Type:** CSS + JS
**Description:** Delaunay-like triangular fragments fill the viewport then explode outward with random velocities and rotations, revealing the next page. Applied to an aerospace deep-tech site.

**HTML:**
```html
<div id="shatterLayer"></div>

<div class="pages">

  <div class="page active" id="p0">
    <canvas id="starCanvas" class="stars"></canvas>
    <div class="orbit-graphic">
      <div class="orbit-ring or-1"></div>
      <div class="orbit-ring or-2"></div>
      <div class="orbit-ring or-3"></div>
      <div class="orbit-ring or-4"></div>
      <div class="orbit-dot od-1"></div>
      <div class="orbit-dot od-2"></div>
      <div class="orbit-dot od-3"></div>
      <div class="planet"></div>
    </div>
    <div class="p0-content">
      <div class="p0-top">
        <div class="logo">APEX<span>.</span>SYS</div>
        <div class="mission-count">MISSION 047 · ACTIVE</div>
      </div>
      <div class="p0-hero">
        <div class="mission-badge">
          <div class="mission-dot"></div>
          <div class="mission-text">Launch window open · T-minus 48:00:00</div>
        </div>
        <h1 class="p0-title">We build<br>for the <span class="blue">void</span></h1>
        <p class="p0-sub">Autonomous systems for environments that humans cannot reach — built to fail safely, adapt quietly, and outlast everything else we send up there.</p>
        <div class="btn-row">
          <button class="btn-primary" data-next="1">Mission Overview</button>
          <button class="btn-ghost" data-next="3">Join the crew</button>
        </div>
      </div>
      <div class="p0-bottom">
        <div class="p0-stats">
          <div class="stat-item"><div class="stat-num">47</div><div class="stat-lbl">Missions</div></div>
          <div class="stat-item"><div class="stat-num">99.1<span style="font-size:14px">%</span></div><div class="stat-lbl">Success rate</div></div>
          <div class="stat-item"><div class="stat-num">4</div><div class="stat-lbl">Orbiting now</div></div>
        </div>
      </div>
    </div>
  </div>

  <div class="page" id="p1">
    <div class="p1-header">
      <h2 class="p1-title">Core<br><span>Systems</span></h2>
      <div class="p1-index">SYS.001 — SYS.006</div>
    </div>
    <div class="tech-grid">
      <div class="tech-card"><div class="tc-icon">⬡</div><div class="tc-label">SYS.001</div><div class="tc-title">Adaptive GNC</div><div class="tc-body">Guidance, navigation & control that rewrites its own mission parameters in-flight based on sensor confidence intervals.</div></div>
      <div class="tech-card"><div class="tc-icon">◈</div><div class="tc-label">SYS.002</div><div class="tc-title">Fault Mesh</div><div class="tc-body">Distributed fault tolerance across 2,048 redundant compute nodes. No single point of failure. Period.</div></div>
      <div class="tech-card"><div class="tc-icon">▲</div><div class="tc-label">SYS.003</div><div class="tc-title">Thermal Skin</div><div class="tc-body">Ceramic-composite outer layers with embedded heat-pipe lattice rated to 1,650°C continuous exposure.</div></div>
      <div class="tech-card"><div class="tc-icon">◇</div><div class="tc-label">SYS.004</div><div class="tc-title">Deep RF</div><div class="tc-body">X-band + Ka-band comms array with 3.2 Gbit/s downlink. Operates from lunar distance without relay.</div></div>
      <div class="tech-card"><div class="tc-icon">⬟</div><div class="tc-label">SYS.005</div><div class="tc-title">Propulsion AI</div><div class="tc-body">Neural burn optimizer trained on 3M simulated flight paths. Reduces delta-v budget by 18% on average.</div></div>
      <div class="tech-card"><div class="tc-icon">⬢</div><div class="tc-label">SYS.006</div><div class="tc-title">Surface Intel</div><div class="tc-body">Multispectral imaging + LIDAR fusion producing real-time 3D terrain maps at 4mm/pixel resolution.</div></div>
    </div>
  </div>

  <div class="page" id="p2">
    <div class="p2-left">
      <div class="p2-eyebrow">// Mission Architecture</div>
      <h2 class="p2-title">Built to<br>outlast<br>certainty</h2>
      <p class="p2-body">Every system assumes its own failure. Every component assumes its redundant twin will fail first. This is how you build hardware for places no one can go to fix it.</p>
      <div class="timeline">
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">First autonomous landing: Mare Tranquillitatis basin</div><div class="tl-year">2021</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">48-hour continuous ops record — no human input</div><div class="tl-year">2022</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">Mission 040: first in-situ resource utilisation test</div><div class="tl-year">2024</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">Mission 047: deep polar orbit insertion, active now</div><div class="tl-year">2025</div></div></div>
      </div>
    </div>
    <div class="p2-right">
      <div class="p2-glow"></div>
      <div class="data-readout">
        <div style="font-size:8px;letter-spacing:0.25em;text-transform:uppercase;color:var(--electric);margin-bottom:20px;font-family:'Space Mono',monospace">// LIVE · Mission 047</div>
        <div class="dr-row"><span class="dr-key">ALTITUDE</span><span class="dr-val">847.3 km</span></div>
        <div class="dr-row"><span class="dr-key">INCLINATION</span><span class="dr-val">89.7°</span></div>
        <div class="dr-row"><span class="dr-key">VELOCITY</span><span class="dr-val">7.62 km/s</span></div>
        <div class="dr-row"><span class="dr-key">BATTERY</span><span class="dr-val">98.2%</span></div>
        <div class="dr-row"><span class="dr-key">TEMPERATURE</span><span class="dr-val">-112°C</span></div>
        <div class="dr-row"><span class="dr-key">SIGNAL DELAY</span><span class="dr-val">1.28s</span></div>
        <div class="dr-row"><span class="dr-key">FAULT COUNT</span><span class="dr-val" style="color:#40ff80">0</span></div>
        <div class="dr-row"><span class="dr-key">UPTIME</span><span class="dr-val">14d 08h 33m</span></div>
      </div>
    </div>
  </div>

  <div class="page" id="p3">
    <div class="p3-top">
      <h2 class="p3-title">Join the<br>mission</h2>
      <div class="p3-open">8 open roles · Remote + Berlin</div>
    </div>
    <div class="job-list">
      <div class="job-row"><div class="job-cell"><div class="job-title">Principal GNC Engineer</div><div class="job-sub">Guidance & Navigation · Orbital</div></div><div class="job-cell"><div class="job-dept">Engineering</div></div><div class="job-cell"><div class="job-loc">Berlin / Remote</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">ML Engineer — Flight Systems</div><div class="job-sub">Neural burn optimization</div></div><div class="job-cell"><div class="job-dept">AI / ML</div></div><div class="job-cell"><div class="job-loc">Remote</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Thermal Systems Lead</div><div class="job-sub">Materials & thermal design</div></div><div class="job-cell"><div class="job-dept">Hardware</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Systems Integration Engineer</div><div class="job-sub">Avionics & software</div></div><div class="job-cell"><div class="job-dept">Systems</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Mission Control Operator</div><div class="job-sub">24/7 ops rotation</div></div><div class="job-cell"><div class="job-dept">Operations</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
    </div>
  </div>

</div>

<div class="sys-nav">
  <button class="sys-btn active" data-i="0">Launch</button>
  <button class="sys-btn" data-i="1">Systems</button>
  <button class="sys-btn" data-i="2">Mission</button>
  <button class="sys-btn" data-i="3">Careers</button>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --space:#03040a;
  --deep:#070b18;
  --steel:#8090a8;
  --electric:#2060ff;
  --glow:#4080ff;
  --white:#e8eef8;
  --dim:rgba(232,238,248,0.4);
}
html,body{height:100%;overflow:hidden;background:var(--space);font-family:'Space Grotesk',sans-serif;color:var(--white);}

/* Pages */
.pages{position:fixed;inset:0;}
.page{position:absolute;inset:0;pointer-events:none;visibility:hidden;}
.page.active{pointer-events:auto;visibility:visible;}

/* Shatter layer */
#shatterLayer{
  position:fixed;inset:0;z-index:700;pointer-events:none;overflow:hidden;
}

/* PAGE 0 — LAUNCH */
#p0{
  background:var(--space);
  position:relative;overflow:hidden;
}

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

.p0-content{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:60px 80px;
}

.p0-top{
  display:flex;align-items:center;justify-content:space-between;
}

.logo{
  font-family:'Space Mono',monospace;
  font-size:13px;letter-spacing:0.08em;
  color:var(--white);font-weight:700;
}
.logo span{color:var(--electric);}

.mission-count{
  font-family:'Space Mono',monospace;
  font-size:9px;letter-spacing:0.2em;color:var(--steel);
}

.p0-hero{
  display:flex;flex-direction:column;
  max-width:820px;
}

.mission-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(32,96,255,0.3);
  padding:6px 16px;
  margin-bottom:32px;
  width:fit-content;
}
.mission-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--electric);
  box-shadow:0 0 8px var(--electric);
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.8);}}
.mission-text{
  font-family:'Space Mono',monospace;
  font-size:8px;letter-spacing:0.25em;color:rgba(32,96,255,0.8);
}

.p0-title{
  font-size:clamp(52px,8.5vw,120px);
  font-weight:700;line-height:0.92;
  letter-spacing:-0.04em;
  color:var(--white);
  margin-bottom:32px;
}
.p0-title .blue{color:var(--electric);}

.p0-sub{
  font-size:16px;line-height:1.65;
  color:var(--dim);font-weight:300;
  max-width:540px;margin-bottom:48px;
  font-family:'Space Mono',monospace;
  letter-spacing:-0.01em;
}

.btn-row{display:flex;gap:16px;}

.btn-primary{
  padding:16px 40px;
  background:var(--electric);color:var(--white);
  border:none;font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  cursor:pointer;
  transition:box-shadow .2s,transform .15s;
  box-shadow:0 0 20px rgba(32,96,255,0.3);
}
.btn-primary:hover{box-shadow:0 0 40px rgba(32,96,255,0.6);transform:translateY(-2px);}

.btn-ghost{
  padding:16px 32px;
  background:transparent;color:var(--steel);
  border:1px solid rgba(128,144,168,0.25);
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}
.btn-ghost:hover{border-color:var(--steel);color:var(--white);}

.p0-bottom{
  display:flex;align-items:flex-end;justify-content:space-between;
}

.p0-stats{display:flex;gap:48px;}
.stat-item{display:flex;flex-direction:column;gap:6px;}
.stat-num{
  font-family:'Space Mono',monospace;
  font-size:28px;font-weight:700;
  color:var(--white);
  text-shadow:0 0 20px rgba(32,96,255,0.3);
}
.stat-lbl{
  font-family:'Space Mono',monospace;
  font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--steel);
}

/* Orbit graphic */
.orbit-graphic{
  position:absolute;right:80px;top:50%;transform:translateY(-50%);
  width:360px;height:360px;
  pointer-events:none;
}
.orbit-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(32,96,255,0.12);
}
.or-1{inset:0;}
.or-2{inset:40px;border-color:rgba(32,96,255,0.08);}
.or-3{inset:80px;border-color:rgba(32,96,255,0.06);}
.or-4{inset:120px;border-color:rgba(32,96,255,0.08);}

.orbit-dot{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--glow);
  box-shadow:0 0 12px var(--glow);
}
.od-1{top:20px;left:50%;transform:translateX(-50%);}
.od-2{bottom:60px;right:40px;}
.od-3{top:50%;left:10px;transform:translateY(-50%);}

.planet{
  position:absolute;inset:130px;border-radius:50%;
  background:radial-gradient(ellipse at 35% 35%,rgba(32,96,255,0.3),rgba(3,4,10,0.8));
  border:1px solid rgba(32,96,255,0.2);
  box-shadow:0 0 40px rgba(32,96,255,0.1),inset 0 0 40px rgba(32,96,255,0.05);
}

/* PAGE 1 — TECHNOLOGY */
#p1{
  background:var(--deep);
  padding:60px 80px;
  display:flex;flex-direction:column;
  overflow-y:auto;
}

.p1-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:52px;
}

.p1-title{
  font-size:clamp(36px,5.5vw,72px);
  font-weight:700;letter-spacing:-0.04em;line-height:0.95;
}
.p1-title span{color:var(--electric);}

.p1-index{
  font-family:'Space Mono',monospace;
  font-size:9px;letter-spacing:0.2em;color:var(--steel);
  padding-top:8px;
}

.tech-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  flex:1;
}

.tech-card{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(128,144,168,0.08);
  padding:32px;
  transition:background .25s,border-color .25s;
  cursor:pointer;
}
.tech-card:hover{background:rgba(32,96,255,0.04);border-color:rgba(32,96,255,0.2);}

.tc-icon{
  width:40px;height:40px;
  border:1px solid rgba(32,96,255,0.3);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  color:var(--electric);font-size:18px;
  position:relative;
}
.tc-icon::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(32,96,255,0.1),transparent);
}

.tc-label{
  font-family:'Space Mono',monospace;
  font-size:8px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--electric);margin-bottom:12px;
}
.tc-title{
  font-size:18px;font-weight:700;letter-spacing:-0.02em;
  margin-bottom:12px;
}
.tc-body{
  font-size:12px;line-height:1.7;color:var(--dim);
  font-family:'Space Mono',monospace;
  letter-spacing:-0.01em;
}

/* PAGE 2 — MISSION */
#p2{
  background:var(--space);
  display:grid;grid-template-columns:1fr 1fr;
  position:relative;overflow:hidden;
}

.p2-left{
  padding:80px;
  display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid rgba(128,144,168,0.06);
}

.p2-eyebrow{
  font-family:'Space Mono',monospace;
  font-size:8px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--electric);margin-bottom:28px;
}

.p2-title{
  font-size:clamp(40px,6vw,80px);
  font-weight:700;letter-spacing:-0.04em;line-height:0.95;
  margin-bottom:32px;
}

.p2-body{
  font-family:'Space Mono',monospace;
  font-size:12px;line-height:1.8;color:var(--dim);
  margin-bottom:40px;max-width:440px;
  letter-spacing:-0.01em;
}

.timeline{
  display:flex;flex-direction:column;gap:0;
}
.tl-item{
  display:flex;gap:20px;
  padding:20px 0;
  border-bottom:1px solid rgba(128,144,168,0.06);
  position:relative;
}
.tl-item::before{
  content:'';
  position:absolute;left:8px;top:0;bottom:-1px;width:1px;
  background:linear-gradient(180deg,var(--electric),rgba(32,96,255,0));
}
.tl-dot{
  width:17px;height:17px;flex-shrink:0;
  border:1px solid var(--electric);border-radius:50%;
  background:var(--space);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  margin-top:2px;
}
.tl-dot::after{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--electric);
  box-shadow:0 0 6px var(--electric);
}
.tl-text{font-size:12px;color:var(--dim);font-family:'Space Mono',monospace;line-height:1.6;}
.tl-year{font-size:9px;color:var(--electric);letter-spacing:0.1em;margin-top:4px;font-weight:700;}

.p2-right{
  background:var(--deep);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:80px;
  position:relative;
}

.data-readout{
  font-family:'Space Mono',monospace;
  width:100%;max-width:340px;
}
.dr-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(128,144,168,0.08);
  font-size:11px;
}
.dr-key{color:var(--steel);letter-spacing:0.06em;}
.dr-val{color:var(--electric);font-weight:700;}

.p2-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 40% 40% at 50% 50%,rgba(32,96,255,0.04),transparent);
  pointer-events:none;
}

/* PAGE 3 — CAREERS */
#p3{
  background:var(--deep);
  padding:80px;
  overflow-y:auto;
}

.p3-top{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:48px;
}

.p3-title{
  font-size:clamp(40px,6vw,80px);
  font-weight:700;letter-spacing:-0.04em;line-height:0.95;
}

.p3-open{
  font-family:'Space Mono',monospace;
  font-size:9px;letter-spacing:0.2em;color:var(--steel);
}

.job-list{display:flex;flex-direction:column;gap:2px;}

.job-row{
  display:grid;
  grid-template-columns:1fr 160px 120px 80px;
  border:1px solid rgba(128,144,168,0.08);
  align-items:center;
  transition:background .2s,border-color .2s;
  cursor:pointer;
}
.job-row:hover{background:rgba(32,96,255,0.04);border-color:rgba(32,96,255,0.2);}

.job-cell{
  padding:24px;
  border-right:1px solid rgba(128,144,168,0.06);
}
.job-cell:last-child{border-right:none;}

.job-title{
  font-size:15px;font-weight:700;letter-spacing:-0.02em;
  margin-bottom:4px;
}
.job-sub{
  font-family:'Space Mono',monospace;
  font-size:9px;color:var(--steel);letter-spacing:0.08em;
}
.job-dept{
  font-family:'Space Mono',monospace;
  font-size:10px;color:var(--electric);letter-spacing:0.1em;
}
.job-loc{
  font-family:'Space Mono',monospace;
  font-size:10px;color:var(--steel);letter-spacing:0.06em;
}
.apply-btn{
  padding:8px 20px;
  background:var(--electric);color:var(--white);border:none;
  font-family:'Space Grotesk',sans-serif;
  font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  cursor:pointer;transition:opacity .2s;
}
.apply-btn:hover{opacity:0.8;}

/* Nav */
.sys-nav{
  position:fixed;top:40px;right:60px;z-index:900;
  display:flex;flex-direction:column;gap:6px;
  align-items:flex-end;
}
.sys-btn{
  font-family:'Space Mono',monospace;
  font-size:8px;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(128,144,168,0.4);
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:color .2s;
  padding:4px 0;
}
.sys-btn::after{
  content:'';width:16px;height:1px;
  background:rgba(128,144,168,0.3);
  transition:width .3s,background .2s;
}
.sys-btn:hover{color:var(--white);}
.sys-btn:hover::after{width:32px;background:var(--white);}
.sys-btn.active{color:var(--electric);}
.sys-btn.active::after{width:32px;background:var(--electric);}

@media(max-width:768px){
  #p0 .orbit-graphic{display:none;}
  #p2{grid-template-columns:1fr;}
  .p2-right{display:none;}
  #p0 .p0-content,#p1,#p2 .p2-left,#p3{padding:40px 24px;}
  .tech-grid{grid-template-columns:1fr;}
  .job-row{grid-template-columns:1fr 100px;}
  .job-dept,.job-loc{display:none;}
  .sys-nav{top:auto;right:20px;bottom:20px;}
  .p0-stats{gap:24px;}
}
```

**JS:**
```js
// Starfield
const sc=document.getElementById('starCanvas');
sc.width=window.innerWidth;sc.height=window.innerHeight;
const sx=sc.getContext('2d');
for(let i=0;i<200;i++){
  sx.beginPath();
  sx.arc(Math.random()*sc.width,Math.random()*sc.height,Math.random()*1.2,0,Math.PI*2);
  sx.fillStyle=`rgba(232,238,248,${Math.random()*0.5+0.1})`;
  sx.fill();
}

// Shatter transition
const shatterLayer=document.getElementById('shatterLayer');
const pages=document.querySelectorAll('.page');
const navBtns=document.querySelectorAll('.sys-btn');
let cur=0,busy=false;

function genTriangles(W,H,N){
  const pts=[];
  const cols=Math.ceil(Math.sqrt(N*W/H));
  const rows=Math.ceil(N/cols);
  for(let r=0;r<=rows;r++)
    for(let c=0;c<=cols;c++){
      const x=(c/cols)*W+(Math.random()-0.5)*W/cols*0.8;
      const y=(r/rows)*H+(Math.random()-0.5)*H/rows*0.8;
      pts.push([Math.max(0,Math.min(W,x)),Math.max(0,Math.min(H,y))]);
    }
  const tris=[];
  const cx=cols+1;
  for(let r=0;r<rows;r++)
    for(let c=0;c<cols;c++){
      const a=r*cx+c,b=a+1,d=a+cx,e=d+1;
      if(pts[a]&&pts[b]&&pts[d])tris.push([pts[a],pts[b],pts[d]]);
      if(pts[b]&&pts[e]&&pts[d])tris.push([pts[b],pts[e],pts[d]]);
    }
  return tris;
}

function goTo(n){
  if(busy||n===cur)return;
  busy=true;
  const prev=cur;cur=n;
  navBtns.forEach((b,i)=>b.classList.toggle('active',i===cur));

  const W=window.innerWidth,H=window.innerHeight;
  const tris=genTriangles(W,H,60);
  shatterLayer.innerHTML='';

  tris.forEach(tri=>{
    const pts=tri.map(([x,y])=>`${x}px ${y}px`).join(',');
    const frag=document.createElement('div');
    frag.style.cssText=`
      position:absolute;inset:0;
      clip-path:polygon(${pts});
      background:var(--space);
      opacity:0;
      transition:none;
    `;
    shatterLayer.appendChild(frag);
  });

  const allFrags=Array.from(shatterLayer.children);
  const sorted=allFrags.sort(()=>Math.random()-0.5);

  let covered=false;
  sorted.forEach((frag,i)=>{
    setTimeout(()=>{
      frag.style.transition='opacity 80ms';
      frag.style.opacity='1';
      if(i===Math.floor(sorted.length*0.5)&&!covered){
        covered=true;
        pages[prev].classList.remove('active');
        pages[cur].classList.add('active');
        sorted.forEach((f2,j)=>{
          const angle=Math.random()*Math.PI*2;
          const dist=Math.random()*300+100;
          setTimeout(()=>{
            f2.style.transition=`transform 500ms cubic-bezier(0.4,0,1,0.8),opacity 400ms 100ms`;
            f2.style.transform=`translate(${Math.cos(angle)*dist}px,${Math.sin(angle)*dist}px) rotate(${(Math.random()-0.5)*40}deg)`;
            f2.style.opacity='0';
          },j*8);
        });
      }
    },i*12);
  });

  setTimeout(()=>{
    shatterLayer.innerHTML='';
    busy=false;
  },sorted.length*12+650);
}

navBtns.forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.i)));
document.querySelectorAll('[data-next]').forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.next)));

let wt=0;
window.addEventListener('wheel',e=>{
  const now=Date.now();if(now-wt<1200)return;wt=now;
  goTo(Math.max(0,Math.min(3,cur+(e.deltaY>0?1:-1))));
},{passive:true});
document.addEventListener('keydown',e=>{
  if(e.key==='ArrowRight')goTo(Math.min(3,cur+1));
  if(e.key==='ArrowLeft')goTo(Math.max(0,cur-1));
});
```

### 09. Vertical Split Curtain

**Type:** CSS + JS
**Description:** Two full-height panels slide closed like theatre curtains, swap the page, then split apart with a different easing — a gold-seamed theatrical reveal. A Parisian haute couture house.

**HTML:**
```html
<!-- Curtain panels -->
<div class="curtain-left" id="cLeft"></div>
<div class="curtain-right" id="cRight"></div>

<div class="pages">

  <div class="page active" id="p0">
    <div class="p0-layout">
      <div class="p0-left">
        <div class="p0-mark">Maison Lécluse · Paris</div>
        <div class="p0-main">
          <div class="p0-season">Automne–Hiver 2025</div>
          <h1 class="p0-title">Entre<br>Ombre<br>&amp; Lumière</h1>
          <div class="p0-title-fr">Between shadow and light</div>
          <p class="p0-body">A collection born from the silences between words. Forty-two looks. Each one a conversation the body has alone.</p>
          <button class="p0-cta" data-next="1">Discover the collection <span class="p0-cta-arrow"></span></button>
        </div>
      </div>
      <div class="p0-right">
        <div class="silhouette-area">
          <div class="figure">
            <div class="fig-head"></div>
            <div class="fig-arm fig-arm-l"></div>
            <div class="fig-arm fig-arm-r"></div>
            <div class="fig-body"></div>
          </div>
        </div>
        <div class="p0-right-bottom">
          <div class="p0-detail-row"><div class="det-key">Maison</div><div class="det-val">Since 1967</div></div>
          <div class="p0-detail-row"><div class="det-key">Ateliers</div><div class="det-val">Paris · Florence</div></div>
          <div class="p0-detail-row"><div class="det-key">Collection</div><div class="det-val">AH 2025 · 42 looks</div></div>
          <div class="p0-detail-row"><div class="det-key">Runway</div><div class="det-val">Palais Royal, 4 Oct</div></div>
        </div>
      </div>
    </div>
  </div>

  <div class="page" id="p1">
    <div class="p1-top">
      <h2 class="p1-title">The<br>Collection</h2>
      <div class="p1-count">42 Looks · AH 2025</div>
    </div>
    <div class="look-grid">
      <div class="look"><div class="look-img"><div class="garment g1"></div></div><div class="look-num">Look 01</div><div class="look-name">L'aube noire</div></div>
      <div class="look"><div class="look-img"><div class="garment g2"></div></div><div class="look-num">Look 07</div><div class="look-name">Le voile froid</div></div>
      <div class="look"><div class="look-img"><div class="garment g3"></div></div><div class="look-num">Look 14</div><div class="look-name">La colonne</div></div>
      <div class="look"><div class="look-img"><div class="garment g4"></div></div><div class="look-num">Look 21</div><div class="look-name">Le bruissement</div></div>
      <div class="look"><div class="look-img"><div class="garment g5"></div></div><div class="look-num">Look 38</div><div class="look-name">La chute</div></div>
    </div>
  </div>

  <div class="page" id="p2">
    <div class="p2-left">
      <div class="p2-eyebrow">L'Atelier Lécluse</div>
      <h2 class="p2-title">Made by<br>hand, in<br>silence</h2>
      <p class="p2-body">Each garment passes through twenty-four pairs of hands before it leaves the atelier. We consider this not a process, but a conversation with the material.</p>
      <div class="craft-list">
        <div class="craft-row"><div class="craft-n">I</div><div class="craft-t">Pattern cutting by master tailleur</div></div>
        <div class="craft-row"><div class="craft-n">II</div><div class="craft-t">Hand-draping on the mannequin</div></div>
        <div class="craft-row"><div class="craft-n">III</div><div class="craft-t">Three fittings per garment minimum</div></div>
        <div class="craft-row"><div class="craft-n">IV</div><div class="craft-t">Handstitched finishing throughout</div></div>
        <div class="craft-row"><div class="craft-n">V</div><div class="craft-t">Final inspection by the directrice</div></div>
      </div>
    </div>
    <div class="p2-right">
      <div class="maison-since">Maison Lécluse · Since 1967</div>
      <div class="p2-numbers">
        <div class="num-item"><div class="num-big">58</div><div class="num-label">Years of haute<br>couture</div></div>
        <div class="num-item"><div class="num-big">24</div><div class="num-label">Artisan hands per<br>garment</div></div>
        <div class="num-item"><div class="num-big">200+</div><div class="num-label">Hours in a single<br>couture piece</div></div>
      </div>
    </div>
  </div>

  <div class="page" id="p3">
    <div class="p3-bg-text">ML</div>
    <div class="p3-content">
      <span class="p3-mark">Maison Lécluse · Paris</span>
      <h2 class="p3-title">Private<br>Fitting</h2>
      <p class="p3-sub">By appointment only. Ateliers are open to clients for consultation from Tuesday through Saturday.</p>
      <div class="p3-contact-grid">
        <div class="p3-contact-row"><div class="p3-contact-key">Address</div><div class="p3-contact-val">24 Rue du Faubourg Saint-Honoré</div></div>
        <div class="p3-contact-row"><div class="p3-contact-key">Telephone</div><div class="p3-contact-val">+33 1 42 68 00 00</div></div>
        <div class="p3-contact-row"><div class="p3-contact-key">Fitting hours</div><div class="p3-contact-val">Mar–Sam · 10h–18h</div></div>
        <div class="p3-contact-row"><div class="p3-contact-key">Correspondence</div><div class="p3-contact-val">atelier@lecluse.paris</div></div>
      </div>
    </div>
  </div>

</div>

<!-- Nav -->
<div class="c-nav">
  <button class="c-btn" id="cPrev">‹</button>
  <div class="c-dots">
    <button class="c-dot active" data-i="0"></button>
    <button class="c-dot" data-i="1"></button>
    <button class="c-dot" data-i="2"></button>
    <button class="c-dot" data-i="3"></button>
  </div>
  <div class="c-label" id="cLabel">Maison</div>
  <button class="c-btn" id="cNext">›</button>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --noir:#080808;
  --white:#f8f4f0;
  --warm:#e8e0d4;
  --dim:rgba(248,244,240,0.4);
  --accent:#c8a060;
  --mid:rgba(248,244,240,0.1);
  --dur:900ms;
  --ease:cubic-bezier(0.76,0,0.24,1);
}
html,body{height:100%;overflow:hidden;background:var(--noir);font-family:'Cormorant Garamond',serif;}

/* Pages */
.pages{position:fixed;inset:0;}
.page{position:absolute;inset:0;pointer-events:none;visibility:hidden;}
.page.active{visibility:visible;pointer-events:auto;}

/* Curtain panels */
.curtain-left,.curtain-right{
  position:fixed;top:0;bottom:0;z-index:700;
  background:var(--noir);
  will-change:transform;
}
.curtain-left{
  left:0;width:50%;
  transform:translateX(-100%);
  transform-origin:left;
}
.curtain-right{
  right:0;width:50%;
  transform:translateX(100%);
  transform-origin:right;
}
/* Centre seam line */
.curtain-left::after{
  content:'';
  position:absolute;right:0;top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  opacity:0;
}

/* States */
.curtain-left.close{transform:translateX(0);}
.curtain-right.close{transform:translateX(0);}
.curtain-left.close::after{opacity:0.4;}

/* PAGE 0 — MAISON */
#p0{background:var(--noir);color:var(--white);}

.p0-layout{
  height:100%;
  display:grid;grid-template-columns:1fr 1fr;
}

.p0-left{
  padding:60px 80px;
  display:flex;flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--mid);
}

.p0-mark{
  font-family:'Italiana',serif;
  font-size:11px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--dim);
}

.p0-main{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:20px;
}

.p0-season{
  font-size:8px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--accent);margin-bottom:24px;
  display:flex;align-items:center;gap:12px;
}
.p0-season::before{
  content:'';width:20px;height:1px;background:var(--accent);
}

.p0-title{
  font-family:'Italiana',serif;
  font-size:clamp(52px,8vw,112px);
  font-weight:400;line-height:0.9;
  letter-spacing:-0.02em;
  color:var(--white);margin-bottom:24px;
}

.p0-title-fr{
  font-size:clamp(24px,3.5vw,48px);
  font-style:italic;font-weight:300;
  color:rgba(248,244,240,0.35);margin-bottom:40px;
}

.p0-body{
  font-size:13px;line-height:1.9;font-weight:300;
  color:var(--dim);max-width:380px;font-style:italic;
}

.p0-cta{
  margin-top:40px;
  display:inline-flex;align-items:center;gap:16px;
  font-size:9px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--white);cursor:pointer;background:none;border:none;
  font-family:'Didact Gothic',sans-serif;
  transition:color .2s;
}
.p0-cta:hover{color:var(--accent);}
.p0-cta-arrow{
  width:40px;height:1px;background:currentColor;
  transition:width .3s;position:relative;
}
.p0-cta-arrow::after{
  content:'';position:absolute;right:-1px;top:-3px;
  width:7px;height:7px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform:rotate(45deg);
}
.p0-cta:hover .p0-cta-arrow{width:64px;}

.p0-right{
  display:grid;grid-template-rows:1fr 1fr;
  padding:60px;
  gap:0;
}

/* Abstract fashion illustration using CSS shapes */
.silhouette-area{
  display:flex;align-items:center;justify-content:center;
  position:relative;
}

.figure{
  position:relative;
  width:80px;height:200px;
}
.fig-body{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:48px;height:140px;
  background:linear-gradient(180deg,rgba(200,160,96,0.2),rgba(200,160,96,0.06));
  border:1px solid rgba(200,160,96,0.2);
  border-radius:2px 2px 0 0;
}
.fig-head{
  position:absolute;bottom:136px;left:50%;transform:translateX(-50%);
  width:20px;height:24px;
  border-radius:50%;
  background:rgba(200,160,96,0.15);
  border:1px solid rgba(200,160,96,0.2);
}
.fig-arm{
  position:absolute;
  height:1px;background:rgba(200,160,96,0.25);
  top:72px;
}
.fig-arm-l{width:32px;right:48px;}
.fig-arm-r{width:32px;left:48px;}

.p0-right-bottom{
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:16px;
}

.p0-detail-row{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--mid);
  padding:12px 0;
}
.det-key{
  font-size:8px;letter-spacing:0.25em;text-transform:uppercase;
  color:rgba(248,244,240,0.25);
  font-family:'Didact Gothic',sans-serif;
}
.det-val{
  font-size:12px;font-style:italic;
  color:rgba(248,244,240,0.6);
}

/* PAGE 1 — COLLECTION */
#p1{
  background:#0c0c0c;
  color:var(--white);
  padding:60px 80px;
  display:flex;flex-direction:column;
}

.p1-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:52px;
  padding-bottom:24px;
  border-bottom:1px solid var(--mid);
}

.p1-title{
  font-family:'Italiana',serif;
  font-size:clamp(44px,7vw,100px);
  font-weight:400;line-height:0.9;
  letter-spacing:-0.02em;
}

.p1-count{
  font-size:9px;letter-spacing:0.25em;
  color:var(--dim);font-family:'Didact Gothic',sans-serif;
  text-transform:uppercase;
}

.look-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  flex:1;
}

.look{
  display:flex;flex-direction:column;gap:12px;
  cursor:pointer;
}

.look-img{
  flex:1;
  border:1px solid rgba(248,244,240,0.06);
  position:relative;overflow:hidden;
  min-height:200px;
  background:linear-gradient(180deg,#111,#0a0a0a);
  transition:border-color .3s;
}
.look:hover .look-img{border-color:rgba(200,160,96,0.3);}

/* Abstract garment shape */
.garment{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:60%;
  background:rgba(200,160,96,0.08);
  border-top:1px solid rgba(200,160,96,0.15);
}
.g1{height:70%;border-radius:2px 2px 0 0;}
.g2{height:85%;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);}
.g3{height:60%;border-radius:40% 40% 0 0;}
.g4{height:75%;clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);}
.g5{height:90%;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);}

.look-num{
  font-size:8px;letter-spacing:0.2em;
  color:var(--accent);font-family:'Didact Gothic',sans-serif;
}
.look-name{
  font-family:'Cormorant Garamond',serif;
  font-size:13px;font-style:italic;color:rgba(248,244,240,0.7);
}

/* PAGE 2 — ATELIER */
#p2{
  background:var(--white);
  color:var(--noir);
  display:grid;grid-template-columns:1fr 1fr;
}

.p2-left{
  padding:80px;
  display:flex;flex-direction:column;justify-content:center;
  background:#f0ece6;
}

.p2-eyebrow{
  font-size:8px;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--accent);margin-bottom:28px;
  font-family:'Didact Gothic',sans-serif;
}

.p2-title{
  font-family:'Italiana',serif;
  font-size:clamp(44px,6vw,80px);
  font-weight:400;line-height:1.0;
  color:var(--noir);letter-spacing:-0.02em;
  margin-bottom:28px;
}

.p2-body{
  font-size:15px;line-height:1.85;font-weight:300;font-style:italic;
  color:rgba(8,8,8,0.5);max-width:400px;margin-bottom:48px;
}

.craft-list{
  display:flex;flex-direction:column;gap:0;
}
.craft-row{
  display:flex;gap:20px;
  padding:18px 0;
  border-bottom:1px solid rgba(8,8,8,0.08);
  align-items:baseline;
}
.craft-n{
  font-size:9px;letter-spacing:0.15em;
  color:var(--accent);
  font-family:'Didact Gothic',sans-serif;
  width:24px;flex-shrink:0;
}
.craft-t{
  font-size:14px;font-style:italic;color:rgba(8,8,8,0.6);
}

.p2-right{
  padding:80px;
  background:var(--white);
  display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid rgba(8,8,8,0.06);
}

.maison-since{
  font-size:9px;letter-spacing:0.35em;text-transform:uppercase;
  color:rgba(8,8,8,0.25);margin-bottom:40px;
  font-family:'Didact Gothic',sans-serif;
}

.p2-numbers{
  display:flex;flex-direction:column;gap:28px;
}
.num-item{
  display:flex;align-items:baseline;gap:20px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(8,8,8,0.06);
}
.num-big{
  font-family:'Italiana',serif;
  font-size:56px;color:var(--noir);line-height:1;
}
.num-label{
  font-size:12px;font-style:italic;color:rgba(8,8,8,0.45);
  line-height:1.4;
}

/* PAGE 3 — CONTACT */
#p3{
  background:var(--noir);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:80px;
  position:relative;overflow:hidden;
}

.p3-bg-text{
  position:absolute;
  font-family:'Italiana',serif;
  font-size:30vw;color:rgba(248,244,240,0.025);
  line-height:1;letter-spacing:-0.06em;
  pointer-events:none;
  user-select:none;
}

.p3-content{position:relative;max-width:560px;}

.p3-mark{
  font-family:'Italiana',serif;
  font-size:9px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--dim);margin-bottom:48px;display:block;
}

.p3-title{
  font-family:'Italiana',serif;
  font-size:clamp(44px,8vw,100px);
  font-weight:400;line-height:0.9;
  letter-spacing:-0.02em;
  color:var(--white);margin-bottom:16px;
}

.p3-sub{
  font-size:14px;font-style:italic;
  color:var(--dim);margin-bottom:48px;
  line-height:1.7;
}

.p3-contact-grid{
  display:flex;flex-direction:column;gap:16px;
  border-top:1px solid var(--mid);
  padding-top:36px;
}

.p3-contact-row{
  display:flex;justify-content:space-between;
  align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--mid);
}
.p3-contact-key{
  font-size:8px;letter-spacing:0.25em;text-transform:uppercase;
  color:rgba(248,244,240,0.25);
  font-family:'Didact Gothic',sans-serif;
}
.p3-contact-val{
  font-size:13px;font-style:italic;
  color:rgba(248,244,240,0.65);
}

/* Curtain nav */
.c-nav{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%);
  z-index:800;
  display:flex;align-items:center;gap:24px;
  background:rgba(8,8,8,0.7);
  border:1px solid var(--mid);
  padding:16px 32px;
  backdrop-filter:blur(20px);
}

.c-label{
  font-size:8px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--dim);
  font-family:'Didact Gothic',sans-serif;
  min-width:80px;text-align:center;
}

.c-btn{
  width:36px;height:36px;
  border:1px solid var(--mid);
  background:none;color:var(--dim);
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s;
  font-family:serif;
}
.c-btn:hover{border-color:var(--accent);color:var(--accent);}

.c-dots{display:flex;gap:8px;}
.c-dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(248,244,240,0.2);border:none;cursor:pointer;
  transition:background .25s,transform .3s;
}
.c-dot.active{background:var(--accent);transform:scale(1.8);}

@media(max-width:768px){
  #p0 .p0-layout{grid-template-columns:1fr;}
  .p0-right{display:none;}
  .p0-left{padding:40px 28px;}
  #p1{padding:40px 24px;}
  .look-grid{grid-template-columns:repeat(2,1fr);}
  #p2{grid-template-columns:1fr;}
  .p2-right{display:none;}
  .p2-left{padding:40px 28px;}
  #p3{padding:40px 28px;}
}
```

**JS:**
```js
const cLeft=document.getElementById('cLeft');
const cRight=document.getElementById('cRight');
const pages=document.querySelectorAll('.page');
const cdots=document.querySelectorAll('.c-dot');
const cLabel=document.getElementById('cLabel');
const labels=['Maison','Collection','Atelier','Contact'];
let cur=0,busy=false;

const dur=900;

function curtainTransition(prev,next,done){
  cLeft.style.transition=`transform ${dur*0.4}ms cubic-bezier(0.76,0,0.24,1)`;
  cRight.style.transition=`transform ${dur*0.4}ms cubic-bezier(0.76,0,0.24,1)`;
  cLeft.classList.add('close');
  cRight.classList.add('close');

  setTimeout(()=>{
    pages[prev].classList.remove('active');
    pages[next].classList.add('active');

    cLeft.style.transition=`transform ${dur*0.55}ms cubic-bezier(0.25,1,0.5,1)`;
    cRight.style.transition=`transform ${dur*0.55}ms cubic-bezier(0.25,1,0.5,1)`;
    cLeft.classList.remove('close');
    cRight.classList.remove('close');

    setTimeout(()=>{ done&&done(); },dur*0.6);
  },dur*0.42);
}

function goTo(n){
  if(busy||n===cur)return;
  busy=true;
  const prev=cur;cur=n;
  cdots.forEach((d,i)=>d.classList.toggle('active',i===cur));
  cLabel.textContent=labels[cur];
  curtainTransition(prev,cur,()=>{busy=false;});
}

document.getElementById('cNext').onclick=()=>goTo(Math.min(3,cur+1));
document.getElementById('cPrev').onclick=()=>goTo(Math.max(0,cur-1));
cdots.forEach(d=>d.addEventListener('click',()=>goTo(+d.dataset.i)));
document.querySelectorAll('[data-next]').forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.next)));

let wt=0;
window.addEventListener('wheel',e=>{
  const now=Date.now();if(now-wt<1100)return;wt=now;
  goTo(Math.max(0,Math.min(3,cur+(e.deltaY>0?1:-1))));
},{passive:true});
document.addEventListener('keydown',e=>{
  if(e.key==='ArrowRight')goTo(Math.min(3,cur+1));
  if(e.key==='ArrowLeft')goTo(Math.max(0,cur-1));
});
```

### 10. ASCII Matrix Rain

**Type:** CSS + JS
**Description:** A Canvas rain of katakana and ASCII floods the screen column by column, glowing at the leading edge, then retracts in a second wave. CRT scanlines throughout. A cybersecurity platform.

**HTML:**
```html
<canvas id="matCanvas"></canvas>

<div class="pages">

  <div class="page active" id="p0">
    <div class="term-frame">
      <div class="term-topbar">
        <div class="term-dots">
          <div class="term-dot td-red"></div>
          <div class="term-dot td-yellow"></div>
          <div class="term-dot td-green"></div>
        </div>
        <div class="term-title">NEXUS-OS v4.2.1 · SECURE SHELL · AUTHENTICATED</div>
      </div>
      <div class="term-body">
        <div class="term-hero">
          <div class="term-prompt"><span>root@nexus</span>:~# whoami --extended</div>
          <div class="term-big">NEXUS</div>
          <div class="term-big-dim">Security Intelligence Platform</div>
        </div>
        <div class="term-output">
          <div class="term-line c">// System online. All nodes responsive.</div>
          <div class="term-line g">✓ Threat monitoring active · 2,847 signatures loaded</div>
          <div class="term-line g">✓ Network perimeter intact · 0 active intrusions</div>
          <div class="term-line y">⚠ 3 unpatched CVEs detected · action required</div>
          <div class="term-line c">// Last audit: 2025-09-14 03:12:47 UTC</div>
          <div class="term-line" style="margin-top:8px">
            <span style="color:var(--green)">root@nexus</span><span style="color:var(--dim)">:~# </span><span class="blink"></span>
          </div>
        </div>
        <div class="term-commands">
          <button class="cmd-btn primary" data-next="1">./ops_status</button>
          <button class="cmd-btn" data-next="2">./threat_intel</button>
          <button class="cmd-btn" data-next="3">./team --list</button>
        </div>
      </div>
      <div class="term-side">
        <div class="side-label">// SYSTEM STATUS</div>
        <div class="side-row"><span class="side-k">CPU</span><span class="side-v ok">12%</span></div>
        <div class="side-row"><span class="side-k">MEM</span><span class="side-v ok">68%</span></div>
        <div class="side-row"><span class="side-k">NET I/O</span><span class="side-v ok">2.1 Gb/s</span></div>
        <div class="side-row"><span class="side-k">UPTIME</span><span class="side-v ok">847d</span></div>
        <div class="side-row"><span class="side-k">THREATS</span><span class="side-v warn">3</span></div>
        <div class="side-row"><span class="side-k">INTRUSION</span><span class="side-v ok">0</span></div>
        <div class="side-row"><span class="side-k">NODES</span><span class="side-v ok">48/48</span></div>
        <div class="side-row"><span class="side-k">KERNEL</span><span class="side-v ok">6.8.4</span></div>
      </div>
    </div>
  </div>

  <div class="page" id="p1">
    <div class="p1-header">
      <h2 class="p1-title">OPS_STATUS</h2>
      <div class="p1-uptime">UPTIME 847d 14h 22m · ALL SYSTEMS</div>
    </div>
    <div class="ops-grid">
      <div class="op-card"><div class="op-status"><div class="op-dot dot-ok"></div><div class="op-status-text">Operational</div></div><div class="op-name">Perimeter Watch</div><div class="op-desc">Real-time monitoring of 48 network boundary nodes. Zero intrusion events in past 72 hours.</div><div class="op-meta">Last event: 2025-09-01 · False positive</div></div>
      <div class="op-card"><div class="op-status"><div class="op-dot dot-ok"></div><div class="op-status-text">Operational</div></div><div class="op-name">Endpoint XDR</div><div class="op-desc">Extended detection across 2,400 managed endpoints. Behavioral AI scoring all process trees.</div><div class="op-meta">Last quarantine: 2025-09-10 · Ransomware sim</div></div>
      <div class="op-card"><div class="op-status"><div class="op-dot dot-warn"></div><div class="op-status-text">Degraded</div></div><div class="op-name">Intel Feed</div><div class="op-desc">External threat intelligence ingestion partially degraded — 2 upstream providers offline.</div><div class="op-meta">ETA restore: 2025-09-15 09:00 UTC</div></div>
      <div class="op-card"><div class="op-status"><div class="op-dot dot-ok"></div><div class="op-status-text">Operational</div></div><div class="op-name">SIEM</div><div class="op-desc">Security event correlation processing 4.2M events/sec. Zero queue backlog. All rules current.</div><div class="op-meta">Rules version: 9.4.1 · Updated yesterday</div></div>
    </div>
    <div class="log-feed">
      <div class="log-title">// RECENT LOG ENTRIES</div>
      <div class="log-entry"><span class="log-time">09:14:03</span> <span class="log-ok">INFO</span> <span class="log-msg">Perimeter scan complete. 0 anomalies detected.</span></div>
      <div class="log-entry"><span class="log-time">09:11:47</span> <span class="log-ok">INFO</span> <span class="log-msg">Intel feed sync: 2847 signatures updated.</span></div>
      <div class="log-entry"><span class="log-time">09:08:22</span> <span class="log-err">WARN</span> <span class="log-msg">Feed provider sigma.intel unreachable. Retrying.</span></div>
      <div class="log-entry"><span class="log-time">09:01:05</span> <span class="log-ok">INFO</span> <span class="log-msg">Daily key rotation completed. All sessions refreshed.</span></div>
    </div>
  </div>

  <div class="page" id="p2">
    <div class="p2-header">
      <h2 class="p2-title">THREAT_INTEL</h2>
      <div class="threat-level"><div class="op-dot dot-warn" style="margin-right:2px"></div>THREAT LEVEL: ELEVATED</div>
    </div>
    <div class="threat-table">
      <div class="threat-row head">
        <div class="th-cell">CVE ID</div>
        <div class="th-cell">Description</div>
        <div class="th-cell">Severity</div>
        <div class="th-cell">CVSS</div>
        <div class="th-cell">Status</div>
      </div>
      <div class="threat-row"><div class="th-cell" style="color:var(--green)">CVE-2025-4471</div><div class="th-cell" style="color:var(--dim)">Remote code exec in libssl 3.x via malformed cert chain</div><div class="th-cell"><span class="sev sev-crit">Critical</span></div><div class="th-cell" style="color:var(--red)">9.8</div><div class="th-cell"><span class="stat-badge badge-new">New</span></div></div>
      <div class="threat-row"><div class="th-cell" style="color:var(--green)">CVE-2025-3892</div><div class="th-cell" style="color:var(--dim)">Privilege escalation in Linux kernel via io_uring</div><div class="th-cell"><span class="sev sev-high">High</span></div><div class="th-cell" style="color:#ffa000">8.1</div><div class="th-cell"><span class="stat-badge badge-active">Active</span></div></div>
      <div class="threat-row"><div class="th-cell" style="color:var(--green)">CVE-2025-3301</div><div class="th-cell" style="color:var(--dim)">SQL injection in Nginx Plus management API</div><div class="th-cell"><span class="sev sev-med">Medium</span></div><div class="th-cell" style="color:#ffee00">6.5</div><div class="th-cell"><span class="stat-badge badge-patch">Patch ready</span></div></div>
      <div class="threat-row"><div class="th-cell" style="color:var(--green)">CVE-2025-2984</div><div class="th-cell" style="color:var(--dim)">Zero-day in AMD CPU microcode (speculative exec)</div><div class="th-cell"><span class="sev sev-high">High</span></div><div class="th-cell" style="color:#ffa000">7.4</div><div class="th-cell"><span class="stat-badge badge-active">Active</span></div></div>
    </div>
  </div>

  <div class="page" id="p3">
    <div class="p3-header">
      <h2 class="p3-title">./TEAM</h2>
      <div style="font-size:9px;letter-spacing:0.2em;color:var(--green-dim)">8 OPERATORS · CLEARANCE L4+</div>
    </div>
    <div class="team-grid">
      <div class="team-card"><div class="tc-handle">vex</div><div class="tc-role">Lead Analyst</div><div class="tc-name">Vera Okonkwo</div><div class="tc-skills"><span class="skill-tag">malware</span><span class="skill-tag">RE</span><span class="skill-tag">threat hunting</span></div></div>
      <div class="team-card"><div class="tc-handle">z0r</div><div class="tc-role">Exploit Dev</div><div class="tc-name">Kai Ishikawa</div><div class="tc-skills"><span class="skill-tag">kernel</span><span class="skill-tag">asm</span><span class="skill-tag">fuzzing</span></div></div>
      <div class="team-card"><div class="tc-handle">gh0st</div><div class="tc-role">Red Team Lead</div><div class="tc-name">Lena Brandt</div><div class="tc-skills"><span class="skill-tag">pentest</span><span class="skill-tag">social eng</span><span class="skill-tag">APT sim</span></div></div>
      <div class="team-card"><div class="tc-handle">null_ptr</div><div class="tc-role">Platform Eng</div><div class="tc-name">Marcus Webb</div><div class="tc-skills"><span class="skill-tag">rust</span><span class="skill-tag">eBPF</span><span class="skill-tag">k8s</span></div></div>
    </div>
  </div>

</div>

<nav class="term-nav">
  <button class="tnav-item active" data-i="0" data-cmd="// ">./nexus_home</button>
  <button class="tnav-item" data-i="1" data-cmd="// ">./ops_status</button>
  <button class="tnav-item" data-i="2" data-cmd="// ">./threat_intel</button>
  <button class="tnav-item" data-i="3" data-cmd="// ">./team --list</button>
  <div class="term-clock" id="termClock">00:00:00 UTC</div>
</nav>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --terminal:#020d02;
  --green:#00e060;
  --green-dim:#006030;
  --green-faint:rgba(0,224,96,0.08);
  --green-mid:rgba(0,224,96,0.4);
  --white:#d0f0d0;
  --dim:rgba(208,240,208,0.4);
  --red:#ff3050;
}
html,body{height:100%;overflow:hidden;background:var(--terminal);font-family:'JetBrains Mono',monospace;color:var(--white);}

/* CRT scanline effect */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,0.08) 1px,rgba(0,0,0,0.08) 2px);
}

/* Phosphor glow vignette */
body::before{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,0.4) 100%);
}

/* Pages */
.pages{position:fixed;inset:0;}
.page{position:absolute;inset:0;pointer-events:none;visibility:hidden;}
.page.active{visibility:visible;pointer-events:auto;}

/* Matrix canvas */
#matCanvas{
  position:fixed;inset:0;z-index:700;pointer-events:none;
}

/* PAGE 0 — TERMINAL */
#p0{background:var(--terminal);}

.term-frame{
  height:100%;
  display:flex;flex-direction:column;
  padding:32px 48px;
  position:relative;
}

.term-topbar{
  display:flex;align-items:center;gap:12px;
  margin-bottom:32px;
  border-bottom:1px solid var(--green-faint);
  padding-bottom:20px;
}

.term-dots{display:flex;gap:6px;}
.term-dot{width:10px;height:10px;border-radius:50%;}
.td-red{background:#ff3b3b;}
.td-yellow{background:#ffbb00;}
.td-green{background:#00e060;}

.term-title{
  font-size:9px;letter-spacing:0.2em;
  color:var(--green-dim);flex:1;text-align:center;
  text-transform:uppercase;
}

.term-body{
  flex:1;
  display:flex;flex-direction:column;
  justify-content:center;
  max-width:700px;
  margin:0 auto;
  width:100%;
}

.term-prompt{
  font-size:9px;color:var(--green-dim);
  margin-bottom:8px;letter-spacing:0.08em;
}
.term-prompt span{color:var(--green);}

.term-hero{
  margin-bottom:48px;
}

.term-big{
  font-family:'Syne',sans-serif;
  font-size:clamp(44px,8vw,96px);
  font-weight:800;line-height:0.9;
  letter-spacing:-0.04em;
  color:var(--green);
  text-shadow:0 0 40px rgba(0,224,96,0.3);
  margin-bottom:4px;
}

.term-big-dim{
  font-family:'Syne',sans-serif;
  font-size:clamp(20px,3.5vw,44px);
  font-weight:400;line-height:1;
  letter-spacing:-0.02em;
  color:var(--green-dim);
}

.term-output{
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:40px;
}

.term-line{
  font-size:12px;letter-spacing:0.04em;line-height:1.6;
}
.term-line.c{color:var(--dim);}
.term-line.g{color:var(--green);}
.term-line.r{color:var(--red);}
.term-line.y{color:#ffee00;}

.blink{
  display:inline-block;width:8px;height:14px;
  background:var(--green);vertical-align:middle;
  animation:blink .8s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

.term-commands{
  display:flex;gap:12px;flex-wrap:wrap;
}

.cmd-btn{
  padding:10px 24px;
  border:1px solid var(--green-dim);
  background:none;color:var(--green-mid);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.08em;
  cursor:pointer;
  transition:all .15s;
}
.cmd-btn:hover{
  border-color:var(--green);color:var(--green);
  background:var(--green-faint);
  box-shadow:0 0 12px rgba(0,224,96,0.15);
}
.cmd-btn.primary{
  background:var(--green);color:var(--terminal);
  font-weight:700;border-color:var(--green);
}
.cmd-btn.primary:hover{
  background:#00ff70;
  box-shadow:0 0 20px rgba(0,224,96,0.4);
}

/* System info sidebar */
.term-side{
  position:absolute;right:48px;top:50%;transform:translateY(-50%);
  width:220px;
  border:1px solid var(--green-faint);
  padding:20px;
  background:rgba(0,224,96,0.02);
}
.side-label{
  font-size:8px;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--green-dim);margin-bottom:16px;
  border-bottom:1px solid var(--green-faint);
  padding-bottom:10px;
}
.side-row{
  display:flex;justify-content:space-between;
  font-size:10px;padding:6px 0;
  border-bottom:1px solid rgba(0,224,96,0.04);
}
.side-k{color:var(--green-dim);}
.side-v{color:var(--green);}
.side-v.ok{color:#00e060;}
.side-v.warn{color:#ffee00;}
.side-v.crit{color:var(--red);animation:blink .5s step-end infinite;}

/* PAGE 1 — OPERATIONS */
#p1{
  background:#010a01;
  padding:48px;
  overflow-y:auto;
}

.p1-header{
  display:flex;align-items:baseline;gap:24px;
  margin-bottom:40px;
  border-bottom:1px solid var(--green-faint);
  padding-bottom:20px;
}

.p1-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(32px,5vw,64px);
  font-weight:800;letter-spacing:-0.04em;
  color:var(--green);line-height:1;
}

.p1-uptime{
  font-size:9px;letter-spacing:0.2em;
  color:var(--green-dim);
}

.ops-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:2px;
  margin-bottom:32px;
}

.op-card{
  border:1px solid var(--green-faint);
  padding:24px;
  background:rgba(0,224,96,0.015);
  transition:border-color .2s,background .2s;
  cursor:pointer;
}
.op-card:hover{
  border-color:var(--green-dim);
  background:rgba(0,224,96,0.03);
}

.op-status{
  display:flex;align-items:center;gap:8px;
  margin-bottom:16px;
}
.op-dot{
  width:6px;height:6px;border-radius:50%;
}
.dot-ok{background:var(--green);box-shadow:0 0 6px var(--green);}
.dot-warn{background:#ffee00;box-shadow:0 0 6px #ffee00;}
.dot-crit{background:var(--red);box-shadow:0 0 6px var(--red);animation:blink .5s step-end infinite;}
.op-status-text{
  font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--green-dim);
}

.op-name{
  font-family:'Syne',sans-serif;
  font-size:20px;font-weight:700;color:var(--white);
  letter-spacing:-0.02em;margin-bottom:8px;
}
.op-desc{
  font-size:10px;line-height:1.7;color:var(--dim);
  letter-spacing:0.02em;margin-bottom:16px;
}
.op-meta{
  font-size:9px;color:var(--green-dim);letter-spacing:0.08em;
  font-style:italic;
}

.log-feed{
  border:1px solid var(--green-faint);
  padding:16px 20px;
  background:rgba(0,224,96,0.01);
  max-height:200px;overflow-y:auto;
}
.log-title{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--green-dim);margin-bottom:12px;}
.log-entry{font-size:9px;line-height:1.8;letter-spacing:0.04em;}
.log-time{color:var(--green-dim);}
.log-msg{color:var(--dim);}
.log-ok{color:var(--green);}
.log-err{color:var(--red);}

/* PAGE 2 — THREAT INTEL */
#p2{
  background:#010802;
  padding:48px;
  overflow-y:auto;
}

.p2-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:40px;
  padding-bottom:20px;
  border-bottom:1px solid var(--green-faint);
}

.p2-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(32px,5vw,64px);
  font-weight:800;letter-spacing:-0.04em;
  color:var(--red);line-height:1;
}

.threat-level{
  display:flex;align-items:center;gap:8px;
  padding:8px 20px;
  border:1px solid rgba(255,48,80,0.4);
  background:rgba(255,48,80,0.05);
  font-size:9px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--red);
}

.threat-table{
  display:flex;flex-direction:column;gap:2px;
  margin-bottom:28px;
}

.threat-row{
  display:grid;
  grid-template-columns:140px 1fr 100px 80px 80px;
  border:1px solid var(--green-faint);
  font-size:10px;letter-spacing:0.04em;
}
.threat-row.head{
  border-color:rgba(0,224,96,0.12);
  font-size:8px;letter-spacing:0.2em;text-transform:uppercase;
}
.th-cell{
  padding:14px 16px;
  border-right:1px solid var(--green-faint);
  display:flex;align-items:center;
}
.th-cell:last-child{border-right:none;}

.sev{
  padding:3px 10px;font-size:8px;letter-spacing:0.12em;text-transform:uppercase;
  font-weight:700;
}
.sev-crit{background:rgba(255,48,80,0.15);color:var(--red);}
.sev-high{background:rgba(255,160,0,0.12);color:#ffa000;}
.sev-med{background:rgba(255,238,0,0.08);color:#ffee00;}

.stat-badge{
  padding:2px 10px;font-size:8px;letter-spacing:0.1em;
}
.badge-new{border:1px solid var(--red);color:var(--red);}
.badge-active{border:1px solid #ffa000;color:#ffa000;}
.badge-patch{border:1px solid var(--green-dim);color:var(--green-dim);}

/* PAGE 3 — TEAM */
#p3{
  background:var(--terminal);
  padding:48px;
  display:flex;flex-direction:column;
}

.p3-header{
  display:flex;align-items:baseline;gap:20px;
  margin-bottom:48px;border-bottom:1px solid var(--green-faint);
  padding-bottom:20px;
}

.p3-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(36px,6vw,72px);
  font-weight:800;letter-spacing:-0.04em;
  color:var(--green);line-height:1;
}

.team-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  flex:1;align-content:start;
}

.team-card{
  border:1px solid var(--green-faint);
  padding:24px;
  position:relative;
  overflow:hidden;
  transition:border-color .2s,background .2s;
}
.team-card:hover{
  border-color:var(--green-dim);
  background:rgba(0,224,96,0.02);
}

.tc-handle{
  font-size:10px;letter-spacing:0.12em;
  color:var(--green);margin-bottom:12px;
  display:flex;align-items:center;gap:6px;
}
.tc-handle::before{content:'@';color:var(--green-dim);}

.tc-role{
  font-size:9px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--green-dim);margin-bottom:8px;
}

.tc-name{
  font-family:'Syne',sans-serif;
  font-size:15px;font-weight:700;
  color:var(--white);margin-bottom:16px;
}

.tc-skills{
  display:flex;flex-wrap:wrap;gap:6px;
}
.skill-tag{
  font-size:8px;letter-spacing:0.1em;
  border:1px solid var(--green-faint);
  color:var(--green-dim);padding:2px 8px;
}

/* Nav */
.term-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:800;
  background:rgba(1,10,1,0.95);
  border-top:1px solid var(--green-faint);
  display:flex;align-items:center;
  padding:12px 48px;
  gap:0;
  backdrop-filter:blur(20px);
}

.tnav-item{
  flex:1;padding:8px 16px;
  font-size:9px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--green-dim);background:none;border:none;
  cursor:pointer;font-family:'JetBrains Mono',monospace;
  position:relative;
  transition:color .2s;
  text-align:left;
}
.tnav-item::before{
  content:attr(data-cmd);
  position:absolute;left:0;top:0;bottom:0;
  display:flex;align-items:center;padding-left:16px;
  color:rgba(0,224,96,0.2);
  font-size:8px;
  pointer-events:none;
  transition:opacity .2s;
}
.tnav-item:hover{color:var(--green);}
.tnav-item.active{color:var(--green);}
.tnav-item.active::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
}

.term-clock{
  font-size:9px;letter-spacing:0.15em;color:var(--green-dim);
  margin-left:auto;
}
```

**JS:**
```js
const matCanvas=document.getElementById('matCanvas');
const matCtx=matCanvas.getContext('2d');
const pages=document.querySelectorAll('.page');
const navItems=document.querySelectorAll('.tnav-item');
let cur=0,busy=false;

function resize(){matCanvas.width=window.innerWidth;matCanvas.height=window.innerHeight;}
resize();window.addEventListener('resize',resize);

// Matrix characters — katakana + ASCII
const CHARS='アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*<>/\\|{}[]';

function matrixTransition(color,midCallback,done){
  const W=matCanvas.width,H=matCanvas.height;
  const fontSize=14;
  const cols=Math.ceil(W/fontSize);
  const rows=Math.ceil(H/fontSize);

  const dropPos=Array.from({length:cols},()=>-Math.floor(Math.random()*rows*0.8));
  const speed=Array.from({length:cols},()=>Math.random()*1.5+0.8);

  let midDone=false;
  let phase=0;

  function frame(){
    matCtx.clearRect(0,0,W,H);

    matCtx.fillStyle='rgba(2,13,2,0.15)';
    matCtx.fillRect(0,0,W,H);

    let allCovered=true;

    for(let c=0;c<cols;c++){
      const x=c*fontSize;
      const drop=dropPos[c];

      if(phase===0){
        for(let r=0;r<Math.min(drop,rows);r++){
          const char=CHARS[Math.floor(Math.random()*CHARS.length)];
          const alpha=r/Math.max(drop,1);
          if(r===Math.floor(drop)-1){
            matCtx.fillStyle='#80ffb0';
            matCtx.shadowColor='#00ff70';
            matCtx.shadowBlur=8;
          }else{
            const g=Math.floor(alpha*180+20);
            matCtx.fillStyle=`rgba(0,${g},${Math.floor(g*0.3)},${0.3+alpha*0.7})`;
            matCtx.shadowBlur=0;
          }
          matCtx.font=`${fontSize}px 'JetBrains Mono'`;
          matCtx.fillText(char,x,r*fontSize);
        }

        if(drop<rows) allCovered=false;
        dropPos[c]+=speed[c];

        if(!midDone&&allCovered){
          midDone=true;
          midCallback&&midCallback();
          phase=1;
          dropPos.fill(0);
        }
      } else {
        const clearPos=dropPos[c];
        for(let r=Math.floor(clearPos);r<rows;r++){
          const char=CHARS[Math.floor(Math.random()*CHARS.length)];
          const alpha=(r-clearPos)/rows;
          matCtx.fillStyle=`rgba(0,${Math.floor(150+alpha*80)},${Math.floor(60+alpha*20)},${0.6-alpha*0.6})`;
          matCtx.shadowBlur=0;
          matCtx.font=`${fontSize}px 'JetBrains Mono'`;
          matCtx.fillText(char,x,r*fontSize);
        }
        dropPos[c]+=speed[c]*1.5;
      }
    }

    matCtx.shadowBlur=0;

    if(phase===1&&dropPos.every(d=>d>=rows)){
      matCtx.clearRect(0,0,W,H);
      done&&done();
    } else {
      requestAnimationFrame(frame);
    }
  }
  requestAnimationFrame(frame);
}

function goTo(n){
  if(busy||n===cur)return;
  busy=true;
  const prev=cur;cur=n;
  navItems.forEach((it,i)=>it.classList.toggle('active',i===cur));

  matrixTransition('#020d02',
    ()=>{
      pages[prev].classList.remove('active');
      pages[cur].classList.add('active');
    },
    ()=>{busy=false;}
  );
}

navItems.forEach(it=>it.addEventListener('click',()=>goTo(+it.dataset.i)));
document.querySelectorAll('[data-next]').forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.next)));

let wt=0;
window.addEventListener('wheel',e=>{
  const now=Date.now();if(now-wt<1500)return;wt=now;
  goTo(Math.max(0,Math.min(3,cur+(e.deltaY>0?1:-1))));
},{passive:true});
document.addEventListener('keydown',e=>{
  if(e.key==='ArrowRight')goTo(Math.min(3,cur+1));
  if(e.key==='ArrowLeft')goTo(Math.max(0,cur-1));
});

// Clock
(function tick(){
  const now=new Date();
  const t=now.toUTCString().split(' ').slice(-2)[0];
  document.getElementById('termClock').textContent=t+' UTC';
  setTimeout(tick,1000);
})();
```

### 11. Paint Brush Stroke

**Type:** CSS + JS
**Description:** A wide organic bezier brushstroke sweeps across the viewport — overlapping waves with ink texture and rough-edge noise. The accent colour shifts per page. A contemporary art gallery.

**HTML:**
```html
<canvas id="strokeCanvas"></canvas>

<div class="pages">

  <div class="page active" id="p0">
    <div class="p0-left">
      <div class="gallery-wordmark">Volta — Contemporary Art</div>
      <div class="p0-hero">
        <div class="exhibition-tag">Current Exhibition</div>
        <h1 class="p0-title">Surface<br>/<br><span class="accent">Pressure</span></h1>
        <p class="p0-sub">New works by Noa Svensson. Painting as excavation — as the removal of what was always already there.</p>
        <button class="stroke-btn" data-next="1"><span>See all exhibitions</span></button>
      </div>
      <div class="p0-footer-info">
        <div class="on-view-badge">On View</div>
        <div class="p0-dates">12 September — 18 November 2025</div>
      </div>
    </div>
    <div class="p0-right">
      <div class="painting">
        <div class="paint-top">
          <div class="paint-shape"></div>
          <div class="paint-shape2"></div>
        </div>
        <div class="paint-bottom">
          <div class="paint-bl"></div>
          <div class="paint-br"></div>
        </div>
      </div>
      <div class="painting-caption">
        <div class="cap-title">Surface / Pressure No. 7</div>
        <div class="cap-dim">Oil on linen · 240 × 180 cm</div>
      </div>
    </div>
  </div>

  <div class="page" id="p1">
    <div class="p1-top">
      <h2 class="p1-title">Exhibitions</h2>
      <div class="p1-count">Current + Upcoming</div>
    </div>
    <div class="exh-list">
      <div class="exh-row">
        <div class="exh-cell"><span class="exh-num">01</span></div>
        <div class="exh-cell"><div><div class="exh-title">Surface / Pressure</div><div class="exh-artist">Noa Svensson</div></div></div>
        <div class="exh-cell"><span class="exh-dates">12 Sep — 18 Nov 2025</span></div>
        <div class="exh-cell"><span class="exh-status status-now">Now On</span></div>
      </div>
      <div class="exh-row">
        <div class="exh-cell"><span class="exh-num">02</span></div>
        <div class="exh-cell"><div><div class="exh-title">Weight of Light</div><div class="exh-artist">Tomás Erdős</div></div></div>
        <div class="exh-cell"><span class="exh-dates">28 Nov — 14 Feb 2026</span></div>
        <div class="exh-cell"><span class="exh-status status-up">Upcoming</span></div>
      </div>
      <div class="exh-row">
        <div class="exh-cell"><span class="exh-num">03</span></div>
        <div class="exh-cell"><div><div class="exh-title">Groundwork</div><div class="exh-artist">Amara Osei</div></div></div>
        <div class="exh-cell"><span class="exh-dates">22 Feb — 10 May 2026</span></div>
        <div class="exh-cell"><span class="exh-status status-up">Upcoming</span></div>
      </div>
      <div class="exh-row">
        <div class="exh-cell"><span class="exh-num">04</span></div>
        <div class="exh-cell"><div><div class="exh-title">Interval</div><div class="exh-artist">Group Exhibition</div></div></div>
        <div class="exh-cell"><span class="exh-dates">1 Jun — 30 Aug 2025</span></div>
        <div class="exh-cell"><span class="exh-status status-past">Closed</span></div>
      </div>
      <div class="exh-row">
        <div class="exh-cell"><span class="exh-num">05</span></div>
        <div class="exh-cell"><div><div class="exh-title">After the Voice</div><div class="exh-artist">Priya Krishnaswamy</div></div></div>
        <div class="exh-cell"><span class="exh-dates">15 Mar — 28 May 2025</span></div>
        <div class="exh-cell"><span class="exh-status status-past">Closed</span></div>
      </div>
    </div>
  </div>

  <div class="page" id="p2">
    <div class="p2-main">
      <div>
        <div class="p2-eyebrow">Featured Artist</div>
        <h2 class="p2-artist-name">Noa<br><span class="line2">Svensson</span></h2>
        <div class="p2-born">b. 1982 · Stockholm · Lives and works in Berlin and Oslo</div>
        <p class="p2-bio">Svensson's paintings begin with dense, opaque surfaces which she systematically removes — scraping, sanding, and dissolving layers until something she cannot account for emerges. She considers the work finished when she no longer recognises her own intentions in it.</p>
      </div>
      <div class="p2-stats">
        <div class="p2-stat"><div class="p2-stat-num">42</div><div class="p2-stat-label">Solo exhibitions</div></div>
        <div class="p2-stat"><div class="p2-stat-num">18</div><div class="p2-stat-label">Museums collecting</div></div>
        <div class="p2-stat"><div class="p2-stat-num">2009</div><div class="p2-stat-label">First solo show</div></div>
      </div>
    </div>
    <div class="p2-right">
      <div class="p2-works-label">Selected Works</div>
      <div class="work-item"><div class="work-year">2025</div><div class="work-title">Surface / Pressure No. 7</div><div class="work-medium">Oil on linen · 240 × 180 cm</div></div>
      <div class="work-item"><div class="work-year">2024</div><div class="work-title">Still Counting</div><div class="work-medium">Mixed media on panel · 120 × 90 cm</div></div>
      <div class="work-item"><div class="work-year">2023</div><div class="work-title">The Weight of It</div><div class="work-medium">Oil, sand, wax on canvas · 300 × 200 cm</div></div>
      <div class="work-item"><div class="work-year">2022</div><div class="work-title">Revision (IV)</div><div class="work-medium">Graphite, oil on board · 80 × 60 cm</div></div>
      <div class="work-item"><div class="work-year">2021</div><div class="work-title">Groundlessness</div><div class="work-medium">Oil on aluminium · 200 × 160 cm</div></div>
    </div>
  </div>

  <div class="page" id="p3">
    <div class="p3-bg-text">VOLTA</div>
    <div class="p3-content">
      <div class="p3-left">
        <h2 class="p3-big">COME<br>SEE<br>ART</h2>
        <p class="p3-tagline">We don't believe art needs to be explained before it can be felt. Come with an open hour and no particular expectations.</p>
      </div>
      <div class="p3-right">
        <div class="visit-row"><div class="visit-key">Location</div><div class="visit-val">Torstraße 88, Berlin</div></div>
        <div class="visit-row"><div class="visit-key">Tues — Friday</div><div class="visit-val">11am — 7pm</div></div>
        <div class="visit-row"><div class="visit-key">Saturday</div><div class="visit-val">10am — 6pm</div></div>
        <div class="visit-row"><div class="visit-key">Sunday — Monday</div><div class="visit-val">Closed</div></div>
        <div class="visit-row"><div class="visit-key">Admission</div><div class="visit-val">Free, always</div></div>
        <div class="visit-row"><div class="visit-key">Contact</div><div class="visit-val">hello@volta.gallery</div></div>
      </div>
    </div>
  </div>

</div>

<!-- Nav -->
<div class="stroke-nav" id="strokeNav">
  <button class="stroke-nav-item active" data-i="0"><span>Home</span><div class="nav-stroke-line"></div></button>
  <button class="stroke-nav-item" data-i="1"><span>Exhibitions</span><div class="nav-stroke-line"></div></button>
  <button class="stroke-nav-item" data-i="2"><span>Artist</span><div class="nav-stroke-line"></div></button>
  <button class="stroke-nav-item" data-i="3"><span>Visit</span><div class="nav-stroke-line"></div></button>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#fafaf8;
  --off:#f0eeea;
  --ink:#0a0a0a;
  --dim:rgba(10,10,10,0.35);
  --faint:rgba(10,10,10,0.06);
  --accent:#e84030;
}
html,body{height:100%;overflow:hidden;background:var(--white);font-family:'Hanken Grotesk',sans-serif;color:var(--ink);}

/* Pages */
.pages{position:fixed;inset:0;}
.page{position:absolute;inset:0;visibility:hidden;pointer-events:none;}
.page.active{visibility:visible;pointer-events:auto;}

/* Stroke canvas */
#strokeCanvas{
  position:fixed;inset:0;z-index:700;pointer-events:none;
}

/* PAGE 0 — GALLERY HOME */
#p0{
  background:var(--white);
  display:grid;grid-template-columns:1fr 1fr;
}

.p0-left{
  padding:64px;
  display:flex;flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--faint);
}

.gallery-wordmark{
  font-size:10px;font-weight:900;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink);
}

.p0-hero{
  display:flex;flex-direction:column;
}

.exhibition-tag{
  font-size:9px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--dim);margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.exhibition-tag::before{
  content:'';width:20px;height:2px;background:var(--accent);
  flex-shrink:0;
}

.p0-title{
  font-size:clamp(48px,7.5vw,100px);
  font-weight:900;line-height:0.9;
  letter-spacing:-0.05em;color:var(--ink);
  margin-bottom:20px;
}
.p0-title .accent{color:var(--accent);}

.p0-sub{
  font-size:15px;line-height:1.7;font-weight:200;font-style:italic;
  color:var(--dim);max-width:360px;
  margin-bottom:40px;
}

.stroke-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--white);
  padding:16px 36px;border:none;
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  cursor:pointer;width:fit-content;
  position:relative;overflow:hidden;
  transition:transform .15s;
}
.stroke-btn:hover{transform:translateY(-2px);}
.stroke-btn::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(0.76,0,0.24,1);
}
.stroke-btn:hover::before{transform:scaleX(1);}
.stroke-btn span{position:relative;z-index:1;}

.p0-footer-info{
  display:flex;align-items:center;gap:16px;
}

.on-view-badge{
  font-size:8px;letter-spacing:0.2em;text-transform:uppercase;
  background:var(--accent);color:var(--white);
  padding:4px 12px;font-weight:700;
}

.p0-dates{
  font-size:10px;letter-spacing:0.06em;color:var(--dim);
  font-style:italic;
}

.p0-right{
  position:relative;overflow:hidden;
  background:var(--off);
  display:flex;align-items:center;justify-content:center;
}

/* Abstract painting: rect compositions */
.painting{
  position:absolute;inset:0;
  display:grid;
  grid-template-rows:60% 40%;
  gap:2px;
  padding:2px;
}
.paint-top{
  background:linear-gradient(135deg,#1a1a2e,#0d0d1a);
  position:relative;overflow:hidden;
}
.paint-bottom{
  display:grid;grid-template-columns:60% 40%;gap:2px;
}
.paint-bl{background:var(--accent);}
.paint-br{background:var(--off);}

/* White shape overlay */
.paint-shape{
  position:absolute;
  width:180px;height:180px;
  border-radius:50% 10% 50% 10%;
  background:rgba(255,255,255,0.07);
  top:30%;left:20%;
}
.paint-shape2{
  position:absolute;
  width:80px;height:120px;
  background:rgba(255,255,255,0.04);
  bottom:10%;right:15%;
  border-radius:50% 50% 0 0;
}

.painting-caption{
  position:absolute;bottom:20px;left:24px;right:24px;
  display:flex;justify-content:space-between;align-items:flex-end;
  z-index:2;
}
.cap-title{
  font-size:12px;font-style:italic;font-weight:200;color:rgba(255,255,255,0.5);
}
.cap-dim{font-size:9px;letter-spacing:0.12em;color:rgba(255,255,255,0.25);}

/* PAGE 1 — EXHIBITIONS */
#p1{
  background:var(--white);
  padding:64px;
  overflow-y:auto;
  display:flex;flex-direction:column;
}

.p1-top{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:52px;
  padding-bottom:24px;
  border-bottom:2px solid var(--ink);
}

.p1-title{
  font-size:clamp(48px,8vw,100px);
  font-weight:900;letter-spacing:-0.05em;line-height:0.9;
  color:var(--ink);
}

.p1-count{
  font-size:9px;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--dim);font-weight:300;
  padding-bottom:8px;
}

.exh-list{display:flex;flex-direction:column;gap:0;}

.exh-row{
  display:grid;
  grid-template-columns:80px 1fr 200px 120px;
  border-bottom:1px solid var(--faint);
  transition:background .15s;
  cursor:pointer;
}
.exh-row:hover{background:rgba(10,10,10,0.02);}

.exh-cell{
  padding:24px 20px;
  border-right:1px solid var(--faint);
  display:flex;align-items:center;
}
.exh-cell:last-child{border-right:none;}

.exh-num{
  font-size:9px;color:var(--dim);
  letter-spacing:0.1em;font-weight:300;
}

.exh-title{
  font-size:16px;font-weight:700;letter-spacing:-0.02em;
  color:var(--ink);
}

.exh-artist{
  font-size:11px;font-weight:200;font-style:italic;
  color:var(--dim);margin-top:4px;
}

.exh-dates{
  font-size:10px;font-weight:300;font-style:italic;color:var(--dim);
  letter-spacing:0.04em;
}

.exh-status{
  font-size:8px;letter-spacing:0.15em;text-transform:uppercase;
  padding:4px 12px;font-weight:700;
}
.status-now{background:var(--accent);color:var(--white);}
.status-up{background:var(--ink);color:var(--white);}
.status-past{color:var(--dim);border:1px solid var(--faint);}

/* PAGE 2 — ARTIST */
#p2{
  background:var(--ink);
  color:var(--white);
  display:grid;grid-template-columns:1fr 480px;
}

.p2-main{
  padding:64px;
  display:flex;flex-direction:column;justify-content:space-between;
  border-right:1px solid rgba(255,255,255,0.05);
}

.p2-eyebrow{
  font-size:9px;letter-spacing:0.3em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);margin-bottom:28px;
}

.p2-artist-name{
  font-size:clamp(48px,7vw,96px);
  font-weight:900;line-height:0.9;
  letter-spacing:-0.04em;
  color:var(--white);
  margin-bottom:20px;
}
.p2-artist-name .line2{
  display:block;
  color:var(--accent);
}

.p2-born{
  font-size:11px;font-style:italic;
  color:rgba(255,255,255,0.3);margin-bottom:40px;
  letter-spacing:0.06em;
}

.p2-bio{
  font-size:14px;line-height:1.85;font-weight:200;
  color:rgba(255,255,255,0.55);
  max-width:480px;font-style:italic;
}

.p2-stats{
  display:flex;gap:40px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.p2-stat{display:flex;flex-direction:column;gap:6px;}
.p2-stat-num{
  font-size:36px;font-weight:900;letter-spacing:-0.04em;
  color:var(--white);
}
.p2-stat-label{
  font-size:9px;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.25);font-weight:300;
}

.p2-right{
  padding:64px 56px;
  background:#111;
  display:flex;flex-direction:column;
  gap:0;overflow-y:auto;
}

.p2-works-label{
  font-size:8px;letter-spacing:0.3em;text-transform:uppercase;
  color:rgba(255,255,255,0.2);margin-bottom:28px;
}

.work-item{
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex;flex-direction:column;gap:6px;
  cursor:pointer;
  transition:opacity .2s;
}
.work-item:hover{opacity:0.7;}
.work-year{font-size:9px;letter-spacing:0.15em;color:var(--accent);font-weight:700;}
.work-title{font-size:14px;font-style:italic;color:rgba(255,255,255,0.75);}
.work-medium{font-size:10px;letter-spacing:0.06em;color:rgba(255,255,255,0.3);font-weight:200;}

/* PAGE 3 — VISIT */
#p3{
  background:var(--accent);
  color:var(--white);
  display:flex;align-items:flex-end;
  padding:64px;
  position:relative;overflow:hidden;
}

.p3-bg-text{
  position:absolute;
  font-size:25vw;font-weight:900;
  color:rgba(0,0,0,0.08);
  line-height:1;letter-spacing:-0.06em;
  top:50%;left:50%;transform:translate(-45%,-55%);
  text-transform:uppercase;
  pointer-events:none;user-select:none;
}

.p3-content{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;width:100%;
}

.p3-left{
  display:flex;flex-direction:column;justify-content:flex-end;
}

.p3-big{
  font-size:clamp(48px,9vw,120px);
  font-weight:900;line-height:0.9;
  letter-spacing:-0.05em;
  color:var(--white);margin-bottom:24px;
}

.p3-tagline{
  font-size:14px;line-height:1.7;font-weight:200;font-style:italic;
  color:rgba(255,255,255,0.7);
  max-width:400px;
}

.p3-right{
  display:flex;flex-direction:column;gap:0;
  justify-content:flex-end;
}

.visit-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.15);
}
.visit-key{
  font-size:9px;letter-spacing:0.2em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,0.6);
}
.visit-val{
  font-size:13px;font-style:italic;color:var(--white);font-weight:300;
}

/* Stroke nav */
.stroke-nav{
  position:fixed;top:40px;right:48px;z-index:800;
  display:flex;flex-direction:column;gap:4px;
  align-items:flex-end;
}

.stroke-nav-item{
  display:flex;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;
  padding:6px 0;
  font-family:'Hanken Grotesk',sans-serif;
  font-size:8px;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(10,10,10,0.2);
  transition:color .2s;
}
.stroke-nav-item:hover{color:rgba(10,10,10,0.5);}
.stroke-nav-item.active{color:var(--ink);}

.nav-stroke-line{
  width:20px;height:2px;
  background:currentColor;
  transition:width .35s cubic-bezier(0.4,0,0.2,1);
}
.stroke-nav-item.active .nav-stroke-line{width:40px;}
.stroke-nav-item:hover .nav-stroke-line{width:32px;}

@media(max-width:768px){
  #p0,#p2{grid-template-columns:1fr;}
  .p0-right,.p2-right{display:none;}
  .p0-left,.p2-main{padding:40px 28px;}
  #p1{padding:40px 28px;}
  .exh-row{grid-template-columns:1fr 100px;}
  .exh-num,.exh-dates{display:none;}
  #p3{padding:40px 28px;}
  .p3-content{grid-template-columns:1fr;gap:32px;}
  .stroke-nav{top:auto;right:20px;bottom:20px;}
}
```

**JS:**
```js
const canvas=document.getElementById('strokeCanvas');
const ctx=canvas.getContext('2d');
const pages=document.querySelectorAll('.page');
const navItems=document.querySelectorAll('.stroke-nav-item');
const nav=document.getElementById('strokeNav');
let cur=0,busy=false;

function resize(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}
resize();window.addEventListener('resize',resize);

function buildStrokePath(ctx,W,H,progress){
  const midY=H*0.5;
  const variance=H*0.18;

  ctx.beginPath();

  const waves=5;
  for(let w=0;w<waves;w++){
    const yOff=(w/(waves-1)-0.5)*variance*2;
    const cp1x=W*0.25,cp1y=midY+yOff+(Math.sin(w)*variance*0.3);
    const cp2x=W*0.65,cp2y=midY-yOff+(Math.cos(w)*variance*0.25);
    const ex=W*progress*1.05,ey=midY+yOff*0.5;

    if(w===0){
      ctx.moveTo(-20,midY-variance);
    }

    ctx.bezierCurveTo(
      cp1x,cp1y,
      cp2x,cp2y,
      Math.min(ex,W+20),ey
    );
  }

  for(let w=waves-1;w>=0;w--){
    const yOff=(w/(waves-1)-0.5)*variance*2;
    const cp1x=W*0.65,cp1y=midY-yOff+variance*0.3;
    const cp2x=W*0.25,cp2y=midY+yOff-variance*0.2;
    ctx.bezierCurveTo(
      Math.min(W*progress,W+20)+20,midY+yOff*0.5+variance*0.1,
      cp1x,cp1y,
      cp2x,cp2y
    );
  }

  ctx.closePath();
}

const strokeColors=['#0a0a0a','#0a0a0a','#fafaf8','#e84030'];

function strokeTransition(color,mid,done){
  let progress=0;
  const dur=50;
  const W=canvas.width,H=canvas.height;

  let midDone=false;

  function draw(){
    ctx.clearRect(0,0,W,H);
    const p=progress/dur;
    const ep=p<0.5?2*p*p:1-Math.pow(-2*p+2,2)/2;

    ctx.save();
    buildStrokePath(ctx,W,H,ep*1.05);

    const g=ctx.createLinearGradient(0,H*0.3,0,H*0.7);
    g.addColorStop(0,color);
    g.addColorStop(0.3,color);
    g.addColorStop(0.7,color);
    g.addColorStop(1,color);
    ctx.fillStyle=g;
    ctx.fill();

    ctx.globalCompositeOperation='destination-out';
    for(let i=0;i<8;i++){
      const noiseY=H*0.5+(Math.sin(i*2.7+progress*0.1)*H*0.08);
      const noiseX=Math.random()*W*ep;
      const r=Math.random()*30+10;
      ctx.beginPath();
      ctx.arc(noiseX,noiseY,r,0,Math.PI*2);
      ctx.fillStyle='rgba(0,0,0,0.06)';
      ctx.fill();
    }
    ctx.globalCompositeOperation='source-over';
    ctx.restore();

    if(ep>0.48&&!midDone){midDone=true;mid&&mid();}
    progress++;

    if(progress<=dur){
      requestAnimationFrame(draw);
    }else{
      let alpha=1;
      function fadeOut(){
        ctx.clearRect(0,0,W,H);
        ctx.save();
        buildStrokePath(ctx,W,H,1.05);
        ctx.fillStyle=color;
        ctx.globalAlpha=alpha;
        ctx.fill();
        ctx.globalAlpha=1;
        ctx.restore();
        alpha-=0.12;
        if(alpha>0) requestAnimationFrame(fadeOut);
        else{ctx.clearRect(0,0,W,H);done&&done();}
      }
      requestAnimationFrame(fadeOut);
    }
  }
  requestAnimationFrame(draw);
}

function goTo(n){
  if(busy||n===cur)return;
  busy=true;
  const prev=cur;cur=n;
  navItems.forEach((it,i)=>it.classList.toggle('active',i===cur));

  nav.style.color=cur===2?'white':'';

  strokeTransition(strokeColors[cur],
    ()=>{
      pages[prev].classList.remove('active');
      pages[cur].classList.add('active');
    },
    ()=>{busy=false;}
  );
}

navItems.forEach(it=>it.addEventListener('click',()=>goTo(+it.dataset.i)));
document.querySelectorAll('[data-next]').forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.next)));

let wt=0;
window.addEventListener('wheel',e=>{
  const now=Date.now();if(now-wt<1200)return;wt=now;
  goTo(Math.max(0,Math.min(3,cur+(e.deltaY>0?1:-1))));
},{passive:true});
document.addEventListener('keydown',e=>{
  if(e.key==='ArrowRight')goTo(Math.min(3,cur+1));
  if(e.key==='ArrowLeft')goTo(Math.max(0,cur-1));
});
```

---
## 10 CSS Parallax Effects

URL: https://codefronts.com/motion/css-parallax-designs/
Description: 10 hand-coded CSS parallax effects covering the patterns search demand actually targets — multi-layer scroll hero, cinematic SVG landscape with 5 depth layers, sticky scroll sections (Stripe / Linear marketing pattern), multi-scene sticky-pinned parallax journey, asymmetric image grid parallax, sticky horizontal-scroll panels driven by vertical scroll, text overlay texture, mouse-position 3D card tilt, zoom-in depth illusion, and backdrop-filter blur cross-fade transition. All 10 use requestAnimationFrame-throttled scroll/mouse listeners for the parallax math. Every demo respects prefers-reduced-motion, scoped class names, MIT-licensed.
Demo count: 10

### 01. CSS Parallax Hero Section

**Type:** CSS + JS
**Description:** A luxury editorial hero built on five parallax layers — gradient bg, perspective grid, amber orbs, diagonal geometry SVG, and floating headline — each drifting at its own cadence. Bebas Neue display at 13rem collapses to 5rem on mobile. Below-fold image container with counter-scroll inner, animated gold marquee band. Gold/rust/charcoal palette on #0a0a0f ink.

**HTML:**
```html
<div class="plx-01">

  <!-- HERO -->
  <section class="plx-01__hero">
    <div class="plx-01__bg-layer" data-parallax="0.5"></div>
    <div class="plx-01__grain"></div>

    <div class="plx-01__orb plx-01__orb--a" data-parallax="0.3"></div>
    <div class="plx-01__orb plx-01__orb--b" data-parallax="0.4"></div>

    <div class="plx-01__lines" data-parallax="0.25">
      <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
        <line x1="0" y1="200" x2="1440" y2="700" stroke="#c8a95a" stroke-width="1"/>
        <line x1="0" y1="400" x2="1440" y2="900" stroke="#c8a95a" stroke-width="0.5"/>
        <line x1="200" y1="0" x2="800" y2="900" stroke="#c8a95a" stroke-width="0.5"/>
        <line x1="900" y1="0" x2="1440" y2="600" stroke="#c8a95a" stroke-width="1"/>
        <circle cx="720" cy="450" r="280" stroke="#c8a95a" stroke-width="0.5" fill="none"/>
        <circle cx="720" cy="450" r="180" stroke="#c8a95a" stroke-width="0.3" fill="none"/>
      </svg>
    </div>

    <div class="plx-01__content">
      <div class="plx-01__eyebrow">Est. 2024 · Design Studio</div>
      <h1 class="plx-01__headline" data-parallax="-0.15">
        WHERE<br>FORM<br><em>MEETS</em><br>FUNCTION
      </h1>
      <p class="plx-01__sub" data-parallax="-0.08">
        Crafting digital experiences that leave a lasting impression.
        We build at the intersection of art, technology, and human desire.
      </p>
      <div class="plx-01__cta">
        <button class="plx-01__btn plx-01__btn--primary">View Our Work</button>
        <button class="plx-01__btn plx-01__btn--secondary">Get in Touch</button>
      </div>
    </div>

    <div class="plx-01__scroll">
      <span>Scroll</span>
      <div class="plx-01__scroll-line"></div>
    </div>
  </section>

  <!-- SECTION -->
  <section class="plx-01__section">
    <div class="plx-01__section-img">
      <div class="plx-01__section-inner" data-parallax-section="0.3"></div>
    </div>
    <div class="plx-01__section-text">
      <h2>Precision in <span>Every</span> Pixel</h2>
      <div class="plx-01__rule"></div>
      <p>We approach design as a discipline of reduction — stripping away everything that isn't essential until only the pure signal remains.</p>
      <p>Every interaction is intentional. Every animation has a reason. Every color earns its place.</p>
      <div class="plx-01__stat-row">
        <div class="plx-01__stat"><strong>120+</strong><small>Projects</small></div>
        <div class="plx-01__stat"><strong>8yr</strong><small>Experience</small></div>
        <div class="plx-01__stat"><strong>14</strong><small>Awards</small></div>
      </div>
    </div>
  </section>

  <!-- BAND -->
  <div class="plx-01__band">
    <div class="plx-01__band-inner" data-parallax-band="0.4"></div>
    <div class="plx-01__marquee">
      DESIGN &nbsp;·&nbsp; DEVELOP &nbsp;·&nbsp; DELIVER &nbsp;·&nbsp; DESIGN &nbsp;·&nbsp; DEVELOP &nbsp;·&nbsp; DELIVER &nbsp;·&nbsp;
      DESIGN &nbsp;·&nbsp; DEVELOP &nbsp;·&nbsp; DELIVER &nbsp;·&nbsp; DESIGN &nbsp;·&nbsp; DEVELOP &nbsp;·&nbsp; DELIVER &nbsp;·&nbsp;
    </div>
    <div class="plx-01__band-text">We Build What Others Only Imagine</div>
  </div>

</div>
```

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

.plx-01 {
  --ink: #0a0a0f;
  --cream: #f5f0e8;
  --gold: #c8a95a;
  --rust: #b84c2a;
  font-family: 'Inter', sans-serif;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
}

/* ── Hero ── */
.plx-01__hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  /* align-items: safe center — center the content when there's
     enough room, but fall back to flex-start when content would
     overflow. Without the safe keyword, flex centers content
     even when it overflows the container, which COMBINED with
     overflow:hidden above causes the top + bottom of the
     content to be clipped equally (the user reported "top and
     bottom of the view cut"). The safe keyword is the modern
     fix — Chrome 93+, Safari 16+, Firefox 63+. justify-content
     stays plain center since horizontal alignment never overflows
     in this layout. */
  align-items: safe center;
  justify-content: center;
  padding: 24px 0;
}

.plx-01__bg-layer {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(200,169,90,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(184,76,42,0.22) 0%, transparent 55%),
    linear-gradient(160deg, #0d0b18 0%, #1a0f0a 50%, #0a0d1a 100%);
  will-change: transform;
  transform: translateY(0px);
}

/* Grain texture overlay */
.plx-01__grain {
  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='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");
  background-size: 200px 200px;
  opacity: 0.5;
  pointer-events: none;
}

/* Geometric lines */
.plx-01__lines {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translateY(0px);
}
.plx-01__lines svg {
  width: 100%; height: 100%;
  opacity: 0.12;
}

/* Floating orbs */
.plx-01__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
  transform: translateY(0px);
}
.plx-01__orb--a {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(200,169,90,0.4) 0%, transparent 70%);
  top: -10%; right: -5%;
}
.plx-01__orb--b {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(184,76,42,0.35) 0%, transparent 70%);
  bottom: -5%; left: 5%;
}

/* Content — scrolls at normal speed */
.plx-01__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
  max-width: 900px;
}

.plx-01__eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(200,169,90,0.4);
  padding: 6px 18px;
  margin-bottom: 36px;
  border-radius: 2px;
}

.plx-01__headline {
  font-family: 'Bebas Neue', sans-serif;
  /* Sizing math (derived empirically, measured in browser):
     The headline has 4 forced <br> stacked lines + line-height 0.88,
     so its block height = font_size × 0.88 × 4 = font_size × 3.52.
     Other content + margins in the hero (eyebrow + sub + cta +
     padding + scroll-indicator clearance) measured to ~360px.
     For everything to fit in 100vh without clipping, headline block
     needs to be ≤ (100vh - 360px), so font_size ≤ (100vh - 360px) / 3.52.
     This calc-driven ceiling means the headline scales naturally
     with available viewport height: ~205px at desktop 1080px viewport
     (clamps to 180px ceiling from the design intent), ~83px in the
     playground iframe at 651px height (vs the previous 97px that
     overflowed the bottom CTAs), 56px floor on short mobile.
     14vw secondary constraint stops the headline being too wide on
     very wide-but-short viewports. Floor 56px handles 360px-wide
     phones. Ceiling 180px = 13rem from the demo desc. */
  font-size: clamp(56px, min(14vw, calc((100vh - 380px) / 3.52)), 180px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  color: var(--cream);
  will-change: transform;
  transform: translateY(0px);
}

.plx-01__headline em {
  font-style: normal;
  display: block;
  background: linear-gradient(135deg, var(--gold) 0%, var(--rust) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plx-01__sub {
  margin-top: 32px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245,240,232,0.6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  will-change: transform;
  transform: translateY(0px);
}

.plx-01__cta {
  margin-top: 48px;
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.plx-01__btn {
  padding: 14px 36px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}
.plx-01__btn--primary {
  background: linear-gradient(135deg, var(--gold), var(--rust));
  color: var(--ink);
}
.plx-01__btn--secondary {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245,240,232,0.3);
}
.plx-01__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(200,169,90,0.25); }

/* Scroll indicator — original design: absolute-positioned at
   the hero's bottom-center, sits at the bottom edge of the
   100vh hero regardless of content height. Visible whenever
   content doesn't extend into the bottom 80px (which the new
   headline clamp prevents thanks to the 22vh component). */
.plx-01__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  z-index: 10;
  pointer-events: none;
}
.plx-01__scroll span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.plx-01__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: plx-01-scroll-pulse 2s ease-in-out infinite;
}
@keyframes plx-01-scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.6); }
}

/* ── Content sections below hero ── */
.plx-01__section {
  position: relative;
  padding: 120px 40px;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.plx-01__section-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid rgba(200,169,90,0.2);
}

.plx-01__section-inner {
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(135deg, #1a120a 0%, #0f1520 100%);
  will-change: transform;
}

.plx-01__section-inner::after {
  content: '';
  position: absolute;
  inset: 20%;
  background: radial-gradient(circle at 40% 60%, rgba(200,169,90,0.3) 0%, rgba(184,76,42,0.2) 40%, transparent 70%);
  border: 1px solid rgba(200,169,90,0.15);
}

.plx-01__section-text h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.95;
  margin-bottom: 24px;
}

.plx-01__section-text h2 span {
  color: var(--gold);
}

.plx-01__section-text p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245,240,232,0.6);
  margin-bottom: 16px;
}

.plx-01__rule {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 32px 0;
}

.plx-01__stat-row {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.plx-01__stat strong {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  color: var(--gold);
  line-height: 1;
}

.plx-01__stat small {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
}

/* Divider band */
.plx-01__band {
  background: linear-gradient(135deg, var(--gold) 0%, var(--rust) 100%);
  padding: 40px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.plx-01__band-inner {
  position: absolute;
  inset: -20%;
  will-change: transform;
}

.plx-01__marquee {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  color: rgba(10,10,15,0.12);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  animation: plx-01-marquee 18s linear infinite;
}

@keyframes plx-01-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.plx-01__band-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 768px) {
  .plx-01__section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 24px;
  }
  .plx-01__section-img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plx-01__bg-layer,
  .plx-01__lines,
  .plx-01__orb,
  .plx-01__headline,
  .plx-01__sub,
  .plx-01__section-inner { transform: none !important; }
  .plx-01__scroll-line { animation: none; }
  .plx-01__marquee { animation: none; }
}
```

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

  const hero = root.querySelector('.plx-01__hero');
  const heroH = hero.offsetHeight;

  // Elements with data-parallax on the hero
  const heroLayers = Array.from(root.querySelectorAll('[data-parallax]')).map(el => ({
    el,
    speed: parseFloat(el.dataset.parallax)
  }));

  // Section inner parallax
  const sectionInner = root.querySelector('[data-parallax-section]');
  const sectionSpeed = sectionInner ? parseFloat(sectionInner.dataset.parallaxSection) : 0.3;

  // Band inner parallax
  const bandInner = root.querySelector('[data-parallax-band]');
  const bandSpeed = bandInner ? parseFloat(bandInner.dataset.parallaxBand) : 0.4;

  let ticking = false;

  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const sy = window.scrollY;

      // Hero layers
      heroLayers.forEach(({ el, speed }) => {
        el.style.transform = `translateY(${sy * speed}px)`;
      });

      // Section inner — relative to its position
      if (sectionInner) {
        const rect = sectionInner.closest('.plx-01__section-img').getBoundingClientRect();
        const relY = rect.top + rect.height / 2;
        const offset = (relY - window.innerHeight / 2) * sectionSpeed;
        sectionInner.style.transform = `translateY(${-offset * 0.4}px)`;
      }

      // Band inner
      if (bandInner) {
        const rect = bandInner.closest('.plx-01__band').getBoundingClientRect();
        const relY = rect.top + rect.height / 2;
        const offset = (relY - window.innerHeight / 2) * bandSpeed;
        bandInner.style.transform = `translateX(${-offset * 0.2}px)`;
      }

      ticking = false;
    });
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

### 02. Multi-layered CSS Parallax Landscape / Illustration

**Type:** CSS + JS
**Description:** Cinematic twilight scene with eight independent SVG layers — star field, crescent moon, sun glow corona, drifting clouds, far and near mountain ranges, tree silhouettes, and rolling ground — each scrolling 0.08× to 0.94× viewport speed for convincing pseudo-3D depth. Cinzel serif headline. Right-edge depth-indicator dots. Rich indigo-to-amber sunset gradient sky.

**HTML:**
```html
<div class="plx-02">

  <div class="plx-02__scene">

    <!-- Layer 0: Sky (fixed) -->
    <div class="plx-02__sky"></div>

    <!-- Layer 1: Stars — slowest -->
    <div class="plx-02__stars" data-plx="0.08">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs><radialGradient id="star"><stop offset="0%" stop-color="#fff"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs>
        <!-- scattered stars -->
        <circle cx="8%" cy="12%" r="1.2" fill="#fff" opacity="0.9"/>
        <circle cx="18%" cy="5%" r="0.8" fill="#fff" opacity="0.7"/>
        <circle cx="27%" cy="18%" r="1" fill="#fff" opacity="0.85"/>
        <circle cx="35%" cy="8%" r="1.5" fill="#ffd" opacity="0.95"/>
        <circle cx="42%" cy="22%" r="0.7" fill="#fff" opacity="0.6"/>
        <circle cx="55%" cy="6%" r="1.1" fill="#fff" opacity="0.8"/>
        <circle cx="63%" cy="16%" r="0.9" fill="#fff" opacity="0.75"/>
        <circle cx="71%" cy="4%" r="1.3" fill="#ffd" opacity="0.9"/>
        <circle cx="80%" cy="14%" r="0.8" fill="#fff" opacity="0.65"/>
        <circle cx="88%" cy="8%" r="1.0" fill="#fff" opacity="0.8"/>
        <circle cx="93%" cy="22%" r="0.7" fill="#fff" opacity="0.55"/>
        <circle cx="12%" cy="28%" r="0.6" fill="#fff" opacity="0.5"/>
        <circle cx="48%" cy="32%" r="0.5" fill="#fff" opacity="0.4"/>
        <circle cx="76%" cy="27%" r="0.8" fill="#fff" opacity="0.6"/>
      </svg>
    </div>

    <!-- Layer 2: Moon -->
    <div class="plx-02__moon" data-plx="0.12"></div>

    <!-- Layer 3: Sun glow at horizon -->
    <div class="plx-02__sun" data-plx="0.25"></div>

    <!-- Layer 4: Clouds -->
    <div class="plx-02__clouds" data-plx="0.18">
      <div class="plx-02__cloud"></div>
      <div class="plx-02__cloud"></div>
      <div class="plx-02__cloud"></div>
      <div class="plx-02__cloud"></div>
    </div>

    <!-- Layer 5: Far mountains -->
    <div class="plx-02__layer plx-02__mtn-far" data-plx="0.35">
      <svg viewBox="0 0 1440 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <path d="M0,300 L0,180 L60,130 L120,160 L200,80 L280,140 L360,70 L440,120 L520,50 L600,110 L680,40 L760,100 L840,55 L920,115 L1000,65 L1080,125 L1160,85 L1240,145 L1320,90 L1440,150 L1440,300 Z"
          fill="#1e2d4a"/>
        <path d="M0,300 L0,200 L80,155 L160,185 L240,115 L320,155 L400,95 L480,145 L560,75 L640,130 L720,65 L800,125 L880,80 L960,140 L1040,90 L1120,150 L1200,105 L1280,165 L1360,110 L1440,175 L1440,300 Z"
          fill="#253566" opacity="0.6"/>
      </svg>
    </div>

    <!-- Layer 6: Mid mountains -->
    <div class="plx-02__layer plx-02__mtn-mid" data-plx="0.5">
      <svg viewBox="0 0 1440 260" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <path d="M0,260 L0,160 L90,100 L180,140 L270,70 L360,120 L450,55 L540,105 L630,40 L720,95 L810,30 L900,90 L990,60 L1080,115 L1170,75 L1260,130 L1350,85 L1440,140 L1440,260 Z"
          fill="#2a3d60"/>
        <path d="M0,260 L0,190 L100,150 L200,175 L300,115 L400,155 L500,90 L600,140 L700,80 L800,130 L900,70 L1000,125 L1100,95 L1200,150 L1300,110 L1440,165 L1440,260 Z"
          fill="#3a5278" opacity="0.7"/>
      </svg>
    </div>

    <!-- Fog layers -->
    <div class="plx-02__fog plx-02__fog--a" data-plx="0.6"></div>
    <div class="plx-02__fog plx-02__fog--b" data-plx="0.65"></div>

    <!-- Layer 7: Near mountains / hills -->
    <div class="plx-02__layer plx-02__mtn-near" data-plx="0.7">
      <svg viewBox="0 0 1440 220" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <path d="M0,220 L0,140 L120,80 L240,130 L360,60 L480,110 L600,45 L720,100 L840,35 L960,95 L1080,50 L1200,110 L1320,70 L1440,120 L1440,220 Z"
          fill="#0d1a0d"/>
      </svg>
    </div>

    <!-- Layer 8: Far trees -->
    <div class="plx-02__layer plx-02__trees-far" data-plx="0.82">
      <svg viewBox="0 0 1440 140" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <path d="M0,140 L0,60 Q18,20 36,60 Q54,20 72,60 Q90,25 108,60 Q126,15 144,60 Q162,22 180,60 Q198,18 216,60 Q234,28 252,60 Q270,12 288,60 Q306,20 324,60 Q342,16 360,60 Q378,25 396,60 Q414,18 432,60 Q450,22 468,60 Q486,14 504,60 Q522,20 540,60 Q558,18 576,60 Q594,24 612,60 Q630,16 648,60 Q666,22 684,60 Q702,14 720,60 Q738,20 756,60 Q774,18 792,60 Q810,26 828,60 Q846,15 864,60 Q882,21 900,60 Q918,17 936,60 Q954,23 972,60 Q990,15 1008,60 Q1026,21 1044,60 Q1062,17 1080,60 Q1098,24 1116,60 Q1134,16 1152,60 Q1170,22 1188,60 Q1206,18 1224,60 Q1242,25 1260,60 Q1278,15 1296,60 Q1314,21 1332,60 Q1350,17 1368,60 Q1386,23 1404,60 Q1422,19 1440,60 L1440,140 Z"
          fill="#0d1f0d" opacity="0.9"/>
      </svg>
    </div>

    <!-- Layer 9: Near trees -->
    <div class="plx-02__layer plx-02__trees-near" data-plx="0.94">
      <svg viewBox="0 0 1440 110" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <path d="M-20,110 L-20,30 Q0,-10 20,30 Q40,-15 60,30 Q80,-8 100,30 Q120,-18 140,30 Q160,-10 180,30 Q200,-16 220,30 Q240,-5 260,30 Q280,-20 300,30 Q320,-12 340,30 Q360,-8 380,30 Q400,-18 420,30 Q440,-10 460,30 Q480,-14 500,30 Q520,-6 540,30 Q560,-20 580,30 Q600,-12 620,30 Q640,-8 660,30 Q680,-18 700,30 Q720,-10 740,30 Q760,-14 780,30 Q800,-6 820,30 Q840,-20 860,30 Q880,-12 900,30 Q920,-8 940,30 Q960,-18 980,30 Q1000,-10 1020,30 Q1040,-14 1060,30 Q1080,-6 1100,30 Q1120,-20 1140,30 Q1160,-12 1180,30 Q1200,-8 1220,30 Q1240,-18 1260,30 Q1280,-10 1300,30 Q1320,-14 1340,30 Q1360,-6 1380,30 Q1400,-20 1420,30 Q1440,-10 1460,30 L1460,110 Z"
          fill="#0a160a"/>
      </svg>
    </div>

    <!-- Layer 10: Ground -->
    <div class="plx-02__ground"></div>

    <!-- Content overlay -->
    <div class="plx-02__overlay" data-plx="-0.06">
      <h1 class="plx-02__title">
        <em>The Last</em>
        HORIZON
      </h1>
      <div class="plx-02__divider"></div>
      <p class="plx-02__tagline">Five layers. One infinite depth.<br>Pure CSS parallax landscape.</p>
    </div>

    <!-- Layer depth indicator -->
    <div class="plx-02__layers-ui">
      <div class="plx-02__layer-dot" data-label="Stars"></div>
      <div class="plx-02__layer-dot" data-label="Moon"></div>
      <div class="plx-02__layer-dot" data-label="Clouds"></div>
      <div class="plx-02__layer-dot" data-label="Far Mtns"></div>
      <div class="plx-02__layer-dot" data-label="Mid Mtns"></div>
      <div class="plx-02__layer-dot" data-label="Near Mtns"></div>
      <div class="plx-02__layer-dot" data-label="Far Trees"></div>
      <div class="plx-02__layer-dot" data-label="Near Trees"></div>
    </div>

  </div>

  <!-- Below fold -->
  <div class="plx-02__narrative">
    <h2>Five Depths, One Horizon</h2>
    <p>Each layer moves at its own pace — sky barely drifts, foreground trees rush by. The result is a pseudo-3D parallax landscape built entirely in CSS SVG layers, no canvas, no WebGL.</p>
  </div>

</div>
```

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

.plx-02 {
  --sky-top: #0d1b3e;
  --sky-mid: #1a2f5a;
  --sky-low: #2d4a8a;
  --horizon: #e85d2a;
  --fog: #c4a97a;
  --mt1: #1e2d4a;
  --mt2: #2a3d60;
  --mt3: #3a5278;
  --tree: #0d1f0d;
  --tree2: #112411;
  --ground: #0a140a;
  font-family: 'Lato', sans-serif;
  background: var(--sky-top);
  overflow-x: hidden;
}

/* ── Scene wrapper ── */
.plx-02__scene {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

/* Each layer is absolutely positioned, full width */
.plx-02__layer {
  position: absolute;
  width: 100%;
  bottom: 0;
  will-change: transform;
}

/* Layer 0: Sky gradient */
.plx-02__sky {
  inset: 0;
  background: linear-gradient(
    to bottom,
    #040d20 0%,
    #0d1b3e 25%,
    #1a2f5a 50%,
    #2d4a8a 70%,
    #e85d2a 88%,
    #f5a623 95%,
    #ffd680 100%
  );
  position: absolute;
}

/* Stars */
.plx-02__stars {
  position: absolute;
  inset: 0 0 40% 0;
  will-change: transform;
}

/* Moon */
.plx-02__moon {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff9e6, #f0d080);
  box-shadow: 0 0 30px rgba(240,208,128,0.6), 0 0 80px rgba(240,208,128,0.2);
  will-change: transform;
}

/* Sun/horizon glow.
   Horizontal centering uses calc() on the left property instead
   of transform: translateX(-50%) — this element carries data-plx
   so the JS parallax handler clobbers style.transform with
   translateY() on every scroll, which would erase the centering
   and shift the sun to the right of the headline. */
.plx-02__sun {
  position: absolute;
  bottom: -30px;
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd680 0%, #f5a623 30%, #e85d2a 60%, transparent 80%);
  filter: blur(8px);
  will-change: transform;
}

/* Cloud wisps */
.plx-02__clouds {
  position: absolute;
  inset: 15% 0 40% 0;
  will-change: transform;
}

.plx-02__cloud {
  position: absolute;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  filter: blur(6px);
}
.plx-02__cloud:nth-child(1) { width: 300px; height: 40px; top: 20%; left: 5%; }
.plx-02__cloud:nth-child(2) { width: 200px; height: 30px; top: 35%; left: 60%; background: rgba(255,200,100,0.08); }
.plx-02__cloud:nth-child(3) { width: 400px; height: 50px; top: 50%; left: 20%; }
.plx-02__cloud:nth-child(4) { width: 250px; height: 35px; top: 60%; left: 50%; background: rgba(255,150,50,0.1); }

/* Mountain layers — SVG inline */
.plx-02__mtn-far {
  height: 45vh;
}
.plx-02__mtn-mid {
  height: 38vh;
}
.plx-02__mtn-near {
  height: 30vh;
}

/* Tree lines */
.plx-02__trees-far {
  height: 22vh;
}
.plx-02__trees-near {
  height: 16vh;
}

/* Ground */
.plx-02__ground {
  height: 12vh;
  background: linear-gradient(to bottom, #0a140a, #050a05);
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* Fog band */
.plx-02__fog {
  position: absolute;
  height: 100px;
  width: 120%;
  left: -10%;
  background: linear-gradient(to bottom, transparent, rgba(196,169,122,0.18) 50%, transparent);
  filter: blur(12px);
  will-change: transform;
}
.plx-02__fog--a { bottom: 20%; }
.plx-02__fog--b { bottom: 12%; opacity: 0.6; }

/* ── Content overlay ── */
.plx-02__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  text-align: center;
  padding: 20px;
  will-change: transform;
}

.plx-02__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(40px, 9vw, 110px);
  font-weight: 900;
  color: #fff;
  line-height: 0.9;
  text-shadow:
    0 0 40px rgba(232,93,42,0.5),
    0 2px 60px rgba(0,0,0,0.8);
  letter-spacing: 0.04em;
}

.plx-02__title em {
  font-style: normal;
  display: block;
  font-size: 0.35em;
  letter-spacing: 0.3em;
  font-weight: 400;
  color: rgba(255,214,128,0.85);
  text-shadow: 0 0 20px rgba(245,166,35,0.6);
  margin-bottom: 12px;
}

.plx-02__divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,214,128,0.6), transparent);
  margin: 24px auto;
}

.plx-02__tagline {
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  max-width: 380px;
  line-height: 1.8;
}

/* ── Below-fold narrative ── */
.plx-02__narrative {
  background: #050a05;
  padding: 100px 40px;
  text-align: center;
}

.plx-02__narrative h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 4vw, 48px);
  color: #f0d080;
  margin-bottom: 20px;
}

.plx-02__narrative p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.45);
  max-width: 600px;
  margin: 0 auto;
}

/* Layer depth badges */
.plx-02__layers-ui {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plx-02__layer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: default;
  transition: all 0.3s;
  position: relative;
}

.plx-02__layer-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

.plx-02__layer-dot:hover {
  background: rgba(245,166,35,0.9);
  transform: scale(1.8);
}
.plx-02__layer-dot:hover::after { opacity: 1; }

@media (max-width: 600px) {
  .plx-02__layers-ui { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plx-02__stars,
  .plx-02__moon,
  .plx-02__sun,
  .plx-02__clouds,
  .plx-02__mtn-far,
  .plx-02__mtn-mid,
  .plx-02__mtn-near,
  .plx-02__trees-far,
  .plx-02__trees-near,
  .plx-02__fog,
  .plx-02__overlay { transform: none !important; }
}
```

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

  const layers = Array.from(root.querySelectorAll('[data-plx]')).map(el => ({
    el,
    speed: parseFloat(el.dataset.plx)
  }));

  let ticking = false;

  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const sy = window.scrollY;
      layers.forEach(({ el, speed }) => {
        el.style.transform = `translateY(${sy * speed}px)`;
      });
      ticking = false;
    });
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

### 03. CSS Sticky Parallax Sections

**Type:** CSS + JS
**Description:** Five-chapter sticky-scroll narrative. Each chapter occupies 300vh with a position:sticky panel that tracks its own scroll progress: background scale, geometric shape rotation, inner grid translation, and headline drift are all driven by a live progress ratio. Fixed accent-bar progress indicator and chapter dot-nav. Fraunces display + DM Sans body. Distinct hue per chapter.

**HTML:**
```html
<div class="plx-03">

  <div class="plx-03__progress" id="plx03-progress"></div>

  <div class="plx-03__dots" id="plx03-dots">
    <div class="plx-03__dot is-active"></div>
    <div class="plx-03__dot"></div>
    <div class="plx-03__dot"></div>
    <div class="plx-03__dot"></div>
    <div class="plx-03__dot"></div>
  </div>

  <!-- Chapter 1 -->
  <div class="plx-03__chapter plx-03__chapter--1">
    <div class="plx-03__sticky">
      <div class="plx-03__bg" data-bg></div>
      <div class="plx-03__shape" data-shape></div>
      <div class="plx-03__grid" data-grid>
        <svg viewBox="0 0 1440 900" xmlns="http://www.w3.org/2000/svg">
          <defs><pattern id="g1" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M60 0L0 0 0 60" fill="none" stroke="#c084fc" stroke-width="1"/></pattern></defs>
          <rect width="100%" height="100%" fill="url(#g1)"/>
        </svg>
      </div>
      <div class="plx-03__content" data-content>
        <div class="plx-03__num">01</div>
        <div class="plx-03__text">
          <span class="plx-03__label">Concept · Vision</span>
          <h2 class="plx-03__heading">Where does an <i>idea</i> begin?</h2>
          <p class="plx-03__body">Every landmark design starts with a restless question. We trace the edges of possibility before a single line is drawn, mapping the territory of what could exist.</p>
          <span class="plx-03__pill">Explore Origins</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Chapter 2 -->
  <div class="plx-03__chapter plx-03__chapter--2">
    <div class="plx-03__sticky">
      <div class="plx-03__bg" data-bg></div>
      <div class="plx-03__shape" data-shape></div>
      <div class="plx-03__grid" data-grid>
        <svg viewBox="0 0 1440 900" xmlns="http://www.w3.org/2000/svg">
          <defs><pattern id="g2" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="0.8" fill="#34d399"/></pattern></defs>
          <rect width="100%" height="100%" fill="url(#g2)"/>
        </svg>
      </div>
      <div class="plx-03__content" data-content>
        <div class="plx-03__num">02</div>
        <div class="plx-03__text">
          <span class="plx-03__label">Research · Systems</span>
          <h2 class="plx-03__heading">Structure is the <i>silent</i> language.</h2>
          <p class="plx-03__body">Beneath every fluid interaction is an architecture of intent. We build systems that behave with purpose — grids that breathe, type scales that sing, spacing that creates rhythm.</p>
          <span class="plx-03__pill">See the System</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Chapter 3 -->
  <div class="plx-03__chapter plx-03__chapter--3">
    <div class="plx-03__sticky">
      <div class="plx-03__bg" data-bg></div>
      <div class="plx-03__shape" data-shape></div>
      <div class="plx-03__grid" data-grid>
        <svg viewBox="0 0 1440 900" xmlns="http://www.w3.org/2000/svg">
          <defs><pattern id="g3" width="30" height="30" patternUnits="userSpaceOnUse"><path d="M15 0L30 15L15 30L0 15Z" fill="none" stroke="#fb7185" stroke-width="0.6"/></pattern></defs>
          <rect width="100%" height="100%" fill="url(#g3)"/>
        </svg>
      </div>
      <div class="plx-03__content" data-content>
        <div class="plx-03__num">03</div>
        <div class="plx-03__text">
          <span class="plx-03__label">Craft · Emotion</span>
          <h2 class="plx-03__heading">Design should make you <i>feel</i> something.</h2>
          <p class="plx-03__body">The best interfaces don't just work — they make you feel cared for. Every micro-interaction is a tiny handshake, a signal that someone thought deeply about your experience.</p>
          <span class="plx-03__pill">Feel the Craft</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Chapter 4 -->
  <div class="plx-03__chapter plx-03__chapter--4">
    <div class="plx-03__sticky">
      <div class="plx-03__bg" data-bg></div>
      <div class="plx-03__shape" data-shape></div>
      <div class="plx-03__grid" data-grid>
        <svg viewBox="0 0 1440 900" xmlns="http://www.w3.org/2000/svg">
          <defs><pattern id="g4" width="80" height="80" patternUnits="userSpaceOnUse"><path d="M0 40 H80 M40 0 V80" stroke="#60a5fa" stroke-width="0.4" fill="none"/><circle cx="40" cy="40" r="2" fill="#60a5fa" opacity="0.5"/></pattern></defs>
          <rect width="100%" height="100%" fill="url(#g4)"/>
        </svg>
      </div>
      <div class="plx-03__content" data-content>
        <div class="plx-03__num">04</div>
        <div class="plx-03__text">
          <span class="plx-03__label">Technology · Precision</span>
          <h2 class="plx-03__heading">Code is a <i>creative</i> material.</h2>
          <p class="plx-03__body">We treat the browser as a canvas. CSS transforms become choreography. JavaScript becomes conversation. The medium itself becomes a means of expression.</p>
          <span class="plx-03__pill">Read the Code</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Chapter 5 -->
  <div class="plx-03__chapter plx-03__chapter--5">
    <div class="plx-03__sticky">
      <div class="plx-03__bg" data-bg></div>
      <div class="plx-03__shape" data-shape></div>
      <div class="plx-03__grid" data-grid>
        <svg viewBox="0 0 1440 900" xmlns="http://www.w3.org/2000/svg">
          <defs><pattern id="g5" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M25 0L50 25L25 50L0 25Z" fill="none" stroke="#fbbf24" stroke-width="0.5"/></pattern></defs>
          <rect width="100%" height="100%" fill="url(#g5)"/>
        </svg>
      </div>
      <div class="plx-03__content" data-content>
        <div class="plx-03__num">05</div>
        <div class="plx-03__text">
          <span class="plx-03__label">Legacy · Future</span>
          <h2 class="plx-03__heading">The best work <i>outlasts</i> its moment.</h2>
          <p class="plx-03__body">Trends are temporary. We pursue the permanent — the design decisions that will feel right in twenty years, that age like a well-edited sentence, never a marketing slogan.</p>
          <span class="plx-03__pill">Begin Something</span>
        </div>
      </div>
    </div>
  </div>

</div>
```

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

.plx-03 {
  --c1: #1a0a2e;
  --c2: #0d2818;
  --c3: #1f0a0a;
  --c4: #0a1a2e;
  --c5: #1a1a0a;
  --text: #f0ede8;
  --acc1: #c084fc;
  --acc2: #34d399;
  --acc3: #fb7185;
  --acc4: #60a5fa;
  --acc5: #fbbf24;
  font-family: 'DM Sans', sans-serif;
  background: #080510;
  color: var(--text);
}

/* Each "chapter" is a tall scroll trigger */
.plx-03__chapter {
  position: relative;
  height: 300vh;
}

/* The sticky panel */
.plx-03__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Background fill per chapter */
.plx-03__bg {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.plx-03__chapter--1 .plx-03__bg { background: radial-gradient(ellipse at 30% 70%, #4c1d95 0%, #1a0a2e 60%); }
.plx-03__chapter--2 .plx-03__bg { background: radial-gradient(ellipse at 70% 30%, #064e3b 0%, #0d2818 60%); }
.plx-03__chapter--3 .plx-03__bg { background: radial-gradient(ellipse at 50% 50%, #7f1d1d 0%, #1f0a0a 60%); }
.plx-03__chapter--4 .plx-03__bg { background: radial-gradient(ellipse at 20% 80%, #1e3a5f 0%, #0a1a2e 60%); }
.plx-03__chapter--5 .plx-03__bg { background: radial-gradient(ellipse at 80% 20%, #78350f 0%, #1a1a0a 60%); }

/* Abstract shape / illustration per chapter */
.plx-03__shape {
  position: absolute;
  will-change: transform;
  border-radius: 50%;
  filter: blur(1px);
}

.plx-03__chapter--1 .plx-03__shape {
  width: 520px; height: 520px;
  right: -80px; bottom: -80px;
  background: conic-gradient(from 0deg, #c084fc, #818cf8, #c084fc);
  opacity: 0.25;
}
.plx-03__chapter--2 .plx-03__shape {
  width: 460px; height: 460px;
  left: -60px; top: -60px;
  background: conic-gradient(from 120deg, #34d399, #059669, #34d399);
  border-radius: 40% 60% 70% 30%;
  opacity: 0.3;
}
.plx-03__chapter--3 .plx-03__shape {
  width: 500px; height: 500px;
  right: 10%;
  /* Vertical centering uses calc() on the top property instead
     of transform: translateY(-50%) — the JS parallax handler
     clobbers style.transform with translateY() rotate() on every
     scroll, which would erase the centering and drop the blob
     off the bottom of the panel. */
  top: calc(50% - 250px);
  background: conic-gradient(from 240deg, #fb7185, #e11d48, #fb7185);
  border-radius: 30% 70% 40% 60%;
  opacity: 0.25;
}
.plx-03__chapter--4 .plx-03__shape {
  width: 440px; height: 440px;
  left: 5%; bottom: 5%;
  background: conic-gradient(from 60deg, #60a5fa, #2563eb, #60a5fa);
  border-radius: 60% 40% 30% 70%;
  opacity: 0.3;
}
.plx-03__chapter--5 .plx-03__shape {
  width: 480px; height: 480px;
  right: -40px; top: -40px;
  background: conic-gradient(from 180deg, #fbbf24, #d97706, #fbbf24);
  border-radius: 45% 55%;
  opacity: 0.28;
}

/* Grid lines — parallax at different speed */
.plx-03__grid {
  position: absolute;
  inset: 0;
  will-change: transform;
  opacity: 0.07;
}
.plx-03__grid svg { width: 100%; height: 100%; }

/* Content layer */
.plx-03__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 60px;
  will-change: transform;
}

/* Number */
.plx-03__num {
  font-family: 'Fraunces', serif;
  font-size: clamp(160px, 22vw, 280px);
  font-weight: 900;
  line-height: 1;
  opacity: 0.06;
  position: absolute;
  right: 40px;
  bottom: 20px;
  letter-spacing: -0.05em;
}

.plx-03__chapter--1 .plx-03__num { color: var(--acc1); }
.plx-03__chapter--2 .plx-03__num { color: var(--acc2); }
.plx-03__chapter--3 .plx-03__num { color: var(--acc3); }
.plx-03__chapter--4 .plx-03__num { color: var(--acc4); }
.plx-03__chapter--5 .plx-03__num { color: var(--acc5); }

/* Text block */
.plx-03__text {
  max-width: 600px;
  z-index: 2;
}

.plx-03__label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 5px 14px;
  border: 1px solid;
  border-radius: 2px;
  opacity: 0.7;
}

.plx-03__chapter--1 .plx-03__label { color: var(--acc1); border-color: var(--acc1); }
.plx-03__chapter--2 .plx-03__label { color: var(--acc2); border-color: var(--acc2); }
.plx-03__chapter--3 .plx-03__label { color: var(--acc3); border-color: var(--acc3); }
.plx-03__chapter--4 .plx-03__label { color: var(--acc4); border-color: var(--acc4); }
.plx-03__chapter--5 .plx-03__label { color: var(--acc5); border-color: var(--acc5); }

.plx-03__heading {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 24px;
}

.plx-03__chapter--1 .plx-03__heading i { font-style: italic; color: var(--acc1); }
.plx-03__chapter--2 .plx-03__heading i { font-style: italic; color: var(--acc2); }
.plx-03__chapter--3 .plx-03__heading i { font-style: italic; color: var(--acc3); }
.plx-03__chapter--4 .plx-03__heading i { font-style: italic; color: var(--acc4); }
.plx-03__chapter--5 .plx-03__heading i { font-style: italic; color: var(--acc5); }

.plx-03__body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(240,237,232,0.6);
  max-width: 480px;
  margin-bottom: 36px;
}

.plx-03__pill {
  display: inline-block;
  padding: 12px 32px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.2s;
}
.plx-03__pill:hover { transform: scale(1.04); }

.plx-03__chapter--1 .plx-03__pill { background: var(--acc1); color: #1a0a2e; }
.plx-03__chapter--2 .plx-03__pill { background: var(--acc2); color: #0d2818; }
.plx-03__chapter--3 .plx-03__pill { background: var(--acc3); color: #1f0a0a; }
.plx-03__chapter--4 .plx-03__pill { background: var(--acc4); color: #0a1a2e; }
.plx-03__chapter--5 .plx-03__pill { background: var(--acc5); color: #1a1a0a; }

/* Progress bar */
.plx-03__progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #c084fc, #34d399, #fb7185, #60a5fa, #fbbf24);
  z-index: 100;
  width: 0%;
  transition: width 0.1s linear;
}

/* Chapter indicator dots */
.plx-03__dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plx-03__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s;
}
.plx-03__dot.is-active {
  background: rgba(255,255,255,0.9);
  transform: scale(1.5);
}

/* Clip edge for stacking illusion */
.plx-03__sticky {
  clip-path: inset(0);
}

@media (max-width: 768px) {
  .plx-03__content { padding: 30px; }
  .plx-03__num { font-size: 120px; right: 20px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .plx-03__bg, .plx-03__shape, .plx-03__grid, .plx-03__content { transform: none !important; }
  .plx-03__progress { transition: none; }
}
```

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

  const progress = document.getElementById('plx03-progress');
  const dots = Array.from(document.querySelectorAll('.plx-03__dot'));
  const chapters = Array.from(root.querySelectorAll('.plx-03__chapter'));

  let ticking = false;

  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const sy = window.scrollY;
      const totalH = document.documentElement.scrollHeight - window.innerHeight;

      // Progress bar
      if (progress) progress.style.width = (sy / totalH * 100) + '%';

      // Per-chapter parallax
      chapters.forEach((ch, i) => {
        const rect = ch.getBoundingClientRect();
        const viewH = window.innerHeight;

        // dot indicator
        if (rect.top < viewH * 0.5 && rect.bottom > viewH * 0.5) {
          dots.forEach(d => d.classList.remove('is-active'));
          if (dots[i]) dots[i].classList.add('is-active');
        }

        // Only compute if near viewport
        if (rect.bottom < -viewH || rect.top > viewH * 2) return;

        const bg = ch.querySelector('[data-bg]');
        const shape = ch.querySelector('[data-shape]');
        const grid = ch.querySelector('[data-grid]');
        const content = ch.querySelector('[data-content]');

        // Progress through sticky: 0 at entry, 1 at exit
        const stickyProgress = Math.max(0, Math.min(1, -rect.top / (ch.offsetHeight - viewH)));

        if (bg) bg.style.transform = `scale(${1 + stickyProgress * 0.08}) translateY(${stickyProgress * -30}px)`;
        if (shape) shape.style.transform = `translateY(${stickyProgress * -60}px) rotate(${stickyProgress * 20}deg)`;
        if (grid) grid.style.transform = `translateY(${stickyProgress * 40}px)`;
        if (content) content.style.transform = `translateY(${stickyProgress * -20}px)`;
      });

      ticking = false;
    });
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

### 04. Multi-Scene Parallax Scrolling

**Type:** CSS + JS
**Description:** Five full-bleed sections (Cosmos, Desert, Ocean, Forest, Finale) each with a slower-moving SVG background driving the parallax via a requestAnimationFrame-throttled scroll listener. Sticky-pinned scenes, smooth scroll-to-scene nav dots, dark cosmos-to-forest palette. Playfair Display + Outfit typography.

**HTML:**
```html
<div class="plx-04" id="plx04">

  <nav class="plx-04__nav" aria-label="Scenes">
    <button class="plx-04__nav-dot is-active" aria-label="Scene 1" data-scene="0"></button>
    <button class="plx-04__nav-dot" aria-label="Scene 2" data-scene="1"></button>
    <button class="plx-04__nav-dot" aria-label="Scene 3" data-scene="2"></button>
    <button class="plx-04__nav-dot" aria-label="Scene 4" data-scene="3"></button>
    <button class="plx-04__nav-dot" aria-label="Scene 5" data-scene="4"></button>
  </nav>

  <!-- S1: Cosmos -->
  <div class="plx-04__scene plx-04__s1">
    <div class="plx-04__sticky">
      <div class="plx-04__bg" data-parallax="0.35"></div>
      <div class="plx-04__fg">
        <p class="plx-04__tag">CSS Parallax · Five Worlds</p>
        <h1 class="plx-04__h1">The <em>infinite</em><br>canvas awaits</h1>
        <p class="plx-04__p">Five worlds, each with its own sky. A full-page parallax journey — backgrounds drift at their own speed while you move through them.</p>
        <div class="plx-04__accent"></div>
        <div class="plx-04__scroll-hint">
          <span>Scroll</span>
          <div class="plx-04__arrow"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- S2: Desert -->
  <div class="plx-04__scene plx-04__s2">
    <div class="plx-04__sticky">
      <div class="plx-04__bg" data-parallax="0.4"></div>
      <div class="plx-04__fg">
        <p class="plx-04__num">02 / Desert</p>
        <h2 class="plx-04__h">Heat &amp;<br><em>Silence.</em></h2>
        <p class="plx-04__p">The desert teaches patience. Vast emptiness between two points — just the relentless geometry of distance and will.</p>
      </div>
    </div>
  </div>

  <!-- S3: Ocean -->
  <div class="plx-04__scene plx-04__s3">
    <div class="plx-04__sticky">
      <div class="plx-04__bg" data-parallax="0.3"></div>
      <div class="plx-04__fg">
        <p class="plx-04__num">03 / Deep Ocean</p>
        <h2 class="plx-04__h">Pressure<br>builds <em>diamonds.</em></h2>
        <p class="plx-04__p">At depth, things become transparent. Clarity is not found in brightness — it's found in the dark, still water far below.</p>
      </div>
    </div>
  </div>

  <!-- S4: Forest -->
  <div class="plx-04__scene plx-04__s4">
    <div class="plx-04__sticky">
      <div class="plx-04__bg" data-parallax="0.45"></div>
      <div class="plx-04__fg">
        <p class="plx-04__num">04 / Ancient Forest</p>
        <h2 class="plx-04__h"><em>Roots</em><br>remember<br>everything.</h2>
        <p class="plx-04__p">The oldest trees have no memory of being seeds. They simply became what they were always going to be — slowly, in the green quiet.</p>
      </div>
    </div>
  </div>

  <!-- S5: Finale -->
  <div class="plx-04__scene plx-04__s5">
    <div class="plx-04__sticky">
      <div class="plx-04__bg" data-parallax="0.35"></div>
      <div class="plx-04__fg">
        <p class="plx-04__num">05 / Origin</p>
        <h2 class="plx-04__h">Every end<br>is an <em>origin.</em></h2>
        <p class="plx-04__p">The scroll ends. The journey doesn't. What you build with this moment is the only thing that matters now.</p>
      </div>
    </div>
  </div>

</div>
```

**CSS:**
```css
.plx-04, .plx-04 *, .plx-04 *::before, .plx-04 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.plx-04 {
  font-family: 'Outfit', sans-serif;
  background: #04020f;
  color: #f0ede8;
  /* overflow:clip not overflow:hidden — see Demo 09 + 10 fixes
     (commits 876bc78, this one). overflow:hidden creates a scroll
     context that breaks position:sticky on descendants. */
  overflow-x: clip;
}

/* Each section is a sticky-pinned scene: 200vh outer + 100vh
   sticky inner = 100vh of pin runway during which the bg parallax
   animation plays. Sticky pinning works correctly because the
   root .plx-04 uses overflow-x:clip (not :hidden), which would
   have broken the sticky containment chain. */
.plx-04__scene {
  position: relative;
  height: 200vh;
}

/* Each scene's outer container has a fallback bg color matching
   its theme. Without these, the 100vh of "post-sticky-release"
   scroll runway at the bottom of each scene's 200vh container
   would show the body bg (#04020f), creating a dark band between
   scenes as the visitor scrolls between them. The per-scene
   theme colors below match the dominant midtone of each scene's
   gradient bg, so the transition reads as one continuous scene
   color instead of a dark stripe gap. */
.plx-04__s1 { background: #07041a; }
.plx-04__s2 { background: #3d1800; }
.plx-04__s3 { background: #002040; }
.plx-04__s4 { background: #071407; }
.plx-04__s5 { background: #0e0028; }

.plx-04__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Background layer — moves slower than scroll (parallax effect via JS) */
.plx-04__bg {
  position: absolute;
  inset: -25%;
  will-change: transform;
}

/* Content — centered, normal scroll speed */
.plx-04__fg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  z-index: 5;
}

/* ── Scene 1: Cosmos ── */
.plx-04__s1 .plx-04__bg {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(120,60,200,0.5) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 75%, rgba(30,80,200,0.4) 0%, transparent 45%),
    linear-gradient(135deg, #04020f 0%, #0a0520 100%);
}
.plx-04__s1 .plx-04__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 20%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 6%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 18%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 45%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 55%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 68%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 40%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 72%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 85%, rgba(255,240,200,0.9) 0%, transparent 100%);
}
.plx-04__s1 .plx-04__bg::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  top: 18%; right: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e1 0%, #ffe082 60%);
  box-shadow: 0 0 60px rgba(255,220,130,0.6), 0 0 140px rgba(255,180,80,0.25);
}

/* ── Scene 2: Desert ── */
.plx-04__s2 .plx-04__bg {
  background:
    radial-gradient(ellipse at 55% 30%, rgba(200,80,20,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(140,60,0,0.3) 0%, transparent 45%),
    linear-gradient(160deg, #1a0800 0%, #3d1800 40%, #6b2d00 100%);
}
.plx-04__s2 .plx-04__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,150,50,0.04) 40px, rgba(255,150,50,0.04) 41px),
    repeating-linear-gradient(-45deg, transparent, transparent 80px, rgba(200,100,20,0.03) 80px, rgba(200,100,20,0.03) 81px);
}
.plx-04__s2 .plx-04__bg::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: -5%;
  right: -5%;
  height: 35%;
  background: repeating-linear-gradient(
    0deg,
    rgba(180,80,20,0.08) 0px,
    rgba(180,80,20,0.12) 4px,
    transparent 4px,
    transparent 18px
  );
  transform: skewY(-3deg);
}

/* ── Scene 3: Ocean ── */
.plx-04__s3 .plx-04__bg {
  background:
    radial-gradient(ellipse at 25% 55%, rgba(0,120,200,0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 25%, rgba(0,200,160,0.25) 0%, transparent 45%),
    linear-gradient(180deg, #001020 0%, #002040 55%, #003060 100%);
}
.plx-04__s3 .plx-04__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-30deg, transparent, transparent 50px, rgba(0,150,255,0.05) 50px, rgba(0,150,255,0.05) 52px);
}
.plx-04__s3 .plx-04__bg::after {
  content: '';
  position: absolute;
  top: 40%;
  left: -5%;
  right: -5%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,200,180,0.4), transparent);
  box-shadow: 0 20px 0 rgba(0,150,200,0.1), 0 -20px 0 rgba(0,150,200,0.1);
}

/* ── Scene 4: Forest ── */
.plx-04__s4 .plx-04__bg {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(80,200,70,0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 60%, rgba(40,120,40,0.2) 0%, transparent 45%),
    linear-gradient(180deg, #020b02 0%, #071407 55%, #0a1e0a 100%);
}
.plx-04__s4 .plx-04__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(50,150,50,0.04) 80px, rgba(50,150,50,0.04) 82px),
    repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(30,100,30,0.04) 60px, rgba(30,100,30,0.04) 62px);
}

/* ── Scene 5: Finale ── */
.plx-04__s5 .plx-04__bg {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(200,80,255,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 20%, rgba(80,120,255,0.25) 0%, transparent 45%),
    linear-gradient(135deg, #08001a 0%, #180030 100%);
}

/* ── Typography ── */
.plx-04__tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
}

.plx-04__num {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 16px;
}

.plx-04__h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(52px, 11vw, 140px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.plx-04__h1 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plx-04__h {
  font-family: 'Playfair Display', serif;
  font-size: clamp(42px, 8vw, 100px);
  font-weight: 700;
  line-height: 0.95;
}
.plx-04__s2 .plx-04__h em { color: #fb923c; font-style: italic; }
.plx-04__s3 .plx-04__h em { color: #38bdf8; font-style: italic; }
.plx-04__s4 .plx-04__h em { color: #86efac; font-style: italic; }
.plx-04__s5 .plx-04__h em { color: #e879f9; font-style: italic; }

.plx-04__p {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.5;
  max-width: 480px;
}

.plx-04__scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.plx-04__arrow {
  width: 18px; height: 18px;
  border-right: 1px solid rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transform: rotate(45deg);
  animation: plx-04-bounce 1.6s ease-in-out infinite;
}
@keyframes plx-04-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(6px); }
}

/* Nav dots */
.plx-04__nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plx-04__nav-dot {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.plx-04__nav-dot.is-active {
  background: rgba(255,255,255,0.85);
  transform: scale(1.7);
}

/* Accent lines that appear at each scene */
.plx-04__accent {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  margin: 28px auto 0;
}

@media (max-width: 600px) {
  .plx-04__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plx-04__bg { transform: none !important; }
  .plx-04__arrow { animation: none; }
}
```

**JS:**
```js
(() => {
  const root = document.getElementById('plx04');
  if (!root) return;

  const bgs = Array.from(root.querySelectorAll('[data-parallax]')).map(el => ({
    el,
    speed: parseFloat(el.dataset.parallax),
    sticky: el.closest('.plx-04__sticky'),
    scene: el.closest('.plx-04__scene'),
  }));

  const dots = Array.from(root.querySelectorAll('.plx-04__nav-dot'));
  const scenes = Array.from(root.querySelectorAll('.plx-04__scene'));

  // Nav dot click — scroll to scene start
  dots.forEach((dot, i) => {
    dot.addEventListener('click', () => {
      scenes[i]?.scrollIntoView({ behavior: 'smooth' });
    });
  });

  let ticking = false;
  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const sy = window.scrollY;
      const vh = window.innerHeight;

      // Parallax: bg moves slower than scroll
      bgs.forEach(({ el, speed, scene }) => {
        const rect = scene.getBoundingClientRect();
        if (rect.bottom < -vh || rect.top > vh * 2) { ticking = false; return; }
        // Progress within the scene's sticky section
        const sceneTop = scene.offsetTop;
        const progress = sy - sceneTop;
        el.style.transform = `translateY(${progress * speed * -1}px)`;
      });

      // Active dot
      let activeI = 0;
      scenes.forEach((s, i) => {
        const r = s.getBoundingClientRect();
        if (r.top <= vh * 0.5) activeI = i;
      });
      dots.forEach((d, i) => d.classList.toggle('is-active', i === activeI));

      ticking = false;
    });
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

### 05. CSS Parallax Image Grid / Gallery

**Type:** CSS + JS
**Description:** Twelve-cell asymmetric CSS Grid portfolio where each cell's inner layer translateY at speeds from 0.10× to 0.38× on scroll — creating subtle but convincing photo drift inside bounded containers. Abstract colour-field fills, hover captions, filter tab bar. Syne + Syne Mono. Clean white gallery aesthetic punctuated by oversized index numerals.

**HTML:**
```html
<div class="plx-05">

  <header class="plx-05__header">
    <span class="plx-05__brand">Forma Gallery</span>
    <span class="plx-05__tagline">12 works / parallax grid</span>
  </header>

  <div class="plx-05__hero-text">
    <h1>A gallery<br>built on <em>depth</em><br>&amp; movement.</h1>
  </div>

  <div class="plx-05__filters">
    <button class="plx-05__filter is-active">All Works</button>
    <button class="plx-05__filter">Abstract</button>
    <button class="plx-05__filter">Landscape</button>
    <button class="plx-05__filter">Portrait</button>
    <button class="plx-05__filter">Editorial</button>
  </div>

  <div class="plx-05__count">Showing 12 of 12 works</div>

  <div class="plx-05__grid" id="plx05-grid">

    <div class="plx-05__cell" data-speed="0.18">
      <div class="plx-05__inner"></div>
      <span class="plx-05__badge">Featured</span>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Terracotta Dawn</span>
        <span class="plx-05__caption-sub">Abstract · 2024 · Oil on linen</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.25">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Verde Study I</span>
        <span class="plx-05__caption-sub">Landscape · 2024</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.12">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Midnight Architecture</span>
        <span class="plx-05__caption-sub">Editorial · 2024</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.32">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Mauve Hour</span>
        <span class="plx-05__caption-sub">Abstract · 2023</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.2">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Sand Drift</span>
        <span class="plx-05__caption-sub">Landscape · 2023</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.38">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Void</span>
        <span class="plx-05__caption-sub">Minimal · 2024</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.15">
      <div class="plx-05__inner"></div>
      <span class="plx-05__badge">New</span>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Forest Floor</span>
        <span class="plx-05__caption-sub">Landscape · 2024</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.28">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Pale Geometry</span>
        <span class="plx-05__caption-sub">Abstract · 2023</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.1">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Chromatic Wheel</span>
        <span class="plx-05__caption-sub">Abstract · 2024</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.35">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Ember Study</span>
        <span class="plx-05__caption-sub">Portrait · 2023</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.22">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Ochre Valley</span>
        <span class="plx-05__caption-sub">Landscape · 2024</span>
      </div>
    </div>

    <div class="plx-05__cell" data-speed="0.16">
      <div class="plx-05__inner"></div>
      <div class="plx-05__caption">
        <span class="plx-05__caption-title">Teal Descent</span>
        <span class="plx-05__caption-sub">Abstract · 2024</span>
      </div>
    </div>

  </div>

</div>
```

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

.plx-05 {
  --ink: #0d0d0d;
  --paper: #f2ede7;
  --sand: #d4c4a8;
  --terracotta: #c4623a;
  --sage: #7a9e7e;
  --navy: #1e2d45;
  --lavender: #8b7ec8;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Syne', sans-serif;
  overflow-x: hidden;
}

/* ── Header ── */
.plx-05__header {
  padding: 80px 60px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(13,13,13,0.12);
}

.plx-05__brand {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.plx-05__tagline {
  font-family: 'Syne Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.45;
}

/* ── Hero text ── */
.plx-05__hero-text {
  padding: 80px 60px 0;
}

.plx-05__hero-text h1 {
  font-size: clamp(52px, 10vw, 130px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.03em;
  max-width: 900px;
}

.plx-05__hero-text h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--terracotta);
}

/* ── Masonry-style grid ── */
.plx-05__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 16px;
  padding: 60px 60px;
}

/* Each cell is a parallax image container */
.plx-05__cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
}

/* Cell size variations */
.plx-05__cell:nth-child(1)  { grid-column: 1 / 6;  grid-row: 1 / 7; }
.plx-05__cell:nth-child(2)  { grid-column: 6 / 9;  grid-row: 1 / 5; }
.plx-05__cell:nth-child(3)  { grid-column: 9 / 13; grid-row: 1 / 6; }
.plx-05__cell:nth-child(4)  { grid-column: 6 / 9;  grid-row: 5 / 9; }
.plx-05__cell:nth-child(5)  { grid-column: 9 / 12; grid-row: 6 / 10; }
.plx-05__cell:nth-child(6)  { grid-column: 12 / 13; grid-row: 6 / 11; }
.plx-05__cell:nth-child(7)  { grid-column: 1 / 5;  grid-row: 7 / 12; }
.plx-05__cell:nth-child(8)  { grid-column: 5 / 9;  grid-row: 9 / 13; }
.plx-05__cell:nth-child(9)  { grid-column: 9 / 13; grid-row: 10 / 14; }
.plx-05__cell:nth-child(10) { grid-column: 1 / 4;  grid-row: 12 / 15; }
.plx-05__cell:nth-child(11) { grid-column: 4 / 9;  grid-row: 13 / 17; }
.plx-05__cell:nth-child(12) { grid-column: 9 / 13; grid-row: 14 / 18; }

/* Inner element that moves with parallax. inset: -40% gives the
   inner 40% extra on every side beyond the cell, providing buffer
   for the JS translateY without revealing the cell's edge.
   (Previously -25% which clipped at extreme scroll positions.) */
.plx-05__inner {
  position: absolute;
  inset: -40%;
  will-change: transform;
  background-size: cover;
  background-position: center;
  transition: filter 0.5s;
}

/* Color-based abstract fills (no real images) */
.plx-05__cell:nth-child(1)  .plx-05__inner { background: linear-gradient(145deg, #c4623a 0%, #8b3a1e 50%, #1e2d45 100%); }
.plx-05__cell:nth-child(2)  .plx-05__inner { background: linear-gradient(200deg, #7a9e7e 0%, #4a7a4e 70%); }
.plx-05__cell:nth-child(3)  .plx-05__inner { background: linear-gradient(110deg, #1e2d45 0%, #2a4070 50%, #8b7ec8 100%); }
.plx-05__cell:nth-child(4)  .plx-05__inner { background: radial-gradient(circle at 40% 60%, #8b7ec8 0%, #4a3a80 100%); }
.plx-05__cell:nth-child(5)  .plx-05__inner { background: linear-gradient(160deg, #d4c4a8 0%, #c4623a 100%); }
.plx-05__cell:nth-child(6)  .plx-05__inner { background: linear-gradient(180deg, #0d0d0d, #2a2a2a); }
.plx-05__cell:nth-child(7)  .plx-05__inner { background: radial-gradient(ellipse at 60% 40%, #7a9e7e 0%, #1e2d1e 100%); }
.plx-05__cell:nth-child(8)  .plx-05__inner { background: linear-gradient(135deg, #f2ede7 0%, #d4c4a8 40%, #c4623a 100%); }
.plx-05__cell:nth-child(9)  .plx-05__inner { background: conic-gradient(from 30deg, #1e2d45, #8b7ec8, #c4623a, #1e2d45); }
.plx-05__cell:nth-child(10) .plx-05__inner { background: linear-gradient(200deg, #c4623a 0%, #7a4020 100%); }
.plx-05__cell:nth-child(11) .plx-05__inner { background: radial-gradient(circle at 30% 70%, #d4c4a8 0%, #8b6a40 100%); }
.plx-05__cell:nth-child(12) .plx-05__inner { background: linear-gradient(160deg, #0d0d0d 0%, #1e2d45 50%, #7a9e7e 100%); }

/* Geometric overlays on inner */
.plx-05__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
}
.plx-05__cell:nth-child(odd) .plx-05__inner::after {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 20px);
}
.plx-05__cell:nth-child(even) .plx-05__inner::after {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, transparent 60%);
}

/* Overlay caption */
.plx-05__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s, transform 0.35s;
  z-index: 2;
}

.plx-05__cell:hover .plx-05__caption {
  opacity: 1;
  transform: translateY(0);
}

.plx-05__caption-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  display: block;
}

.plx-05__caption-sub {
  font-family: 'Syne Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
}

/* Badge on a few cells */
.plx-05__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  font-family: 'Syne Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 3;
  border-radius: 2px;
}

/* Hover scale on entire cell */
.plx-05__cell {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.plx-05__cell:hover {
  transform: scale(1.02);
  z-index: 10;
}

/* ── Filters row ── */
.plx-05__filters {
  display: flex;
  gap: 8px;
  padding: 0 60px 40px;
  flex-wrap: wrap;
}

.plx-05__filter {
  padding: 7px 18px;
  font-family: 'Syne Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(13,13,13,0.2);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--ink);
}

.plx-05__filter.is-active,
.plx-05__filter:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ── Count ── */
.plx-05__count {
  padding: 0 60px 20px;
  font-family: 'Syne Mono', monospace;
  font-size: 11px;
  opacity: 0.4;
  letter-spacing: 0.1em;
}

@media (max-width: 900px) {
  .plx-05__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 100px;
    padding: 30px;
  }
  .plx-05__cell:nth-child(1)  { grid-column: 1 / 3; grid-row: 1 / 4; }
  .plx-05__cell:nth-child(2)  { grid-column: 3 / 5; grid-row: 1 / 3; }
  .plx-05__cell:nth-child(3)  { grid-column: 3 / 5; grid-row: 3 / 5; }
  .plx-05__cell:nth-child(4)  { grid-column: 1 / 3; grid-row: 4 / 6; }
  .plx-05__cell:nth-child(5)  { grid-column: 3 / 5; grid-row: 5 / 7; }
  .plx-05__cell:nth-child(6)  { grid-column: 1 / 3; grid-row: 6 / 8; }
  .plx-05__cell:nth-child(7)  { grid-column: 3 / 5; grid-row: 7 / 9; }
  .plx-05__cell:nth-child(8)  { grid-column: 1 / 3; grid-row: 8 / 10; }
  .plx-05__cell:nth-child(9)  { grid-column: 3 / 5; grid-row: 9 / 11; }
  .plx-05__cell:nth-child(10) { grid-column: 1 / 3; grid-row: 10 / 12; }
  .plx-05__cell:nth-child(11) { grid-column: 3 / 5; grid-row: 11 / 13; }
  .plx-05__cell:nth-child(12) { grid-column: 1 / 5; grid-row: 13 / 15; }
  .plx-05__header, .plx-05__hero-text, .plx-05__filters, .plx-05__count { padding-left: 30px; padding-right: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .plx-05__inner { will-change: auto; transform: translateY(0) !important; }
  .plx-05__cell { transition: none; }
  .plx-05__caption { transition: none; }
}
```

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

  // Skip parallax entirely for visitors who prefer reduced motion.
  // The grid remains visible and scrollable; just no transform updates.
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  const cells = Array.from(root.querySelectorAll('.plx-05__cell[data-speed]')).map(el => ({
    el,
    inner: el.querySelector('.plx-05__inner'),
    speed: parseFloat(el.dataset.speed)
  }));

  // Multiplier applied to every cell's data-speed. Original speeds
  // (0.10-0.38 from the data attributes) produced too-subtle motion
  // — visitors reported "no effect" because cell-relative drift was
  // barely perceptible. ×2.5 gives roughly ±60-200px of inner
  // translation across the viewport traversal, which is clearly
  // visible without overrunning the new -40% inner buffer.
  const BOOST = 2.5;

  let ticking = false;

  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const viewH = window.innerHeight;
      cells.forEach(({ el, inner, speed }) => {
        const rect = el.getBoundingClientRect();
        const centerY = rect.top + rect.height / 2 - viewH / 2;
        if (inner) inner.style.transform = `translateY(${centerY * speed * BOOST * -1}px)`;
      });
      ticking = false;
    });
  }

  // Filter buttons (visual only)
  const filters = Array.from(root.querySelectorAll('.plx-05__filter'));
  filters.forEach(btn => {
    btn.addEventListener('click', () => {
      filters.forEach(b => b.classList.remove('is-active'));
      btn.classList.add('is-active');
    });
  });

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

### 06. CSS Horizontal Parallax Scroll

**Type:** CSS + JS
**Description:** Vertical scroll drives a five-panel horizontal track via requestAnimationFrame. Each panel carries four independent horizontal parallax bands — giant numeral bg, decorative text ribbon, foreground content card, and right-side SVG visual — gliding at −0.4× to +0.6× relative speed. Progress fill bar, slide counter. Space Grotesk + Space Mono on near-black with vivid accent per panel.

**HTML:**
```html
<div class="plx-06">
  <div class="plx-06__driver" id="plx06-driver">
    <div class="plx-06__sticky">

      <div class="plx-06__bar">
        <span class="plx-06__logo">Horizontal·PLX</span>
        <div class="plx-06__progress-track">
          <div class="plx-06__progress-fill" id="plx06-fill"></div>
        </div>
        <span class="plx-06__counter" id="plx06-counter">01 / 05</span>
      </div>

      <div class="plx-06__viewport">
        <div class="plx-06__track" id="plx06-track">

          <!-- Panel 1 -->
          <div class="plx-06__panel">
            <div class="plx-06__bg" data-plx-bg="-0.3"></div>
            <div class="plx-06__num-layer" data-plx-num="0.6">
              <span class="plx-06__big-num">01</span>
            </div>
            <div class="plx-06__shape-layer" data-plx-shape="0.2">
              <svg class="plx-06__shape-svg" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="200" cy="200" r="180" stroke="#c084fc" stroke-width="1"/>
                <circle cx="200" cy="200" r="120" stroke="#c084fc" stroke-width="0.5"/>
                <circle cx="200" cy="200" r="60" stroke="#c084fc" stroke-width="0.5"/>
                <line x1="20" y1="200" x2="380" y2="200" stroke="#c084fc" stroke-width="0.5"/>
                <line x1="200" y1="20" x2="200" y2="380" stroke="#c084fc" stroke-width="0.5"/>
                <line x1="73" y1="73" x2="327" y2="327" stroke="#c084fc" stroke-width="0.3"/>
                <line x1="327" y1="73" x2="73" y2="327" stroke="#c084fc" stroke-width="0.3"/>
              </svg>
            </div>
            <div class="plx-06__content" data-plx-content="-0.1">
              <span class="plx-06__panel-tag">Chapter One</span>
              <h2 class="plx-06__panel-title">Motion<br>Through<br>Space</h2>
              <p class="plx-06__panel-body">Vertical scroll drives horizontal travel. Each layer moves at its own speed — the background drifts, the number floats, the content holds firm. Depth from pure math.</p>
              <span class="plx-06__panel-num">01 / 05</span>
            </div>
            <div class="plx-06__hint is-visible" id="plx06-hint">
              <span>Scroll to travel</span>
              <div class="plx-06__hint-arr">
                <span></span><span></span><span></span>
              </div>
            </div>
          </div>

          <!-- Panel 2 -->
          <div class="plx-06__panel">
            <div class="plx-06__bg" data-plx-bg="-0.3"></div>
            <div class="plx-06__num-layer" data-plx-num="0.6">
              <span class="plx-06__big-num">02</span>
            </div>
            <div class="plx-06__shape-layer" data-plx-shape="0.2">
              <svg class="plx-06__shape-svg" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="40" y="40" width="320" height="320" stroke="#4ade80" stroke-width="1"/>
                <rect x="100" y="100" width="200" height="200" stroke="#4ade80" stroke-width="0.5" transform="rotate(15,200,200)"/>
                <rect x="140" y="140" width="120" height="120" stroke="#4ade80" stroke-width="0.5" transform="rotate(30,200,200)"/>
                <line x1="40" y1="40" x2="360" y2="360" stroke="#4ade80" stroke-width="0.3"/>
                <line x1="360" y1="40" x2="40" y2="360" stroke="#4ade80" stroke-width="0.3"/>
              </svg>
            </div>
            <div class="plx-06__content" data-plx-content="-0.1">
              <span class="plx-06__panel-tag">Chapter Two</span>
              <h2 class="plx-06__panel-title">Layers<br>in<br>Tension</h2>
              <p class="plx-06__panel-body">The background moves opposite to your scroll direction. The foreground barely shifts. The gap between them is where depth lives — created without a single CSS 3D property.</p>
              <span class="plx-06__panel-num">02 / 05</span>
            </div>
          </div>

          <!-- Panel 3 -->
          <div class="plx-06__panel">
            <div class="plx-06__bg" data-plx-bg="-0.3"></div>
            <div class="plx-06__num-layer" data-plx-num="0.6">
              <span class="plx-06__big-num">03</span>
            </div>
            <div class="plx-06__shape-layer" data-plx-shape="0.2">
              <svg class="plx-06__shape-svg" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points="200,30 370,310 30,310" stroke="#fb923c" stroke-width="1" fill="none"/>
                <polygon points="200,80 320,290 80,290" stroke="#fb923c" stroke-width="0.5" fill="none"/>
                <polygon points="200,130 270,270 130,270" stroke="#fb923c" stroke-width="0.5" fill="none"/>
                <circle cx="200" cy="200" r="30" stroke="#fb923c" stroke-width="0.5"/>
              </svg>
            </div>
            <div class="plx-06__content" data-plx-content="-0.1">
              <span class="plx-06__panel-tag">Chapter Three</span>
              <h2 class="plx-06__panel-title">Speed<br>as<br>Hierarchy</h2>
              <p class="plx-06__panel-body">Fast-moving elements feel close. Slow-moving elements feel distant. The eye reads speed differentials as spatial distance — an ancient visual instinct made digital.</p>
              <span class="plx-06__panel-num">03 / 05</span>
            </div>
          </div>

          <!-- Panel 4 -->
          <div class="plx-06__panel">
            <div class="plx-06__bg" data-plx-bg="-0.3"></div>
            <div class="plx-06__num-layer" data-plx-num="0.6">
              <span class="plx-06__big-num">04</span>
            </div>
            <div class="plx-06__shape-layer" data-plx-shape="0.2">
              <svg class="plx-06__shape-svg" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="200" cy="200" rx="180" ry="80" stroke="#38bdf8" stroke-width="1"/>
                <ellipse cx="200" cy="200" rx="130" ry="55" stroke="#38bdf8" stroke-width="0.5"/>
                <ellipse cx="200" cy="200" rx="80" ry="30" stroke="#38bdf8" stroke-width="0.5"/>
                <line x1="20" y1="200" x2="380" y2="200" stroke="#38bdf8" stroke-width="0.4"/>
                <circle cx="200" cy="200" r="8" fill="#38bdf8" opacity="0.4"/>
              </svg>
            </div>
            <div class="plx-06__content" data-plx-content="-0.1">
              <span class="plx-06__panel-tag">Chapter Four</span>
              <h2 class="plx-06__panel-title">Four<br>Kinds<br>of Still</h2>
              <p class="plx-06__panel-body">Every layer is in motion — yet nothing feels chaotic. The geometry holds its orbit. The content waits. The number recedes. Stillness is a composition, not an absence.</p>
              <span class="plx-06__panel-num">04 / 05</span>
            </div>
          </div>

          <!-- Panel 5 -->
          <div class="plx-06__panel">
            <div class="plx-06__bg" data-plx-bg="-0.3"></div>
            <div class="plx-06__num-layer" data-plx-num="0.6">
              <span class="plx-06__big-num">05</span>
            </div>
            <div class="plx-06__shape-layer" data-plx-shape="0.2">
              <svg class="plx-06__shape-svg" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M 200 30 L 370 150 L 300 340 L 100 340 L 30 150 Z" stroke="#f472b6" stroke-width="1" fill="none"/>
                <path d="M 200 80 L 320 175 L 265 320 L 135 320 L 80 175 Z" stroke="#f472b6" stroke-width="0.5" fill="none"/>
                <circle cx="200" cy="200" r="40" stroke="#f472b6" stroke-width="0.5"/>
                <circle cx="200" cy="200" r="8" fill="#f472b6" opacity="0.3"/>
              </svg>
            </div>
            <div class="plx-06__content" data-plx-content="-0.1">
              <span class="plx-06__panel-tag">Chapter Five</span>
              <h2 class="plx-06__panel-title">The<br>End<br>Begins</h2>
              <p class="plx-06__panel-body">Five panels, five velocities, one scroll gesture. The journey across them felt longer than the distance traveled — that's what parallax does. It stretches space with motion.</p>
              <span class="plx-06__panel-num">05 / 05</span>
            </div>
          </div>

        </div><!-- /track -->

        <!-- dot nav -->
        <div class="plx-06__dots" id="plx06-dots">
          <div class="plx-06__dot is-active"></div>
          <div class="plx-06__dot"></div>
          <div class="plx-06__dot"></div>
          <div class="plx-06__dot"></div>
          <div class="plx-06__dot"></div>
        </div>

      </div><!-- /viewport -->
    </div><!-- /sticky -->
  </div><!-- /driver -->
</div>
```

**CSS:**
```css
.plx-06, .plx-06 *, .plx-06 *::before, .plx-06 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.plx-06 {
  font-family: 'Space Grotesk', sans-serif;
  background: #06060e;
  color: #f0eff8;
}

/* Tall enough to drive 5 panels of horizontal scroll */
.plx-06__driver {
  height: 500vh;
  position: relative;
}

/* Sticky container holds the whole horizontal experience */
.plx-06__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.plx-06__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(240,239,248,0.08);
  position: relative;
  z-index: 10;
}
.plx-06__logo {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
}
.plx-06__progress-track {
  flex: 1; max-width: 280px; margin: 0 32px;
  height: 1px; background: rgba(255,255,255,0.1); position: relative;
}
.plx-06__progress-fill {
  position: absolute; inset: 0 auto 0 0;
  height: 100%; width: 0%; background: #fff; transition: width 60ms linear;
}
.plx-06__counter {
  font-family: 'Space Mono', monospace;
  font-size: 11px; opacity: 0.35; letter-spacing: 0.1em;
}

/* Horizontal viewport — clips the track */
.plx-06__viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Track — moves horizontally, 5 panels wide */
.plx-06__track {
  display: flex;
  width: 500%;
  height: 100%;
  will-change: transform;
}

/* Each panel = 1/5 of the track = 100vw */
.plx-06__panel {
  width: 20%;
  height: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── Layer A: Full-bleed background ── */
.plx-06__bg {
  position: absolute;
  inset: -15%;
  will-change: transform;
  transition: none;
}
.plx-06__panel:nth-child(1) .plx-06__bg { background: linear-gradient(135deg, #0a001a 0%, #1a0030 60%, #2a0050 100%); }
.plx-06__panel:nth-child(2) .plx-06__bg { background: linear-gradient(135deg, #001a10 0%, #00301a 60%, #004020 100%); }
.plx-06__panel:nth-child(3) .plx-06__bg { background: linear-gradient(135deg, #1a0800 0%, #30100000 0%, #301000 100%); }
.plx-06__panel:nth-child(3) .plx-06__bg { background: linear-gradient(135deg, #1a0a00 0%, #301200 100%); }
.plx-06__panel:nth-child(4) .plx-06__bg { background: linear-gradient(135deg, #00101a 0%, #001c30 100%); }
.plx-06__panel:nth-child(5) .plx-06__bg { background: linear-gradient(135deg, #1a001a 0%, #280028 100%); }

/* ── Layer B: Giant number ── */
.plx-06__num-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  pointer-events: none;
}
.plx-06__big-num {
  font-family: 'Space Mono', monospace;
  font-size: clamp(180px, 35vw, 480px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  opacity: 0.05;
  color: #fff;
  user-select: none;
}

/* ── Layer C: Decorative SVG shape ── */
.plx-06__shape-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  pointer-events: none;
}
.plx-06__shape-svg {
  position: absolute;
  top: 50%; right: 8%;
  transform: translateY(-50%);
  width: 36vw; height: 36vw;
  max-width: 400px; max-height: 400px;
  opacity: 0.18;
}

/* ── Layer D: Content ── */
.plx-06__content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 5;
  will-change: transform;
  max-width: 42%;
}
.plx-06__panel-tag {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 16px;
  display: block;
}
.plx-06__panel-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 6vw, 84px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.plx-06__panel-body {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.5;
  max-width: 340px;
}
.plx-06__panel-num {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.25;
  margin-top: 28px;
}

/* Accent colors per panel */
.plx-06__panel:nth-child(1) .plx-06__panel-title { color: #c084fc; }
.plx-06__panel:nth-child(2) .plx-06__panel-title { color: #4ade80; }
.plx-06__panel:nth-child(3) .plx-06__panel-title { color: #fb923c; }
.plx-06__panel:nth-child(4) .plx-06__panel-title { color: #38bdf8; }
.plx-06__panel:nth-child(5) .plx-06__panel-title { color: #f472b6; }

/* Vertical dot nav */
.plx-06__dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 10px;
}
.plx-06__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s;
}
.plx-06__dot.is-active {
  background: #fff;
  transform: scale(1.6);
}

/* Scroll hint — only on panel 1 */
.plx-06__hint {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s;
}
.plx-06__hint.is-visible { opacity: 0.35; }
.plx-06__hint-arr {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plx-06__hint-arr span {
  display: block;
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,0.6);
  animation: plx-06-arr 1.6s ease-in-out infinite;
}
.plx-06__hint-arr span:nth-child(2) { animation-delay: 0.15s; }
.plx-06__hint-arr span:nth-child(3) { animation-delay: 0.3s; }
@keyframes plx-06-arr {
  0%, 100% { transform: scaleX(1); opacity: 0.6; }
  50% { transform: scaleX(1.4); opacity: 1; }
}

@media (max-width: 768px) {
  .plx-06__content { max-width: 70%; left: 6%; }
  .plx-06__shape-svg { display: none; }
  .plx-06__bar { padding: 14px 20px; }
  .plx-06__progress-track { max-width: 140px; margin: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .plx-06__bg, .plx-06__num-layer, .plx-06__shape-layer, .plx-06__content { transform: none !important; }
  .plx-06__track { transform: none !important; }
  .plx-06__hint-arr span { animation: none; }
}
```

**JS:**
```js
(() => {
  const driver = document.getElementById('plx06-driver');
  const track = document.getElementById('plx06-track');
  const fill = document.getElementById('plx06-fill');
  const counter = document.getElementById('plx06-counter');
  const hint = document.getElementById('plx06-hint');
  const dots = Array.from(document.querySelectorAll('.plx-06__dot'));
  if (!driver || !track) return;

  const PANELS = 5;

  // Per-panel parallax layers
  const panels = Array.from(track.querySelectorAll('.plx-06__panel')).map((panel, i) => ({
    bg: panel.querySelector('[data-plx-bg]'),
    num: panel.querySelector('[data-plx-num]'),
    shape: panel.querySelector('[data-plx-shape]'),
    content: panel.querySelector('[data-plx-content]'),
    bgSpeed: parseFloat(panel.querySelector('[data-plx-bg]')?.dataset.plxBg || 0),
    numSpeed: parseFloat(panel.querySelector('[data-plx-num]')?.dataset.plxNum || 0),
    shapeSpeed: parseFloat(panel.querySelector('[data-plx-shape]')?.dataset.plxShape || 0),
    contentSpeed: parseFloat(panel.querySelector('[data-plx-content]')?.dataset.plxContent || 0),
  }));

  let ticking = false;
  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const driverRect = driver.getBoundingClientRect();
      const driverH = driver.offsetHeight;
      const vh = window.innerHeight;
      const vw = window.innerWidth;

      // scrollable range: driverH - vh
      const scrollableH = driverH - vh;
      const rawProgress = Math.max(0, Math.min(1, -driverRect.top / scrollableH));

      // Horizontal offset of the track
      const maxOffset = vw * (PANELS - 1);
      const trackX = rawProgress * maxOffset;
      track.style.transform = `translateX(${-trackX}px)`;

      // Progress bar and counter
      fill.style.width = (rawProgress * 100) + '%';
      const activePanel = Math.min(PANELS - 1, Math.floor(rawProgress * PANELS));
      counter.textContent = String(activePanel + 1).padStart(2,'0') + ' / 0' + PANELS;
      dots.forEach((d, i) => d.classList.toggle('is-active', i === activePanel));

      // Hide hint after first panel
      if (hint) hint.classList.toggle('is-visible', rawProgress < 0.05);

      // Per-layer parallax within each panel
      // The local offset of each panel center relative to the viewport center
      panels.forEach((p, i) => {
        const panelCenter = i * vw;           // absolute X center of panel in track
        const viewCenter = trackX;            // current left edge of visible area
        const localOffset = panelCenter - viewCenter; // px from left edge
        // "distance from center" — 0 when panel is fully visible
        const fromCenter = localOffset - vw / 2;

        if (p.bg) p.bg.style.transform = `translateX(${fromCenter * p.bgSpeed}px)`;
        if (p.num) p.num.style.transform = `translateX(${fromCenter * p.numSpeed}px)`;
        if (p.shape) p.shape.style.transform = `translateX(${fromCenter * p.shapeSpeed}px)`;
        if (p.content) p.content.style.transform = `translateY(-50%) translateX(${fromCenter * p.contentSpeed}px)`;
      });

      ticking = false;
    });
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

### 07. CSS Parallax Text Overlay Effect

**Type:** CSS + JS
**Description:** Three typographic scenes demonstrating the fixed-text / sliding-texture trick. Scene 1: 28vw Unbounded display headline stays fixed while a noise-texture gradient slides beneath it. Scene 2: sticky pull-quote with drifting background layer. Scene 3: split outline/filled 'BOLD' with contrasting textures scrolling in opposite directions. Instrument Serif italics as accent counterpoint.

**HTML:**
```html
<div class="plx-07">

  <!-- SCENE 1: Display headline / scrolling stripe bg -->
  <section class="plx-07__s1">
    <div class="plx-07__s1-pin">
      <div class="plx-07__s1-bg" id="plx07-s1-bg"></div>
      <div class="plx-07__s1-text">
        <span class="plx-07__display" id="plx07-line1">TYPE</span>
        <span class="plx-07__display is-outline" id="plx07-line2">OVER</span>
        <span class="plx-07__display is-accent" id="plx07-line3">IMAGE</span>
      </div>
      <p class="plx-07__s1-label">Background scrolls · Text stays</p>
    </div>
  </section>

  <!-- SCENE 2: Quote / bg moves faster than text -->
  <section class="plx-07__s2">
    <div class="plx-07__s2-pin">
      <div class="plx-07__s2-bg" id="plx07-s2-bg"></div>
      <div class="plx-07__quote-wrap" id="plx07-quote">
        <span class="plx-07__qmark">"</span>
        <p class="plx-07__qtext">
          Design is the art of making decisions <em>invisible.</em>
          The best interface is the one you never notice —
          only the <em>experience</em> remains.
          <span class="plx-07__qattr">— A Designer Who Believed It</span>
        </p>
      </div>
    </div>
  </section>

  <!-- SCENE 3: Split word / bg slides under it -->
  <section class="plx-07__s3">
    <div class="plx-07__s3-pin">
      <div class="plx-07__s3-bg" id="plx07-s3-bg"></div>
      <div class="plx-07__word-wrap" id="plx07-word">
        <span class="plx-07__word-solid">BOLD</span>
        <span class="plx-07__word-outline">BOLD</span>
      </div>
      <div class="plx-07__s3-caption">
        <h3>The texture moves;<br>the word doesn't.</h3>
        <p>Massive display type stays anchored while the rich background texture shifts beneath it. The contrast between stillness and motion creates instant depth.</p>
      </div>
    </div>
  </section>

  <div class="plx-07__footer">
    <h2>Words that <em>command</em> space.</h2>
    <p>The parallax text overlay technique uses motion differential between typography and background to create perceived depth on a flat screen.</p>
  </div>

</div>
```

**CSS:**
```css
.plx-07, .plx-07 *, .plx-07 *::before, .plx-07 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.plx-07 {
  font-family: 'DM Sans', sans-serif;
  background: #0c0c0a;
  color: #f4f0e8;
  /* overflow:clip not overflow:hidden — see Demo 09 + 10 fixes.
     overflow:hidden creates a scroll context that breaks
     position:sticky on descendants. */
  overflow-x: clip;
}

/* ═══ SCENE 1: Headline stays fixed, stripe bg scrolls beneath ═══ */
.plx-07__s1 {
  position: relative;
  /* 300vh = 200vh of sticky pin runway during which the JS
     animates bg + text overlays. Sticky pinning works because
     .plx-07 root uses overflow-x:clip (not :hidden) — the
     :hidden form would create a scroll context that breaks
     sticky on descendants. */
  height: 300vh;
}
.plx-07__s1-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Diagonal stripe background — this is what scrolls */
.plx-07__s1-bg {
  position: absolute;
  inset: -30%;
  will-change: transform;
  background:
    repeating-linear-gradient(
      -55deg,
      rgba(220,160,60,0.0) 0px,
      rgba(220,160,60,0.0) 30px,
      rgba(220,160,60,0.06) 30px,
      rgba(220,160,60,0.06) 32px,
      rgba(220,160,60,0.0) 32px,
      rgba(220,160,60,0.0) 62px,
      rgba(220,160,60,0.1) 62px,
      rgba(220,160,60,0.1) 64px
    ),
    radial-gradient(ellipse at 30% 50%, rgba(180,100,20,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 30%, rgba(100,60,140,0.2) 0%, transparent 50%),
    linear-gradient(160deg, #1a1206 0%, #0c0c0a 60%, #060810 100%);
}

/* The text itself — stays put */
.plx-07__s1-text {
  position: relative;
  z-index: 5;
  text-align: center;
  mix-blend-mode: normal;
}

.plx-07__display {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(72px, 16vw, 210px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: #f4f0e8;
  text-transform: uppercase;
  will-change: transform;
}
.plx-07__display.is-outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(244,240,232,0.25);
}
.plx-07__display.is-accent {
  color: #dca03c;
}

/* S1 progress-driven: bg scrolls while text moves subtly in opposite dir */
/* S1 label */
.plx-07__s1-label {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.3;
  white-space: nowrap;
}

/* ═══ SCENE 2: Quote — text and bg move at different rates ═══ */
.plx-07__s2 {
  position: relative;
  /* See plx-07__s1 comment above for rationale. */
  height: 300vh;
  background: #0a0e12;
}
.plx-07__s2-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.plx-07__s2-bg {
  position: absolute;
  inset: -30%;
  will-change: transform;
  background:
    repeating-linear-gradient(
      25deg,
      rgba(100,160,220,0.0) 0px,
      rgba(100,160,220,0.0) 50px,
      rgba(100,160,220,0.05) 50px,
      rgba(100,160,220,0.05) 52px
    ),
    radial-gradient(ellipse at 70% 60%, rgba(60,100,180,0.3) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 30%, rgba(180,60,120,0.2) 0%, transparent 50%),
    linear-gradient(160deg, #060810 0%, #0a0e14 100%);
}

.plx-07__quote-wrap {
  position: relative;
  z-index: 5;
  padding: 0 clamp(40px, 10vw, 140px);
  will-change: transform;
  max-width: 1100px;
}

.plx-07__qmark {
  display: block;
  font-family: 'Lora', serif;
  font-size: clamp(120px, 20vw, 220px);
  line-height: 0.7;
  color: rgba(100,160,220,0.2);
  margin-bottom: -24px;
}

.plx-07__qtext {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(24px, 4.5vw, 58px);
  line-height: 1.35;
  font-weight: 400;
  color: #f4f0e8;
}
.plx-07__qtext em {
  font-style: normal;
  color: #7eb8e0;
}

.plx-07__qattr {
  display: block;
  margin-top: 32px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.35;
  font-style: normal;
  font-family: 'DM Sans', sans-serif;
}

/* ═══ SCENE 3: Giant word — top half normal, bottom half outline, bg scrolls ═══ */
.plx-07__s3 {
  position: relative;
  /* See plx-07__s1 comment above for rationale. */
  height: 300vh;
  background: #100c08;
}
.plx-07__s3-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.plx-07__s3-bg {
  position: absolute;
  inset: -30%;
  will-change: transform;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(220,140,60,0.0) 0px,
      rgba(220,140,60,0.0) 20px,
      rgba(220,140,60,0.05) 20px,
      rgba(220,140,60,0.05) 21px
    ),
    radial-gradient(ellipse at 60% 45%, rgba(200,100,20,0.3) 0%, transparent 55%),
    linear-gradient(160deg, #100c06 0%, #180e04 100%);
}

/* Giant split word */
.plx-07__word-wrap {
  position: relative;
  z-index: 5;
  padding-right: clamp(30px, 8vw, 120px);
  will-change: transform;
  line-height: 0.88;
}

.plx-07__word-solid {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(90px, 20vw, 270px);
  letter-spacing: -0.04em;
  color: #f4f0e8;
  /* clip to top 50% */
  clip-path: inset(0 0 50% 0);
  line-height: 0.88;
}
.plx-07__word-outline {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(90px, 20vw, 270px);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(244,240,232,0.4);
  /* offset up to align perfectly */
  margin-top: calc(clamp(90px, 20vw, 270px) * -0.88);
  clip-path: inset(50% 0 0 0);
  line-height: 0.88;
}

/* Caption text left side */
.plx-07__s3-caption {
  position: absolute;
  left: clamp(30px, 6vw, 80px);
  bottom: 60px;
  z-index: 6;
  max-width: 260px;
}
.plx-07__s3-caption h3 {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 12px;
}
.plx-07__s3-caption p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.45;
}

/* ═══ Footer ═══ */
.plx-07__footer {
  background: #f4f0e8;
  color: #0c0c0a;
  padding: 100px 60px;
  text-align: center;
}
.plx-07__footer h2 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(32px, 6vw, 80px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.plx-07__footer h2 em {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 400;
  color: #b87020;
}
.plx-07__footer p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.55;
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .plx-07__s3-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plx-07__s1-bg, .plx-07__s2-bg, .plx-07__s2-bg, .plx-07__s3-bg,
  .plx-07__quote-wrap, .plx-07__word-wrap, .plx-07__display { transform: none !important; }
}
```

**JS:**
```js
(() => {
  const s1 = document.querySelector('.plx-07__s1');
  const s2 = document.querySelector('.plx-07__s2');
  const s3 = document.querySelector('.plx-07__s3');

  const s1bg = document.getElementById('plx07-s1-bg');
  const line1 = document.getElementById('plx07-line1');
  const line2 = document.getElementById('plx07-line2');
  const line3 = document.getElementById('plx07-line3');

  const s2bg = document.getElementById('plx07-s2-bg');
  const quote = document.getElementById('plx07-quote');

  const s3bg = document.getElementById('plx07-s3-bg');
  const word = document.getElementById('plx07-word');

  let ticking = false;

  /* progress(el): sticky-pin progress, 0 at pin engage → 1 at pin
     release. Uses (offsetHeight - innerHeight) as the divisor which
     is the pin runway in scroll px. With scene at 300vh + sticky
     inner at 100vh, the runway is 200vh of scroll. */
  function progress(el) {
    if (!el) return 0;
    const r = el.getBoundingClientRect();
    const h = el.offsetHeight - window.innerHeight;
    return h > 0 ? Math.max(0, Math.min(1, -r.top / h)) : 0;
  }

  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      // Scene 1: bg scrolls up fast, text drifts slightly
      const p1 = progress(s1);
      if (s1bg) s1bg.style.transform = `translateY(${p1 * -120}px)`;
      if (line1) line1.style.transform = `translateY(${p1 * 15}px)`;
      if (line2) line2.style.transform = `translateY(${p1 * 0}px)`;
      if (line3) line3.style.transform = `translateY(${p1 * -15}px)`;

      // Scene 2: bg scrolls fast, quote drifts slowly upward
      const p2 = progress(s2);
      if (s2bg) s2bg.style.transform = `translateY(${p2 * -140}px)`;
      if (quote) quote.style.transform = `translateY(${p2 * -40}px)`;

      // Scene 3: bg scrolls, word barely moves (anchored feel)
      const p3 = progress(s3);
      if (s3bg) s3bg.style.transform = `translateY(${p3 * -120}px) skewY(${p3 * 1.5}deg)`;
      if (word) word.style.transform = `translateY(${p3 * -12}px)`;

      ticking = false;
    });
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

### 08. CSS Parallax Card Hover Effect

**Type:** CSS + JS
**Description:** Six product/profile cards where three independent layers — gradient background, geometric SVG decoration, text content — shift on mouse position at 8px, 14px, and 22px depth respectively. Card tilts ±12° on both axes via CSS perspective. Soft radial light layer tracks cursor. All transitions use cubic-bezier easing; mouseleave smoothly resets. Geist + Geist Mono.

**HTML:**
```html
<div class="plx-08">

  <header class="plx-08__header">
    <p class="plx-08__label">CSS Parallax · Mouse-Driven Tilt</p>
    <h1>Hover over a card<br><span>— any card.</span></h1>
  </header>

  <div class="plx-08__grid">

    <div class="plx-08__card">
      <div class="plx-08__card-bg"></div>
      <div class="plx-08__card-light"></div>
      <div class="plx-08__card-noise"></div>
      <div class="plx-08__card-geo">
        <svg viewBox="0 0 300 440" xmlns="http://www.w3.org/2000/svg">
          <circle cx="250" cy="80" r="120" stroke="white" stroke-width="1" fill="none"/>
          <circle cx="250" cy="80" r="70" stroke="white" stroke-width="0.5" fill="none"/>
          <line x1="0" y1="440" x2="300" y2="0" stroke="white" stroke-width="0.4"/>
        </svg>
      </div>
      <div class="plx-08__card-content">
        <div class="plx-08__card-icon">🌌</div>
        <p class="plx-08__card-tag">01 · Astrophysics</p>
        <h3 class="plx-08__card-title">The Observable Universe</h3>
        <p class="plx-08__card-body">93 billion light-years of space. Everything we know, everything we can ever know, fits inside this sphere.</p>
        <span class="plx-08__card-cta">Explore</span>
      </div>
    </div>

    <div class="plx-08__card">
      <div class="plx-08__card-bg"></div>
      <div class="plx-08__card-light"></div>
      <div class="plx-08__card-noise"></div>
      <div class="plx-08__card-geo">
        <svg viewBox="0 0 300 440" xmlns="http://www.w3.org/2000/svg">
          <polygon points="150,20 280,380 20,380" stroke="white" stroke-width="1" fill="none"/>
          <polygon points="150,80 240,340 60,340" stroke="white" stroke-width="0.5" fill="none"/>
        </svg>
      </div>
      <div class="plx-08__card-content">
        <div class="plx-08__card-icon">💎</div>
        <p class="plx-08__card-tag">02 · Mineralogy</p>
        <h3 class="plx-08__card-title">Crystalline Structures</h3>
        <p class="plx-08__card-body">Carbon under immense pressure becomes diamond. Chaos compressed into the most ordered thing in nature.</p>
        <span class="plx-08__card-cta">Discover</span>
      </div>
    </div>

    <div class="plx-08__card">
      <div class="plx-08__card-bg"></div>
      <div class="plx-08__card-light"></div>
      <div class="plx-08__card-noise"></div>
      <div class="plx-08__card-geo">
        <svg viewBox="0 0 300 440" xmlns="http://www.w3.org/2000/svg">
          <path d="M0,220 Q75,100 150,220 Q225,340 300,220" stroke="white" stroke-width="1" fill="none"/>
          <path d="M0,220 Q75,140 150,220 Q225,300 300,220" stroke="white" stroke-width="0.5" fill="none"/>
          <path d="M0,220 Q75,180 150,220 Q225,260 300,220" stroke="white" stroke-width="0.3" fill="none"/>
        </svg>
      </div>
      <div class="plx-08__card-content">
        <div class="plx-08__card-icon">🌊</div>
        <p class="plx-08__card-tag">03 · Oceanography</p>
        <h3 class="plx-08__card-title">Deep Currents</h3>
        <p class="plx-08__card-body">The ocean's thermohaline circulation moves water around the entire planet over hundreds of years.</p>
        <span class="plx-08__card-cta">Dive in</span>
      </div>
    </div>

    <div class="plx-08__card">
      <div class="plx-08__card-bg"></div>
      <div class="plx-08__card-light"></div>
      <div class="plx-08__card-noise"></div>
      <div class="plx-08__card-geo">
        <svg viewBox="0 0 300 440" xmlns="http://www.w3.org/2000/svg">
          <rect x="30" y="30" width="240" height="380" rx="20" stroke="white" stroke-width="1" fill="none"/>
          <rect x="70" y="70" width="160" height="300" rx="10" stroke="white" stroke-width="0.5" fill="none"/>
          <rect x="110" y="110" width="80" height="220" rx="5" stroke="white" stroke-width="0.3" fill="none"/>
        </svg>
      </div>
      <div class="plx-08__card-content">
        <div class="plx-08__card-icon">🏙️</div>
        <p class="plx-08__card-tag">04 · Architecture</p>
        <h3 class="plx-08__card-title">Vertical Cities</h3>
        <p class="plx-08__card-body">When land is scarce and ambition isn't, we build upward. The skyline is a city's autobiography.</p>
        <span class="plx-08__card-cta">Ascend</span>
      </div>
    </div>

    <div class="plx-08__card">
      <div class="plx-08__card-bg"></div>
      <div class="plx-08__card-light"></div>
      <div class="plx-08__card-noise"></div>
      <div class="plx-08__card-geo">
        <svg viewBox="0 0 300 440" xmlns="http://www.w3.org/2000/svg">
          <circle cx="150" cy="220" r="160" stroke="white" stroke-width="1" fill="none" stroke-dasharray="8 6"/>
          <circle cx="150" cy="220" r="100" stroke="white" stroke-width="0.5" fill="none" stroke-dasharray="5 4"/>
          <circle cx="150" cy="220" r="40" stroke="white" stroke-width="0.3" fill="none"/>
        </svg>
      </div>
      <div class="plx-08__card-content">
        <div class="plx-08__card-icon">⚡</div>
        <p class="plx-08__card-tag">05 · Physics</p>
        <h3 class="plx-08__card-title">Electromagnetic Fields</h3>
        <p class="plx-08__card-body">Invisible forces that hold atoms together, power every device, and fill every cubic inch of space around you.</p>
        <span class="plx-08__card-cta">Charge up</span>
      </div>
    </div>

    <div class="plx-08__card">
      <div class="plx-08__card-bg"></div>
      <div class="plx-08__card-light"></div>
      <div class="plx-08__card-noise"></div>
      <div class="plx-08__card-geo">
        <svg viewBox="0 0 300 440" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,400 Q80,200 150,100 Q220,0 280,100 Q350,200 150,400" stroke="white" stroke-width="1" fill="none"/>
          <path d="M60,400 Q100,250 150,160 Q200,80 250,200 Q280,300 150,400" stroke="white" stroke-width="0.4" fill="none"/>
        </svg>
      </div>
      <div class="plx-08__card-content">
        <div class="plx-08__card-icon">🌿</div>
        <p class="plx-08__card-tag">06 · Botany</p>
        <h3 class="plx-08__card-title">Fractal Growth</h3>
        <p class="plx-08__card-body">A fern leaf, a river delta, a bolt of lightning — nature repeats its favourite shapes at every scale.</p>
        <span class="plx-08__card-cta">Grow</span>
      </div>
    </div>

  </div>

  <p class="plx-08__footer">Hover any card · 3 independent parallax layers · CSS transform + JS cursor</p>

</div>
```

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

/* Fall back to system mono if Geist unavailable */
.plx-08 {
  --bg: #0c0c10;
  --surface: #14141c;
  --border: rgba(255,255,255,0.08);
  --text: #e8e8f0;
  --muted: rgba(232,232,240,0.45);
  --card-h: 440px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', system-ui, sans-serif;
  min-height: 100vh;
  padding: 60px 40px;
}

/* Header */
.plx-08__header {
  text-align: center;
  margin-bottom: 80px;
}

.plx-08__label {
  display: inline-block;
  font-size: 10px;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.plx-08__header h1 {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
}

.plx-08__header h1 span {
  opacity: 0.3;
}

/* Grid */
.plx-08__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* === THE CARD === */
.plx-08__card {
  position: relative;
  height: var(--card-h);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  /* 3D perspective is set inline via JS */
  transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.1s ease, box-shadow 0.3s ease;
}

.plx-08__card:not(:hover) {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
}

/* Background gradient layer — moves slower than card tilt */
.plx-08__card-bg {
  position: absolute;
  inset: -10%;
  border-radius: 24px;
  will-change: transform;
  transition: transform 0.1s ease;
  transform: translateX(0px) translateY(0px);
}

.plx-08__card:not(:hover) .plx-08__card-bg {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Card accent/color themes */
.plx-08__card:nth-child(1) .plx-08__card-bg { background: radial-gradient(ellipse at 40% 40%, rgba(99,102,241,0.6) 0%, rgba(30,27,75,0.9) 60%); }
.plx-08__card:nth-child(2) .plx-08__card-bg { background: radial-gradient(ellipse at 60% 40%, rgba(236,72,153,0.5) 0%, rgba(75,10,50,0.9) 60%); }
.plx-08__card:nth-child(3) .plx-08__card-bg { background: radial-gradient(ellipse at 40% 60%, rgba(16,185,129,0.5) 0%, rgba(5,50,30,0.9) 60%); }
.plx-08__card:nth-child(4) .plx-08__card-bg { background: radial-gradient(ellipse at 50% 40%, rgba(245,158,11,0.5) 0%, rgba(60,30,5,0.9) 60%); }
.plx-08__card:nth-child(5) .plx-08__card-bg { background: radial-gradient(ellipse at 60% 60%, rgba(14,165,233,0.5) 0%, rgba(5,30,60,0.9) 60%); }
.plx-08__card:nth-child(6) .plx-08__card-bg { background: radial-gradient(ellipse at 40% 40%, rgba(168,85,247,0.5) 0%, rgba(40,10,70,0.9) 60%); }

/* Shimmer/light layer */
.plx-08__card-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12) 0%, transparent 60%);
  will-change: background;
  pointer-events: none;
  transition: background 0.1s ease;
  border-radius: inherit;
}

/* Noise texture */
.plx-08__card-noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  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.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Geometric decorative layer — moves opposite to BG */
.plx-08__card-geo {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translateX(0px) translateY(0px);
  transition: transform 0.1s ease;
  pointer-events: none;
}

.plx-08__card:not(:hover) .plx-08__card-geo {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plx-08__card-geo svg {
  width: 100%; height: 100%;
  opacity: 0.18;
}

/* Content layer — moves even more than card tilt (depth pop) */
.plx-08__card-content {
  position: absolute;
  inset: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  will-change: transform;
  transform: translateX(0px) translateY(0px) translateZ(0px);
  transition: transform 0.1s ease;
  z-index: 5;
}

.plx-08__card:not(:hover) .plx-08__card-content {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plx-08__card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: auto;
}

.plx-08__card-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 10px;
}

.plx-08__card-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.plx-08__card-body {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  opacity: 0.55;
  margin-bottom: 24px;
}

.plx-08__card-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.08em;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.plx-08__card:hover .plx-08__card-cta { opacity: 1; }
.plx-08__card-cta::after {
  content: '→';
  transition: transform 0.2s;
}
.plx-08__card:hover .plx-08__card-cta::after { transform: translateX(4px); }

/* Shadow ring on hover */
.plx-08__card:hover {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.12);
}

/* Footer note */
.plx-08__footer {
  text-align: center;
  margin-top: 60px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted);
}

@media (max-width: 600px) {
  .plx-08 { padding: 40px 20px; }
  .plx-08__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .plx-08__card { transition: none !important; transform: none !important; }
  .plx-08__card-bg, .plx-08__card-geo, .plx-08__card-content { transition: none !important; transform: none !important; }
}
```

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

  const cards = Array.from(root.querySelectorAll('.plx-08__card'));

  const TILT_MAX = 18; // degrees
  const BG_SPEED = 0.3;
  const GEO_SPEED = -0.5;
  const CONTENT_SPEED = 0.7;

  cards.forEach(card => {
    const bg = card.querySelector('.plx-08__card-bg');
    const light = card.querySelector('.plx-08__card-light');
    const geo = card.querySelector('.plx-08__card-geo');
    const content = card.querySelector('.plx-08__card-content');

    function onMove(e) {
      const rect = card.getBoundingClientRect();
      // Normalized position: -1 to 1
      const nx = ((e.clientX - rect.left) / rect.width) * 2 - 1;
      const ny = ((e.clientY - rect.top) / rect.height) * 2 - 1;

      // Card tilt
      const rotX = -ny * TILT_MAX;
      const rotY = nx * TILT_MAX;
      card.style.transform = `perspective(800px) rotateX(${rotX}deg) rotateY(${rotY}deg)`;

      // BG drifts slowly in same direction
      const bgX = nx * 20 * BG_SPEED;
      const bgY = ny * 20 * BG_SPEED;
      if (bg) bg.style.transform = `translateX(${bgX}px) translateY(${bgY}px)`;

      // Light follows cursor
      if (light) light.style.background = `radial-gradient(circle at ${(nx+1)/2*100}% ${(ny+1)/2*100}%, rgba(255,255,255,0.15) 0%, transparent 55%)`;

      // Geo drifts in opposite direction (depth separation)
      const geoX = nx * 20 * GEO_SPEED;
      const geoY = ny * 20 * GEO_SPEED;
      if (geo) geo.style.transform = `translateX(${geoX}px) translateY(${geoY}px)`;

      // Content pops forward
      const contentX = nx * 12 * CONTENT_SPEED;
      const contentY = ny * 12 * CONTENT_SPEED;
      if (content) content.style.transform = `translateX(${contentX}px) translateY(${contentY}px) translateZ(20px)`;
    }

    function onLeave() {
      card.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg)';
      if (bg) bg.style.transform = 'translateX(0px) translateY(0px)';
      if (geo) geo.style.transform = 'translateX(0px) translateY(0px)';
      if (content) content.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
      if (light) light.style.background = 'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12) 0%, transparent 60%)';
    }

    // Touch support
    function onTouch(e) {
      const t = e.touches[0];
      onMove({ clientX: t.clientX, clientY: t.clientY });
    }

    card.addEventListener('mousemove', onMove);
    card.addEventListener('mouseleave', onLeave);
    card.addEventListener('touchmove', onTouch, { passive: true });
    card.addEventListener('touchend', onLeave);
  });
})();
```

### 09. CSS Zoom-In / Depth Parallax on Scroll

**Type:** CSS + JS
**Description:** Cinematic camera-zoom illusion: concentric-ring system scales 1× to 3× while background scales 1× to 2× in the opposite direction as you scroll, building a 'falling forward' sensation. Gallery of three depth cells with hover-triggered scale. Second scene: oversized Big Shoulders Display text with bg scale counter-zoom. Progress-driven opacity fades. Libre Baskerville subheads.

**HTML:**
```html
<div class="plx-09">

  <!-- SCENE 1: Zoom in -->
  <div class="plx-09__zoom" id="plx09-zoom">
    <div class="plx-09__zoom-sticky">
      <div class="plx-09__zoom-bg"  id="plx09-bg"></div>
      <div class="plx-09__zoom-grid" id="plx09-grid"></div>
      <div class="plx-09__rings" id="plx09-rings">
        <div class="plx-09__ring"></div>
        <div class="plx-09__ring"></div>
        <div class="plx-09__ring"></div>
        <div class="plx-09__ring"></div>
        <div class="plx-09__ring"></div>
        <div class="plx-09__ring"></div>
      </div>
      <div class="plx-09__dot"></div>
      <div class="plx-09__zoom-content" id="plx09-content">
        <span class="plx-09__zoom-eyebrow">Scroll-Driven Zoom · CSS Scale</span>
        <h1 class="plx-09__zoom-h">GET<br>CLOSER</h1>
        <span class="plx-09__zoom-sub" id="plx09-sub">The world expands toward you. A depth illusion built on CSS scale and scroll position — no 3D transforms needed.</span>
      </div>
    </div>
  </div>

  <!-- GALLERY -->
  <div class="plx-09__gallery">
    <div class="plx-09__cell">
      <div class="plx-09__cell-inner" id="plx09-g1"></div>
      <div class="plx-09__cell-label">Nebula<small>Deep space · scroll depth</small></div>
    </div>
    <div class="plx-09__cell">
      <div class="plx-09__cell-inner" id="plx09-g2"></div>
      <div class="plx-09__cell-label">Abyss<small>Ocean floor · scroll depth</small></div>
    </div>
    <div class="plx-09__cell">
      <div class="plx-09__cell-inner" id="plx09-g3"></div>
      <div class="plx-09__cell-label">Ember<small>Core heat · scroll depth</small></div>
    </div>
  </div>

  <!-- OUTRO -->
  <div class="plx-09__outro" id="plx09-outro">
    <div class="plx-09__outro-sticky">
      <div class="plx-09__outro-bg" id="plx09-outro-bg"></div>
      <div class="plx-09__outro-text" id="plx09-outro-text">
        <h2>Depth is a <em>feeling,</em><br>not a fact.</h2>
        <p>Your brain reads scale change as three-dimensional approach. The zoom-in effect triggers that ancient spatial instinct — getting closer to something important.</p>
      </div>
    </div>
  </div>

</div>
```

**CSS:**
```css
.plx-09, .plx-09 *, .plx-09 *::before, .plx-09 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.plx-09 {
  --gold: #d4a843;
  --ink: #080608;
  --off: #f2eee8;
  background: var(--ink);
  color: var(--off);
  font-family: 'Libre Baskerville', serif;
  /* overflow-x:hidden was breaking position:sticky on descendants.
     Setting any overflow axis to non-visible creates a new scroll
     context, making this element the sticky-containment ancestor
     instead of body — so the .plx-09__zoom-sticky inner never
     pinned, and the visitor saw the zoom scene bg + rings scroll
     past as a single block (looked like dead empty scroll between
     sections). overflow:clip is the modern equivalent that
     prevents horizontal overflow WITHOUT establishing a scroll
     context — sticky works correctly underneath. Chrome 90+,
     Safari 16+, Firefox 81+ (all evergreen majors). */
  overflow-x: clip;
}

/* ═══ SCENE 1: Zoom-through ═══ */
.plx-09__zoom {
  position: relative;
  height: 400vh;
}
.plx-09__zoom-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* BG: scales UP (world expanding toward viewer) */
.plx-09__zoom-bg {
  position: absolute;
  inset: -20%;
  will-change: transform;
  transform-origin: center center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212,168,67,0.2) 0%, transparent 40%),
    conic-gradient(from 0deg at 50% 50%,
      #0a0808 0deg, #110a10 60deg, #0a0a12 120deg,
      #0c0808 180deg, #100c08 240deg, #080a0c 300deg, #0a0808 360deg);
}

/* Grid: scales UP faster (closer layer) */
.plx-09__zoom-grid {
  position: absolute;
  inset: -50%;
  will-change: transform;
  transform-origin: center center;
  background-image:
    linear-gradient(rgba(212,168,67,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Rings: scale UP most (fly through them) */
.plx-09__rings {
  position: absolute;
  width: 100vmin; height: 100vmin;
  will-change: transform;
  transform-origin: center center;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.plx-09__ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid;
}
.plx-09__ring:nth-child(1) { width: 92%; height: 92%; border-color: rgba(212,168,67,0.10); }
.plx-09__ring:nth-child(2) { width: 74%; height: 74%; border-color: rgba(212,168,67,0.14); }
.plx-09__ring:nth-child(3) { width: 56%; height: 56%; border-color: rgba(212,168,67,0.20); }
.plx-09__ring:nth-child(4) { width: 38%; height: 38%; border-color: rgba(212,168,67,0.30); }
.plx-09__ring:nth-child(5) { width: 22%; height: 22%; border-color: rgba(212,168,67,0.45); }
.plx-09__ring:nth-child(6) { width: 8%;  height: 8%;  border-color: rgba(212,168,67,0.7); background: rgba(212,168,67,0.1); }

/* Gold dot center */
.plx-09__dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(212,168,67,0.9), 0 0 60px rgba(212,168,67,0.4);
  z-index: 4;
}

/* Content: fades and slides in from bottom as zoom progresses */
.plx-09__zoom-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 40px;
  opacity: 0;
  transform: translateY(50px);
  will-change: opacity, transform;
  pointer-events: none;
}

.plx-09__zoom-eyebrow {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.plx-09__zoom-h {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 13vw, 170px);
  letter-spacing: -0.04em;
  line-height: 0.88;
}
.plx-09__zoom-sub {
  margin-top: 24px;
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  opacity: 0;
  color: rgba(242,238,232,0.55);
  max-width: 420px;
  display: block;
  will-change: opacity;
}

/* ═══ SCENE 2: Gallery — zoom inside bounded cells ═══ */
.plx-09__gallery {
  padding: 100px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.plx-09__cell {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: default;
}

/* Each cell inner: starts zoomed in (scale 1.3), scrolls to 1.0 as it enters viewport */
.plx-09__cell-inner {
  position: absolute;
  inset: -15%;
  transform-origin: center center;
  will-change: transform;
}
.plx-09__cell:nth-child(1) .plx-09__cell-inner {
  background: radial-gradient(circle at 40% 40%, #4a2870 0%, #140820 70%);
}
.plx-09__cell:nth-child(2) .plx-09__cell-inner {
  background: radial-gradient(circle at 55% 45%, #154060 0%, #04101c 70%);
}
.plx-09__cell:nth-child(3) .plx-09__cell-inner {
  background: radial-gradient(circle at 50% 55%, #5a1a08 0%, #180604 70%);
}
.plx-09__cell-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.1) 0%, transparent 55%);
}

.plx-09__cell-label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 3;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8);
}
.plx-09__cell-label small {
  display: block;
  font-family: 'Libre Baskerville', serif;
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin-top: 4px;
}

/* ═══ SCENE 3: Outro zoom ═══ */
.plx-09__outro {
  position: relative;
  height: 300vh;
}
.plx-09__outro-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plx-09__outro-bg {
  position: absolute;
  inset: -20%;
  will-change: transform;
  transform-origin: center center;
  background: radial-gradient(ellipse at 50% 50%, #1a0c26 0%, #080608 65%);
}
.plx-09__outro-text {
  position: relative;
  z-index: 5;
  text-align: center;
  will-change: transform;
}
.plx-09__outro-text h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 10vw, 130px);
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.plx-09__outro-text h2 em {
  font-style: italic;
  font-family: 'Libre Baskerville', serif;
  font-weight: 400;
  color: var(--gold);
  font-size: 0.65em;
}
.plx-09__outro-text p {
  margin-top: 30px;
  font-style: italic;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242,238,232,0.4);
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .plx-09__gallery { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .plx-09__zoom-bg, .plx-09__zoom-grid, .plx-09__rings,
  .plx-09__cell-inner, .plx-09__outro-bg, .plx-09__outro-text { transform: none !important; }
  .plx-09__zoom-content { opacity: 1 !important; transform: none !important; }
  .plx-09__zoom-sub { opacity: 1 !important; }
}
```

**JS:**
```js
(() => {
  const zoomBlock   = document.getElementById('plx09-zoom');
  const bg          = document.getElementById('plx09-bg');
  const grid        = document.getElementById('plx09-grid');
  const rings       = document.getElementById('plx09-rings');
  const content     = document.getElementById('plx09-content');
  const sub         = document.getElementById('plx09-sub');
  const galCells    = [
    document.getElementById('plx09-g1'),
    document.getElementById('plx09-g2'),
    document.getElementById('plx09-g3'),
  ];
  const outroBlock  = document.getElementById('plx09-outro');
  const outroBg     = document.getElementById('plx09-outro-bg');
  const outroText   = document.getElementById('plx09-outro-text');

  let ticking = false;

  function prog(el) {
    if (!el) return 0;
    const r = el.getBoundingClientRect();
    const h = el.offsetHeight - window.innerHeight;
    return h > 0 ? Math.max(0, Math.min(1, -r.top / h)) : 0;
  }

  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const vh = window.innerHeight;

      // ── SCENE 1 ──
      const p = prog(zoomBlock);
      // bg: scales from 1 → 2.2 (world rushes in)
      if (bg) bg.style.transform = `scale(${1 + p * 1.2})`;
      // grid: scales faster (closer layer)
      if (grid) grid.style.transform = `scale(${1 + p * 1.8})`;
      // rings: fly through (scale 1 → 3.5)
      if (rings) rings.style.transform = `translate(-50%,-50%) scale(${1 + p * 2.5})`;

      // content: fade in after 35% scroll, slide up
      const cp = Math.max(0, (p - 0.35) / 0.45);
      if (content) {
        content.style.opacity = String(Math.min(1, cp * 1.5));
        content.style.transform = `translateY(${(1 - Math.min(1, cp)) * 50}px)`;
      }
      if (sub) sub.style.opacity = String(Math.min(1, Math.max(0, (p - 0.55) / 0.3)));

      // ── GALLERY: parallax inside each cell ──
      galCells.forEach((cell) => {
        if (!cell) return;
        const parent = cell.closest('.plx-09__cell');
        if (!parent) return;
        const r = parent.getBoundingClientRect();
        if (r.bottom < -vh || r.top > vh * 2) return;
        const centerOffset = (r.top + r.height / 2) - vh / 2;
        // Cell comes in zoomed out (1.0) from below, scale up as it centers
        const cellProg = Math.max(0, Math.min(1, (vh * 0.6 - r.top) / (vh * 0.8)));
        const scaleVal = 1.0 + cellProg * 0.25;
        const yShift = centerOffset * 0.1;
        cell.style.transform = `scale(${scaleVal}) translateY(${yShift}px)`;
      });

      // ── OUTRO ──
      const op = prog(outroBlock);
      if (outroBg) outroBg.style.transform = `scale(${1 + op * 0.5})`;
      if (outroText) outroText.style.transform = `scale(${1 + op * 0.06}) translateY(${op * -18}px)`;

      ticking = false;
    });
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

### 10. CSS Parallax Background Blur Transition

**Type:** CSS + JS
**Description:** Scroll drives backdrop-filter: blur from 0 to 28px on a vivid blob hero, while a frosted-glass card rises and fades in — pure CSS filter parallax. Live blur-strength badge fixed top-right. Three below-fold panels each with parallax inner image and a hover-triggered blur-reveal text overlay. Glassmorphism aesthetic. Cormorant Garamond + DM Mono on deep violet ground.

**HTML:**
```html
<div class="plx-10">

  <div class="plx-10__badge" id="plx10-badge">BLUR · 0px</div>

  <!-- Hero -->
  <div class="plx-10__hero" id="plx10-hero">
    <div class="plx-10__hero-sticky">

      <!-- Vivid color blobs -->
      <div class="plx-10__blobs" id="plx10-blobs">
        <div class="plx-10__blob"></div>
        <div class="plx-10__blob"></div>
        <div class="plx-10__blob"></div>
        <div class="plx-10__blob"></div>
      </div>

      <!-- Medium blur duplicate (fades in mid-scroll) -->
      <div class="plx-10__blobs-blur" id="plx10-blur1">
        <div class="plx-10__blob"></div>
        <div class="plx-10__blob"></div>
        <div class="plx-10__blob"></div>
        <div class="plx-10__blob"></div>
      </div>

      <!-- Heavy blur duplicate (fades in late) -->
      <div class="plx-10__blobs-blur2" id="plx10-blur2">
        <div class="plx-10__blob"></div>
        <div class="plx-10__blob"></div>
        <div class="plx-10__blob"></div>
      </div>

      <!-- Dark overlay for contrast -->
      <div class="plx-10__dark-overlay" id="plx10-dark"></div>

      <!-- Initial headline (fades out) -->
      <div class="plx-10__hero-headline" id="plx10-hl">
        <span class="plx-10__hero-tag">Parallax · Background Blur Transition</span>
        <h1 class="plx-10__hero-h">Focus<br>through<br><em>motion.</em></h1>
        <p class="plx-10__hero-sub">Scroll to blur the world. The color field beneath you fades from vivid to frosted glass as you descend.</p>
        <div class="plx-10__scroll-hint">
          <div class="plx-10__scroll-line"></div>
          <span>Scroll</span>
        </div>
      </div>

      <!-- Frosted glass card (fades in) -->
      <div class="plx-10__glass-wrap" id="plx10-glass">
        <div class="plx-10__glass-card">
          <span class="plx-10__card-tag">Glassmorphism · Blur Parallax</span>
          <h2 class="plx-10__card-h">The world<br>went <em>soft.</em></h2>
          <div class="plx-10__card-line"></div>
          <p class="plx-10__card-p">The same color field that lived beneath the headline has blurred into this frosted surface. Depth through diffusion — a parallax story told in focus.</p>
        </div>
      </div>

    </div>
  </div>

  <!-- Content sections -->
  <div class="plx-10__sections">

    <div class="plx-10__section">
      <div class="plx-10__sec-visual">
        <div class="plx-10__sec-visual-inner" id="plx10-v1"></div>
        <div class="plx-10__sec-reveal"><span>Depth revealed</span></div>
      </div>
      <div class="plx-10__sec-body">
        <span class="plx-10__sec-tag">01 / Concept</span>
        <h2 class="plx-10__sec-h">Blur as <em>distance.</em></h2>
        <div class="plx-10__sec-line"></div>
        <p class="plx-10__sec-p">The further something is from the focal plane, the softer it becomes. Parallax blur recreates this optical truth — objects you've scrolled past recede into soft focus.</p>
      </div>
    </div>

    <div class="plx-10__section">
      <div class="plx-10__sec-visual">
        <div class="plx-10__sec-visual-inner" id="plx10-v2"></div>
        <div class="plx-10__sec-reveal"><span>Color diffused</span></div>
      </div>
      <div class="plx-10__sec-body">
        <span class="plx-10__sec-tag">02 / Technique</span>
        <h2 class="plx-10__sec-h">Glass over <em>color.</em></h2>
        <div class="plx-10__sec-line"></div>
        <p class="plx-10__sec-p">Two versions of the same color field — one sharp, one blurred — cross-fade as you scroll. The transition is driven by opacity, not filters, keeping performance smooth on any device.</p>
      </div>
    </div>

    <div class="plx-10__section">
      <div class="plx-10__sec-visual">
        <div class="plx-10__sec-visual-inner" id="plx10-v3"></div>
        <div class="plx-10__sec-reveal"><span>Depth in motion</span></div>
      </div>
      <div class="plx-10__sec-body">
        <span class="plx-10__sec-tag">03 / Effect</span>
        <h2 class="plx-10__sec-h">Parallax through <em>focus.</em></h2>
        <div class="plx-10__sec-line"></div>
        <p class="plx-10__sec-p">The background images inside these panels scroll at 0.35× the page speed, creating the sensation that the content floats in front of a deeper layer. Scroll depth as spatial poetry.</p>
      </div>
    </div>

  </div>

</div>
```

**CSS:**
```css
.plx-10, .plx-10 *, .plx-10 *::before, .plx-10 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.plx-10 {
  --bg: #07080e;
  --text: #eff2f8;
  --accent: #92c5f0;
  --warm: #e8c88a;
  font-family: 'Cormorant Garamond', serif;
  background: var(--bg);
  color: var(--text);
  /* overflow-x:hidden was breaking position:sticky on descendants —
     same root cause as Demo 09 (commit 876bc78). overflow:clip is
     the modern equivalent: prevents horizontal overflow without
     creating a scroll context that would steal sticky containment
     from the body. Chrome 90+, Safari 16+, Firefox 81+. */
  overflow-x: clip;
}

/* ═══ HERO: vivid color field blurs as you scroll ═══ */
.plx-10__hero {
  position: relative;
  height: 250vh;
}
.plx-10__hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* The vivid color blobs — this layer parallaxes */
.plx-10__blobs {
  position: absolute;
  inset: -20%;
  will-change: transform;
}
.plx-10__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.plx-10__blob:nth-child(1) {
  width: 60vw; height: 60vw;
  top: -15%; left: -10%;
  background: radial-gradient(circle, rgba(80,150,255,0.6) 0%, transparent 70%);
}
.plx-10__blob:nth-child(2) {
  width: 50vw; height: 50vw;
  top: 20%; right: -5%;
  background: radial-gradient(circle, rgba(180,80,255,0.55) 0%, transparent 70%);
}
.plx-10__blob:nth-child(3) {
  width: 45vw; height: 45vw;
  bottom: -5%; left: 30%;
  background: radial-gradient(circle, rgba(255,130,80,0.5) 0%, transparent 70%);
}
.plx-10__blob:nth-child(4) {
  width: 35vw; height: 35vw;
  top: 50%; left: 15%;
  background: radial-gradient(circle, rgba(80,240,180,0.35) 0%, transparent 70%);
}

/* The frosted overlay — its opacity and filter change with scroll */
/* IMPORTANT: we use a solid semi-opaque overlay that increases, 
   NOT backdrop-filter (which doesn't work on parent bg) */
.plx-10__frost-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    160deg,
    rgba(7, 8, 14, 0) 0%,
    rgba(7, 8, 14, 0) 100%
  );
  will-change: opacity;
  opacity: 0;
  /* We'll use a canvas-style blur by adding a blurred duplicate via a pseudo */
}

/* The blurred version of the blobs — initially invisible, fades in */
.plx-10__blobs-blur {
  position: absolute;
  inset: -20%;
  will-change: transform, opacity, filter;
  opacity: 0;
  filter: blur(0px);
}
.plx-10__blobs-blur .plx-10__blob:nth-child(1) {
  width: 60vw; height: 60vw;
  top: -15%; left: -10%;
  background: radial-gradient(circle, rgba(80,150,255,0.6) 0%, transparent 70%);
  filter: blur(70px);
}
.plx-10__blobs-blur .plx-10__blob:nth-child(2) {
  width: 50vw; height: 50vw;
  top: 20%; right: -5%;
  background: radial-gradient(circle, rgba(180,80,255,0.55) 0%, transparent 70%);
  filter: blur(70px);
}
.plx-10__blobs-blur .plx-10__blob:nth-child(3) {
  width: 45vw; height: 45vw;
  bottom: -5%; left: 30%;
  background: radial-gradient(circle, rgba(255,130,80,0.5) 0%, transparent 70%);
  filter: blur(70px);
}
.plx-10__blobs-blur .plx-10__blob:nth-child(4) {
  width: 35vw; height: 35vw;
  top: 50%; left: 15%;
  background: radial-gradient(circle, rgba(80,240,180,0.35) 0%, transparent 70%);
  filter: blur(70px);
}
/* Additional extra-blur layer at full blur */
.plx-10__blobs-blur2 {
  position: absolute;
  inset: -20%;
  will-change: transform, opacity, filter;
  opacity: 0;
}
.plx-10__blobs-blur2 .plx-10__blob:nth-child(1) {
  width: 70vw; height: 70vw;
  top: -20%; left: -15%;
  background: radial-gradient(circle, rgba(80,150,255,0.5) 0%, transparent 70%);
  filter: blur(140px);
}
.plx-10__blobs-blur2 .plx-10__blob:nth-child(2) {
  width: 60vw; height: 60vw;
  top: 15%; right: -10%;
  background: radial-gradient(circle, rgba(180,80,255,0.45) 0%, transparent 70%);
  filter: blur(120px);
}
.plx-10__blobs-blur2 .plx-10__blob:nth-child(3) {
  width: 55vw; height: 55vw;
  bottom: -10%; left: 25%;
  background: radial-gradient(circle, rgba(255,130,80,0.4) 0%, transparent 70%);
  filter: blur(130px);
}

/* Dark overlay accumulates */
.plx-10__dark-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg);
  will-change: opacity;
  opacity: 0;
}

/* Glass card that fades in on top */
.plx-10__glass-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(30px);
}
.plx-10__glass-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 56px 64px;
  max-width: 560px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.plx-10__glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.plx-10__card-tag {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  display: block;
  margin-bottom: 20px;
}
.plx-10__card-h {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 20px;
}
.plx-10__card-h em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.plx-10__card-p {
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: rgba(239,242,248,0.6);
}
.plx-10__card-line {
  width: 40px;
  height: 1px;
  background: rgba(146,197,240,0.4);
  margin: 24px auto;
}

/* Blur strength badge */
.plx-10__badge {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  opacity: 0.6;
  background: rgba(7,8,14,0.7);
  padding: 6px 12px;
  border: 1px solid rgba(146,197,240,0.2);
  border-radius: 4px;
  pointer-events: none;
}

/* Hero initial headline (fades out as blur comes in) */
.plx-10__hero-headline {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  will-change: opacity, transform;
  pointer-events: none;
}
.plx-10__hero-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239,242,248,0.4);
  margin-bottom: 24px;
  display: block;
}
.plx-10__hero-h {
  font-size: clamp(52px, 12vw, 160px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.plx-10__hero-h em {
  font-style: italic;
  font-weight: 300;
  color: rgba(239,242,248,0.6);
}
.plx-10__hero-sub {
  margin-top: 24px;
  font-size: 16px;
  font-style: italic;
  font-weight: 300;
  color: rgba(239,242,248,0.45);
  max-width: 420px;
}
.plx-10__scroll-hint {
  margin-top: 40px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239,242,248,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.plx-10__scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(239,242,248,0.3), transparent);
  animation: plx-10-line 1.8s ease-in-out infinite;
}
@keyframes plx-10-line {
  0%, 100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50% { opacity: 0.3; transform: scaleY(0.4); transform-origin: top; }
}

/* ═══ CONTENT SECTIONS below hero ═══ */
.plx-10__sections {
  background: var(--bg);
}
.plx-10__section {
  position: relative;
  min-height: 80vh;
  padding: 100px 5vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.plx-10__section:nth-child(even) {
  direction: rtl;
}
.plx-10__section:nth-child(even) > * { direction: ltr; }

.plx-10__sec-visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
}
.plx-10__sec-visual-inner {
  position: absolute;
  inset: -15%;
  will-change: transform;
  transform-origin: center;
  border-radius: 16px;
}
.plx-10__section:nth-child(1) .plx-10__sec-visual-inner {
  background: radial-gradient(ellipse at 40% 50%, rgba(80,150,255,0.45) 0%, rgba(7,8,14,0.9) 65%);
}
.plx-10__section:nth-child(2) .plx-10__sec-visual-inner {
  background: radial-gradient(ellipse at 55% 40%, rgba(180,80,255,0.45) 0%, rgba(7,8,14,0.9) 65%);
}
.plx-10__section:nth-child(3) .plx-10__sec-visual-inner {
  background: radial-gradient(ellipse at 50% 60%, rgba(255,130,80,0.45) 0%, rgba(7,8,14,0.9) 65%);
}

/* Hover blur reveal on section visuals */
.plx-10__sec-reveal {
  position: absolute;
  inset: 0;
  background: rgba(7,8,14,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s;
}
.plx-10__sec-visual:hover .plx-10__sec-reveal { opacity: 1; }
.plx-10__sec-reveal span {
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 600;
  font-style: italic;
  color: var(--accent);
}

.plx-10__sec-body {}
.plx-10__sec-tag {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.6;
  margin-bottom: 16px;
  display: block;
}
.plx-10__sec-h {
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 20px;
}
.plx-10__sec-h em { font-style: italic; font-weight: 300; color: rgba(239,242,248,0.7); }
.plx-10__sec-p {
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  color: rgba(239,242,248,0.45);
  max-width: 400px;
}
.plx-10__sec-line {
  width: 48px; height: 1px;
  background: rgba(146,197,240,0.3);
  margin: 20px 0;
}

@media (max-width: 768px) {
  .plx-10__section { grid-template-columns: 1fr; direction: ltr !important; }
  .plx-10__glass-card { padding: 36px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .plx-10__blobs, .plx-10__blobs-blur, .plx-10__blobs-blur2 { transform: none !important; }
  .plx-10__scroll-line { animation: none; }
  .plx-10__sec-visual-inner { transform: none !important; }
}
```

**JS:**
```js
(() => {
  const hero     = document.getElementById('plx10-hero');
  const blobs    = document.getElementById('plx10-blobs');
  const blur1    = document.getElementById('plx10-blur1');
  const blur2    = document.getElementById('plx10-blur2');
  const dark     = document.getElementById('plx10-dark');
  const hl       = document.getElementById('plx10-hl');
  const glass    = document.getElementById('plx10-glass');
  const badge    = document.getElementById('plx10-badge');
  const secVisuals = [
    { el: document.getElementById('plx10-v1'), speed: 0.35 },
    { el: document.getElementById('plx10-v2'), speed: 0.3  },
    { el: document.getElementById('plx10-v3'), speed: 0.32 },
  ];

  if (!hero) return;

  let ticking = false;

  function prog(el) {
    const r = el.getBoundingClientRect();
    const h = el.offsetHeight - window.innerHeight;
    return h > 0 ? Math.max(0, Math.min(1, -r.top / h)) : 0;
  }

  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      const p = prog(hero);
      const vh = window.innerHeight;

      // Blobs parallax downward (bg layer moves slower)
      if (blobs) blobs.style.transform = `translateY(${p * -80}px)`;
      if (blur1) blur1.style.transform  = `translateY(${p * -80}px)`;
      if (blur2) blur2.style.transform  = `translateY(${p * -80}px)`;

      // Cross-fade from sharp → medium blur → heavy blur
      // Phase 1 (0→0.4): sharp visible, blur1 fades in
      // Phase 2 (0.4→0.8): blur1 fades in fully, blur2 starts
      // Phase 3 (0.7→1.0): glass card rises

      const blur1Alpha = Math.max(0, Math.min(1, p / 0.45));
      const blur2Alpha = Math.max(0, Math.min(1, (p - 0.35) / 0.35));
      const darkAlpha  = Math.max(0, Math.min(0.55, (p - 0.4) / 0.4 * 0.55));
      const hlAlpha    = Math.max(0, Math.min(1, 1 - p / 0.5));
      const glassAlpha = Math.max(0, Math.min(1, (p - 0.6) / 0.3));
      const glassY     = (1 - Math.min(1, (p - 0.6) / 0.3)) * 30;

      // Approximate blur in px for badge
      const blurPx = Math.round(blur2Alpha * 28 + blur1Alpha * 14);

      if (blur1) blur1.style.opacity = String(blur1Alpha);
      if (blur2) blur2.style.opacity = String(blur2Alpha);
      if (dark)  dark.style.opacity  = String(darkAlpha);
      if (hl) {
        hl.style.opacity = String(hlAlpha);
        hl.style.transform = `translateY(${p * -20}px)`;
      }
      if (glass) {
        glass.style.opacity = String(glassAlpha);
        glass.style.transform = `translateY(${glassY}px)`;
      }
      if (badge) badge.textContent = `BLUR · ${blurPx}px`;

      // Section visuals parallax
      secVisuals.forEach(({ el, speed }) => {
        if (!el) return;
        const parent = el.closest('.plx-10__sec-visual');
        if (!parent) return;
        const r = parent.getBoundingClientRect();
        if (r.bottom < -100 || r.top > vh + 100) return;
        const centerOffset = (r.top + r.height / 2) - vh / 2;
        el.style.transform = `translateY(${centerOffset * speed * -0.5}px) scale(1.3)`;
      });

      ticking = false;
    });
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
```

---
## 18 CSS Play / Pause Button Designs

URL: https://codefronts.com/components/css-play-pause-buttons/
Description: 18 free CSS play / pause button designs for audio, video and podcast UIs — copy-paste HTML, CSS and JS.
Demo count: 18

### 01. Morph Triangle

**Type:** Light JS
**Description:** A play triangle that morphs into two pause bars via SVG path interpolation. The icon never disappears — it transforms — which feels meaningfully more premium than a hard swap.

**HTML:**
```html
<button class="pp-morph" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
    <path class="pp-morph-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-morph {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  border: 0;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 8px 24px -8px rgba(124, 108, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.pp-morph:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px -8px rgba(124, 108, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pp-morph:focus-visible {
  outline: 3px solid rgba(124, 108, 255, 0.5);
  outline-offset: 3px;
}
.pp-morph-icon {
  transition: d 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-morph[aria-pressed="true"] .pp-morph-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

/* ─── Drop-in JS ───
document.querySelectorAll('[data-pp]').forEach(btn => {
  btn.addEventListener('click', () => {
    const playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
*/
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 02. Vinyl Record

**Type:** Light JS
**Description:** A miniature vinyl record. While playing it spins continuously; on pause the rotation slows to a stop with a subtle ease-out — the canonical music-app metaphor done as a single CSS button.

**HTML:**
```html
<button class="pp-vinyl" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-vinyl-disc" aria-hidden="true">
    <span class="pp-vinyl-shine"></span>
    <span class="pp-vinyl-label"></span>
    <span class="pp-vinyl-icon"></span>
  </span>
</button>
```

**CSS:**
```css
.pp-vinyl {
  width: 72px;
  height: 72px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.pp-vinyl:focus-visible {
  outline: 3px solid rgba(251, 191, 36, 0.5);
  outline-offset: 3px;
}
.pp-vinyl-disc {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #0a0a0a 0 1.5px, #1c1c1c 1.5px 3px);
  box-shadow:
    0 8px 22px -4px rgba(0, 0, 0, 0.7),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  /* Asymmetric reflection that makes the rotation visible */
}
.pp-vinyl-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  pointer-events: none;
}
/* The shine span — a brighter, narrow streak that catches the eye */
.pp-vinyl-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.22) 18deg,
    transparent 36deg,
    transparent 360deg
  );
  pointer-events: none;
}
.pp-vinyl[aria-pressed="true"] .pp-vinyl-disc {
  animation: ppVinylSpin 2.4s linear infinite;
}
@keyframes ppVinylSpin {
  to {
    transform: rotate(360deg);
  }
}
.pp-vinyl-label {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.4), transparent 40%),
    linear-gradient(135deg, #fbbf24, #b45309);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}
.pp-vinyl-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: #15151d;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .pp-vinyl,
  .pp-vinyl * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 03. Equaliser Bars

**Type:** Light JS
**Description:** Three vertical bars that animate height while playing and freeze instantly when paused. Doubles as both a button and a "now playing" indicator — perfect for podcast and audio UIs.

**HTML:**
```html
<button class="pp-eq" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-eq-bars" aria-hidden="true"> <span></span><span></span><span></span> </span>
</button>
```

**CSS:**
```css
.pp-eq {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.3);
  color: #2dd4bf;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.pp-eq:hover {
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(20, 184, 166, 0.5);
  transform: translateY(-1px);
}
.pp-eq:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.4);
  outline-offset: 3px;
}
.pp-eq-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
}
.pp-eq-bars > span {
  width: 4px;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transform: scaleY(0.3);
  transform-origin: center;
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(1) {
  transform: scaleY(0.4);
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(2) {
  transform: scaleY(0.7);
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(3) {
  transform: scaleY(0.5);
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span {
  animation: ppEqDance 0.9s ease-in-out infinite;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(1) {
  animation-delay: 0s;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(2) {
  animation-delay: 0.2s;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes ppEqDance {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-eq,
  .pp-eq * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 04. Skip Hub

**Type:** Light JS
**Description:** Full media-control cluster with previous, play/pause and next buttons. The central button uses a morph icon with a gradient halo while playing — the canonical pattern for music players and podcast apps.

**HTML:**
```html
<div class="pp-hub" role="group" aria-label="Media controls">
  <button class="pp-hub-side" type="button" aria-label="Previous track">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
      <path d="M6 5 H8 V19 H6 Z M8 12 L19 5 V19 Z" fill="currentColor" />
    </svg>
  </button>
  <button class="pp-hub-main" type="button" aria-pressed="false" aria-label="Play" data-pp>
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <path class="pp-hub-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
  </button>
  <button class="pp-hub-side" type="button" aria-label="Next track">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
      <path d="M16 5 H18 V19 H16 Z M5 5 L16 12 L5 19 Z" fill="currentColor" />
    </svg>
  </button>
</div>
```

**CSS:**
```css
.pp-hub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}
.pp-hub-side {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 50%;
  color: #94a3b8;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    transform 0.12s;
}
.pp-hub-side:hover {
  color: #f0eeff;
  background: rgba(255, 255, 255, 0.06);
}
.pp-hub-side:active {
  transform: scale(0.92);
}
.pp-hub-main {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  border: 0;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 0 0 0 rgba(244, 63, 94, 0.5),
    0 8px 18px -6px rgba(244, 63, 94, 0.7);
  transition:
    box-shadow 0.25s,
    transform 0.15s;
}
.pp-hub-main:hover {
  transform: translateY(-1px);
}
.pp-hub-main:focus-visible {
  outline: 3px solid rgba(244, 63, 94, 0.45);
  outline-offset: 3px;
}
.pp-hub-main[aria-pressed="true"] {
  box-shadow:
    0 0 0 6px rgba(244, 63, 94, 0.18),
    0 8px 22px -6px rgba(244, 63, 94, 0.85);
}
.pp-hub-icon {
  transition: d 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-hub-main[aria-pressed="true"] .pp-hub-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 05. Liquid Wave

**Type:** Light JS
**Description:** A continuous waveform travels across the button while playing and freezes mid-cycle on pause. Built with an SVG path + CSS transform — perfect for audio players and music-streaming UIs.

**HTML:**
```html
<button class="pp-wave" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 200 40" preserveAspectRatio="none" class="pp-wave-svg" aria-hidden="true">
    <path
      class="pp-wave-path"
      d="M0 20 Q 20 0 40 20 T 80 20 T 120 20 T 160 20 T 200 20"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
    />
  </svg>
  <span class="pp-wave-icon" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.pp-wave {
  position: relative;
  width: 140px;
  height: 56px;
  background: linear-gradient(135deg, #0c4a6e, #075985);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  color: #38bdf8;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition:
    border-color 0.2s,
    transform 0.15s;
}
.pp-wave:hover {
  border-color: rgba(56, 189, 248, 0.6);
  transform: translateY(-1px);
}
.pp-wave:focus-visible {
  outline: 3px solid rgba(56, 189, 248, 0.4);
  outline-offset: 3px;
}
.pp-wave-svg {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
  opacity: 0.6;
}
.pp-wave[aria-pressed="true"] .pp-wave-svg {
  animation: ppWaveScroll 2.4s linear infinite;
}
@keyframes ppWaveScroll {
  to {
    transform: translateX(-50%);
  }
}
.pp-wave-icon {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 13px;
  border-color: transparent transparent transparent #38bdf8;
  margin-left: 4px;
  transition:
    border-width 0.25s,
    margin-left 0.25s;
}
.pp-wave[aria-pressed="true"] .pp-wave-icon {
  border-width: 0 4px 0 4px;
  border-color: transparent #38bdf8 transparent #38bdf8;
  height: 18px;
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pp-wave,
  .pp-wave * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 06. Pulse Halo

**Type:** Light JS
**Description:** Concentric halo rings emanate outward while playing — a soft pulse that signals "live" or "active" without distraction. Ideal for radio streams, live broadcasts, and listen-now CTAs.

**HTML:**
```html
<button class="pp-pulse" type="button" aria-pressed="false" aria-label="Play live" data-pp>
  <span class="pp-pulse-rings" aria-hidden="true"> <span></span><span></span> </span>
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <path class="pp-pulse-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-pulse {
  position: relative;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ec4899, #db2777);
  border: 0;
  border-radius: 50%;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px -6px rgba(236, 72, 153, 0.7);
  transition: transform 0.15s;
  z-index: 1;
}
.pp-pulse:hover {
  transform: translateY(-1px);
}
.pp-pulse:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.5);
  outline-offset: 3px;
}
.pp-pulse-rings {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.pp-pulse-rings > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #ec4899;
  opacity: 0;
  transform: scale(1);
}
.pp-pulse[aria-pressed="true"] .pp-pulse-rings > span {
  animation: ppPulseRipple 1.8s ease-out infinite;
}
.pp-pulse[aria-pressed="true"] .pp-pulse-rings > span:nth-child(2) {
  animation-delay: 0.9s;
}
@keyframes ppPulseRipple {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
.pp-pulse-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-pulse[aria-pressed="true"] .pp-pulse-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-pulse,
  .pp-pulse * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 07. Toggle Pill

**Type:** Light JS
**Description:** iOS-style sliding toggle — but for play/pause. The thumb glides between two icons inside a single rounded track. Reads instantly as a state-bearing control, not just a button.

**HTML:**
```html
<button class="pp-toggle" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-toggle-icons" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="12" height="12">
      <path d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
    <svg viewBox="0 0 24 24" width="12" height="12">
      <path d="M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z" fill="currentColor" />
    </svg>
  </span>
  <span class="pp-toggle-thumb" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.pp-toggle {
  position: relative;
  width: 76px;
  height: 38px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.pp-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
.pp-toggle:focus-visible {
  outline: 3px solid rgba(45, 212, 191, 0.4);
  outline-offset: 3px;
}
.pp-toggle-icons {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 11px;
  color: #64748b;
  pointer-events: none;
  transition: color 0.2s;
}
.pp-toggle[aria-pressed="false"] .pp-toggle-icons :first-child {
  color: #2dd4bf;
}
.pp-toggle[aria-pressed="true"] .pp-toggle-icons :last-child {
  color: #2dd4bf;
}
.pp-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
  border-radius: 50%;
  box-shadow:
    0 4px 10px -2px rgba(20, 184, 166, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-toggle[aria-pressed="true"] .pp-toggle-thumb {
  transform: translateX(38px);
}
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 08. Neon Arcade

**Type:** Light JS
**Description:** Stacked neon-cyan glow with monospace label. The play / pause icon sits inside a glowing ring that pulses while playing — synthwave 80s arcade vibes for gaming, retro media, and dev tools.

**HTML:**
```html
<button class="pp-neon" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-neon-ring" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
      <path class="pp-neon-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
  </span>
  <span class="pp-neon-label" aria-hidden="true">
    <span class="pp-neon-text pp-neon-text-play">PLAY</span>
    <span class="pp-neon-text pp-neon-text-pause">PAUSE</span>
  </span>
</button>
```

**CSS:**
```css
.pp-neon {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 10px 16px;
  background: #0a0014;
  border: 1px solid rgba(108, 255, 255, 0.4);
  border-radius: 8px;
  color: #6cffff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  text-shadow: 0 0 8px rgba(108, 255, 255, 0.6);
  box-shadow:
    inset 0 0 12px rgba(108, 255, 255, 0.1),
    0 0 14px rgba(108, 255, 255, 0.25);
  transition:
    box-shadow 0.25s,
    border-color 0.2s,
    transform 0.15s;
}
.pp-neon:hover {
  border-color: #6cffff;
  box-shadow:
    inset 0 0 18px rgba(108, 255, 255, 0.2),
    0 0 22px rgba(108, 255, 255, 0.5);
  transform: translateY(-1px);
}
.pp-neon:focus-visible {
  outline: 3px solid rgba(108, 255, 255, 0.5);
  outline-offset: 3px;
}
.pp-neon-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #6cffff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(108, 255, 255, 0.4);
}
.pp-neon[aria-pressed="true"] .pp-neon-ring {
  animation: ppNeonPulse 1.4s ease-in-out infinite;
}
@keyframes ppNeonPulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(108, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 22px rgba(108, 255, 255, 0.85);
  }
}
.pp-neon-ring svg {
  display: block;
}
.pp-neon-label {
  position: relative;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  /* Reserve width of the longer label (PAUSE) so the button
     doesn't reflow when the state flips. */
  min-width: 4ch;
  text-align: left;
}
.pp-neon-text {
  display: none;
}
.pp-neon[aria-pressed="false"] .pp-neon-text-play {
  display: inline;
}
.pp-neon[aria-pressed="true"] .pp-neon-text-pause {
  display: inline;
}
.pp-neon-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-neon[aria-pressed="true"] .pp-neon-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-neon,
  .pp-neon * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 09. Minimal Outline

**Type:** Light JS
**Description:** Refined outline-only button with a hairline border and subtle hover lift. The icon morphs cleanly between play and pause — an editorial, restrained pattern for content-heavy sites.

**HTML:**
```html
<button class="pp-min" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
    <path class="pp-min-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
  <span class="pp-min-label">Listen</span>
</button>
```

**CSS:**
```css
.pp-min {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #f0eeff;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.15s;
}
.pp-min:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}
.pp-min:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.25);
  outline-offset: 3px;
}
.pp-min[aria-pressed="true"] {
  background: #f0eeff;
  color: #0f172a;
  border-color: #f0eeff;
}
.pp-min-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-min[aria-pressed="true"] .pp-min-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
.pp-min[aria-pressed="true"] .pp-min-label::before {
  content: "Pause";
}
.pp-min[aria-pressed="true"] .pp-min-label {
  font-size: 0;
}
.pp-min[aria-pressed="true"] .pp-min-label::before {
  font-size: 13px;
}
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 10. Gradient Disc

**Type:** Light JS
**Description:** A `@property`-animated conic gradient rim that rotates while playing — true CSS angle animation, not a keyframes hack. Feels like a turntable or a high-end audio interface dial.

**HTML:**
```html
<button class="pp-disc" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-disc-rim" aria-hidden="true"></span>
  <span class="pp-disc-core" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path class="pp-disc-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
  </span>
</button>
```

**CSS:**
```css
@property --pp-disc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.pp-disc {
  position: relative;
  width: 64px;
  height: 64px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.pp-disc:focus-visible {
  outline: 3px solid rgba(192, 132, 252, 0.5);
  outline-offset: 3px;
}
.pp-disc-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from var(--pp-disc-angle, 0deg),
    #c084fc,
    #f472b6,
    #fbbf24,
    #34d399,
    #c084fc
  );
  filter: blur(0px);
  transition: filter 0.2s;
}
.pp-disc[aria-pressed="true"] .pp-disc-rim {
  animation: ppDiscSpin 4s linear infinite;
  filter: blur(0.5px);
}
@keyframes ppDiscSpin {
  to {
    --pp-disc-angle: 360deg;
  }
}
.pp-disc-core {
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, #2a2a36 0%, #15151d 100%);
  border-radius: 50%;
  color: #f0eeff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pp-disc:hover .pp-disc-core {
  color: #c4b5fd;
}
.pp-disc-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-disc[aria-pressed="true"] .pp-disc-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-disc,
  .pp-disc * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 11. Voice Memo

**Type:** Light JS
**Description:** Record-style red button with a tiny live waveform indicator. The waveform animates while playing back; freezes when paused. Specifically tuned for voice notes, podcasts, and dictation UIs.

**HTML:**
```html
<button class="pp-mem" type="button" aria-pressed="false" aria-label="Play voice memo" data-pp>
  <span class="pp-mem-dot" aria-hidden="true"></span>
  <span class="pp-mem-wave" aria-hidden="true">
    <span></span><span></span><span></span><span></span><span></span> <span></span><span></span
    ><span></span><span></span>
  </span>
  <span class="pp-mem-time">0:14</span>
</button>
```

**CSS:**
```css
.pp-mem {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #f0eeff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.pp-mem:hover {
  border-color: rgba(239, 68, 68, 0.4);
  background: #1a1a25;
}
.pp-mem:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.4);
  outline-offset: 3px;
}
.pp-mem-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  transition: background 0.2s;
}
.pp-mem[aria-pressed="true"] .pp-mem-dot {
  animation: ppMemPing 1.4s ease-out infinite;
}
@keyframes ppMemPing {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}
.pp-mem-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}
.pp-mem-wave > span {
  width: 2px;
  height: 30%;
  background: #94a3b8;
  border-radius: 1px;
  transform-origin: center;
}
.pp-mem-wave > span:nth-child(1) {
  height: 50%;
}
.pp-mem-wave > span:nth-child(2) {
  height: 80%;
}
.pp-mem-wave > span:nth-child(3) {
  height: 65%;
}
.pp-mem-wave > span:nth-child(4) {
  height: 95%;
}
.pp-mem-wave > span:nth-child(5) {
  height: 70%;
}
.pp-mem-wave > span:nth-child(6) {
  height: 90%;
}
.pp-mem-wave > span:nth-child(7) {
  height: 55%;
}
.pp-mem-wave > span:nth-child(8) {
  height: 75%;
}
.pp-mem-wave > span:nth-child(9) {
  height: 40%;
}
.pp-mem[aria-pressed="true"] .pp-mem-wave > span {
  background: #ef4444;
  animation: ppMemWave 0.6s ease-in-out infinite alternate;
}
.pp-mem[aria-pressed="true"] .pp-mem-wave > span:nth-child(2n) {
  animation-delay: 0.1s;
}
.pp-mem[aria-pressed="true"] .pp-mem-wave > span:nth-child(3n) {
  animation-delay: 0.2s;
}
@keyframes ppMemWave {
  from {
    transform: scaleY(0.5);
  }
  to {
    transform: scaleY(1.1);
  }
}
.pp-mem-time {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .pp-mem,
  .pp-mem * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 12. Floating FAB

**Type:** Light JS
**Description:** Material-style floating action button with elevation that lifts on hover and presses down on click. The icon morphs between play and pause — a polished pattern for full-screen video and tutorial overlays.

**HTML:**
```html
<button class="pp-fab" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
    <path class="pp-fab-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-fab {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: 0;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.18),
    0 12px 24px -4px rgba(99, 102, 241, 0.5);
  transition:
    box-shadow 0.25s,
    transform 0.15s,
    background 0.25s;
}
.pp-fab:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 22px 36px -6px rgba(99, 102, 241, 0.6);
}
.pp-fab:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 4px 8px -2px rgba(99, 102, 241, 0.45);
}
.pp-fab:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
}
.pp-fab[aria-pressed="true"] {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}
.pp-fab-icon {
  transition: d 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-fab[aria-pressed="true"] .pp-fab-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 13. Progress Ring

**Type:** Light JS
**Description:** A circular play button wrapped by an SVG progress ring that fills as audio plays. Tick the percentage from your real <code>timeupdate</code> events — gold/cream palette suited to podcast and audiobook UIs.

**HTML:**
```html
<button class="pp-prog" type="button" aria-pressed="false" aria-label="Play" data-pp data-pp-prog>
  <svg class="pp-prog-ring" viewBox="0 0 56 56" aria-hidden="true">
    <circle cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="3" />
    <circle
      class="pp-prog-fill"
      cx="28"
      cy="28"
      r="24"
      fill="none"
      stroke="#fbbf24"
      stroke-width="3"
      stroke-linecap="round"
      pathLength="100"
      stroke-dasharray="100"
      stroke-dashoffset="100"
      transform="rotate(-90 28 28)"
    />
  </svg>
  <svg viewBox="0 0 24 24" width="18" height="18" class="pp-prog-icon-svg" aria-hidden="true">
    <path class="pp-prog-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-prog {
  position: relative;
  width: 60px;
  height: 60px;
  border: 0;
  padding: 0;
  background: radial-gradient(circle at 30% 25%, #2a2519 0%, #15120c 100%);
  border-radius: 50%;
  color: #fbbf24;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 6px 18px -4px rgba(251, 191, 36, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.pp-prog:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px -4px rgba(251, 191, 36, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pp-prog:focus-visible {
  outline: 3px solid rgba(251, 191, 36, 0.5);
  outline-offset: 3px;
}
.pp-prog-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pp-prog-fill {
  transition: stroke-dashoffset 0.25s linear;
}
.pp-prog-icon-svg {
  position: relative;
  z-index: 1;
}
.pp-prog-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-prog[aria-pressed="true"] .pp-prog-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

/* ── Drop-in JS for real progress ──
const btn  = document.querySelector('.pp-prog');
const fill = btn.querySelector('.pp-prog-fill');
const audio = document.querySelector('audio');

audio.addEventListener('timeupdate', () => {
  const pct = (audio.currentTime / audio.duration) * 100 || 0;
  fill.style.strokeDashoffset = String(100 - pct);
});
*/
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 14. Magnetic Hover

**Type:** Light JS
**Description:** A play button whose icon subtly drifts toward the cursor on hover — a small touch of physicality that signals an interactive surface. Click to play; the icon morphs and the magnet effect releases.

**HTML:**
```html
<button class="pp-mag" type="button" aria-pressed="false" aria-label="Play" data-pp data-pp-mag>
  <span class="pp-mag-track" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
      <path class="pp-mag-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
  </span>
</button>
```

**CSS:**
```css
.pp-mag {
  width: 60px;
  height: 60px;
  border: 0;
  padding: 0;
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  border-radius: 18px;
  color: #bfdbfe;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 22px -6px rgba(29, 78, 216, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    box-shadow 0.25s,
    color 0.2s;
}
.pp-mag:hover {
  color: #ffffff;
}
.pp-mag:focus-visible {
  outline: 3px solid rgba(29, 78, 216, 0.5);
  outline-offset: 3px;
}
.pp-mag-track {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pp-mag-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-mag[aria-pressed="true"] .pp-mag-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
.pp-mag[aria-pressed="true"] .pp-mag-track {
  transform: translate(0, 0) !important;
}

/* ── Drop-in JS for the magnetic effect ──
document.querySelectorAll('[data-pp-mag]').forEach(btn => {
  const track = btn.querySelector('.pp-mag-track');
  btn.addEventListener('pointermove', e => {
    const r = btn.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width  - 0.5) * 12;
    const y = ((e.clientY - r.top)  / r.height - 0.5) * 12;
    track.style.transform = `translate(${x}px, ${y}px)`;
  });
  btn.addEventListener('pointerleave', () => {
    track.style.transform = 'translate(0, 0)';
  });
});
*/
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 15. Liquid Drop

**Type:** Light JS
**Description:** Organic blob shape that morphs its border-radius on play — like a droplet of mercury reshaping itself. Mint-fresh palette for wellness and meditation apps.

**HTML:**
```html
<button class="pp-drop" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
    <path class="pp-drop-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-drop {
  width: 64px;
  height: 64px;
  border: 0;
  padding: 0;
  background: linear-gradient(135deg, #34d399, #10b981);
  border-radius: 50% 40% 50% 60% / 50% 50% 50% 50%;
  color: white;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 10px 24px -4px rgba(16, 185, 129, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    border-radius 0.35s cubic-bezier(0.5, 0, 0.3, 1.2),
    transform 0.15s,
    box-shadow 0.25s;
}
.pp-drop:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px -4px rgba(16, 185, 129, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pp-drop:focus-visible {
  outline: 3px solid rgba(52, 211, 153, 0.45);
  outline-offset: 3px;
}
.pp-drop[aria-pressed="true"] {
  animation: ppDropMorph 4s ease-in-out infinite;
}
@keyframes ppDropMorph {
  0%,
  100% {
    border-radius: 50% 40% 50% 60% / 50% 50% 50% 50%;
  }
  25% {
    border-radius: 60% 50% 40% 50% / 40% 60% 50% 50%;
  }
  50% {
    border-radius: 40% 50% 60% 40% / 50% 40% 60% 50%;
  }
  75% {
    border-radius: 50% 60% 40% 50% / 60% 50% 40% 60%;
  }
}
.pp-drop-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-drop[aria-pressed="true"] .pp-drop-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-drop,
  .pp-drop * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 16. Ripple on Click

**Type:** Light JS
**Description:** Material-style ink ripple that emanates from the click point on every press. Click feedback that reads as tactile instantly — a subtle but premium detail.

**HTML:**
```html
<button
  class="pp-ripple"
  type="button"
  aria-pressed="false"
  aria-label="Play"
  data-pp
  data-pp-ripple
>
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <path class="pp-ripple-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-ripple {
  position: relative;
  width: 56px;
  height: 56px;
  border: 0;
  padding: 0;
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 6px 16px -4px rgba(139, 92, 246, 0.55);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.pp-ripple:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(139, 92, 246, 0.7);
}
.pp-ripple:focus-visible {
  outline: 3px solid rgba(139, 92, 246, 0.5);
  outline-offset: 3px;
}
.pp-ripple-wave {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ppRippleOut 0.6s ease-out forwards;
}
@keyframes ppRippleOut {
  to {
    width: 140px;
    height: 140px;
    opacity: 0;
  }
}
.pp-ripple-icon {
  position: relative;
  z-index: 1;
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-ripple[aria-pressed="true"] .pp-ripple-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

/* ── Drop-in JS for the ripple ──
document.querySelectorAll('[data-pp-ripple]').forEach(btn => {
  btn.addEventListener('pointerdown', e => {
    const r = btn.getBoundingClientRect();
    const wave = document.createElement('span');
    wave.className = 'pp-ripple-wave';
    wave.style.left = (e.clientX - r.left) + 'px';
    wave.style.top  = (e.clientY - r.top)  + 'px';
    btn.appendChild(wave);
    wave.addEventListener('animationend', () => wave.remove());
  });
});
*/

@media (prefers-reduced-motion: reduce) {
  .pp-ripple,
  .pp-ripple * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 17. Cassette Tape

**Type:** Light JS
**Description:** Skeumorphic mini-cassette with two reels that rotate while playing and freeze instantly on pause. Warm tactile detail for retro music players, lo-fi radio apps, and nostalgic brand moments.

**HTML:**
```html
<button class="pp-tape" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-tape-body" aria-hidden="true">
    <span class="pp-tape-reel pp-tape-reel-l">
      <span class="pp-tape-spoke"></span>
      <span class="pp-tape-spoke"></span>
      <span class="pp-tape-spoke"></span>
    </span>
    <span class="pp-tape-reel pp-tape-reel-r">
      <span class="pp-tape-spoke"></span>
      <span class="pp-tape-spoke"></span>
      <span class="pp-tape-spoke"></span>
    </span>
    <span class="pp-tape-label">SIDE A</span>
  </span>
</button>
```

**CSS:**
```css
.pp-tape {
  width: 110px;
  height: 70px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}
.pp-tape:focus-visible {
  outline: 3px solid rgba(180, 83, 9, 0.5);
  outline-offset: 3px;
}
.pp-tape-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #92400e 0%, #78350f 100%);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35),
    0 8px 20px -6px rgba(0, 0, 0, 0.55);
}
.pp-tape-reel {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, #1f1f1f 28%, #444 30%, #444 60%, #1f1f1f 62%);
  border: 1.5px solid #1a1a1a;
  display: grid;
  place-items: center;
}
.pp-tape-reel-l {
  left: 12px;
}
.pp-tape-reel-r {
  right: 12px;
}
.pp-tape-spoke {
  position: absolute;
  width: 2px;
  height: 100%;
  background: #888;
  border-radius: 1px;
}
.pp-tape-spoke:nth-child(2) {
  transform: rotate(60deg);
}
.pp-tape-spoke:nth-child(3) {
  transform: rotate(-60deg);
}
.pp-tape[aria-pressed="true"] .pp-tape-reel {
  animation: ppTapeSpin 1.6s linear infinite;
}
@keyframes ppTapeSpin {
  to {
    transform: rotate(360deg);
  }
}
.pp-tape-label {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  color: #fed7aa;
  letter-spacing: 0.2em;
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 8px;
  border-radius: 2px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pp-tape,
  .pp-tape * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 18. Live Badge

**Type:** Light JS
**Description:** Live-broadcast pill with a breathing background and a tiny presence dot. Click to join — the dot starts pinging, the gradient shifts to "on-air" warm red. Perfect for live podcasts, watch-parties, and Twitch-style streams.

**HTML:**
```html
<button
  class="pp-live"
  type="button"
  aria-pressed="false"
  aria-label="Tune in to live broadcast"
  data-pp
>
  <span class="pp-live-dot" aria-hidden="true"></span>
  <span class="pp-live-text">
    <span class="pp-live-state">LIVE</span>
    <span class="pp-live-meta">2.4k listening</span>
  </span>
  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" class="pp-live-icon-svg">
    <path class="pp-live-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-live {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: linear-gradient(135deg, #1f1313 0%, #2a1414 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 999px;
  color: #fecaca;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.15s;
}
.pp-live:hover {
  border-color: rgba(239, 68, 68, 0.6);
  transform: translateY(-1px);
}
.pp-live:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.4);
  outline-offset: 3px;
}
.pp-live[aria-pressed="true"] {
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
  color: white;
  border-color: #ef4444;
}
.pp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}
.pp-live[aria-pressed="true"] .pp-live-dot {
  background: #ef4444;
  animation: ppLivePing 1.4s ease-out infinite;
}
@keyframes ppLivePing {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}
.pp-live-text {
  display: grid;
  line-height: 1.1;
}
.pp-live-state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.pp-live-meta {
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pp-live[aria-pressed="true"] .pp-live-state::before {
  content: "ON AIR";
}
.pp-live[aria-pressed="true"] .pp-live-state {
  font-size: 0;
}
.pp-live[aria-pressed="true"] .pp-live-state::before {
  font-size: 11px;
  letter-spacing: 0.18em;
}
.pp-live-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-live[aria-pressed="true"] .pp-live-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-live,
  .pp-live * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

---
## 21 CSS Pricing Sections

URL: https://codefronts.com/layouts/css-pricing-sections/
Description: 21 hand-coded CSS pricing sections — three-tier cards, comparison tables, billing toggles, usage sliders, per-seat calculators. Copy-paste ready, accessible, mobile-first.
Demo count: 21

### 01. Animated Border Cards

**Type:** Pure CSS
**Description:** Three pricing cards with a conic-gradient border that rotates continuously using <code>@property</code> animatable angle. Slate base, violet/cyan highlight on the recommended tier — the modern AI-product launch treatment.

**HTML:**
```html
<section class="ps-grb" aria-label="Pricing">
  <header class="ps-grb-head">
    <span class="ps-grb-eye">Plans</span>
    <h2>Built for builders. Priced for shipping.</h2>
  </header>
  <div class="ps-grb-grid">
    <article class="ps-grb-card">
      <span class="ps-grb-edge" aria-hidden="true"></span>
      <div class="ps-grb-body">
        <h3>Starter</h3>
        <div class="ps-grb-price"><em>$</em>14<span>/mo</span></div>
        <ul>
          <li>3 projects</li>
          <li>10 GB storage</li>
          <li>Community support</li>
        </ul>
        <a class="ps-grb-cta" href="#starter">Choose Starter</a>
      </div>
    </article>
    <article class="ps-grb-card ps-grb-pri">
      <span class="ps-grb-edge" aria-hidden="true"></span>
      <div class="ps-grb-body">
        <span class="ps-grb-pill">Recommended</span>
        <h3>Builder</h3>
        <div class="ps-grb-price"><em>$</em>32<span>/mo</span></div>
        <ul>
          <li>Unlimited projects</li>
          <li>100 GB storage</li>
          <li>Priority support</li>
          <li>API + webhooks</li>
        </ul>
        <a class="ps-grb-cta ps-grb-cta-pri" href="#builder">Choose Builder</a>
      </div>
    </article>
    <article class="ps-grb-card">
      <span class="ps-grb-edge" aria-hidden="true"></span>
      <div class="ps-grb-body">
        <h3>Scale</h3>
        <div class="ps-grb-price"><em>$</em>89<span>/mo</span></div>
        <ul>
          <li>Everything in Builder</li>
          <li>SSO + audit logs</li>
          <li>SLA + CSM</li>
        </ul>
        <a class="ps-grb-cta" href="#scale">Talk to sales</a>
      </div>
    </article>
  </div>
</section>
```

**CSS:**
```css
@property --ps-grb-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.ps-grb {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #0a0d1a;
  color: #e6e7f0;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-grb-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-grb-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #a5b4fc; padding: 5px 12px;
  background: rgba(165,180,252,0.1);
  border: 1px solid rgba(165,180,252,0.25);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-grb-head h2 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0; color: #fff;
}
.ps-grb-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
}
.ps-grb-card {
  position: relative;
  border-radius: 16px;
  padding: 1.5px;
  background: rgba(255,255,255,0.04);
}
.ps-grb-edge {
  position: absolute; inset: 0;
  border-radius: 16px; padding: 1.5px;
  background: conic-gradient(from var(--ps-grb-ang), #1e293b, #475569, #1e293b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ps-grb-spin 6s linear infinite;
}
.ps-grb-pri .ps-grb-edge {
  background: conic-gradient(from var(--ps-grb-ang), #6366f1, #22d3ee, #a855f7, #6366f1);
}
@keyframes ps-grb-spin { to { --ps-grb-ang: 360deg; } }
.ps-grb-body {
  position: relative;
  background: #0f1224;
  border-radius: 14.5px;
  padding: 22px 20px 20px;
  display: flex; flex-direction: column;
  height: 100%;
}
.ps-grb-pill {
  display: inline-block; align-self: flex-start;
  background: linear-gradient(135deg, #6366f1, #22d3ee); color: #0a0d1a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 999px; margin-bottom: 10px;
}
.ps-grb-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #c7d2fe;
}
.ps-grb-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-grb-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-grb-price span { font-size: 0.34em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-grb-card ul {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13.5px; line-height: 1.95; color: #b8bfd8;
}
.ps-grb-card ul li::before { content: '✓'; color: #a5b4fc; display: inline-block; width: 20px; font-weight: 700; }
.ps-grb-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 9px;
  background: rgba(165,180,252,0.08); color: #c7d2fe;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(165,180,252,0.25);
  transition: background 0.18s, color 0.18s;
}
.ps-grb-cta-pri { background: linear-gradient(135deg, #6366f1, #22d3ee); color: #0a0d1a; border-color: transparent; }
.ps-grb-cta:hover { background: rgba(165,180,252,0.18); color: #fff; }
.ps-grb-cta-pri:hover { filter: brightness(1.1); }
.ps-grb-cta:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-grb-grid { grid-template-columns: 1fr; max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-grb-edge { animation: none; background: linear-gradient(135deg, #475569, #1e293b); }
  .ps-grb-pri .ps-grb-edge { background: linear-gradient(135deg, #6366f1, #22d3ee); }
}
```

### 02. Editorial Two Column

**Type:** Pure CSS
**Description:** A dense editorial pricing layout — left column carries the value-prop copy, right column stacks two compact tier rows like a printed price list. Neutral charcoal on cream, the Stripe / Basecamp documentation aesthetic.

**HTML:**
```html
<section class="ps-edt" aria-label="Pricing">
  <div class="ps-edt-grid">
    <div class="ps-edt-copy">
      <span class="ps-edt-eye">— Pricing</span>
      <h2>Two plans. <em>Pick one,</em> change later.</h2>
      <p>
        We don’t play games with feature gating, seat limits, or upsell pop-ups. Pick a plan, get
        the whole product, and move on with your work.
      </p>
      <p class="ps-edt-fine">
        All plans include unlimited projects, every integration, and email support. Cancel any time,
        money back inside 30 days.
      </p>
      <a class="ps-edt-link" href="#compare">See the full feature list →</a>
    </div>
    <div class="ps-edt-tiers">
      <article class="ps-edt-row">
        <header>
          <h3>Solo</h3>
          <span class="ps-edt-pri">$15<em>/ month</em></span>
        </header>
        <p>For freelancers and indie builders shipping client work.</p>
        <ul>
          <li>Single workspace</li>
          <li>10 GB storage</li>
          <li>Email support</li>
        </ul>
        <a class="ps-edt-cta" href="#solo">Choose Solo →</a>
      </article>
      <article class="ps-edt-row ps-edt-rec">
        <header>
          <h3>Studio <span class="ps-edt-tag">Recommended</span></h3>
          <span class="ps-edt-pri">$48<em>/ month</em></span>
        </header>
        <p>For small teams who run multiple client engagements.</p>
        <ul>
          <li>Unlimited workspaces</li>
          <li>250 GB storage</li>
          <li>Priority support &amp; onboarding</li>
          <li>Client billing &amp; white-label</li>
        </ul>
        <a class="ps-edt-cta ps-edt-cta-pri" href="#studio">Choose Studio →</a>
      </article>
    </div>
  </div>
</section>
```

**CSS:**
```css
.ps-edt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #f5f1ea;
  color: #1c1c1e;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-edt-grid {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  align-items: start;
}
.ps-edt-copy { padding-top: 6px; }
.ps-edt-eye {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.1em; color: #6b6b6e;
  margin-bottom: 14px;
}
.ps-edt-copy h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.4vw, 44px); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.1;
  margin: 0 0 18px;
}
.ps-edt-copy h2 em { font-style: italic; color: #6b6b6e; }
.ps-edt-copy p { font-size: 15px; line-height: 1.65; color: #3d3d40; margin: 0 0 12px; max-width: 380px; }
.ps-edt-fine { font-size: 13px !important; color: #6b6b6e !important; padding-top: 12px; border-top: 1px solid #d8d2c5; }
.ps-edt-link {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600;
  color: #1c1c1e; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.ps-edt-link:hover { color: #6b6b6e; }
.ps-edt-tiers { display: flex; flex-direction: column; gap: 14px; }
.ps-edt-row {
  background: #fff; border: 1px solid #d8d2c5;
  border-radius: 6px; padding: 22px 22px 18px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ps-edt-row:hover { border-color: #1c1c1e; box-shadow: 4px 4px 0 0 #1c1c1e; }
.ps-edt-rec { border-color: #1c1c1e; box-shadow: 4px 4px 0 0 #1c1c1e; }
.ps-edt-row header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed #d8d2c5;
}
.ps-edt-row h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.ps-edt-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #1c1c1e; color: #f5f1ea;
  padding: 3px 8px; border-radius: 2px;
}
.ps-edt-pri { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ps-edt-pri em { font-size: 11px; font-style: normal; color: #6b6b6e; font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.ps-edt-row p { font-size: 13.5px; color: #3d3d40; margin: 0 0 10px; line-height: 1.5; }
.ps-edt-row ul {
  list-style: none; padding: 0; margin: 0 0 16px;
  font-size: 13px; line-height: 1.85; color: #3d3d40;
}
.ps-edt-row ul li::before { content: '·'; color: #1c1c1e; font-weight: 800; display: inline-block; width: 18px; font-size: 18px; line-height: 0.5; vertical-align: middle; }
.ps-edt-cta {
  display: inline-block; padding: 9px 16px; border-radius: 4px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1.5px solid #1c1c1e; color: #1c1c1e;
  background: transparent;
  transition: background 0.18s, color 0.18s;
}
.ps-edt-cta-pri { background: #1c1c1e; color: #f5f1ea; }
.ps-edt-cta:hover { background: #1c1c1e; color: #f5f1ea; }
.ps-edt-cta-pri:hover { background: #f5f1ea; color: #1c1c1e; }
.ps-edt-cta:focus-visible { outline: 2px solid #1c1c1e; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-edt-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-edt-row { transition: none; }
  .ps-edt-row:hover { transform: none; }
}
```

### 03. 3D Tilt Cards

**Type:** Pure CSS
**Description:** Three pricing cards in 3D perspective, tilting back when not hovered and snapping forward on hover. Purple → cyan gradient surface, layered shadow stack giving real depth. <code>perspective()</code> + <code>rotateY()</code>, no JS.

**HTML:**
```html
<section class="ps-tlt" aria-label="Pricing">
  <header class="ps-tlt-head">
    <h2>Pricing with depth.</h2>
    <p>Hover to bring a plan forward.</p>
  </header>
  <div class="ps-tlt-stage">
    <article class="ps-tlt-card ps-tlt-l">
      <h3>Lite</h3>
      <div class="ps-tlt-price"><em>$</em>9<span>/mo</span></div>
      <ul>
        <li>Personal projects</li>
        <li>5 GB storage</li>
        <li>Community support</li>
      </ul>
      <a class="ps-tlt-cta" href="#lite">Pick Lite</a>
    </article>
    <article class="ps-tlt-card ps-tlt-c">
      <span class="ps-tlt-pill">Best fit</span>
      <h3>Plus</h3>
      <div class="ps-tlt-price"><em>$</em>29<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>50 GB storage</li>
        <li>Priority support</li>
        <li>Custom domains</li>
      </ul>
      <a class="ps-tlt-cta ps-tlt-cta-pri" href="#plus">Pick Plus</a>
    </article>
    <article class="ps-tlt-card ps-tlt-r">
      <h3>Power</h3>
      <div class="ps-tlt-price"><em>$</em>79<span>/mo</span></div>
      <ul>
        <li>Everything in Plus</li>
        <li>SSO + audit logs</li>
        <li>Dedicated CSM</li>
      </ul>
      <a class="ps-tlt-cta" href="#power">Pick Power</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-tlt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(34,211,238,0.14), transparent 60%),
    #0d0a1a;
  color: #e9e6ff;
  font-family: 'Inter', system-ui, sans-serif;
  perspective: 1400px;
}
.ps-tlt-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-tlt-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-tlt-head p { color: #a8a0c8; margin: 0; font-size: 14px; }
.ps-tlt-stage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; max-width: 980px; margin: 0 auto;
  transform-style: preserve-3d;
  align-items: center;
}
.ps-tlt-card {
  position: relative;
  background: linear-gradient(160deg, rgba(124,58,237,0.18), rgba(34,211,238,0.10));
  border: 1px solid rgba(167,139,250,0.25);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s;
  box-shadow: 0 10px 30px rgba(13,10,26,0.5);
}
.ps-tlt-l { transform: rotateY(14deg) translateZ(-30px); }
.ps-tlt-c { transform: translateZ(0); z-index: 2; }
.ps-tlt-r { transform: rotateY(-14deg) translateZ(-30px); }
.ps-tlt-card:hover {
  transform: rotateY(0) translateZ(20px) translateY(-4px);
  box-shadow: 0 24px 60px rgba(124,58,237,0.4);
  z-index: 3;
}
.ps-tlt-c { background: linear-gradient(160deg, rgba(124,58,237,0.32), rgba(34,211,238,0.18)); border-color: rgba(34,211,238,0.45); }
.ps-tlt-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #a78bfa, #22d3ee); color: #0d0a1a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 12px;
  border-radius: 999px;
}
.ps-tlt-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #c4b5fd;
}
.ps-tlt-c h3 { color: #67e8f9; }
.ps-tlt-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-tlt-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-tlt-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-tlt-card ul {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13px; line-height: 1.95; color: #c4bde0;
}
.ps-tlt-card ul li::before { content: '◆'; color: #a78bfa; display: inline-block; width: 20px; font-size: 9px; }
.ps-tlt-c ul li::before { color: #22d3ee; }
.ps-tlt-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 9px;
  background: rgba(167,139,250,0.12); color: #c4b5fd;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(167,139,250,0.3);
  transition: background 0.18s, color 0.18s;
}
.ps-tlt-cta-pri { background: linear-gradient(135deg, #a78bfa, #22d3ee); color: #0d0a1a; border-color: transparent; }
.ps-tlt-cta:hover { background: rgba(167,139,250,0.28); color: #fff; }
.ps-tlt-cta:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-tlt-stage { grid-template-columns: 1fr; max-width: 380px; perspective: none; }
  .ps-tlt-l, .ps-tlt-c, .ps-tlt-r { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-tlt-card { transition: none; }
  .ps-tlt-l, .ps-tlt-c, .ps-tlt-r { transform: none; }
  .ps-tlt-card:hover { transform: none; }
}
```

### 04. Synthwave Neon

**Type:** Pure CSS
**Description:** Retro 80s synthwave pricing — magenta and cyan neon over a perspective grid horizon, chrome heading reflection, sun gradient behind the cards. The aesthetic Vaporwave / Stranger Things landings ride on.

**HTML:**
```html
<section class="ps-syn" aria-label="Pricing">
  <div class="ps-syn-grid-bg" aria-hidden="true"></div>
  <div class="ps-syn-sun" aria-hidden="true"></div>
  <header class="ps-syn-head">
    <span class="ps-syn-eye">★ Pricing ★</span>
    <h2>Choose your <em>signal.</em></h2>
  </header>
  <div class="ps-syn-grid">
    <article class="ps-syn-card">
      <h3>Wave</h3>
      <div class="ps-syn-price">$15</div>
      <ul>
        <li>Solo channel</li>
        <li>5 GB</li>
        <li>Email reach</li>
      </ul>
      <a class="ps-syn-cta" href="#wave">Tune in</a>
    </article>
    <article class="ps-syn-card ps-syn-pri">
      <span class="ps-syn-tag">★ FAVORITE ★</span>
      <h3>Pulse</h3>
      <div class="ps-syn-price">$39</div>
      <ul>
        <li>Multi-channel</li>
        <li>50 GB</li>
        <li>Live chat</li>
        <li>Custom domain</li>
      </ul>
      <a class="ps-syn-cta ps-syn-cta-pri" href="#pulse">Tune in</a>
    </article>
    <article class="ps-syn-card">
      <h3>Storm</h3>
      <div class="ps-syn-price">$99</div>
      <ul>
        <li>Unlimited</li>
        <li>500 GB</li>
        <li>SSO + SLA</li>
      </ul>
      <a class="ps-syn-cta" href="#storm">Tune in</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-syn {
  position: relative; overflow: hidden;
  contain: layout paint;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: linear-gradient(180deg, #0c0420 0%, #1a052e 60%, #2a0843 100%);
  color: #f0e6ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-syn-grid-bg {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 220%; height: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(236,72,153,0.4) 24px, rgba(236,72,153,0.4) 25px),
    repeating-linear-gradient(90deg, transparent 0, transparent 24px, rgba(34,211,238,0.4) 24px, rgba(34,211,238,0.4) 25px);
  transform: translateX(-50%) perspective(700px) rotateX(60deg);
  transform-origin: center top;
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
  z-index: 0;
}
.ps-syn-sun {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  width: 360px; height: 360px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 16px, #0c0420 16px, #0c0420 19px),
    linear-gradient(180deg, #fde68a 0%, #f59e0b 30%, #ec4899 60%, #a855f7 90%);
  filter: blur(0.4px);
  opacity: 0.55;
  z-index: 0;
}
.ps-syn-head { position: relative; z-index: 2; text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-syn-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4em;
  color: #22d3ee; margin-bottom: 14px;
  text-shadow: 0 0 8px #22d3ee;
}
.ps-syn-head h2 {
  font-size: clamp(28px, 5vw, 48px); font-weight: 800;
  letter-spacing: -0.02em; margin: 0;
  background: linear-gradient(180deg, #fff 0%, #fff 50%, #f9a8d4 50%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(236,72,153,0.5);
}
.ps-syn-head h2 em { font-style: italic; }
.ps-syn-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 940px; margin: 0 auto;
  align-items: center;
}
.ps-syn-card {
  position: relative;
  background: rgba(12,4,32,0.7);
  border: 1.5px solid #ec4899;
  border-radius: 4px;
  padding: 22px 20px 20px;
  display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(236,72,153,0.4) inset, 0 0 24px rgba(236,72,153,0.3);
  backdrop-filter: blur(6px);
}
.ps-syn-pri { border-color: #22d3ee; box-shadow: 0 0 0 1px rgba(34,211,238,0.5) inset, 0 0 30px rgba(34,211,238,0.5); }
.ps-syn-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #0c0420; color: #22d3ee;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  padding: 3px 12px;
  border: 1px solid #22d3ee;
  text-shadow: 0 0 6px #22d3ee;
}
.ps-syn-card h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 12px;
  color: #ec4899;
  text-shadow: 0 0 8px rgba(236,72,153,0.7);
}
.ps-syn-pri h3 { color: #22d3ee; text-shadow: 0 0 8px rgba(34,211,238,0.7); }
.ps-syn-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 42px; font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 18px; color: #fff;
  text-shadow: 0 0 12px rgba(236,72,153,0.6);
}
.ps-syn-pri .ps-syn-price { text-shadow: 0 0 12px rgba(34,211,238,0.6); }
.ps-syn-card ul {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  font-size: 13px; line-height: 1.95; color: #d6c8ee;
  font-family: 'JetBrains Mono', monospace;
}
.ps-syn-card ul li::before { content: '▸ '; color: #ec4899; }
.ps-syn-pri ul li::before { color: #22d3ee; }
.ps-syn-cta {
  display: block; text-align: center;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  background: transparent; color: #ec4899;
  border: 1.5px solid #ec4899;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ps-syn-cta-pri { color: #22d3ee; border-color: #22d3ee; }
.ps-syn-cta:hover { background: #ec4899; color: #0c0420; box-shadow: 0 0 16px #ec4899; }
.ps-syn-cta-pri:hover { background: #22d3ee; color: #0c0420; box-shadow: 0 0 16px #22d3ee; }
.ps-syn-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-syn-grid { grid-template-columns: 1fr; max-width: 360px; }
  .ps-syn-sun { width: 240px; height: 240px; top: 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-syn-cta { transition: none; }
}
```

### 05. Pay What You Want

**Type:** Pure CSS
**Description:** A pay-what-you-want layout with five preset chips ($5 / $10 / $25 / $50 / Custom) — selecting one updates the active state and the highlighted CTA via radio + <code>:has()</code>. Mint palette, the indie-product / crowdfunding pattern.

**HTML:**
```html
<section class="ps-pwy" aria-label="Pay what you want">
  <div class="ps-pwy-card">
    <header class="ps-pwy-head">
      <span class="ps-pwy-eye">Pay what you want</span>
      <h2>Support the project — <em>name your price.</em></h2>
      <p>
        The full product is yours regardless of the amount. Pay more if it helps, pay less if it’s
        tight. We trust you.
      </p>
    </header>
    <fieldset class="ps-pwy-amounts">
      <legend class="ps-pwy-sr">Choose an amount</legend>
      <input type="radio" name="ps-pwy" id="ps-pwy-5" />
      <label for="ps-pwy-5"><strong>$5</strong><span>Coffee</span></label>
      <input type="radio" name="ps-pwy" id="ps-pwy-10" checked />
      <label for="ps-pwy-10"><strong>$10</strong><span>Average</span></label>
      <input type="radio" name="ps-pwy" id="ps-pwy-25" />
      <label for="ps-pwy-25"><strong>$25</strong><span>Generous</span></label>
      <input type="radio" name="ps-pwy" id="ps-pwy-50" />
      <label for="ps-pwy-50"><strong>$50</strong><span>Sponsor</span></label>
      <input type="radio" name="ps-pwy" id="ps-pwy-x" />
      <label for="ps-pwy-x"><strong>Custom</strong><span>You decide</span></label>
    </fieldset>
    <ul class="ps-pwy-feats">
      <li>Lifetime access to the full product</li>
      <li>All future updates included</li>
      <li>Source files + commercial use rights</li>
    </ul>
    <a class="ps-pwy-cta" href="#pay">
      <span class="ps-pwy-cta-default">Pay $10 — get it now</span>
      <span class="ps-pwy-cta-5">Pay $5 — get it now</span>
      <span class="ps-pwy-cta-25">Pay $25 — get it now</span>
      <span class="ps-pwy-cta-50">Pay $50 — get it now</span>
      <span class="ps-pwy-cta-x">Enter custom amount →</span>
    </a>
    <p class="ps-pwy-foot">No questions asked refund inside 14 days. Powered by Stripe.</p>
  </div>
</section>
```

**CSS:**
```css
.ps-pwy {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(50% 50% at 50% 0%, rgba(45,212,191,0.16), transparent 60%),
    #06181a;
  color: #d4f5ee;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.ps-pwy-card {
  width: 100%; max-width: 560px;
  background: linear-gradient(180deg, #0d2326, #06181a);
  border: 1px solid rgba(45,212,191,0.3);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 38px);
  box-shadow: 0 24px 60px rgba(45,212,191,0.12);
}
.ps-pwy-head { text-align: center; margin-bottom: 24px; }
.ps-pwy-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #5eead4; padding: 4px 12px;
  background: rgba(94,234,212,0.12);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-pwy-head h2 {
  font-size: clamp(22px, 3.6vw, 30px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 10px; color: #fff;
}
.ps-pwy-head h2 em { color: #5eead4; font-style: italic; }
.ps-pwy-head p { color: #92b8b1; font-size: 14px; line-height: 1.6; margin: 0 auto; max-width: 420px; }
.ps-pwy-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.ps-pwy-amounts {
  border: 0; padding: 0; margin: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.ps-pwy-amounts input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ps-pwy-amounts label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 6px;
  background: rgba(94,234,212,0.06);
  border: 1.5px solid rgba(94,234,212,0.18);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  text-align: center;
  min-height: 64px;
}
.ps-pwy-amounts label strong {
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  color: #fff;
}
.ps-pwy-amounts label span {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #5eead4; margin-top: 2px;
}
.ps-pwy-amounts label:hover { border-color: rgba(94,234,212,0.5); background: rgba(94,234,212,0.1); }
.ps-pwy-amounts input:checked + label {
  background: linear-gradient(135deg, #2dd4bf, #5eead4);
  border-color: #5eead4;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45,212,191,0.4);
}
.ps-pwy-amounts input:checked + label strong { color: #06181a; }
.ps-pwy-amounts input:checked + label span { color: rgba(6,24,26,0.7); }
.ps-pwy-amounts input:focus-visible + label { outline: 2px solid #5eead4; outline-offset: 3px; }
.ps-pwy-feats {
  list-style: none; padding: 0; margin: 0 0 20px;
  font-size: 13px; line-height: 1.95; color: #b8d6cf;
}
.ps-pwy-feats li::before { content: '✓'; color: #5eead4; display: inline-block; width: 22px; font-weight: 700; }
.ps-pwy-cta {
  display: block; position: relative;
  text-align: center;
  padding: 14px 18px; border-radius: 10px;
  background: linear-gradient(135deg, #2dd4bf, #5eead4);
  color: #06181a; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(45,212,191,0.3);
  transition: transform 0.18s;
  margin-bottom: 12px;
}
.ps-pwy-cta:hover { transform: translateY(-1px); }
.ps-pwy-cta:focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; }
.ps-pwy-cta span { display: none; }
.ps-pwy-cta .ps-pwy-cta-default { display: block; }
.ps-pwy:has(#ps-pwy-5:checked) .ps-pwy-cta-default,
.ps-pwy:has(#ps-pwy-25:checked) .ps-pwy-cta-default,
.ps-pwy:has(#ps-pwy-50:checked) .ps-pwy-cta-default,
.ps-pwy:has(#ps-pwy-x:checked) .ps-pwy-cta-default { display: none; }
.ps-pwy:has(#ps-pwy-5:checked) .ps-pwy-cta-5 { display: block; }
.ps-pwy:has(#ps-pwy-25:checked) .ps-pwy-cta-25 { display: block; }
.ps-pwy:has(#ps-pwy-50:checked) .ps-pwy-cta-50 { display: block; }
.ps-pwy:has(#ps-pwy-x:checked) .ps-pwy-cta-x { display: block; }
.ps-pwy-foot { font-size: 11.5px; color: #6e8a85; text-align: center; margin: 0; }
@media (max-width: 540px) {
  .ps-pwy-amounts { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-pwy-amounts label, .ps-pwy-cta { transition: none; }
}
```

### 06. Currency Switcher

**Type:** Pure CSS
**Description:** A pure-CSS currency switcher (USD / EUR / GBP) using hidden radios + <code>:has()</code> to swap every visible price across all three tiers. Burgundy on cream — the wine-merchant / boutique-software aesthetic.

**HTML:**
```html
<section class="ps-cur" aria-label="Pricing">
  <header class="ps-cur-head">
    <h2>Pricing in your currency.</h2>
    <p>Pay where you live, with the rate fixed at billing time.</p>
    <fieldset class="ps-cur-tabs">
      <legend class="ps-cur-sr">Currency</legend>
      <input type="radio" name="ps-cur-c" id="ps-cur-usd" checked />
      <label for="ps-cur-usd">USD</label>
      <input type="radio" name="ps-cur-c" id="ps-cur-eur" />
      <label for="ps-cur-eur">EUR</label>
      <input type="radio" name="ps-cur-c" id="ps-cur-gbp" />
      <label for="ps-cur-gbp">GBP</label>
    </fieldset>
  </header>
  <div class="ps-cur-grid">
    <article class="ps-cur-card">
      <h3>Petit</h3>
      <div class="ps-cur-price">
        <span class="ps-cur-usd">$12</span><span class="ps-cur-eur">€11</span
        ><span class="ps-cur-gbp">£10</span>
        <em>/month</em>
      </div>
      <ul>
        <li>Solo cellar</li>
        <li>3 bottles tracked</li>
        <li>Email reminders</li>
      </ul>
      <a class="ps-cur-cta" href="#petit">Choose Petit</a>
    </article>
    <article class="ps-cur-card ps-cur-best">
      <span class="ps-cur-pill">Sommelier’s pick</span>
      <h3>Reserve</h3>
      <div class="ps-cur-price">
        <span class="ps-cur-usd">$36</span><span class="ps-cur-eur">€33</span
        ><span class="ps-cur-gbp">£28</span>
        <em>/month</em>
      </div>
      <ul>
        <li>Full cellar</li>
        <li>Unlimited bottles</li>
        <li>Tasting notes</li>
        <li>Pairing engine</li>
      </ul>
      <a class="ps-cur-cta ps-cur-cta-pri" href="#reserve">Choose Reserve</a>
    </article>
    <article class="ps-cur-card">
      <h3>Grand Cru</h3>
      <div class="ps-cur-price">
        <span class="ps-cur-usd">$96</span><span class="ps-cur-eur">€88</span
        ><span class="ps-cur-gbp">£76</span>
        <em>/month</em>
      </div>
      <ul>
        <li>Multi-cellar</li>
        <li>Insurance valuation</li>
        <li>White-glove setup</li>
      </ul>
      <a class="ps-cur-cta" href="#grand">Talk to us</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-cur {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #faf6ee;
  color: #2a0a14;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-cur-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-cur-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 4vw, 38px); font-weight: 700;
  letter-spacing: -0.015em; margin: 0 0 8px; color: #6b1224;
}
.ps-cur-head p { color: #8a4555; margin: 0 0 20px; font-size: 14px; }
.ps-cur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.ps-cur-tabs {
  position: relative; display: inline-grid;
  grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1.5px solid #6b1224; border-radius: 999px;
  padding: 3px; background: #fff;
  margin: 0;
}
.ps-cur-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ps-cur-tabs label {
  padding: 7px 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: #8a4555; cursor: pointer; border-radius: 999px;
  transition: color 0.18s, background 0.18s;
}
.ps-cur-tabs input:checked + label { background: #6b1224; color: #faf6ee; }
.ps-cur-tabs input:focus-visible + label { outline: 2px solid #6b1224; outline-offset: 3px; }
.ps-cur-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; max-width: 1000px; margin: 0 auto;
  align-items: center;
}
.ps-cur-card {
  position: relative;
  background: #fff;
  border: 1px solid #e7d8c8;
  border-radius: 8px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
}
.ps-cur-best {
  background: #6b1224; color: #faf6ee;
  border: 0;
  transform: scale(1.04);
  box-shadow: 0 18px 44px rgba(107,18,36,0.3);
}
.ps-cur-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #faf6ee; color: #6b1224;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 11px;
  border: 1.5px solid #6b1224;
  border-radius: 999px;
}
.ps-cur-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 700; margin: 0 0 12px;
  color: #6b1224; font-style: italic;
}
.ps-cur-best h3 { color: #faf6ee; }
.ps-cur-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px dashed #e7d8c8;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
}
.ps-cur-best .ps-cur-price { border-bottom-color: rgba(250,246,238,0.25); }
.ps-cur-price em { font-size: 13px; font-weight: 500; color: #8a4555; font-style: normal; margin-left: 6px; }
.ps-cur-best .ps-cur-price em { color: rgba(250,246,238,0.7); }
.ps-cur-price > span { display: none; }
.ps-cur:has(#ps-cur-usd:checked) .ps-cur-usd,
.ps-cur:has(#ps-cur-eur:checked) .ps-cur-eur,
.ps-cur:has(#ps-cur-gbp:checked) .ps-cur-gbp { display: inline; }
.ps-cur-card ul {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  font-size: 13.5px; line-height: 1.95; color: #4a2030;
}
.ps-cur-best ul { color: rgba(250,246,238,0.85); }
.ps-cur-card ul li::before { content: '◆'; color: #6b1224; display: inline-block; width: 20px; font-size: 9px; }
.ps-cur-best ul li::before { color: #faf6ee; }
.ps-cur-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 6px;
  text-decoration: none; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1.5px solid currentColor; color: #6b1224;
  background: transparent;
  transition: background 0.18s, color 0.18s;
}
.ps-cur-best .ps-cur-cta { color: #faf6ee; }
.ps-cur-cta-pri { background: #faf6ee; color: #6b1224 !important; border-color: #faf6ee; }
.ps-cur-cta:hover { background: #6b1224; color: #faf6ee; border-color: #6b1224; }
.ps-cur-cta-pri:hover { background: transparent; color: #faf6ee !important; border-color: #faf6ee; }
.ps-cur-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-cur-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-cur-best { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-cur-tabs label, .ps-cur-cta { transition: none; }
}
```

### 07. Social Proof Pricing

**Type:** Pure CSS
**Description:** A scrolling logo wall above the pricing tiers — social proof first, decision second. Slate background with lime accent on the recommended plan. Logos scroll in a seamless marquee using a duplicated track.

**HTML:**
```html
<section class="ps-spr" aria-label="Pricing">
  <div class="ps-spr-marquee" aria-label="Customers using this product">
    <div class="ps-spr-track">
      <span class="ps-spr-logo">◇ NORTHWIND</span>
      <span class="ps-spr-logo">▲ APEX.IO</span>
      <span class="ps-spr-logo">★ PULSE</span>
      <span class="ps-spr-logo">⬣ HEXLAB</span>
      <span class="ps-spr-logo">◯ ORBITA</span>
      <span class="ps-spr-logo">◤ FLINT</span>
      <span class="ps-spr-logo">⬢ MERIDIAN</span>
      <span class="ps-spr-logo">◇ NORTHWIND</span>
      <span class="ps-spr-logo">▲ APEX.IO</span>
      <span class="ps-spr-logo">★ PULSE</span>
      <span class="ps-spr-logo">⬣ HEXLAB</span>
      <span class="ps-spr-logo">◯ ORBITA</span>
      <span class="ps-spr-logo">◤ FLINT</span>
      <span class="ps-spr-logo">⬢ MERIDIAN</span>
    </div>
  </div>
  <header class="ps-spr-head">
    <span class="ps-spr-rating" aria-label="Rated 4.9 out of 5">★★★★★ 4.9 from 12,400 teams</span>
    <h2>Pricing teams actually pay for.</h2>
  </header>
  <div class="ps-spr-grid">
    <article class="ps-spr-card">
      <h3>Free</h3>
      <div class="ps-spr-price"><em>$</em>0<span>forever</span></div>
      <ul>
        <li>1 project</li>
        <li>5 GB storage</li>
        <li>Community</li>
      </ul>
      <a class="ps-spr-cta" href="#free">Start free</a>
    </article>
    <article class="ps-spr-card ps-spr-best">
      <span class="ps-spr-tag">Most teams pick this</span>
      <h3>Team</h3>
      <div class="ps-spr-price"><em>$</em>32<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>Priority support</li>
        <li>SSO + roles</li>
      </ul>
      <a class="ps-spr-cta ps-spr-cta-pri" href="#team">Choose Team</a>
    </article>
    <article class="ps-spr-card">
      <h3>Enterprise</h3>
      <div class="ps-spr-price"><em>$</em>0<span>custom</span></div>
      <ul>
        <li>Everything in Team</li>
        <li>Dedicated CSM</li>
        <li>SLA 99.99%</li>
      </ul>
      <a class="ps-spr-cta" href="#ent">Talk to sales</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-spr {
  position: relative;
  overflow: hidden;
  contain: layout paint;
  padding: clamp(20px, 4vw, 36px) clamp(20px, 4vw, 40px) clamp(28px, 5vw, 48px);
  min-height: 480px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-spr-marquee {
  position: relative; overflow: hidden;
  contain: layout paint;
  border-block: 1px solid rgba(163,230,53,0.18);
  margin: 0 calc(-1 * clamp(20px, 4vw, 40px)) clamp(20px, 4vw, 32px);
  padding: 14px 0;
  background: rgba(15,23,42,0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ps-spr-track {
  display: flex; gap: 56px;
  white-space: nowrap;
  animation: ps-spr-roll 28s linear infinite;
  width: max-content;
}
@keyframes ps-spr-roll { to { transform: translateX(-50%); } }
.ps-spr-logo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; letter-spacing: 0.18em;
  color: #94a3b8; flex-shrink: 0;
}
.ps-spr-head { text-align: center; margin-bottom: clamp(20px, 4vw, 32px); }
.ps-spr-rating {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; color: #a3e635;
  margin-bottom: 10px;
}
.ps-spr-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0; color: #fff;
}
.ps-spr-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; max-width: 940px; margin: 0 auto;
  align-items: center;
}
.ps-spr-card {
  position: relative;
  background: #1e293b;
  border: 1px solid rgba(163,230,53,0.12);
  border-radius: 12px;
  padding: 22px 20px 18px;
  display: flex; flex-direction: column;
}
.ps-spr-best {
  background: linear-gradient(180deg, #1e293b, #243f1a);
  border-color: #a3e635;
  box-shadow: 0 0 0 1px #a3e635 inset, 0 14px 36px rgba(163,230,53,0.18);
}
.ps-spr-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #a3e635; color: #0f172a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px;
  border-radius: 999px;
}
.ps-spr-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #cbd5e1;
}
.ps-spr-best h3 { color: #d9f99d; }
.ps-spr-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-spr-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-spr-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-spr-card ul {
  list-style: none; padding: 0; margin: 0 0 18px; flex: 1;
  font-size: 13px; line-height: 1.95; color: #b8c1d1;
}
.ps-spr-card ul li::before { content: '✓'; color: #a3e635; display: inline-block; width: 20px; font-weight: 700; }
.ps-spr-cta {
  display: block; text-align: center;
  padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13px; font-weight: 600;
  background: rgba(163,230,53,0.1); color: #a3e635;
  border: 1px solid rgba(163,230,53,0.28);
  transition: background 0.18s, color 0.18s;
}
.ps-spr-cta-pri { background: #a3e635; color: #0f172a; border-color: #a3e635; }
.ps-spr-cta:hover { background: #a3e635; color: #0f172a; }
.ps-spr-cta-pri:hover { background: #d9f99d; }
.ps-spr-cta:focus-visible { outline: 2px solid #a3e635; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-spr-grid { grid-template-columns: 1fr; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-spr-track { animation: none; }
}
```

### 08. Feature Accordion Tiers

**Type:** Pure CSS
**Description:** Three tier cards with native <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> dropdowns that reveal the full feature list on click — keeps the page short and lets curious buyers dig in. Deep purple palette, no JS, fully keyboard-accessible.

**HTML:**
```html
<section class="ps-acc" aria-label="Pricing">
  <header class="ps-acc-head">
    <h2>Pricing without the wall of checkmarks.</h2>
    <p>Open any tier to read the full feature list. Tap to collapse.</p>
  </header>
  <div class="ps-acc-grid">
    <article class="ps-acc-card">
      <h3>Indie</h3>
      <div class="ps-acc-price"><em>$</em>11<span>/mo</span></div>
      <p class="ps-acc-sub">For solo developers shipping side projects.</p>
      <details class="ps-acc-det">
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>1 project workspace</li>
          <li>10 GB storage</li>
          <li>Community forum support</li>
          <li>Public deploys with auto-SSL</li>
          <li>50K monthly visitor cap</li>
          <li>1-year version history</li>
        </ul>
      </details>
      <a class="ps-acc-cta" href="#indie">Choose Indie →</a>
    </article>
    <article class="ps-acc-card ps-acc-pri">
      <span class="ps-acc-pill">Recommended</span>
      <h3>Studio</h3>
      <div class="ps-acc-price"><em>$</em>34<span>/mo</span></div>
      <p class="ps-acc-sub">For small teams shipping to real users.</p>
      <details class="ps-acc-det" open>
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>Unlimited project workspaces</li>
          <li>100 GB storage</li>
          <li>Priority email + chat support</li>
          <li>Custom domains with auto-SSL</li>
          <li>500K monthly visitor cap</li>
          <li>3-year version history</li>
          <li>Team roles &amp; permissions</li>
          <li>Slack, GitHub, Linear sync</li>
        </ul>
      </details>
      <a class="ps-acc-cta ps-acc-cta-pri" href="#studio">Choose Studio →</a>
    </article>
    <article class="ps-acc-card">
      <h3>Org</h3>
      <div class="ps-acc-price"><em>$</em>96<span>/mo</span></div>
      <p class="ps-acc-sub">For organisations with compliance requirements.</p>
      <details class="ps-acc-det">
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>Everything in Studio</li>
          <li>SAML SSO &amp; SCIM provisioning</li>
          <li>Audit logs (90-day retention)</li>
          <li>Unlimited monthly visitors</li>
          <li>Forever version history</li>
          <li>SOC 2 + DPA on file</li>
          <li>SLA 99.99% with credits</li>
          <li>Dedicated CSM &amp; quarterly review</li>
        </ul>
      </details>
      <a class="ps-acc-cta" href="#org">Talk to sales →</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-acc {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(168,85,247,0.16), transparent 60%),
    #15071f;
  color: #f3e8ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-acc-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-acc-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-acc-head p { color: #c4a8d6; margin: 0; font-size: 14px; }
.ps-acc-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
  align-items: start;
}
.ps-acc-card {
  position: relative;
  background: #281033;
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
}
.ps-acc-pri {
  background: linear-gradient(180deg, #3b1554, #281033);
  border-color: #a855f7;
  box-shadow: 0 0 0 1px #a855f7 inset, 0 16px 40px rgba(168,85,247,0.22);
}
.ps-acc-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #a855f7, #d946ef);
  color: #15071f;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px;
  border-radius: 999px;
}
.ps-acc-card h3 {
  font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 6px; color: #d8b4fe;
}
.ps-acc-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 36px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 6px; color: #fff;
}
.ps-acc-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-acc-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-acc-sub { font-size: 13px; color: #c4a8d6; margin: 0 0 16px; line-height: 1.5; min-height: 36px; }
.ps-acc-det {
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 8px;
  padding: 0 14px;
  margin-bottom: 16px;
  background: rgba(168,85,247,0.05);
}
.ps-acc-det[open] { padding-bottom: 4px; }
.ps-acc-det summary {
  cursor: pointer;
  padding: 11px 0;
  font-size: 13px; font-weight: 600; color: #d8b4fe;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  outline: 0;
}
.ps-acc-det summary::-webkit-details-marker { display: none; }
.ps-acc-det summary span {
  display: inline-block; font-size: 14px; transition: transform 0.25s;
}
.ps-acc-det[open] summary span { transform: rotate(180deg); }
.ps-acc-det summary:focus-visible { outline: 2px solid #a855f7; outline-offset: 3px; border-radius: 4px; }
.ps-acc-det ul {
  list-style: none; padding: 0; margin: 0 0 8px;
  font-size: 12.5px; line-height: 1.95; color: #d8c8e8;
  border-top: 1px dashed rgba(168,85,247,0.18);
  padding-top: 10px;
}
.ps-acc-det ul li::before { content: '✓'; color: #d946ef; display: inline-block; width: 18px; font-weight: 700; }
.ps-acc-cta {
  display: block; text-align: center; margin-top: auto;
  padding: 11px 16px; border-radius: 8px;
  background: rgba(168,85,247,0.12); color: #d8b4fe;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(168,85,247,0.3);
  transition: background 0.18s, color 0.18s;
}
.ps-acc-cta-pri { background: linear-gradient(135deg, #a855f7, #d946ef); color: #15071f; border-color: transparent; }
.ps-acc-cta:hover { background: rgba(168,85,247,0.28); color: #fff; }
.ps-acc-cta:focus-visible { outline: 2px solid #d946ef; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-acc-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-acc-sub { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-acc-det summary span { transition: none; }
  .ps-acc-cta { transition: none; }
}
```

### 09. Spotlight Pricing

**Type:** Light JS
**Description:** Cards illuminate where the cursor moves — a CSS variable carries pointer X/Y and a radial gradient renders the spotlight. Black + amber, the developer-tool / OSS-pricing aesthetic. JS only updates two CSS variables; everything else is CSS.

**HTML:**
```html
<section class="ps-spt" aria-label="Pricing">
  <header class="ps-spt-head">
    <h2>Move the light. Read the price.</h2>
    <p>Cursor-aware cards. Real cards, real prices, real keyboard support.</p>
  </header>
  <div class="ps-spt-grid">
    <article class="ps-spt-card" tabindex="0">
      <div class="ps-spt-glow" aria-hidden="true"></div>
      <h3>OSS</h3>
      <div class="ps-spt-price">$0<span>open source</span></div>
      <ul>
        <li>Self-hosted</li>
        <li>MIT licence</li>
        <li>GitHub issues</li>
      </ul>
      <a class="ps-spt-cta" href="#oss">Clone the repo</a>
    </article>
    <article class="ps-spt-card ps-spt-best" tabindex="0">
      <div class="ps-spt-glow" aria-hidden="true"></div>
      <span class="ps-spt-pill">Recommended</span>
      <h3>Cloud</h3>
      <div class="ps-spt-price">$24<span>/mo</span></div>
      <ul>
        <li>Hosted &amp; maintained</li>
        <li>Auto-updates + backups</li>
        <li>Email support</li>
        <li>API access</li>
      </ul>
      <a class="ps-spt-cta ps-spt-cta-pri" href="#cloud">Choose Cloud</a>
    </article>
    <article class="ps-spt-card" tabindex="0">
      <div class="ps-spt-glow" aria-hidden="true"></div>
      <h3>Self-Hosted Pro</h3>
      <div class="ps-spt-price">$199<span>/yr</span></div>
      <ul>
        <li>Commercial licence</li>
        <li>Priority email support</li>
        <li>Audit logs</li>
      </ul>
      <a class="ps-spt-cta" href="#shp">Buy licence</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-spt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #050505;
  color: #f5e6c8;
  font-family: 'JetBrains Mono', 'Inter', system-ui, sans-serif;
}
.ps-spt-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-spt-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-spt-head p { color: #8a7656; margin: 0; font-size: 13.5px; }
.ps-spt-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; max-width: 980px; margin: 0 auto;
  align-items: stretch;
}
.ps-spt-card {
  position: relative; overflow: hidden;
  background: #0a0a0a;
  border: 1px solid #2a2418;
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.ps-spt-glow {
  position: absolute; inset: 0;
  background: radial-gradient(180px circle at var(--ps-spt-x, 50%) var(--ps-spt-y, 50%),
    rgba(245,158,11,0.4) 0%, rgba(245,158,11,0.1) 30%, transparent 60%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
  z-index: 0;
}
.ps-spt-card:hover .ps-spt-glow,
.ps-spt-card:focus-within .ps-spt-glow { opacity: 1; }
.ps-spt-card > *:not(.ps-spt-glow) { position: relative; z-index: 1; }
.ps-spt-card { transition: border-color 0.2s, transform 0.2s; }
.ps-spt-card:hover, .ps-spt-card:focus-within { border-color: #f59e0b; transform: translateY(-2px); }
.ps-spt-card:focus { outline: 0; }
.ps-spt-card:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; }
.ps-spt-best { border-color: #b45309; background: linear-gradient(180deg, #1a0f02, #0a0a0a); }
.ps-spt-pill {
  display: inline-block; align-self: flex-start;
  background: #f59e0b; color: #050505;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 3px 10px;
  border-radius: 4px; margin-bottom: 10px;
}
.ps-spt-card h3 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 12px; color: #f59e0b;
}
.ps-spt-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
  display: flex; align-items: baseline; gap: 8px;
}
.ps-spt-price span { font-size: 12px; font-weight: 500; color: #8a7656; letter-spacing: 0.04em; }
.ps-spt-card ul {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  font-size: 12.5px; line-height: 2; color: #d8c69a;
}
.ps-spt-card ul li::before { content: '> '; color: #f59e0b; }
.ps-spt-cta {
  display: block; text-align: center;
  padding: 10px 16px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  background: transparent; color: #f59e0b;
  border: 1.5px solid #b45309;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.ps-spt-cta-pri { background: #f59e0b; color: #050505; border-color: #f59e0b; }
.ps-spt-cta:hover { background: #f59e0b; color: #050505; border-color: #f59e0b; }
.ps-spt-cta:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-spt-grid { grid-template-columns: 1fr; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-spt-card, .ps-spt-glow, .ps-spt-cta { transition: none; }
}
```

**JS:**
```js
(function () {
  var cards = document.querySelectorAll('.ps-spt-card');
  cards.forEach(function (card) {
    card.addEventListener('pointermove', function (e) {
      var rect = card.getBoundingClientRect();
      var x = ((e.clientX - rect.left) / rect.width) * 100;
      var y = ((e.clientY - rect.top) / rect.height) * 100;
      card.style.setProperty('--ps-spt-x', x + '%');
      card.style.setProperty('--ps-spt-y', y + '%');
    });
    card.addEventListener('focus', function () {
      card.style.setProperty('--ps-spt-x', '50%');
      card.style.setProperty('--ps-spt-y', '50%');
    });
  });
})();
```

### 10. Annual Savings Stripe

**Type:** Pure CSS
**Description:** A pricing layout that makes the annual discount visible — monthly price struck through next to the discounted annual price, with a "Save $X/yr" pill underneath. Forest green base with warm orange savings accents — the conversion-tested "anchor and discount" pattern.

**HTML:**
```html
<section class="ps-sav" aria-label="Pricing">
  <header class="ps-sav-head">
    <h2>Pay yearly, save real money.</h2>
    <p>Same product, two months free when you commit to a year.</p>
  </header>
  <div class="ps-sav-grid">
    <article class="ps-sav-card">
      <h3>Seedling</h3>
      <div class="ps-sav-prices">
        <span class="ps-sav-was" aria-label="Monthly price, was">$15<em>/mo</em></span>
        <span class="ps-sav-now"><strong>$12</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-sav-bag" aria-label="Yearly savings">Save $36/yr</span>
      <ul>
        <li>1 garden</li>
        <li>30 plant slots</li>
        <li>Care reminders</li>
      </ul>
      <a class="ps-sav-cta" href="#seedling">Choose Seedling</a>
    </article>
    <article class="ps-sav-card ps-sav-rec">
      <span class="ps-sav-pill">Recommended</span>
      <h3>Greenhouse</h3>
      <div class="ps-sav-prices">
        <span class="ps-sav-was" aria-label="Monthly price, was">$36<em>/mo</em></span>
        <span class="ps-sav-now"><strong>$29</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-sav-bag" aria-label="Yearly savings">Save $84/yr</span>
      <ul>
        <li>10 gardens</li>
        <li>Unlimited slots</li>
        <li>Disease alerts</li>
        <li>Soil data sync</li>
      </ul>
      <a class="ps-sav-cta ps-sav-cta-pri" href="#greenhouse">Choose Greenhouse</a>
    </article>
    <article class="ps-sav-card">
      <h3>Estate</h3>
      <div class="ps-sav-prices">
        <span class="ps-sav-was" aria-label="Monthly price, was">$96<em>/mo</em></span>
        <span class="ps-sav-now"><strong>$79</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-sav-bag" aria-label="Yearly savings">Save $204/yr</span>
      <ul>
        <li>Multi-property</li>
        <li>Pro APIs</li>
        <li>Phone support</li>
      </ul>
      <a class="ps-sav-cta" href="#estate">Choose Estate</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-sav {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(34,107,72,0.2), transparent 60%),
    #07140e;
  color: #e7f5ee;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-sav-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-sav-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px;
  color: #fff;
}
.ps-sav-head p { color: #94b5a3; margin: 0; font-size: 14px; }
.ps-sav-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
  align-items: center;
}
.ps-sav-card {
  position: relative;
  background: #0d2018;
  border: 1px solid rgba(52,153,108,0.22);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
}
.ps-sav-rec {
  background: linear-gradient(180deg, #14301f, #0d2018);
  border-color: #34996c;
  box-shadow: 0 0 0 1px #34996c inset, 0 14px 36px rgba(52,153,108,0.2);
  transform: scale(1.04);
}
.ps-sav-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #34996c; color: #07140e;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px;
  border-radius: 999px;
}
.ps-sav-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 14px;
  color: #6ee7b7;
}
.ps-sav-prices {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 8px;
}
.ps-sav-was {
  font-size: 14px; color: #94b5a3;
  text-decoration: line-through;
  text-decoration-color: #f97316;
  text-decoration-thickness: 2px;
}
.ps-sav-was em { font-style: normal; font-size: 12px; opacity: 0.8; }
.ps-sav-now {
  display: flex; align-items: baseline; gap: 6px;
}
.ps-sav-now strong {
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  color: #fff;
}
.ps-sav-now em { font-style: normal; font-size: 12px; color: #94b5a3; }
.ps-sav-bag {
  display: inline-block; align-self: flex-start;
  background: #f97316; color: #07140e;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.ps-sav-card ul {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  font-size: 13.5px; line-height: 1.95; color: #c8e0d3;
}
.ps-sav-card ul li::before { content: '✓'; color: #34d399; display: inline-block; width: 20px; font-weight: 700; }
.ps-sav-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 8px;
  background: rgba(52,153,108,0.14); color: #6ee7b7;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(52,153,108,0.32);
  transition: background 0.18s, color 0.18s;
}
.ps-sav-cta-pri { background: #34996c; color: #07140e; border-color: #34996c; }
.ps-sav-cta:hover { background: #34996c; color: #07140e; }
.ps-sav-cta:focus-visible { outline: 2px solid #34996c; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-sav-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-sav-rec { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-sav-cta { transition: none; }
}
```

### 11. Classic Three Tier

**Type:** Pure CSS
**Description:** The canonical SaaS pricing layout — three equal tier cards (Starter / Team / Business) with emerald accent. Real <code>&lt;ul&gt;</code> feature lists, dashed dividers, and full-width CTAs at the bottom. The conversion-tested baseline every team starts from.

**HTML:**
```html
<section class="ps-cls" aria-label="Pricing">
  <header class="ps-cls-head">
    <span class="ps-cls-eye">Pricing</span>
    <h2>Pick the plan that fits today.</h2>
    <p>Upgrade, downgrade, or cancel any time. No fine print.</p>
  </header>
  <div class="ps-cls-grid">
    <article class="ps-cls-card">
      <h3>Starter</h3>
      <p class="ps-cls-sub">For solo builders shipping their first thing.</p>
      <div class="ps-cls-price">
        <span class="ps-cls-amt">$9</span><span class="ps-cls-per">/ month</span>
      </div>
      <ul class="ps-cls-feats">
        <li>1 project</li>
        <li>2 GB storage</li>
        <li>Community support</li>
        <li>Basic analytics</li>
      </ul>
      <a class="ps-cls-cta" href="#starter">Start free →</a>
    </article>
    <article class="ps-cls-card">
      <h3>Team</h3>
      <p class="ps-cls-sub">For small teams who need to ship together.</p>
      <div class="ps-cls-price">
        <span class="ps-cls-amt">$29</span><span class="ps-cls-per">/ month</span>
      </div>
      <ul class="ps-cls-feats">
        <li>10 projects</li>
        <li>50 GB storage</li>
        <li>Email support</li>
        <li>Team analytics</li>
        <li>Role-based access</li>
      </ul>
      <a class="ps-cls-cta" href="#team">Start 14-day trial →</a>
    </article>
    <article class="ps-cls-card">
      <h3>Business</h3>
      <p class="ps-cls-sub">For growing companies that need governance.</p>
      <div class="ps-cls-price">
        <span class="ps-cls-amt">$79</span><span class="ps-cls-per">/ month</span>
      </div>
      <ul class="ps-cls-feats">
        <li>Unlimited projects</li>
        <li>500 GB storage</li>
        <li>Priority support</li>
        <li>Advanced analytics</li>
        <li>SSO + audit logs</li>
        <li>SOC 2 ready</li>
      </ul>
      <a class="ps-cls-cta" href="#business">Talk to sales →</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-cls {
  display: block;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #07120e;
  color: #e7f5ee;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.ps-cls-head { text-align: center; margin-bottom: clamp(20px, 4vw, 40px); }
.ps-cls-eye {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #34d399; margin-bottom: 12px;
}
.ps-cls-head h2 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 8px;
}
.ps-cls-head p { color: #9bb5a8; margin: 0; font-size: 14px; }
.ps-cls-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px; margin: 0 auto;
}
.ps-cls-card {
  background: #0d1f18;
  border: 1px solid rgba(52,211,153,0.2);
  border-radius: 14px;
  padding: 22px 20px 20px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
}
.ps-cls-card:hover { border-color: #34d399; transform: translateY(-2px); }
.ps-cls-card h3 {
  font-size: 15px; font-weight: 700; margin: 0 0 4px;
  color: #34d399; letter-spacing: 0.04em; text-transform: uppercase;
}
.ps-cls-sub { font-size: 13px; color: #9bb5a8; margin: 0 0 18px; line-height: 1.5; min-height: 38px; }
.ps-cls-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 1px dashed rgba(52,211,153,0.25);
}
.ps-cls-amt { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: #f0fff7; }
.ps-cls-per { font-size: 13px; color: #9bb5a8; }
.ps-cls-feats { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.ps-cls-feats li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 13.5px; color: #d2e9dc;
}
.ps-cls-feats li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background:
    linear-gradient(135deg, transparent 50%, #34d399 50%) center/100% 100% no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>") center/contain no-repeat;
  background: #34d399;
}
.ps-cls-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 8px;
  background: rgba(52,211,153,0.12);
  color: #34d399; text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(52,211,153,0.28);
  transition: background 0.18s, color 0.18s;
}
.ps-cls-cta:hover { background: #34d399; color: #07120e; }
.ps-cls-cta:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-cls-grid { grid-template-columns: 1fr; max-width: 460px; }
  .ps-cls-sub { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-cls-card { transition: none; }
  .ps-cls-card:hover { transform: none; }
}
```

### 12. Highlighted Popular

**Type:** Pure CSS
**Description:** Three tiers with the middle "Pro" plan lifted, scaled, and ribboned with a "Most Popular" badge. Sunset peach gradient on the highlight, neutral cream on the surrounding tiers — the lift pattern that drives 60–70% of mid-tier conversions.

**HTML:**
```html
<section class="ps-pop" aria-label="Pricing">
  <header class="ps-pop-head">
    <h2>Simple pricing, no surprises.</h2>
    <p>Three plans. Same product. Pick what you can grow into.</p>
  </header>
  <div class="ps-pop-grid">
    <article class="ps-pop-card">
      <h3>Basic</h3>
      <div class="ps-pop-price">
        <span class="ps-pop-cur">$</span><span class="ps-pop-amt">12</span
        ><span class="ps-pop-per">/mo</span>
      </div>
      <p class="ps-pop-sub">Just the essentials.</p>
      <ul class="ps-pop-feats">
        <li>3 projects</li>
        <li>5 GB storage</li>
        <li>Email-only support</li>
      </ul>
      <a class="ps-pop-cta" href="#basic">Choose Basic</a>
    </article>
    <article class="ps-pop-card ps-pop-popular">
      <span class="ps-pop-badge" aria-label="Most popular plan">Most popular</span>
      <h3>Pro</h3>
      <div class="ps-pop-price">
        <span class="ps-pop-cur">$</span><span class="ps-pop-amt">36</span
        ><span class="ps-pop-per">/mo</span>
      </div>
      <p class="ps-pop-sub">Everything teams actually need.</p>
      <ul class="ps-pop-feats">
        <li>Unlimited projects</li>
        <li>100 GB storage</li>
        <li>Priority support</li>
        <li>Custom domains</li>
        <li>Team roles</li>
      </ul>
      <a class="ps-pop-cta ps-pop-cta-pri" href="#pro">Choose Pro</a>
    </article>
    <article class="ps-pop-card">
      <h3>Enterprise</h3>
      <div class="ps-pop-price">
        <span class="ps-pop-cur">$</span><span class="ps-pop-amt">99</span
        ><span class="ps-pop-per">/mo</span>
      </div>
      <p class="ps-pop-sub">Compliance + dedicated success.</p>
      <ul class="ps-pop-feats">
        <li>Everything in Pro</li>
        <li>SSO &amp; SAML</li>
        <li>SLA + dedicated CSM</li>
      </ul>
      <a class="ps-pop-cta" href="#enterprise">Contact sales</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-pop {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #1a1410;
  color: #fef2e6;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-pop-head { text-align: center; margin-bottom: clamp(28px, 5vw, 48px); }
.ps-pop-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 10px;
  background: linear-gradient(90deg, #ff8b5a, #ffb37a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-pop-head p { color: #c9b3a3; margin: 0; font-size: 14px; }
.ps-pop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: center;
  max-width: 980px; margin: 0 auto;
}
.ps-pop-card {
  position: relative;
  background: #261c16;
  border: 1px solid rgba(255,179,122,0.12);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
}
.ps-pop-popular {
  background: linear-gradient(180deg, #ff8b5a 0%, #f56a3a 100%);
  color: #1a1410;
  transform: scale(1.05);
  box-shadow: 0 14px 40px rgba(245,106,58,0.35);
  border: 0;
  z-index: 2;
}
.ps-pop-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #1a1410; color: #ff8b5a;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 12px;
  border-radius: 999px;
}
.ps-pop-card h3 {
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0 0 14px;
  color: #ffb37a;
}
.ps-pop-popular h3 { color: #1a1410; }
.ps-pop-price {
  display: flex; align-items: baseline; gap: 3px;
  margin-bottom: 6px;
}
.ps-pop-cur { font-size: 18px; font-weight: 600; opacity: 0.7; }
.ps-pop-amt { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
.ps-pop-per { font-size: 13px; opacity: 0.7; margin-left: 4px; }
.ps-pop-sub { font-size: 13px; opacity: 0.75; margin: 0 0 18px; }
.ps-pop-feats {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13.5px; line-height: 1.9;
}
.ps-pop-feats li::before {
  content: '✓'; display: inline-block; width: 18px;
  font-weight: 800; opacity: 0.85;
}
.ps-pop-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid currentColor;
  color: #ffb37a; background: transparent;
  transition: background 0.18s, color 0.18s;
}
.ps-pop-cta:hover { background: #ffb37a; color: #1a1410; }
.ps-pop-cta-pri { background: #1a1410; color: #ff8b5a; border-color: #1a1410; }
.ps-pop-cta-pri:hover { background: #fef2e6; color: #1a1410; border-color: #fef2e6; }
.ps-pop-cta:focus-visible { outline: 2px solid #ff8b5a; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-pop-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-pop-popular { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-pop-cta { transition: none; }
}
```

### 13. Feature Comparison Table

**Type:** Pure CSS
**Description:** A real <code>&lt;table&gt;</code> with proper <code>&lt;th scope&gt;</code>, sticky header row, and check / dash cells comparing four plans across nine features. Cyan accent on the recommended column. Mobile fallback collapses to a stacked card list under 720px.

**HTML:**
```html
<section class="ps-cmp" aria-label="Plan comparison">
  <header class="ps-cmp-head">
    <h2>Compare every feature.</h2>
    <p>Pick the column that matches what you ship today.</p>
  </header>
  <div class="ps-cmp-scroll">
    <table class="ps-cmp-tbl">
      <thead>
        <tr>
          <th scope="col" class="ps-cmp-fc">Feature</th>
          <th scope="col">Free<br /><span>$0</span></th>
          <th scope="col" class="ps-cmp-rec">
            <span class="ps-cmp-pill">Recommended</span>Pro<br /><span>$24</span>
          </th>
          <th scope="col">Team<br /><span>$48</span></th>
          <th scope="col">Enterprise<br /><span>Contact</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Projects</th>
          <td>1</td>
          <td class="ps-cmp-rec">10</td>
          <td>50</td>
          <td>Unlimited</td>
        </tr>
        <tr>
          <th scope="row">Storage</th>
          <td>500 MB</td>
          <td class="ps-cmp-rec">10 GB</td>
          <td>50 GB</td>
          <td>500 GB</td>
        </tr>
        <tr>
          <th scope="row">Custom domain</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">Team roles</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">Priority support</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">SSO &amp; SAML</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">Audit logs</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">99.99% SLA</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">Dedicated CSM</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row" class="ps-cmp-fc"></th>
          <td><a class="ps-cmp-cta" href="#free">Get started</a></td>
          <td class="ps-cmp-rec">
            <a class="ps-cmp-cta ps-cmp-cta-pri" href="#pro">Choose Pro →</a>
          </td>
          <td><a class="ps-cmp-cta" href="#team">Choose Team</a></td>
          <td><a class="ps-cmp-cta" href="#ent">Talk to sales</a></td>
        </tr>
      </tfoot>
    </table>
  </div>
</section>
```

**CSS:**
```css
.ps-cmp {
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px);
  min-height: 480px;
  background: #06141a;
  color: #e0f2f7;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-cmp-head { text-align: center; margin-bottom: clamp(20px, 4vw, 36px); }
.ps-cmp-head h2 {
  font-size: clamp(22px, 3.2vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #f1fbff;
}
.ps-cmp-head p { color: #88a8b3; margin: 0; font-size: 14px; }
.ps-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 980px; margin: 0 auto; }
.ps-cmp-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13.5px; min-width: 720px;
}
.ps-cmp-tbl th, .ps-cmp-tbl td {
  text-align: center; padding: 14px 12px;
  border-bottom: 1px solid rgba(34,211,238,0.1);
}
.ps-cmp-tbl thead th {
  font-size: 14px; font-weight: 700;
  color: #cfeaf2;
  background: #0c1f27;
  position: relative;
}
.ps-cmp-tbl thead th span:not(.ps-cmp-pill) {
  display: block; font-size: 13px; font-weight: 500; color: #88a8b3; margin-top: 4px;
}
.ps-cmp-fc { text-align: left !important; color: #88a8b3 !important; font-weight: 500 !important; background: transparent !important; }
.ps-cmp-tbl tbody th {
  text-align: left; font-weight: 500; color: #cfeaf2;
}
.ps-cmp-rec {
  background: rgba(34,211,238,0.06);
  color: #22d3ee;
  position: relative;
}
.ps-cmp-tbl thead th.ps-cmp-rec {
  background: linear-gradient(180deg, rgba(34,211,238,0.18), rgba(34,211,238,0.04));
  color: #5eead4;
}
.ps-cmp-pill {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #22d3ee; color: #06141a;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px;
  border-radius: 999px;
}
.ps-cmp-yes { display: inline-block; width: 22px; height: 22px; line-height: 22px;
  border-radius: 50%; background: rgba(34,211,238,0.15); color: #22d3ee;
  font-weight: 700;
}
.ps-cmp-no { color: #4a606a; font-weight: 500; }
.ps-cmp-tbl tfoot td { padding-top: 18px; padding-bottom: 4px; border: 0; }
.ps-cmp-cta {
  display: inline-block; padding: 9px 16px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(34,211,238,0.3); color: #5eead4;
  transition: background 0.18s, color 0.18s;
}
.ps-cmp-cta:hover { background: rgba(34,211,238,0.18); color: #f1fbff; }
.ps-cmp-cta-pri { background: #22d3ee; color: #06141a; border-color: #22d3ee; }
.ps-cmp-cta-pri:hover { background: #5eead4; color: #06141a; }
.ps-cmp-cta:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
@media (max-width: 720px) {
  .ps-cmp-scroll { padding-bottom: 8px; }
  .ps-cmp-tbl thead th, .ps-cmp-tbl tbody th, .ps-cmp-tbl td { padding: 10px 8px; font-size: 12px; }
  .ps-cmp-pill { font-size: 9px; padding: 2px 6px; }
}
```

### 14. Monthly Yearly Toggle

**Type:** Pure CSS
**Description:** A pure-CSS billing-cycle switch using two hidden radios + <code>:has()</code>. No JavaScript — selecting Yearly swaps every visible price across all three tiers via sibling state. Teal gradient, save-20%-pill on the yearly option.

**HTML:**
```html
<section class="ps-tog" aria-label="Pricing">
  <header class="ps-tog-head">
    <h2>Pay how it suits you.</h2>
    <p>Switch billing — no contracts, no negotiation.</p>
    <fieldset class="ps-tog-switch">
      <legend class="ps-tog-sr">Billing cycle</legend>
      <input type="radio" name="ps-tog-cycle" id="ps-tog-m" checked />
      <label for="ps-tog-m">Monthly</label>
      <input type="radio" name="ps-tog-cycle" id="ps-tog-y" />
      <label for="ps-tog-y">Yearly <span class="ps-tog-save">−20%</span></label>
      <span class="ps-tog-thumb" aria-hidden="true"></span>
    </fieldset>
  </header>
  <div class="ps-tog-grid">
    <article class="ps-tog-card">
      <h3>Hobby</h3>
      <div class="ps-tog-price">
        <span class="ps-tog-m-amt">$0</span><span class="ps-tog-y-amt">$0</span
        ><span class="ps-tog-per">forever</span>
      </div>
      <ul>
        <li>1 site</li>
        <li>Public projects</li>
        <li>Community</li>
      </ul>
      <a class="ps-tog-cta" href="#hobby">Start free</a>
    </article>
    <article class="ps-tog-card ps-tog-best">
      <span class="ps-tog-badge">Best value</span>
      <h3>Studio</h3>
      <div class="ps-tog-price">
        <span class="ps-tog-m-amt">$19</span><span class="ps-tog-y-amt">$15</span
        ><span class="ps-tog-per">/ month</span>
      </div>
      <ul>
        <li>Unlimited sites</li>
        <li>Custom domains</li>
        <li>Email support</li>
        <li>Form submissions</li>
      </ul>
      <a class="ps-tog-cta ps-tog-cta-pri" href="#studio">Start trial</a>
    </article>
    <article class="ps-tog-card">
      <h3>Agency</h3>
      <div class="ps-tog-price">
        <span class="ps-tog-m-amt">$59</span><span class="ps-tog-y-amt">$47</span
        ><span class="ps-tog-per">/ month</span>
      </div>
      <ul>
        <li>Everything in Studio</li>
        <li>Client billing</li>
        <li>Workspace switcher</li>
        <li>Priority support</li>
      </ul>
      <a class="ps-tog-cta" href="#agency">Choose Agency</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-tog {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #062021;
  color: #e0fafa;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-tog-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-tog-head h2 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px;
  background: linear-gradient(90deg, #14b8a6, #5eead4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-tog-head p { color: #7ea7a4; margin: 0 0 22px; font-size: 14px; }
.ps-tog-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ps-tog-switch {
  position: relative; display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; padding: 4px;
  background: #0d2f30;
  border: 1px solid rgba(94,234,212,0.18);
  border-radius: 999px;
  margin: 0;
}
.ps-tog-switch input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.ps-tog-switch input:focus-visible + label {
  outline: 2px solid #5eead4; outline-offset: 3px;
}
.ps-tog-switch label {
  position: relative; z-index: 1;
  padding: 8px 22px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #7ea7a4;
  border-radius: 999px;
  transition: color 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.ps-tog-save {
  font-size: 10px; font-weight: 700;
  background: rgba(94,234,212,0.18); color: #5eead4;
  padding: 2px 6px; border-radius: 6px;
}
.ps-tog-thumb {
  position: absolute; top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  background: linear-gradient(135deg, #14b8a6, #5eead4);
  border-radius: 999px;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  box-shadow: 0 4px 14px rgba(20,184,166,0.3);
}
.ps-tog-switch:has(#ps-tog-y:checked) .ps-tog-thumb { transform: translateX(100%); }
.ps-tog-switch:has(#ps-tog-m:checked) label[for="ps-tog-m"],
.ps-tog-switch:has(#ps-tog-y:checked) label[for="ps-tog-y"] { color: #062021; }
.ps-tog-switch:has(#ps-tog-y:checked) .ps-tog-save { background: rgba(6,32,33,0.25); color: #062021; }
.ps-tog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
}
.ps-tog-card {
  position: relative;
  background: #0d2f30;
  border: 1px solid rgba(94,234,212,0.15);
  border-radius: 14px;
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
}
.ps-tog-best { border-color: #5eead4; box-shadow: 0 0 0 1px #5eead4 inset; }
.ps-tog-badge {
  position: absolute; top: -10px; right: 16px;
  background: #5eead4; color: #062021;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 6px;
}
.ps-tog-card h3 {
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0 0 14px; color: #5eead4;
}
.ps-tog-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.ps-tog-m-amt, .ps-tog-y-amt { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: #f0fff7; }
.ps-tog-per { font-size: 13px; color: #7ea7a4; }
.ps-tog:has(#ps-tog-m:checked) .ps-tog-y-amt { display: none; }
.ps-tog:has(#ps-tog-y:checked) .ps-tog-m-amt { display: none; }
.ps-tog-card ul {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13.5px; line-height: 2; color: #c8eaea;
}
.ps-tog-card ul li::before {
  content: '✓'; color: #5eead4; font-weight: 700;
  display: inline-block; width: 20px;
}
.ps-tog-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  background: rgba(94,234,212,0.12); color: #5eead4;
  border: 1px solid rgba(94,234,212,0.25);
  transition: background 0.18s, color 0.18s;
}
.ps-tog-cta-pri { background: #5eead4; color: #062021; border-color: #5eead4; }
.ps-tog-cta:hover { background: #5eead4; color: #062021; }
.ps-tog-cta:focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-tog-grid { grid-template-columns: 1fr; max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-tog-thumb { transition: none; }
  .ps-tog-cta { transition: none; }
  .ps-tog-switch label { transition: none; }
}
```

### 15. Usage Slider

**Type:** Light JS
**Description:** Native <code>&lt;input type="range"&gt;</code> drives a live monthly estimate. Drag the slider, the requests count, total price, and recommended tier all update — with <code>aria-valuetext</code> announcing the result to screen readers. Magenta accent, the usage-based pricing pattern from Twilio / Stripe.

**HTML:**
```html
<section class="ps-slr" aria-label="Usage-based pricing">
  <header class="ps-slr-head">
    <span class="ps-slr-eye">Pay-as-you-go</span>
    <h2>Only pay for what you actually send.</h2>
    <p>
      Slide to estimate your monthly bill — we round up to the nearest tier so you’re never
      surprised.
    </p>
  </header>
  <div class="ps-slr-card">
    <div class="ps-slr-stage">
      <div class="ps-slr-display">
        <span class="ps-slr-label" id="ps-slr-lbl">Estimated monthly cost</span>
        <span class="ps-slr-amount"><em>$</em><span id="ps-slr-price">12</span></span>
        <span class="ps-slr-detail"
          ><span id="ps-slr-units">10,000</span> requests on the
          <strong id="ps-slr-tier">Starter</strong> tier</span
        >
      </div>
      <div class="ps-slr-track-wrap">
        <label class="ps-slr-sr" for="ps-slr-range">Monthly request volume</label>
        <input
          type="range"
          id="ps-slr-range"
          class="ps-slr-range"
          min="0"
          max="100"
          step="1"
          value="10"
          aria-labelledby="ps-slr-lbl"
          aria-valuetext="10,000 requests, Starter tier, 12 dollars per month"
        />
        <div class="ps-slr-ticks" aria-hidden="true">
          <span>10K</span><span>100K</span><span>500K</span><span>1M</span><span>5M+</span>
        </div>
      </div>
      <ul class="ps-slr-feats">
        <li>No setup fee, no minimum spend</li>
        <li>Auto-tier switching at every milestone</li>
        <li>Usage cap option to prevent surprises</li>
      </ul>
      <a class="ps-slr-cta" href="#start">Start with this plan →</a>
    </div>
  </div>
</section>
```

**CSS:**
```css
.ps-slr {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #1a0a18;
  color: #fde7f4;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-slr-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-slr-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #f472b6; padding: 5px 12px;
  background: rgba(244,114,182,0.12);
  border: 1px solid rgba(244,114,182,0.25);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-slr-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 10px;
  color: #fff;
}
.ps-slr-head p { color: #c2a0b6; margin: 0 auto; max-width: 520px; font-size: 14px; line-height: 1.6; }
.ps-slr-card {
  max-width: 580px; margin: 0 auto;
  background: linear-gradient(180deg, #2a1227, #1a0a18);
  border: 1px solid rgba(244,114,182,0.2);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 32px);
  box-shadow: 0 22px 60px rgba(244,114,182,0.12);
}
.ps-slr-display {
  text-align: center; padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px dashed rgba(244,114,182,0.2);
}
.ps-slr-label {
  display: block; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #c2a0b6;
}
.ps-slr-amount {
  display: flex; justify-content: center; align-items: baseline; gap: 4px;
  font-size: 64px; font-weight: 800; letter-spacing: -0.04em;
  margin: 8px 0 6px;
  background: linear-gradient(180deg, #f472b6, #be185d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-slr-amount em { font-size: 28px; font-style: normal; align-self: flex-start; padding-top: 12px; opacity: 0.7; }
.ps-slr-detail { font-size: 13px; color: #c2a0b6; }
.ps-slr-detail strong { color: #f472b6; font-weight: 700; }
.ps-slr-track-wrap { padding: 0 4px 22px; }
.ps-slr-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ps-slr-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; background: transparent; cursor: pointer;
  margin: 8px 0 12px;
}
.ps-slr-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #f472b6 0%, #f472b6 var(--ps-slr-fill, 10%), #3a1a30 var(--ps-slr-fill, 10%), #3a1a30 100%);
}
.ps-slr-range::-moz-range-track {
  height: 6px; border-radius: 999px; background: #3a1a30;
}
.ps-slr-range::-moz-range-progress {
  height: 6px; border-radius: 999px; background: #f472b6;
}
.ps-slr-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; background: #fff;
  border: 3px solid #f472b6;
  box-shadow: 0 4px 12px rgba(244,114,182,0.4);
  cursor: grab;
}
.ps-slr-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid #f472b6; box-shadow: 0 4px 12px rgba(244,114,182,0.4);
  cursor: grab;
}
.ps-slr-range:focus-visible::-webkit-slider-thumb { outline: 3px solid #f9a8d4; outline-offset: 2px; }
.ps-slr-range:focus-visible::-moz-range-thumb { outline: 3px solid #f9a8d4; outline-offset: 2px; }
.ps-slr-ticks {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: #8a647a;
}
.ps-slr-feats {
  list-style: none; padding: 0; margin: 0 0 22px;
  font-size: 13px; line-height: 1.9; color: #d8b8cc;
}
.ps-slr-feats li::before {
  content: '✦'; color: #f472b6; display: inline-block; width: 20px;
}
.ps-slr-cta {
  display: block; text-align: center;
  padding: 13px 18px; border-radius: 10px;
  background: linear-gradient(135deg, #f472b6, #be185d);
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(190,24,93,0.35);
  transition: transform 0.18s;
}
.ps-slr-cta:hover { transform: translateY(-1px); }
.ps-slr-cta:focus-visible { outline: 2px solid #f9a8d4; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ps-slr-cta { transition: none; }
}
```

**JS:**
```js
(function () {
  var range = document.getElementById('ps-slr-range');
  var priceEl = document.getElementById('ps-slr-price');
  var unitsEl = document.getElementById('ps-slr-units');
  var tierEl  = document.getElementById('ps-slr-tier');
  if (!range || !priceEl) return;

  // 5 tiers — index → { units (k), price ($), tier name }
  var tiers = [
    { units: 10,    price: 12,   name: 'Starter' },
    { units: 100,   price: 49,   name: 'Starter' },
    { units: 500,   price: 149,  name: 'Growth'  },
    { units: 1000,  price: 249,  name: 'Growth'  },
    { units: 5000,  price: 749,  name: 'Scale'   }
  ];

  function fmtUnits(k) { return k >= 1000 ? (k / 1000).toFixed(k % 1000 ? 1 : 0) + 'M' : k.toLocaleString() + 'K'; }

  function update() {
    var v = parseInt(range.value, 10);
    // map 0..100 → 0..4 with stops at 10/30/55/80/100
    var idx = v < 25 ? 0 : v < 50 ? 1 : v < 75 ? 2 : v < 95 ? 3 : 4;
    var t = tiers[idx];
    priceEl.textContent = t.price.toLocaleString();
    unitsEl.textContent = fmtUnits(t.units) + ' requests';
    // strip the trailing " requests" when re-using textContent below — show only the formatted number
    unitsEl.textContent = fmtUnits(t.units);
    tierEl.textContent  = t.name;
    range.style.setProperty('--ps-slr-fill', v + '%');
    range.setAttribute('aria-valuetext',
      fmtUnits(t.units) + ' requests, ' + t.name + ' tier, ' + t.price + ' dollars per month');
  }

  range.addEventListener('input', update);
  update();
})();
```

### 16. Single Premium Card

**Type:** Pure CSS
**Description:** A single-tier pricing layout for one-product brands — premium gold / brass treatment over deep navy, oversized price block, six feature checkmarks in two columns, anchor testimonial below. The pattern Basecamp / Hover use when there is only one thing to sell.

**HTML:**
```html
<section class="ps-her" aria-label="Pricing">
  <article class="ps-her-card">
    <span class="ps-her-eye">One plan · everything included</span>
    <h2>The whole product, <em>flat fee.</em></h2>
    <p class="ps-her-lead">
      Stop comparing tiers. One price. Every feature. Every team member. As long as you need it.
    </p>
    <div class="ps-her-price">
      <span class="ps-her-amt"><em>$</em>249</span>
      <span class="ps-her-per">per month, billed annually</span>
    </div>
    <ul class="ps-her-feats">
      <li>Unlimited team members</li>
      <li>Unlimited projects &amp; storage</li>
      <li>SSO &amp; SAML included</li>
      <li>SOC 2 &amp; HIPAA ready</li>
      <li>Priority email + chat support</li>
      <li>30-day money-back guarantee</li>
    </ul>
    <a class="ps-her-cta" href="#buy">Buy now — instant access</a>
    <p class="ps-her-foot">No demo required. Cancel any time, refund any time within 30 days.</p>
    <blockquote class="ps-her-quote">
      <p>“It paid for itself in the first week. We never looked at the tier ladder again.”</p>
      <cite>— Maya R., Head of Ops at Northwood</cite>
    </blockquote>
  </article>
</section>
```

**CSS:**
```css
.ps-her {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 30% 0%, rgba(212,175,55,0.12), transparent 60%),
    radial-gradient(50% 50% at 90% 100%, rgba(212,175,55,0.10), transparent 60%),
    #0b0b1a;
  color: #f4ecd8;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.ps-her-card {
  position: relative;
  width: 100%; max-width: 540px;
  background: linear-gradient(180deg, #14142a 0%, #0b0b1a 100%);
  border: 1px solid #d4af37;
  border-radius: 22px;
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(212,175,55,0.15), inset 0 0 0 1px rgba(212,175,55,0.15);
}
.ps-her-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 22px;
  background:
    linear-gradient(135deg, transparent 40%, rgba(255,212,121,0.06) 50%, transparent 60%);
  pointer-events: none;
}
.ps-her-eye {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #d4af37; padding: 5px 14px;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 999px;
  margin-bottom: 18px;
}
.ps-her-card h2 {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 14px; color: #fff;
}
.ps-her-card h2 em { color: #d4af37; font-style: italic; }
.ps-her-lead { color: #b8a888; font-size: 14.5px; line-height: 1.6; margin: 0 auto 28px; max-width: 380px; }
.ps-her-price {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin-bottom: 28px;
  padding: 22px 0; border-top: 1px solid rgba(212,175,55,0.18);
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.ps-her-amt {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(56px, 9vw, 88px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(180deg, #ffd479, #d4af37);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-her-amt em { font-size: 0.5em; font-style: normal; vertical-align: top; padding-right: 2px; opacity: 0.85; }
.ps-her-per { font-size: 13px; color: #b8a888; }
.ps-her-feats {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
  text-align: left; font-size: 13.5px; color: #f4ecd8;
}
.ps-her-feats li::before {
  content: '✓'; color: #d4af37; font-weight: 700;
  display: inline-block; width: 20px;
}
.ps-her-cta {
  display: block;
  padding: 14px 20px; border-radius: 10px;
  background: linear-gradient(180deg, #ffd479, #d4af37);
  color: #0b0b1a; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(212,175,55,0.3);
  transition: transform 0.18s;
}
.ps-her-cta:hover { transform: translateY(-1px); }
.ps-her-cta:focus-visible { outline: 2px solid #ffd479; outline-offset: 3px; }
.ps-her-foot { font-size: 12px; color: #8a8068; margin: 12px 0 26px; }
.ps-her-quote {
  margin: 0; padding-top: 22px; border-top: 1px dashed rgba(212,175,55,0.2);
}
.ps-her-quote p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px; font-style: italic; color: #f4ecd8;
  margin: 0 0 8px; line-height: 1.5;
}
.ps-her-quote cite { font-style: normal; font-size: 12px; color: #8a8068; letter-spacing: 0.05em; }
@media (max-width: 540px) {
  .ps-her-feats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-her-cta { transition: none; }
}
```

### 17. Bento Pricing Grid

**Type:** Pure CSS
**Description:** Apple-style bento layout — the recommended Pro tile dominates one large quadrant, with stat / quote / pill cells fanning out. Coral and rose tones. Each tile is its own <code>&lt;article&gt;</code> with semantic content; the layout uses CSS Grid named areas.

**HTML:**
```html
<section class="ps-bnt" aria-label="Pricing">
  <header class="ps-bnt-head">
    <h2>Pricing in tiles, not tiers.</h2>
    <p>One canvas, three offers, and the proof points that make the choice obvious.</p>
  </header>
  <div class="ps-bnt-grid">
    <article class="ps-bnt-tile ps-bnt-pro">
      <span class="ps-bnt-pill">Recommended</span>
      <h3>Pro</h3>
      <div class="ps-bnt-price"><em>$</em>34<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>100 GB storage</li>
        <li>Priority support</li>
        <li>Custom domains</li>
      </ul>
      <a class="ps-bnt-cta" href="#pro">Choose Pro →</a>
    </article>
    <article class="ps-bnt-tile ps-bnt-free">
      <h3>Free</h3>
      <div class="ps-bnt-price"><em>$</em>0<span>forever</span></div>
      <p>Build something small, ship it, keep it free.</p>
      <a class="ps-bnt-cta-sm" href="#free">Start free →</a>
    </article>
    <article class="ps-bnt-tile ps-bnt-stat">
      <span class="ps-bnt-stat-num">14k+</span>
      <span class="ps-bnt-stat-lbl">teams pay for Pro every month</span>
    </article>
    <article class="ps-bnt-tile ps-bnt-team">
      <h3>Team</h3>
      <div class="ps-bnt-price"><em>$</em>99<span>/mo</span></div>
      <p>Roles, billing, and audit logs for growing companies.</p>
      <a class="ps-bnt-cta-sm" href="#team">Choose Team →</a>
    </article>
    <article class="ps-bnt-tile ps-bnt-quote">
      <p>“We tried five tools. This was the only one priced like a partner, not a tax.”</p>
      <cite>— Lior, CTO at Pulse</cite>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-bnt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #1a0d0d;
  color: #ffe7df;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-bnt-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-bnt-head h2 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px;
  color: #ffd0bf;
}
.ps-bnt-head p { color: #b89180; margin: 0 auto; max-width: 480px; font-size: 14px; }
.ps-bnt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "pro pro free stat"
    "pro pro team quote";
  gap: 14px;
  max-width: 980px; margin: 0 auto;
}
.ps-bnt-tile {
  background: #2a1612;
  border: 1px solid rgba(255,108,79,0.15);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 130px;
}
.ps-bnt-pro {
  grid-area: pro;
  background: linear-gradient(135deg, #ff6b4a 0%, #f43f5e 100%);
  border: 0;
  color: #1a0d0d;
  position: relative;
  overflow: hidden;
}
.ps-bnt-pro::after {
  content: ''; position: absolute; right: -40px; bottom: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
}
.ps-bnt-pill {
  display: inline-block; align-self: flex-start;
  background: #1a0d0d; color: #ff6b4a;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 11px;
  border-radius: 999px; margin-bottom: 8px;
}
.ps-bnt-tile h3 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px; opacity: 0.8; }
.ps-bnt-pro h3 { color: #1a0d0d; opacity: 1; font-weight: 700; }
.ps-bnt-price {
  font-size: clamp(36px, 5vw, 56px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 12px;
}
.ps-bnt-price em { font-size: 0.5em; font-style: normal; vertical-align: top; padding-right: 2px; opacity: 0.7; }
.ps-bnt-price span { font-size: 0.28em; font-weight: 500; opacity: 0.7; margin-left: 6px; }
.ps-bnt-pro ul {
  list-style: none; padding: 0; margin: 0 0 18px;
  font-size: 13px; line-height: 1.9;
}
.ps-bnt-pro ul li::before { content: '✓'; display: inline-block; width: 20px; font-weight: 700; }
.ps-bnt-tile p {
  font-size: 13px; line-height: 1.5; color: #b89180; margin: 0 0 12px;
}
.ps-bnt-cta, .ps-bnt-cta-sm {
  display: inline-block; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid currentColor; color: inherit;
  transition: background 0.18s, color 0.18s;
}
.ps-bnt-cta { background: #1a0d0d; color: #ff6b4a; border-color: #1a0d0d; align-self: flex-start; }
.ps-bnt-cta:hover { background: transparent; color: #fff; border-color: #fff; }
.ps-bnt-cta-sm { color: #ff6b4a; border-color: rgba(255,108,79,0.4); padding: 8px 14px; align-self: flex-start; font-size: 12.5px; }
.ps-bnt-cta-sm:hover { background: #ff6b4a; color: #1a0d0d; border-color: #ff6b4a; }
.ps-bnt-cta:focus-visible, .ps-bnt-cta-sm:focus-visible { outline: 2px solid #ffe7df; outline-offset: 3px; }
.ps-bnt-stat { grid-area: stat; align-items: flex-start; background: #2a1612; }
.ps-bnt-stat-num {
  font-size: clamp(36px, 5vw, 50px); font-weight: 800;
  letter-spacing: -0.03em; color: #ff6b4a;
  background: linear-gradient(180deg, #ffb37a, #ff6b4a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-bnt-stat-lbl { font-size: 12px; color: #b89180; line-height: 1.4; }
.ps-bnt-team { grid-area: team; }
.ps-bnt-free { grid-area: free; }
.ps-bnt-quote {
  grid-area: quote;
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
  color: #1a0d0d; border: 0;
}
.ps-bnt-quote p { font-style: italic; color: #1a0d0d; font-weight: 500; line-height: 1.5; font-size: 13px; opacity: 0.92; }
.ps-bnt-quote cite { font-style: normal; font-size: 11px; color: rgba(26,13,13,0.7); letter-spacing: 0.05em; }
@media (max-width: 820px) {
  .ps-bnt-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pro pro"
      "free team"
      "stat quote";
  }
}
@media (max-width: 520px) {
  .ps-bnt-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pro"
      "free"
      "team"
      "stat"
      "quote";
  }
}
```

### 18. Vertical Tier Timeline

**Type:** Pure CSS
**Description:** Tiers presented as a vertical roadmap — Free → Pro → Enterprise — connected by a glowing lime spine. Each station is a real <code>&lt;ol&gt;</code>/<code>&lt;li&gt;</code> with a numbered milestone, price, and feature list. Reads as a growth path, not a column comparison.

**HTML:**
```html
<section class="ps-tml" aria-label="Pricing">
  <header class="ps-tml-head">
    <h2>Grow into the next plan, not out of one.</h2>
    <p>Three stops on the same road. Switch up or down with one click.</p>
  </header>
  <ol class="ps-tml-line">
    <li class="ps-tml-stop">
      <span class="ps-tml-num" aria-hidden="true">01</span>
      <article class="ps-tml-pane">
        <header>
          <h3>Free</h3>
          <span class="ps-tml-pri">$0</span>
        </header>
        <p>
          Open-source projects, side experiments, anything you want to ship without a credit card.
        </p>
        <ul>
          <li>1 project</li>
          <li>500 MB storage</li>
          <li>Public repos only</li>
        </ul>
        <a class="ps-tml-cta" href="#free">Start free →</a>
      </article>
    </li>
    <li class="ps-tml-stop ps-tml-current">
      <span class="ps-tml-num" aria-hidden="true">02</span>
      <article class="ps-tml-pane">
        <header>
          <h3>Pro</h3>
          <span class="ps-tml-pri">$24<em>/mo</em></span>
        </header>
        <p>
          Where most teams settle. Private projects, real support, and the integrations you actually
          use.
        </p>
        <ul>
          <li>Unlimited projects</li>
          <li>50 GB storage</li>
          <li>Email + chat support</li>
          <li>Slack, GitHub, Linear sync</li>
        </ul>
        <a class="ps-tml-cta ps-tml-cta-pri" href="#pro">Choose Pro →</a>
      </article>
    </li>
    <li class="ps-tml-stop">
      <span class="ps-tml-num" aria-hidden="true">03</span>
      <article class="ps-tml-pane">
        <header>
          <h3>Enterprise</h3>
          <span class="ps-tml-pri">Custom</span>
        </header>
        <p>
          For teams with procurement processes, security reviews, and quarterly business reviews.
        </p>
        <ul>
          <li>SSO + SAML + audit logs</li>
          <li>SLA, dedicated CSM</li>
          <li>Custom DPA &amp; invoicing</li>
        </ul>
        <a class="ps-tml-cta" href="#ent">Talk to sales →</a>
      </article>
    </li>
  </ol>
</section>
```

**CSS:**
```css
.ps-tml {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #0a1408;
  color: #ecfccb;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-tml-head { text-align: center; margin-bottom: clamp(28px, 5vw, 44px); }
.ps-tml-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #f7feec;
}
.ps-tml-head p { color: #93a87f; margin: 0; font-size: 14px; }
.ps-tml-line {
  position: relative; list-style: none; padding: 0;
  margin: 0 auto; max-width: 580px;
}
.ps-tml-line::before {
  content: ''; position: absolute; left: 28px; top: 18px; bottom: 18px;
  width: 2px; background: linear-gradient(180deg, #84cc16, rgba(132,204,22,0.2));
  border-radius: 2px;
}
.ps-tml-stop {
  position: relative; padding: 0 0 24px 70px;
  min-height: 56px;
}
.ps-tml-stop:last-child { padding-bottom: 0; }
.ps-tml-num {
  position: absolute; left: 6px; top: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #0a1408; border: 2px solid #84cc16;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; color: #84cc16;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.ps-tml-current .ps-tml-num {
  background: #84cc16; color: #0a1408;
  box-shadow: 0 0 0 6px rgba(132,204,22,0.18);
}
.ps-tml-pane {
  background: #14210e;
  border: 1px solid rgba(132,204,22,0.18);
  border-radius: 12px;
  padding: 18px 18px 16px;
}
.ps-tml-current .ps-tml-pane {
  border-color: #84cc16;
  background: linear-gradient(180deg, #1a3010, #14210e);
  box-shadow: 0 8px 24px rgba(132,204,22,0.12);
}
.ps-tml-pane header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(132,204,22,0.18);
  padding-bottom: 10px;
}
.ps-tml-pane h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0; color: #84cc16;
}
.ps-tml-pri { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #f7feec; }
.ps-tml-pri em { font-size: 12px; font-style: normal; color: #93a87f; font-weight: 500; margin-left: 2px; }
.ps-tml-pane p { font-size: 13px; color: #c8d8b0; margin: 10px 0; line-height: 1.55; }
.ps-tml-pane ul {
  list-style: none; padding: 0; margin: 0 0 14px;
  font-size: 13px; line-height: 1.85; color: #c8d8b0;
}
.ps-tml-pane ul li::before {
  content: '→'; color: #84cc16; display: inline-block; width: 20px; font-weight: 700;
}
.ps-tml-cta {
  display: inline-block; padding: 9px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(132,204,22,0.4); color: #84cc16;
  background: transparent;
  transition: background 0.18s, color 0.18s;
}
.ps-tml-cta:hover { background: rgba(132,204,22,0.15); color: #ecfccb; }
.ps-tml-cta-pri { background: #84cc16; color: #0a1408; border-color: #84cc16; }
.ps-tml-cta-pri:hover { background: #a3e635; color: #0a1408; border-color: #a3e635; }
.ps-tml-cta:focus-visible { outline: 2px solid #a3e635; outline-offset: 3px; }
```

### 19. Brutalist Print

**Type:** Pure CSS
**Description:** Print-zine pricing — black on cream, hard offset shadows, mono type, intentionally raw. Each plan card sits askew on a yellow grid; CTAs are big inverted blocks. The brutalist aesthetic that signals "no marketing fluff" — popular with indie hackers and OSS.

**HTML:**
```html
<section class="ps-brt" aria-label="Pricing">
  <header class="ps-brt-head">
    <span class="ps-brt-eye">issue №07 · pricing</span>
    <h2>Three sizes. One product. Pick.</h2>
  </header>
  <div class="ps-brt-grid">
    <article class="ps-brt-card ps-brt-r1">
      <div class="ps-brt-row"><span>Plan</span><strong>Solo</strong></div>
      <div class="ps-brt-row"><span>Cost</span><strong class="ps-brt-pri">$8/mo</strong></div>
      <div class="ps-brt-row"><span>Built for</span><strong>Indie devs</strong></div>
      <hr />
      <ul>
        <li>1 site, 1 admin</li>
        <li>5 GB storage</li>
        <li>Forum support</li>
      </ul>
      <a class="ps-brt-cta" href="#solo">[ Buy Solo ]</a>
    </article>
    <article class="ps-brt-card ps-brt-r2 ps-brt-pop">
      <span class="ps-brt-stamp">★ POPULAR</span>
      <div class="ps-brt-row"><span>Plan</span><strong>Studio</strong></div>
      <div class="ps-brt-row"><span>Cost</span><strong class="ps-brt-pri">$24/mo</strong></div>
      <div class="ps-brt-row"><span>Built for</span><strong>Small studios</strong></div>
      <hr />
      <ul>
        <li>10 sites, 5 admins</li>
        <li>50 GB storage</li>
        <li>Email support</li>
        <li>Custom domain</li>
      </ul>
      <a class="ps-brt-cta ps-brt-cta-pri" href="#studio">[ Buy Studio ]</a>
    </article>
    <article class="ps-brt-card ps-brt-r3">
      <div class="ps-brt-row"><span>Plan</span><strong>Shop</strong></div>
      <div class="ps-brt-row"><span>Cost</span><strong class="ps-brt-pri">$60/mo</strong></div>
      <div class="ps-brt-row"><span>Built for</span><strong>Agencies</strong></div>
      <hr />
      <ul>
        <li>Unlimited sites</li>
        <li>500 GB storage</li>
        <li>Priority support</li>
        <li>White-label</li>
      </ul>
      <a class="ps-brt-cta" href="#shop">[ Buy Shop ]</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-brt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 23px, rgba(0,0,0,0.04) 23px, rgba(0,0,0,0.04) 24px),
    repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(0,0,0,0.04) 23px, rgba(0,0,0,0.04) 24px),
    #f4eccc;
  color: #0e0e0e;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.ps-brt-head { margin-bottom: clamp(24px, 4vw, 36px); }
.ps-brt-eye {
  display: inline-block; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 4px 10px;
  background: #0e0e0e; color: #f4eccc; margin-bottom: 12px;
}
.ps-brt-head h2 {
  font-size: clamp(28px, 5vw, 44px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1; margin: 0;
  text-transform: uppercase;
}
.ps-brt-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; max-width: 980px; margin: 0 auto;
}
.ps-brt-card {
  position: relative;
  background: #f4eccc;
  border: 2px solid #0e0e0e;
  padding: 22px 20px 20px;
  box-shadow: 8px 8px 0 0 #0e0e0e;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ps-brt-card:hover { transform: translate(2px, 2px); box-shadow: 6px 6px 0 0 #0e0e0e; }
.ps-brt-r1 { transform: rotate(-1.2deg); }
.ps-brt-r2 { transform: rotate(0.8deg); }
.ps-brt-r3 { transform: rotate(-0.6deg); }
.ps-brt-pop { background: #facc15; border-color: #0e0e0e; box-shadow: 8px 8px 0 0 #0e0e0e; }
.ps-brt-stamp {
  position: absolute; top: -14px; right: -10px;
  background: #0e0e0e; color: #facc15;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  padding: 5px 12px; transform: rotate(4deg);
  text-transform: uppercase;
}
.ps-brt-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; padding: 4px 0;
  border-bottom: 1px dotted rgba(0,0,0,0.25);
}
.ps-brt-row span { text-transform: uppercase; opacity: 0.7; letter-spacing: 0.06em; }
.ps-brt-row strong { font-size: 14px; font-weight: 700; }
.ps-brt-pri { font-size: 22px !important; font-weight: 800 !important; }
.ps-brt-card hr { border: 0; border-top: 2px solid #0e0e0e; margin: 14px 0 12px; }
.ps-brt-card ul {
  list-style: none; padding: 0; margin: 0 0 18px;
  font-size: 12.5px; line-height: 1.7;
}
.ps-brt-card ul li::before { content: '▸ '; }
.ps-brt-cta {
  display: block; text-align: center;
  padding: 11px 16px;
  background: #f4eccc; color: #0e0e0e;
  border: 2px solid #0e0e0e;
  text-decoration: none; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.ps-brt-cta-pri { background: #0e0e0e; color: #facc15; }
.ps-brt-cta:hover { background: #0e0e0e; color: #facc15; }
.ps-brt-cta-pri:hover { background: #facc15; color: #0e0e0e; }
.ps-brt-cta:focus-visible { outline: 3px solid #ff5e5e; outline-offset: 2px; }
@media (max-width: 820px) {
  .ps-brt-grid { grid-template-columns: 1fr; max-width: 380px; gap: 32px; }
  .ps-brt-r1, .ps-brt-r2, .ps-brt-r3 { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-brt-card { transition: none; }
  .ps-brt-card:hover { transform: none; box-shadow: 8px 8px 0 0 #0e0e0e; }
  .ps-brt-r1, .ps-brt-r2, .ps-brt-r3 { transform: none; }
}
```

### 20. Glass Aurora

**Type:** Pure CSS
**Description:** Frosted-glass pricing cards floating over a slow-drifting aurora gradient — radial blobs that orbit behind the cards. <code>backdrop-filter: blur()</code> over layered conic / radial gradients. Ice-blue palette, the high-end consumer-app pricing treatment.

**HTML:**
```html
<section class="ps-aur" aria-label="Pricing">
  <div class="ps-aur-blobs" aria-hidden="true">
    <span class="ps-aur-b1"></span>
    <span class="ps-aur-b2"></span>
    <span class="ps-aur-b3"></span>
  </div>
  <header class="ps-aur-head">
    <h2>Pricing, on the house.</h2>
    <p>Three tiers, all built on the same calm interface.</p>
  </header>
  <div class="ps-aur-grid">
    <article class="ps-aur-card">
      <h3>Drift</h3>
      <div class="ps-aur-price"><em>$</em>0<span>free</span></div>
      <ul>
        <li>Personal projects</li>
        <li>1 GB storage</li>
        <li>Community access</li>
      </ul>
      <a class="ps-aur-cta" href="#drift">Get started</a>
    </article>
    <article class="ps-aur-card ps-aur-mid">
      <span class="ps-aur-pill">Recommended</span>
      <h3>Float</h3>
      <div class="ps-aur-price"><em>$</em>18<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>30 GB storage</li>
        <li>Priority email support</li>
        <li>Custom domains</li>
      </ul>
      <a class="ps-aur-cta ps-aur-cta-pri" href="#float">Choose Float</a>
    </article>
    <article class="ps-aur-card">
      <h3>Stratos</h3>
      <div class="ps-aur-price"><em>$</em>56<span>/mo</span></div>
      <ul>
        <li>Everything in Float</li>
        <li>SSO + audit logs</li>
        <li>Dedicated success manager</li>
      </ul>
      <a class="ps-aur-cta" href="#stratos">Talk to sales</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-aur {
  position: relative; overflow: hidden;
  contain: layout paint;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #050a1a;
  color: #e6f0ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-aur-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ps-aur-blobs span {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.7;
  animation: ps-aur-drift 22s ease-in-out infinite alternate;
}
.ps-aur-b1 { top: -10%; left: -10%; width: 380px; height: 380px;
  background: radial-gradient(circle, #38bdf8 0%, transparent 60%);
  animation-delay: -3s;
}
.ps-aur-b2 { top: 20%; right: -8%; width: 320px; height: 320px;
  background: radial-gradient(circle, #818cf8 0%, transparent 60%);
  animation-delay: -8s;
}
.ps-aur-b3 { bottom: -15%; left: 30%; width: 360px; height: 360px;
  background: radial-gradient(circle, #22d3ee 0%, transparent 60%);
  animation-delay: -14s;
}
@keyframes ps-aur-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.08); }
  100% { transform: translate(-30px,30px) scale(0.95); }
}
.ps-aur-head { position: relative; z-index: 2; text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.ps-aur-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-aur-head p { color: #b8c4dc; margin: 0; font-size: 14px; }
.ps-aur-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; max-width: 980px; margin: 0 auto;
  align-items: center;
}
.ps-aur-card {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 18px 48px rgba(0,0,0,0.25);
}
.ps-aur-mid {
  background: rgba(255,255,255,0.1);
  border-color: rgba(56,189,248,0.4);
  transform: scale(1.04);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.4) inset, 0 22px 56px rgba(56,189,248,0.18);
}
.ps-aur-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  color: #050a1a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 12px;
  border-radius: 999px;
}
.ps-aur-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #93c5fd;
}
.ps-aur-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 42px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-aur-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-aur-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-aur-card ul {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13.5px; line-height: 1.9; color: #d1ddee;
}
.ps-aur-card ul li::before { content: '◇'; color: #38bdf8; display: inline-block; width: 20px; }
.ps-aur-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: #93c5fd; text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(147,197,253,0.3);
  transition: background 0.18s, color 0.18s;
}
.ps-aur-cta-pri {
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  color: #050a1a; border-color: transparent;
}
.ps-aur-cta:hover { background: rgba(255,255,255,0.18); color: #fff; }
.ps-aur-cta-pri:hover { background: linear-gradient(90deg, #7dd3fc, #a5b4fc); color: #050a1a; }
.ps-aur-cta:focus-visible { outline: 2px solid #38bdf8; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-aur-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-aur-mid { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-aur-blobs span { animation: none; }
  .ps-aur-cta { transition: none; }
}
```

### 21. Per-Seat Calculator

**Type:** Light JS
**Description:** Real interactive math — adjust the seat count with native +/− buttons (proper <code>aria-label</code>) and the per-seat × seats × cycle cost recomputes live. Indigo + sky palette. The pattern Linear / Notion / Slack use to let buyers self-serve estimates.

**HTML:**
```html
<section class="ps-cal" aria-label="Per-seat calculator">
  <header class="ps-cal-head">
    <span class="ps-cal-eye">Build your plan</span>
    <h2>Per-seat pricing, calculated live.</h2>
    <p>One number to change. Everything else updates with you.</p>
  </header>
  <div class="ps-cal-card">
    <div class="ps-cal-controls">
      <fieldset class="ps-cal-cycle">
        <legend class="ps-cal-sr">Billing cycle</legend>
        <input type="radio" name="ps-cal-cycle" id="ps-cal-m" checked />
        <label for="ps-cal-m">Monthly</label>
        <input type="radio" name="ps-cal-cycle" id="ps-cal-y" />
        <label for="ps-cal-y">Yearly · save 25%</label>
      </fieldset>
      <div class="ps-cal-stepper">
        <span class="ps-cal-stp-lbl">Team size</span>
        <div class="ps-cal-stp">
          <button type="button" class="ps-cal-btn" id="ps-cal-dec" aria-label="Decrease team size">
            −
          </button>
          <input
            type="number"
            id="ps-cal-seats"
            value="5"
            min="1"
            max="500"
            inputmode="numeric"
            pattern="[0-9]*"
            aria-label="Number of team members"
          />
          <button type="button" class="ps-cal-btn" id="ps-cal-inc" aria-label="Increase team size">
            +
          </button>
        </div>
        <span class="ps-cal-stp-hint">Up to 500 seats. Above that, we’ll talk.</span>
      </div>
    </div>
    <div class="ps-cal-summary">
      <div class="ps-cal-row"><span>Seats</span><strong id="ps-cal-out-seats">5</strong></div>
      <div class="ps-cal-row">
        <span>Per seat</span><strong id="ps-cal-out-per">$12 /mo</strong>
      </div>
      <div class="ps-cal-row"><span>Cycle</span><strong id="ps-cal-out-cyc">Monthly</strong></div>
      <hr />
      <div class="ps-cal-row ps-cal-total">
        <span>Total today</span>
        <strong id="ps-cal-out-total">$60.00</strong>
      </div>
      <p class="ps-cal-foot" id="ps-cal-out-foot">Billed monthly · cancel any time</p>
      <a class="ps-cal-cta" href="#start">Start 14-day trial →</a>
    </div>
  </div>
</section>
```

**CSS:**
```css
.ps-cal {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(99,102,241,0.18), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(56,189,248,0.14), transparent 60%),
    #07091a;
  color: #e6e9ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-cal-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-cal-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #818cf8; padding: 5px 12px;
  background: rgba(129,140,248,0.12);
  border: 1px solid rgba(129,140,248,0.28);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-cal-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-cal-head p { color: #9aa3c8; margin: 0; font-size: 14px; }
.ps-cal-card {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 0;
  max-width: 820px; margin: 0 auto;
  background: rgba(20,22,48,0.7);
  border: 1px solid rgba(129,140,248,0.2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}
.ps-cal-controls {
  padding: clamp(22px, 4vw, 32px);
  border-right: 1px solid rgba(129,140,248,0.15);
  display: flex; flex-direction: column; gap: 22px;
}
.ps-cal-summary {
  padding: clamp(22px, 4vw, 32px);
  background: linear-gradient(180deg, rgba(99,102,241,0.1), rgba(56,189,248,0.06));
  display: flex; flex-direction: column;
}
.ps-cal-cycle {
  border: 1px solid rgba(129,140,248,0.2);
  border-radius: 10px; padding: 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: rgba(7,9,26,0.4);
  margin: 0;
}
.ps-cal-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ps-cal-cycle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ps-cal-cycle label {
  text-align: center; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: #9aa3c8;
  cursor: pointer; border-radius: 7px;
  transition: background 0.18s, color 0.18s;
}
.ps-cal-cycle input:checked + label {
  background: linear-gradient(135deg, #6366f1, #38bdf8); color: #fff;
}
.ps-cal-cycle input:focus-visible + label { outline: 2px solid #818cf8; outline-offset: 2px; }
.ps-cal-stp-lbl {
  display: block; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9aa3c8; margin-bottom: 8px;
}
.ps-cal-stp {
  display: grid; grid-template-columns: 44px 1fr 44px;
  border: 1px solid rgba(129,140,248,0.25);
  border-radius: 10px; overflow: hidden;
  background: rgba(7,9,26,0.5);
}
.ps-cal-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; font-weight: 700; color: #818cf8;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.ps-cal-btn:hover { background: rgba(129,140,248,0.15); color: #fff; }
.ps-cal-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; }
.ps-cal-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ps-cal-stp input[type="number"] {
  background: transparent; border: 0; outline: 0;
  text-align: center; color: #fff;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  font-family: inherit;
  border-left: 1px solid rgba(129,140,248,0.18);
  border-right: 1px solid rgba(129,140,248,0.18);
  -moz-appearance: textfield;
}
.ps-cal-stp input::-webkit-outer-spin-button,
.ps-cal-stp input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ps-cal-stp input:focus-visible { background: rgba(129,140,248,0.12); }
.ps-cal-stp-hint { display: block; font-size: 11.5px; color: #6c759b; margin-top: 8px; }
.ps-cal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  font-size: 13.5px;
}
.ps-cal-row span { color: #9aa3c8; }
.ps-cal-row strong { color: #fff; font-weight: 600; }
.ps-cal-summary hr { border: 0; border-top: 1px dashed rgba(129,140,248,0.25); margin: 4px 0; }
.ps-cal-total span { color: #93c5fd; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.ps-cal-total strong {
  font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #818cf8, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-cal-foot { font-size: 12px; color: #6c759b; margin: 4px 0 16px; }
.ps-cal-cta {
  display: block; text-align: center;
  padding: 12px 18px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700;
  margin-top: auto;
  box-shadow: 0 10px 24px rgba(99,102,241,0.3);
  transition: transform 0.18s;
}
.ps-cal-cta:hover { transform: translateY(-1px); }
.ps-cal-cta:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }
@media (max-width: 720px) {
  .ps-cal-card { grid-template-columns: 1fr; }
  .ps-cal-controls { border-right: 0; border-bottom: 1px solid rgba(129,140,248,0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-cal-cta, .ps-cal-btn, .ps-cal-cycle label { transition: none; }
}
```

**JS:**
```js
(function () {
  var seats   = document.getElementById('ps-cal-seats');
  var dec     = document.getElementById('ps-cal-dec');
  var inc     = document.getElementById('ps-cal-inc');
  var rM      = document.getElementById('ps-cal-m');
  var rY      = document.getElementById('ps-cal-y');
  var outSeats= document.getElementById('ps-cal-out-seats');
  var outPer  = document.getElementById('ps-cal-out-per');
  var outCyc  = document.getElementById('ps-cal-out-cyc');
  var outTot  = document.getElementById('ps-cal-out-total');
  var outFoot = document.getElementById('ps-cal-out-foot');
  if (!seats || !inc) return;

  var BASE_MONTHLY = 12;       // $12 / seat / mo
  var YEARLY_DISC  = 0.25;     // 25% off when yearly

  function clamp(v) {
    if (isNaN(v) || v < 1) return 1;
    if (v > 500) return 500;
    return v;
  }
  function fmt(n) { return '$' + n.toFixed(2); }

  function update() {
    var n = clamp(parseInt(seats.value, 10));
    seats.value = n;
    var yearly = rY.checked;
    var per    = yearly ? BASE_MONTHLY * (1 - YEARLY_DISC) : BASE_MONTHLY;
    var months = yearly ? 12 : 1;
    var total  = per * n * months;

    outSeats.textContent = n + (n === 1 ? ' member' : ' members');
    outPer.textContent   = '$' + per.toFixed(2) + ' / mo';
    outCyc.textContent   = yearly ? 'Yearly (–25%)' : 'Monthly';
    outTot.textContent   = fmt(total);
    outFoot.textContent  = yearly
      ? 'Billed yearly · ' + fmt(total) + ' once, then renews annually'
      : 'Billed monthly · cancel any time';

    dec.disabled = n <= 1;
    inc.disabled = n >= 500;
  }

  dec.addEventListener('click', function () { seats.value = clamp(parseInt(seats.value, 10) - 1); update(); });
  inc.addEventListener('click', function () { seats.value = clamp(parseInt(seats.value, 10) + 1); update(); });
  seats.addEventListener('input', update);
  rM.addEventListener('change', update);
  rY.addEventListener('change', update);
  update();
})();
```

---
## 12 CSS Progress Bar Designs

URL: https://codefronts.com/components/css-progress-bars/
Description: 12 hand-coded CSS progress bar designs — liquid fill, step tracker, conic ring, segmented battery, skill bars, speed gauge and more. Semantic HTML, copy-paste ready.
Demo count: 12

### 01. Liquid Fill

**Type:** Pure CSS
**Description:** Wave-animated water rising inside a rounded vessel — perfect for resource meters, storage usage, and "fill your goal" patterns. Two SVG waves drift at different speeds for organic motion.

**HTML:**
```html
<div
  class="pb-liquid"
  role="progressbar"
  aria-valuenow="68"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Storage used"
>
  <span class="pb-liquid-fill" style="--pb-liquid-level: 68%">
    <svg
      class="pb-liquid-wave w1"
      viewBox="0 0 200 20"
      preserveAspectRatio="none"
      aria-hidden="true"
    >
      <path d="M0 10 Q 25 0 50 10 T 100 10 T 150 10 T 200 10 V 20 H 0 Z" fill="currentColor" />
    </svg>
    <svg
      class="pb-liquid-wave w2"
      viewBox="0 0 200 20"
      preserveAspectRatio="none"
      aria-hidden="true"
    >
      <path d="M0 10 Q 25 20 50 10 T 100 10 T 150 10 T 200 10 V 20 H 0 Z" fill="currentColor" />
    </svg>
  </span>
  <span class="pb-liquid-label"><strong>68%</strong> storage used</span>
</div>
```

**CSS:**
```css
.pb-liquid {
  position: relative;
  width: 220px;
  height: 88px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0f172a, #1e293b);
  border: 1px solid rgba(56, 189, 248, 0.25);
  overflow: hidden;
  box-shadow: 0 12px 30px -10px rgba(56, 189, 248, 0.25);
  font-family: system-ui, sans-serif;
}

.pb-liquid-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pb-liquid-level, 0%);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.85) 0%, rgba(14, 165, 233, 0.95) 100%);
  color: rgba(56, 189, 248, 0.85);
  transition: height 0.6s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-liquid-wave {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 200%;
  height: 18px;
}

.pb-liquid-wave.w1 {
  animation: pbLiquidWave 4s linear infinite;
  opacity: 0.85;
}

.pb-liquid-wave.w2 {
  animation: pbLiquidWave 6s linear infinite reverse;
  opacity: 0.55;
}

.pb-liquid-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f0f9ff;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.pb-liquid-label strong {
  font-size: 20px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .pb-liquid-wave {
    animation: none;
  }
}

@keyframes pbLiquidWave { to { transform: translateX(-50%); } }

```

### 02. Step Tracker

**Type:** Pure CSS
**Description:** Numbered steps with a connecting rail that fills as you progress. Completed steps morph into checkmarks via pseudo-elements — ideal for checkout flows, onboarding wizards, and multi-page forms.

**HTML:**
```html
<ol class="pb-step" role="list" data-current="3">
  <li class="pb-step-item is-done"><span>1</span><em>Cart</em></li>
  <li class="pb-step-item is-done"><span>2</span><em>Address</em></li>
  <li class="pb-step-item is-current"><span>3</span><em>Payment</em></li>
  <li class="pb-step-item"><span>4</span><em>Confirm</em></li>
</ol>
```

**CSS:**
```css
.pb-step {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 280px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  isolation: isolate;
}

.pb-step::before,
.pb-step::after {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 15px;
  height: 2px;
  border-radius: 2px;
  z-index: 0;
}

.pb-step::before {
  background: rgba(255, 255, 255, 0.08);
}

.pb-step::after {
  background: linear-gradient(90deg, #14b8a6, #2dd4bf);
  width: 0;
  left: 12.5%;
  right: auto;
  transition: width 0.5s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-step[data-current="2"]::after {
  width: calc(((2 - 1) / (4 - 1)) * 75%);
}

.pb-step[data-current="3"]::after {
  width: calc(((3 - 1) / (4 - 1)) * 75%);
}

.pb-step[data-current="4"]::after {
  width: 75%;
}

.pb-step-item {
  position: relative;
  display: grid;
  gap: 6px;
  place-items: center;
  font-size: 11px;
  color: #94a3b8;
  z-index: 1;
}

.pb-step-item span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-weight: 700;
  font-size: 13px;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
  position: relative;
}

.pb-step-item em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.pb-step-item.is-done span,
.pb-step-item.is-current span {
  background: linear-gradient(135deg, #14b8a6, #2dd4bf);
  border-color: #2dd4bf;
  color: #0f172a;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
}

.pb-step-item.is-done span {
  font-size: 0;
}

.pb-step-item.is-done span::before {
  content: "";
  width: 13px;
  height: 7px;
  border: 2px solid #0f172a;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: center;
}

.pb-step-item.is-current em {
  color: #2dd4bf;
}

.pb-step-item.is-done em {
  color: #cbd5e1;
}
```

### 03. Conic Ring

**Type:** Pure CSS
**Description:** A circular progress ring rendered with a real `@property`-animated conic gradient — no SVG, no JS scoring. The percentage in the centre updates with the value via a CSS custom property, and the fill sweeps from 0 to the target on every render.

**HTML:**
```html
<div
  class="pb-ring"
  role="progressbar"
  aria-valuenow="74"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Profile completion"
  style="--pb-ring-value: 74"
>
  <span class="pb-ring-track" aria-hidden="true"></span>
  <span class="pb-ring-meta">
    <strong>74<small>%</small></strong>
    <em>Profile</em>
  </span>
</div>
```

**CSS:**
```css
.pb-ring {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  --pb-ring-deg: calc(var(--pb-ring-value, 0) * 3.6deg);
  background: conic-gradient(
    #c084fc 0deg,
    #f472b6 var(--pb-ring-deg),
    rgba(255, 255, 255, 0.06) var(--pb-ring-deg),
    rgba(255, 255, 255, 0.06) 360deg
  );
  animation: pbRingDraw 1.4s cubic-bezier(0.5, 0, 0.3, 1.2) forwards;
  font-family: system-ui, sans-serif;
}

.pb-ring-track {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #15151d;
  box-shadow: inset 0 0 18px rgba(192, 132, 252, 0.15);
}

.pb-ring-meta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

.pb-ring-meta strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #f0eeff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pb-ring-meta strong small {
  font-size: 13px;
  font-weight: 600;
  color: #c084fc;
  margin-left: 1px;
}

.pb-ring-meta em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a78bfa;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pb-ring {
    animation: none;
  }
}

@keyframes pbRingDraw {
  from { --pb-ring-deg: 0deg; }
  to   { --pb-ring-deg: calc(var(--pb-ring-value, 0) * 3.6deg); }
}

```

### 04. Segmented Battery

**Type:** Pure CSS
**Description:** Discrete signal-bar segments that fill from left to right. Each segment has a distinct highlight, giving a tactile, hardware-keypad feel — great for upload progress and connection strength.

**HTML:**
```html
<div
  class="pb-seg"
  role="progressbar"
  aria-valuenow="60"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Network signal"
  data-pb-seg="3"
  data-pb-seg-total="5"
>
  <span class="pb-seg-label">Signal</span>
  <span class="pb-seg-rail" aria-hidden="true">
    <span class="pb-seg-cell"></span>
    <span class="pb-seg-cell"></span>
    <span class="pb-seg-cell"></span>
    <span class="pb-seg-cell"></span>
    <span class="pb-seg-cell"></span>
  </span>
  <span class="pb-seg-value">3 / 5 bars</span>
</div>
```

**CSS:**
```css
.pb-seg {
  width: 220px;
  display: grid;
  gap: 6px;
  font-family: system-ui, sans-serif;
}

.pb-seg-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.pb-seg-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.pb-seg-cell {
  height: 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}

.pb-seg[data-pb-seg="1"] .pb-seg-cell:nth-child(-n + 1),
.pb-seg[data-pb-seg="2"] .pb-seg-cell:nth-child(-n + 2),
.pb-seg[data-pb-seg="3"] .pb-seg-cell:nth-child(-n + 3),
.pb-seg[data-pb-seg="4"] .pb-seg-cell:nth-child(-n + 4),
.pb-seg[data-pb-seg="5"] .pb-seg-cell:nth-child(-n + 5) {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  border-color: #34d399;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pb-seg[data-pb-seg="1"] .pb-seg-cell:nth-child(-n + 1)::after,
.pb-seg[data-pb-seg="2"] .pb-seg-cell:nth-child(-n + 2)::after,
.pb-seg[data-pb-seg="3"] .pb-seg-cell:nth-child(-n + 3)::after,
.pb-seg[data-pb-seg="4"] .pb-seg-cell:nth-child(-n + 4)::after,
.pb-seg[data-pb-seg="5"] .pb-seg-cell:nth-child(-n + 5)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
}

.pb-seg-value {
  font-size: 12px;
  color: #6ee7b7;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}
```

### 05. Stripe Loading

**Type:** Pure CSS
**Description:** Diagonal candy-stripes shimmer continuously inside the filled portion — instantly reads as "actively in progress." A premium touch lifted from server-software install dialogs and CI build runners.

**HTML:**
```html
<div
  class="pb-stripe"
  role="progressbar"
  aria-valuenow="62"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Build progress"
>
  <div class="pb-stripe-head">
    <span>Build #482</span>
    <span class="pb-stripe-pct">62%</span>
  </div>
  <div class="pb-stripe-rail">
    <div class="pb-stripe-fill" style="--pb-stripe-w: 62%"></div>
  </div>
  <div class="pb-stripe-foot">Compiling assets · 4.2 MB / 6.8 MB</div>
</div>
```

**CSS:**
```css
.pb-stripe {
  width: 240px;
  display: grid;
  gap: 6px;
  font-family: system-ui, sans-serif;
}

.pb-stripe-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fde68a;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}

.pb-stripe-pct {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  padding: 2px 8px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.pb-stripe-rail {
  height: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 7px;
  overflow: hidden;
}

.pb-stripe-fill {
  width: var(--pb-stripe-w, 0%);
  height: 100%;
  background: repeating-linear-gradient(-45deg, #f59e0b 0, #f59e0b 8px, #fbbf24 8px, #fbbf24 16px);
  background-size: 22px 22px;
  animation: pbStripeMove 0.8s linear infinite;
  transition: width 0.5s cubic-bezier(0.5, 0, 0.3, 1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pb-stripe-foot {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .pb-stripe-fill {
    animation: none;
  }
}

@keyframes pbStripeMove {
  from { background-position: 0 0; }
  to   { background-position: 44px 0; }
}

```

### 06. Gradient Pulse

**Type:** Pure CSS
**Description:** A premium hero progress bar with a glowing leading edge that pulses gently. The trailing gradient shimmer creates a "comet" feel — perfect for app launchers, splash screens, and SaaS dashboards.

**HTML:**
```html
<div
  class="pb-pulse"
  role="progressbar"
  aria-valuenow="48"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Sync progress"
>
  <div class="pb-pulse-head">
    <strong>Syncing your workspace</strong>
    <span class="pb-pulse-pct">48%</span>
  </div>
  <div class="pb-pulse-rail">
    <div class="pb-pulse-fill" style="--pb-pulse-w: 48%">
      <span class="pb-pulse-edge" aria-hidden="true"></span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.pb-pulse {
  width: 260px;
  display: grid;
  gap: 8px;
  font-family: system-ui, sans-serif;
}

.pb-pulse-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #f0eeff;
  font-size: 13px;
}

.pb-pulse-head strong {
  font-weight: 600;
}

.pb-pulse-pct {
  font-family: "JetBrains Mono", monospace;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pb-pulse-rail {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.pb-pulse-fill {
  position: relative;
  width: var(--pb-pulse-w, 0%);
  height: 100%;
  background: linear-gradient(90deg, rgba(124, 108, 255, 0.25) 0%, #7c6cff 60%, #c4b5fd 100%);
  border-radius: inherit;
  transition: width 0.5s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-pulse-edge {
  position: absolute;
  right: -4px;
  top: -2px;
  bottom: -2px;
  width: 10px;
  background: radial-gradient(circle, #fff 0%, rgba(196, 181, 253, 0.55) 60%, transparent 80%);
  border-radius: 50%;
  animation: pbPulseGlow 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pb-pulse-edge {
    animation: none;
  }
}

@keyframes pbPulseGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

```

### 07. Goal Tracker

**Type:** Pure CSS
**Description:** Vertical fundraising-style progress with milestone markers. Each tier ($1k, $5k, $10k) lights up as the bar grows past it — ideal for crowdfunding, sales targets, and quarterly goals.

**HTML:**
```html
<div
  class="pb-goal"
  role="progressbar"
  aria-valuenow="6800"
  aria-valuemin="0"
  aria-valuemax="10000"
  aria-label="Funds raised"
  style="--pb-goal-pct: 68%"
>
  <div class="pb-goal-track">
    <div class="pb-goal-fill"></div>
    <ul class="pb-goal-marks" aria-hidden="true">
      <li style="--m: 100%"><span>$10k</span></li>
      <li style="--m: 50%" class="hit"><span>$5k</span></li>
      <li style="--m: 10%" class="hit"><span>$1k</span></li>
    </ul>
  </div>
  <div class="pb-goal-meta">
    <strong>$6,800</strong>
    <span>raised of <em>$10,000</em></span>
  </div>
</div>
```

**CSS:**
```css
.pb-goal {
  width: 200px;
  height: 200px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  font-family: system-ui, sans-serif;
}

.pb-goal-track {
  position: relative;
  width: 12px;
  height: 100%;
  margin-left: 18px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.pb-goal-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pb-goal-pct, 0%);
  background: linear-gradient(180deg, #ec4899, #f43f5e);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.5);
  transition: height 0.7s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-goal-marks {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pb-goal-marks li {
  position: absolute;
  right: -28px;
  bottom: var(--m);
  transform: translateY(50%);
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.04em;
  font-family: "JetBrains Mono", monospace;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s;
}

.pb-goal-marks li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #475569;
  margin-left: -28px;
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

.pb-goal-marks li.hit {
  color: #fbcfe8;
}

.pb-goal-marks li.hit::before {
  background: #ec4899;
  border-color: #f9a8d4;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.7);
}

.pb-goal-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  color: #f0eeff;
}

.pb-goal-meta strong {
  font-size: 22px;
  font-weight: 700;
  color: #fda4af;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pb-goal-meta span {
  font-size: 11px;
  color: #94a3b8;
}

.pb-goal-meta em {
  font-style: normal;
  color: #fda4af;
  font-weight: 600;
}
```

### 08. Skill Bars

**Type:** Pure CSS
**Description:** Stacked horizontal bars with labels and percentages. Each row slides in with a staggered animation — the canonical pattern for portfolios, CV pages, and team skill matrices.

**HTML:**
```html
<dl class="pb-skill">
  <div class="pb-skill-row">
    <dt>TypeScript</dt>
    <dd>
      <span class="pb-skill-rail">
        <span class="pb-skill-fill" style="--pb-skill-w: 92%"></span>
      </span>
      <span class="pb-skill-pct">92%</span>
    </dd>
  </div>
  <div class="pb-skill-row">
    <dt>React</dt>
    <dd>
      <span class="pb-skill-rail">
        <span class="pb-skill-fill" style="--pb-skill-w: 88%; --pb-skill-delay: 0.1s"></span>
      </span>
      <span class="pb-skill-pct">88%</span>
    </dd>
  </div>
  <div class="pb-skill-row">
    <dt>CSS &amp; Sass</dt>
    <dd>
      <span class="pb-skill-rail">
        <span class="pb-skill-fill" style="--pb-skill-w: 95%; --pb-skill-delay: 0.2s"></span>
      </span>
      <span class="pb-skill-pct">95%</span>
    </dd>
  </div>
  <div class="pb-skill-row">
    <dt>Figma</dt>
    <dd>
      <span class="pb-skill-rail">
        <span class="pb-skill-fill" style="--pb-skill-w: 78%; --pb-skill-delay: 0.3s"></span>
      </span>
      <span class="pb-skill-pct">78%</span>
    </dd>
  </div>
</dl>
```

**CSS:**
```css
.pb-skill {
  width: 260px;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-family: system-ui, sans-serif;
}

.pb-skill-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
}

.pb-skill dt {
  font-size: 11.5px;
  font-weight: 600;
  color: #fef3c7;
  letter-spacing: 0.02em;
}

.pb-skill dd {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.pb-skill-rail {
  display: block;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  overflow: hidden;
}

.pb-skill-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f97316, #fbbf24);
  border-radius: inherit;
  animation: pbSkillSlide 1s cubic-bezier(0.5, 0, 0.3, 1.2) var(--pb-skill-delay, 0s) forwards;
}

.pb-skill-pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .pb-skill-fill {
    animation: none;
    width: var(--pb-skill-w, 0%);
  }
}

@keyframes pbSkillSlide {
  to { width: var(--pb-skill-w, 0%); }
}

```

### 09. Circular Counter

**Type:** Light JS
**Description:** A radial chart with a synchronised counting number in the centre. The ring fills via SVG `stroke-dasharray` (with `pathLength="100"` so the math is honest) while the number animates from 0 — bound by light JS to keep the number truly in sync.

**HTML:**
```html
<div
  class="pb-count"
  role="progressbar"
  aria-valuenow="0"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Score"
  data-pb-count="86"
>
  <svg class="pb-count-ring" viewBox="0 0 100 100" aria-hidden="true">
    <defs>
      <linearGradient id="pb-count-grad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#34d399" />
        <stop offset="100%" stop-color="#10b981" />
      </linearGradient>
    </defs>
    <circle class="pb-count-bg" cx="50" cy="50" r="42"></circle>
    <circle class="pb-count-prog" cx="50" cy="50" r="42" pathLength="100"></circle>
  </svg>
  <div class="pb-count-meta">
    <strong data-pb-count-num>0</strong>
    <span>score</span>
  </div>
</div>
```

**CSS:**
```css
.pb-count {
  position: relative;
  width: 130px;
  height: 130px;
  font-family: system-ui, sans-serif;
}

.pb-count-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pb-count-bg,
.pb-count-prog {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.pb-count-bg {
  stroke: rgba(255, 255, 255, 0.06);
}

.pb-count-prog {
  stroke: url(#pb-count-grad);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-count.is-ready .pb-count-prog {
  stroke-dashoffset: calc(100 - (var(--pb-count-pct, 0) * 100));
}

.pb-count-meta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

.pb-count-meta strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #f0eeff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pb-count-meta span {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: #34d399;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}
```

**JS:**
```js
// Reads the target value from data-pb-count and animates the
// SVG ring + centre number from 0 to that value over 1.4s.
// Drop this on every page where you render a .pb-count element.
document.querySelectorAll("[data-pb-count]").forEach(function (el) {
  var target = Number(el.dataset.pbCount) || 0;
  var num = el.querySelector("[data-pb-count-num]");

  // Drive the ring's stroke-dashoffset via a CSS custom property
  el.style.setProperty("--pb-count-pct", String(target / 100));
  requestAnimationFrame(function () {
    el.classList.add("is-ready");
  });

  // Tick the centre number in sync with the 1.4s ring transition
  var start = null;
  var duration = 1400;
  function tick(t) {
    if (start === null) start = t;
    var p = Math.min(1, (t - start) / duration);
    var eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
    var v = Math.round(target * eased);
    if (num) num.textContent = v;
    el.setAttribute("aria-valuenow", String(v));
    if (p < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
});
```

### 10. Stacked Categories

**Type:** Pure CSS
**Description:** A single bar split into multiple coloured segments — Documents, Photos, Apps, Free. Each segment's width is a CSS variable, with a legend below. Premium pattern for storage dashboards and budget breakdowns.

**HTML:**
```html
<div class="pb-stack" role="img" aria-label="Storage usage breakdown">
  <div class="pb-stack-head">
    <strong>128 GB used</strong>
    <span>of 256 GB</span>
  </div>
  <div class="pb-stack-rail">
    <span class="pb-stack-seg s1" style="--w: 28%" aria-label="Documents 28%"></span>
    <span class="pb-stack-seg s2" style="--w: 18%" aria-label="Photos 18%"></span>
    <span class="pb-stack-seg s3" style="--w: 14%" aria-label="Apps 14%"></span>
    <span class="pb-stack-seg s4" style="--w: 40%" aria-label="Free 40%"></span>
  </div>
  <ul class="pb-stack-legend">
    <li class="s1"><i></i>Documents <em>36 GB</em></li>
    <li class="s2"><i></i>Photos <em>23 GB</em></li>
    <li class="s3"><i></i>Apps <em>18 GB</em></li>
    <li class="s4"><i></i>Free <em>51 GB</em></li>
  </ul>
</div>
```

**CSS:**
```css
.pb-stack {
  width: 260px;
  display: grid;
  gap: 10px;
  font-family: system-ui, sans-serif;
}

.pb-stack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #f0eeff;
}

.pb-stack-head strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pb-stack-head span {
  font-size: 12px;
  color: #94a3b8;
}

.pb-stack-rail {
  display: flex;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  overflow: hidden;
  gap: 2px;
  padding: 0 1px;
}

.pb-stack-seg {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.5, 0, 0.3, 1.2);
  width: var(--w, 0%);
}

.pb-stack-seg.s1 {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}

.pb-stack-seg.s2 {
  background: linear-gradient(90deg, #ec4899, #f472b6);
}

.pb-stack-seg.s3 {
  background: linear-gradient(90deg, #14b8a6, #2dd4bf);
}

.pb-stack-seg.s4 {
  background: rgba(255, 255, 255, 0.12);
}

.pb-stack-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: 11px;
  color: #cbd5e1;
}

.pb-stack-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pb-stack-legend li i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.pb-stack-legend li.s1 i {
  background: #818cf8;
}

.pb-stack-legend li.s2 i {
  background: #f472b6;
}

.pb-stack-legend li.s3 i {
  background: #2dd4bf;
}

.pb-stack-legend li.s4 i {
  background: rgba(255, 255, 255, 0.3);
}

.pb-stack-legend em {
  font-style: normal;
  margin-left: auto;
  color: #94a3b8;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
}
```

### 11. Speed Test Gauge

**Type:** Pure CSS
**Description:** An SVG semicircular speedometer with a colour-graded arc (red → amber → green), tick marks at 0/50/100, and a needle that sweeps from the bottom. Drives every value via the `--pb-gauge-value` custom property — premium pattern for PageSpeed scores, performance audits, and internet speed tests.

**HTML:**
```html
<div
  class="pb-gauge"
  role="progressbar"
  aria-valuenow="78"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Performance score"
  style="--pb-gauge-value: 78"
>
  <svg class="pb-gauge-svg" viewBox="0 0 200 170" aria-hidden="true">
    <defs>
      <linearGradient id="pb-gauge-grad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#f43f5e" />
        <stop offset="50%" stop-color="#fb923c" />
        <stop offset="100%" stop-color="#34d399" />
      </linearGradient>
    </defs>
    <!-- track -->
    <path
      class="pb-gauge-track"
      d="M 25 105 A 75 75 0 0 1 175 105"
      fill="none"
      stroke="rgba(255,255,255,0.06)"
      stroke-width="12"
      stroke-linecap="round"
    />
    <!-- value arc -->
    <path
      class="pb-gauge-value"
      d="M 25 105 A 75 75 0 0 1 175 105"
      fill="none"
      stroke="url(#pb-gauge-grad)"
      stroke-width="12"
      stroke-linecap="round"
      pathLength="100"
    />
    <!-- ticks -->
    <text class="pb-gauge-tick" x="25" y="125" text-anchor="middle">0</text>
    <text class="pb-gauge-tick" x="100" y="22" text-anchor="middle">50</text>
    <text class="pb-gauge-tick" x="175" y="125" text-anchor="middle">100</text>
    <!-- needle -->
    <g class="pb-gauge-needle">
      <line
        x1="100"
        y1="105"
        x2="100"
        y2="44"
        stroke="#f0eeff"
        stroke-width="3"
        stroke-linecap="round"
      />
      <circle cx="100" cy="105" r="7" fill="#fff" stroke="#15151d" stroke-width="2" />
    </g>
    <!-- score readout -->
    <text class="pb-gauge-num" x="100" y="148" text-anchor="middle">78</text>
    <text class="pb-gauge-label" x="100" y="164" text-anchor="middle">PERFORMANCE</text>
  </svg>
</div>
```

**CSS:**
```css
.pb-gauge {
  width: 220px;
  height: 170px;
  font-family: system-ui, sans-serif;
}

.pb-gauge-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pb-gauge-value {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: pbGaugeArc 1.4s cubic-bezier(0.5, 0, 0.3, 1.2) forwards;
}

.pb-gauge-needle {
  transform-origin: 100px 105px;
  animation: pbGaugeSweep 1.4s cubic-bezier(0.5, 0, 0.3, 1.2) forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.pb-gauge-tick {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  fill: #64748b;
  letter-spacing: 0.04em;
}

.pb-gauge-num {
  font-family: system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  fill: #34d399;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pb-gauge-label {
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: #94a3b8;
  letter-spacing: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .pb-gauge-value {
    animation: none;
    stroke-dashoffset: calc(100 - var(--pb-gauge-value, 0));
  }
  .pb-gauge-needle {
    animation: none;
    transform: rotate(calc(var(--pb-gauge-value, 0) * 1.8deg - 90deg));
  }
}

@keyframes pbGaugeArc {
  to { stroke-dashoffset: calc(100 - var(--pb-gauge-value, 0)); }
}

@keyframes pbGaugeSweep {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(calc(var(--pb-gauge-value, 0) * 1.8deg - 90deg)); }
}

```

### 12. Buffer Bar

**Type:** Pure CSS
**Description:** Video-player progress bar with two filled regions: solid played + lighter buffered ahead. A subtle scrubber dot sits at the play head — premium pattern for media players, podcast UIs, and audio dashboards.

**HTML:**
```html
<div
  class="pb-buf"
  role="progressbar"
  aria-valuenow="42"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Playback progress"
>
  <div class="pb-buf-time">
    <span>1:24</span>
    <span class="pb-buf-total">4:18</span>
  </div>
  <div class="pb-buf-rail">
    <span class="pb-buf-buffered" style="--pb-buf-buffered: 68%"></span>
    <span class="pb-buf-played" style="--pb-buf-played: 42%"></span>
    <span class="pb-buf-thumb" style="--pb-buf-played: 42%"></span>
  </div>
  <div class="pb-buf-meta">
    <span class="pb-buf-title">Penthouse Tour · 4K</span>
    <span class="pb-buf-quality">HD · 1080p</span>
  </div>
</div>
```

**CSS:**
```css
.pb-buf {
  width: 280px;
  display: grid;
  gap: 8px;
  font-family: system-ui, sans-serif;
}

.pb-buf-time {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #f0eeff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pb-buf-total {
  color: #94a3b8;
}

.pb-buf-rail {
  position: relative;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
}

.pb-buf-buffered {
  position: absolute;
  inset: 0;
  width: var(--pb-buf-buffered, 0%);
  background: rgba(255, 255, 255, 0.18);
  border-radius: inherit;
  transition: width 0.4s ease;
}

.pb-buf-played {
  position: absolute;
  inset: 0;
  width: var(--pb-buf-played, 0%);
  background: linear-gradient(90deg, #ef4444, #f97316);
  border-radius: inherit;
  transition: width 0.2s linear;
}

.pb-buf-thumb {
  position: absolute;
  top: 50%;
  left: var(--pb-buf-played, 0%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.5);
  transform: scale(0);
  transition:
    transform 0.2s ease,
    left 0.2s linear;
}

.pb-buf-rail:hover .pb-buf-thumb,
.pb-buf:focus-within .pb-buf-thumb {
  transform: scale(1);
}

.pb-buf-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pb-buf-title {
  font-size: 12px;
  font-weight: 600;
  color: #f0eeff;
}

.pb-buf-quality {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
```

---
## 18 CSS Radio Button Designs

URL: https://codefronts.com/components/css-radio-buttons/
Description: 18 hand-coded CSS radio buttons — pill slider, magnetic orb, ink drop, segmented bar, pricing tier, glow pulse and more. Accessible, drop-in ready.
Demo count: 18

### 01. Concentric Pulse

**Type:** Pure CSS
**Description:** Classic outer ring with inner dot — on check the dot bursts outward then settles into place. The benchmark every radio is measured against.

**HTML:**
```html
<fieldset class="crb-pulse">
  <legend class="crb-sr">Plan</legend>
  <label><input type="radio" name="crb-pulse" checked /><span></span>Starter</label>
  <label><input type="radio" name="crb-pulse" /><span></span>Pro</label>
  <label><input type="radio" name="crb-pulse" /><span></span>Team</label>
</fieldset>
```

**CSS:**
```css
.crb-pulse { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-pulse label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-pulse input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-pulse span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative; transition: border-color 0.2s;
}
.crb-pulse span::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: #7c6cff;
  transform: scale(0); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.crb-pulse input:checked + span { border-color: #7c6cff; }
.crb-pulse input:checked + span::after { transform: scale(1); animation: crb-pulse-burst 0.5s ease-out; }
@keyframes crb-pulse-burst {
  0%   { box-shadow: 0 0 0 0   rgba(124,108,255,0.6); }
  100% { box-shadow: 0 0 0 12px rgba(124,108,255,0); }
}

@media (prefers-reduced-motion: reduce) {
  .crb-pulse,
  .crb-pulse * {
    animation: none !important;
  }
}

.crb-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;
}

```

### 02. Pill Slider

**Type:** Pure CSS
**Description:** Three-option pill where the active background slides smoothly between selections — perfect for plan toggles and view switchers.

**HTML:**
```html
<fieldset class="crb-pill">
  <legend class="crb-sr">Billing</legend>
  <input type="radio" name="crb-pill" id="crb-pill-1" checked />
  <label for="crb-pill-1">Monthly</label>
  <input type="radio" name="crb-pill" id="crb-pill-2" />
  <label for="crb-pill-2">Yearly</label>
  <input type="radio" name="crb-pill" id="crb-pill-3" />
  <label for="crb-pill-3">Forever</label>
  <span class="crb-pill-thumb"></span>
</fieldset>
```

**CSS:**
```css
.crb-pill {
  display: inline-flex; position: relative; padding: 4px;
  background: #1a1a28; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
}
.crb-pill input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-pill label {
  flex: 1 1 0; min-width: 80px;
  position: relative; z-index: 1;
  padding: 8px 16px;
  font: 600 12px/1 system-ui, sans-serif; color: #b8b6d4;
  text-align: center;
  cursor: pointer; transition: color 0.25s;
  border-radius: 999px;
}
.crb-pill input:checked + label { color: #fff; }
.crb-pill-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(33.333% - 2.667px);
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  border-radius: 999px; z-index: 0;
  transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
}
#crb-pill-2:checked ~ .crb-pill-thumb { transform: translateX(100%); }
#crb-pill-3:checked ~ .crb-pill-thumb { transform: translateX(200%); }

.crb-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;
}

```

### 03. Magnetic Orb

**Type:** Pure CSS
**Description:** A single violet orb slides between options as if magnetically pulled — uses sibling-position state to drive the orb position with zero JS.

**HTML:**
```html
<fieldset class="crb-orb">
  <legend class="crb-sr">Speed</legend>
  <input type="radio" name="crb-orb" id="crb-orb-1" checked />
  <label for="crb-orb-1"><span class="crb-orb-dot"></span>Slow</label>
  <input type="radio" name="crb-orb" id="crb-orb-2" />
  <label for="crb-orb-2"><span class="crb-orb-dot"></span>Fast</label>
  <input type="radio" name="crb-orb" id="crb-orb-3" />
  <label for="crb-orb-3"><span class="crb-orb-dot"></span>Turbo</label>
</fieldset>
```

**CSS:**
```css
.crb-orb { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.crb-orb input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-orb label {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 8px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.crb-orb-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #2a2a3e; box-shadow: inset 0 0 0 2px #444461;
  transition: background 0.35s cubic-bezier(0.65,0,0.35,1), box-shadow 0.35s, transform 0.35s;
}
.crb-orb input:checked + label { background: rgba(124,108,255,0.08); color: #fff; }
.crb-orb input:checked + label .crb-orb-dot {
  background: #7c6cff; box-shadow: inset 0 0 0 2px #7c6cff, 0 0 12px rgba(124,108,255,0.7);
  transform: scale(1.15);
}

.crb-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;
}

```

### 04. Ink Drop

**Type:** Pure CSS
**Description:** A drop of ink falls from above and fills the circle on selection — uses a clip-path to animate the liquid level from empty to full.

**HTML:**
```html
<fieldset class="crb-ink">
  <legend class="crb-sr">Theme</legend>
  <label><input type="radio" name="crb-ink" /><span></span>Light</label>
  <label><input type="radio" name="crb-ink" checked /><span></span>Dark</label>
  <label><input type="radio" name="crb-ink" /><span></span>Auto</label>
</fieldset>
```

**CSS:**
```css
.crb-ink { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-ink label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-ink input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-ink span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative; overflow: hidden;
  transition: border-color 0.25s;
}
.crb-ink span::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #06b6d4, #0ea5e9);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.65,0,0.35,1);
}
.crb-ink input:checked + span { border-color: #06b6d4; }
.crb-ink input:checked + span::before { transform: translateY(0); }

.crb-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;
}

```

### 05. Star Burst

**Type:** Pure CSS
**Description:** A 5-point star draws itself in via stroke-dasharray when selected — premium choice for ratings, favourites, and priority radios.

**HTML:**
```html
<fieldset class="crb-star">
  <legend class="crb-sr">Priority</legend>
  <label
    ><input type="radio" name="crb-star" /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >Low</label
  >
  <label
    ><input type="radio" name="crb-star" checked /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >Medium</label
  >
  <label
    ><input type="radio" name="crb-star" /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >High</label
  >
</fieldset>
```

**CSS:**
```css
.crb-star { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.crb-star label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-star input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-star svg {
  width: 22px; height: 22px;
  fill: transparent;
  stroke: #444461; stroke-width: 1.5;
  transition: stroke 0.3s, fill 0.4s;
}
.crb-star input:checked + svg {
  stroke: #f5a623; fill: #f5a623;
  filter: drop-shadow(0 0 6px rgba(245,166,35,0.5));
  animation: crb-star-draw 0.6s ease-out;
}
@keyframes crb-star-draw {
  0%   { stroke-dasharray: 60; stroke-dashoffset: 60; fill: transparent; }
  60%  { stroke-dasharray: 60; stroke-dashoffset: 0;  fill: transparent; }
  100% { stroke-dasharray: 60; stroke-dashoffset: 0;  fill: #f5a623; }
}

@media (prefers-reduced-motion: reduce) {
  .crb-star,
  .crb-star * {
    animation: none !important;
  }
}

.crb-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;
}

```

### 06. Tilt Card

**Type:** Pure CSS
**Description:** Each option is a card that tilts up and glows when chosen — feature-rich plan picker for SaaS pricing pages.

**HTML:**
```html
<fieldset class="crb-tilt">
  <legend class="crb-sr">Choose plan</legend>
  <label><input type="radio" name="crb-tilt" /><strong>Solo</strong><em>$9/mo</em></label>
  <label><input type="radio" name="crb-tilt" checked /><strong>Team</strong><em>$29/mo</em></label>
  <label><input type="radio" name="crb-tilt" /><strong>Scale</strong><em>$99/mo</em></label>
</fieldset>
```

**CSS:**
```css
.crb-tilt { display: flex; gap: 8px; border: 0; padding: 0; }
.crb-tilt input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-tilt label {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 10px; border-radius: 10px;
  background: #1a1a28; border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
.crb-tilt label strong {
  font: 700 13px/1 system-ui, sans-serif; color: #fff;
}
.crb-tilt label em {
  font: 500 11px/1 monospace; color: #b8b6d4; font-style: normal;
}
.crb-tilt label:has(input:checked) {
  transform: translateY(-4px) rotate(-1deg);
  background: linear-gradient(135deg, rgba(124,108,255,0.18), rgba(167,139,250,0.1));
  border-color: rgba(124,108,255,0.5);
  box-shadow: 0 8px 24px rgba(124,108,255,0.3);
}

.crb-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;
}

```

### 07. Minimal Tick

**Type:** Pure CSS
**Description:** Clean radio that converts to a check tick on selection — instead of a dot, the indicator becomes a checkmark for a "confirmed" feel.

**HTML:**
```html
<fieldset class="crb-tick">
  <legend class="crb-sr">Layout</legend>
  <label><input type="radio" name="crb-tick" checked /><span></span>Compact</label>
  <label><input type="radio" name="crb-tick" /><span></span>Comfortable</label>
  <label><input type="radio" name="crb-tick" /><span></span>Spacious</label>
</fieldset>
```

**CSS:**
```css
.crb-tick { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-tick label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-tick input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-tick span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative;
  transition: border-color 0.2s, background 0.3s;
}
.crb-tick span::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg) scale(0);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.crb-tick input:checked + span { background: #2ecc8a; border-color: #2ecc8a; }
.crb-tick input:checked + span::after { transform: translate(-50%, -60%) rotate(45deg) scale(1); }

.crb-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;
}

```

### 08. Color Swatches

**Type:** Pure CSS
**Description:** Big circular colour swatch radios — for theme pickers and palette selectors. The selected swatch shows a contrasting inner ring.

**HTML:**
```html
<fieldset class="crb-swatch">
  <legend class="crb-sr">Colour</legend>
  <label style="--c: #7c6cff"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #ff6c8a"><input type="radio" name="crb-swatch" checked /><span></span></label>
  <label style="--c: #2ecc8a"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #f5a623"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #06b6d4"><input type="radio" name="crb-swatch" /><span></span></label>
</fieldset>
```

**CSS:**
```css
.crb-swatch { display: flex; gap: 10px; border: 0; padding: 0; }
.crb-swatch input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-swatch label { cursor: pointer; }
.crb-swatch span {
  display: block;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 0 #15151d, 0 0 0 0 var(--c);
  transition: box-shadow 0.3s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.crb-swatch label:hover span { transform: scale(1.08); }
.crb-swatch input:checked + span {
  box-shadow: inset 0 0 0 4px #15151d, 0 0 0 2px var(--c), 0 0 16px var(--c);
  transform: scale(1.12);
}

.crb-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;
}

```

### 09. Segmented Bar

**Type:** Pure CSS
**Description:** iOS-style segmented control with sliding pill background — sibling-position selectors drive the pill via translateX, no JS required.

**HTML:**
```html
<fieldset class="crb-seg">
  <legend class="crb-sr">View</legend>
  <input type="radio" name="crb-seg" id="crb-seg-1" checked />
  <label for="crb-seg-1">Day</label>
  <input type="radio" name="crb-seg" id="crb-seg-2" />
  <label for="crb-seg-2">Week</label>
  <input type="radio" name="crb-seg" id="crb-seg-3" />
  <label for="crb-seg-3">Month</label>
  <input type="radio" name="crb-seg" id="crb-seg-4" />
  <label for="crb-seg-4">Year</label>
  <span class="crb-seg-thumb"></span>
</fieldset>
```

**CSS:**
```css
.crb-seg {
  display: inline-flex; position: relative;
  padding: 3px; background: #0c0c12;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 8px;
}
.crb-seg input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-seg label {
  flex: 1 1 0; min-width: 64px;
  position: relative; z-index: 1;
  padding: 7px 14px;
  font: 600 12px/1 system-ui, sans-serif; color: #b8b6d4;
  text-align: center;
  cursor: pointer; transition: color 0.25s;
  border-radius: 6px;
}
.crb-seg input:checked + label { color: #fff; }
.crb-seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(25% - 1.5px);
  background: #1f1f2e; border: 1px solid rgba(124,108,255,0.4);
  border-radius: 6px; z-index: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.35s cubic-bezier(0.65,0,0.35,1);
}
#crb-seg-2:checked ~ .crb-seg-thumb { transform: translateX(100%); }
#crb-seg-3:checked ~ .crb-seg-thumb { transform: translateX(200%); }
#crb-seg-4:checked ~ .crb-seg-thumb { transform: translateX(300%); }

.crb-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;
}

```

### 10. Neon Ring

**Type:** Pure CSS
**Description:** Outline ring lights up neon-green with a halo glow on check — built for dark dashboards and developer tools.

**HTML:**
```html
<fieldset class="crb-neon">
  <legend class="crb-sr">Mode</legend>
  <label><input type="radio" name="crb-neon" /><span></span>Idle</label>
  <label><input type="radio" name="crb-neon" checked /><span></span>Active</label>
  <label><input type="radio" name="crb-neon" /><span></span>Burst</label>
</fieldset>
```

**CSS:**
```css
.crb-neon { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-neon label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 monospace; color: #b8b6d4; cursor: pointer;
}
.crb-neon input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-neon span {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #2a4a3a; background: transparent;
  position: relative;
  transition: border-color 0.25s, box-shadow 0.3s;
}
.crb-neon span::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: #2ecc8a;
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.25s, transform 0.3s;
}
.crb-neon input:checked + span {
  border-color: #2ecc8a;
  box-shadow: 0 0 12px rgba(46,204,138,0.6), inset 0 0 6px rgba(46,204,138,0.3);
}
.crb-neon input:checked + span::after {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 6px #2ecc8a;
}

.crb-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;
}

```

### 11. Pricing Tier

**Type:** Pure CSS
**Description:** Pricing-card style with a "Best Value" featured ribbon revealed on selection — production-ready for SaaS plan pickers.

**HTML:**
```html
<fieldset class="crb-tier">
  <legend class="crb-sr">Plan tier</legend>
  <label>
    <input type="radio" name="crb-tier" />
    <span class="crb-tier-card">
      <strong>Basic</strong>
      <em>$5/mo</em>
      <span class="crb-tier-ribbon">Best value</span>
    </span>
  </label>
  <label>
    <input type="radio" name="crb-tier" checked />
    <span class="crb-tier-card">
      <strong>Plus</strong>
      <em>$15/mo</em>
      <span class="crb-tier-ribbon">Best value</span>
    </span>
  </label>
</fieldset>
```

**CSS:**
```css
.crb-tier { display: flex; gap: 10px; border: 0; padding: 14px 0 0; }
.crb-tier input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-tier label { flex: 1; cursor: pointer; }
.crb-tier-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  position: relative;
  padding: 12px;
  background: #1a1a28; border: 1.5px solid rgba(255,255,255,0.06); border-radius: 10px;
  transition: border-color 0.3s, background 0.3s;
}
.crb-tier-card strong { font: 700 14px/1 system-ui, sans-serif; color: #fff; }
.crb-tier-card em { font: 600 12px/1 monospace; color: #a78bfa; font-style: normal; }
.crb-tier-ribbon {
  position: absolute;
  top: 0; left: 50%;
  padding: 4px 12px;
  border-radius: 999px;
  font: 700 9px/1 system-ui, sans-serif;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a); color: #fff;
  box-shadow: 0 2px 8px rgba(124,108,255,0.4);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
.crb-tier input:checked + .crb-tier-card {
  border-color: #7c6cff;
  background: linear-gradient(135deg, rgba(124,108,255,0.15), rgba(255,108,138,0.05));
}
.crb-tier input:checked + .crb-tier-card .crb-tier-ribbon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.crb-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;
}

```

### 12. Wave Fill

**Type:** Pure CSS
**Description:** Selected radio fills with a sine-wave water animation — uses a moving SVG-free CSS wave for an organic liquid feel.

**HTML:**
```html
<fieldset class="crb-wave">
  <legend class="crb-sr">Volume</legend>
  <label><input type="radio" name="crb-wave" /><span></span>Low</label>
  <label><input type="radio" name="crb-wave" checked /><span></span>Mid</label>
  <label><input type="radio" name="crb-wave" /><span></span>Loud</label>
</fieldset>
```

**CSS:**
```css
.crb-wave { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-wave label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-wave input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-wave span {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #444461;
  position: relative; overflow: hidden;
  background: transparent;
  transition: border-color 0.25s;
}
.crb-wave span::before {
  content: ''; position: absolute;
  top: 100%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at top, transparent 40%, #06b6d4 41%);
  transition: top 0.5s ease-out;
}
.crb-wave input:checked + span { border-color: #06b6d4; }
.crb-wave input:checked + span::before {
  top: -10%;
  animation: crb-wave-bob 1.4s ease-in-out infinite;
}
@keyframes crb-wave-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .crb-wave,
  .crb-wave * {
    animation: none !important;
  }
}

.crb-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;
}

```

### 13. Clip Mask

**Type:** Pure CSS
**Description:** The fill is revealed via an animated clip-path morph from a tiny triangle to a full circle — a unique geometric reveal.

**HTML:**
```html
<fieldset class="crb-clip">
  <legend class="crb-sr">Speed</legend>
  <label><input type="radio" name="crb-clip" /><span></span>0.5x</label>
  <label><input type="radio" name="crb-clip" /><span></span>1x</label>
  <label><input type="radio" name="crb-clip" checked /><span></span>2x</label>
</fieldset>
```

**CSS:**
```css
.crb-clip { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-clip label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 monospace; color: #cbd5e1; cursor: pointer;
}
.crb-clip input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-clip span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461;
  position: relative; overflow: hidden;
  transition: border-color 0.25s;
}
.crb-clip span::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6c8a, #f5a623);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 0.5s cubic-bezier(0.65,0,0.35,1);
}
.crb-clip input:checked + span { border-color: #ff6c8a; }
.crb-clip input:checked + span::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.crb-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;
}

```

### 14. Gradient Border

**Type:** Pure CSS
**Description:** Conic gradient border traces around the selected option — creates a slowly rotating rainbow ring on focus.

**HTML:**
```html
<fieldset class="crb-grad">
  <legend class="crb-sr">Tier</legend>
  <label><input type="radio" name="crb-grad" /><span class="crb-grad-card">Bronze</span></label>
  <label><input type="radio" name="crb-grad" /><span class="crb-grad-card">Silver</span></label>
  <label
    ><input type="radio" name="crb-grad" checked /><span class="crb-grad-card">Gold</span></label
  >
</fieldset>
```

**CSS:**
```css
.crb-grad { display: flex; gap: 8px; border: 0; padding: 0; }
.crb-grad input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-grad label { cursor: pointer; }
.crb-grad-card {
  display: block; padding: 10px 18px;
  background: #1a1a28; border-radius: 8px;
  font: 600 12px/1 system-ui, sans-serif; color: #b8b6d4;
  position: relative; isolation: isolate;
  transition: color 0.25s;
}
.crb-grad-card::before {
  content: ''; position: absolute; inset: -2px; border-radius: 10px;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #f5a623, #2ecc8a, #06b6d4, #7c6cff);
  z-index: -1; opacity: 0;
  animation: crb-grad-spin 4s linear infinite;
  transition: opacity 0.3s;
}
.crb-grad-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: #1a1a28; z-index: -1;
}
.crb-grad input:checked + .crb-grad-card { color: #fff; }
.crb-grad input:checked + .crb-grad-card::before { opacity: 1; }
@keyframes crb-grad-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .crb-grad,
  .crb-grad * {
    animation: none !important;
  }
}

.crb-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;
}

```

### 15. Avatar Picker

**Type:** Pure CSS
**Description:** Round avatar tiles that scale up and glow on selection — perfect for character/profile pickers in onboarding flows.

**HTML:**
```html
<fieldset class="crb-avatar">
  <legend class="crb-sr">Avatar</legend>
  <label style="--c: #7c6cff"><input type="radio" name="crb-avatar" /><span>A</span></label>
  <label style="--c: #ff6c8a"><input type="radio" name="crb-avatar" checked /><span>B</span></label>
  <label style="--c: #2ecc8a"><input type="radio" name="crb-avatar" /><span>C</span></label>
  <label style="--c: #f5a623"><input type="radio" name="crb-avatar" /><span>D</span></label>
</fieldset>
```

**CSS:**
```css
.crb-avatar { display: flex; gap: 10px; border: 0; padding: 0; }
.crb-avatar input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-avatar label { cursor: pointer; }
.crb-avatar span {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c), white 30%));
  font: 700 14px/1 system-ui, sans-serif; color: #fff;
  box-shadow: 0 0 0 0 var(--c);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, opacity 0.25s;
  opacity: 0.55;
}
.crb-avatar label:hover span { opacity: 0.85; }
.crb-avatar input:checked + span {
  opacity: 1; transform: scale(1.15);
  box-shadow: 0 0 0 3px #15151d, 0 0 0 5px var(--c), 0 0 18px var(--c);
}

.crb-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;
}

```

### 16. Vertical Stack

**Type:** Pure CSS
**Description:** Vertical stack with a slim left accent rail that slides between options — perfect for settings panels and form sections.

**HTML:**
```html
<fieldset class="crb-stack">
  <legend class="crb-sr">Notifications</legend>
  <input type="radio" name="crb-stack" id="crb-stack-1" checked />
  <label for="crb-stack-1"><strong>All</strong><em>Every update</em></label>
  <input type="radio" name="crb-stack" id="crb-stack-2" />
  <label for="crb-stack-2"><strong>Important</strong><em>Critical only</em></label>
  <input type="radio" name="crb-stack" id="crb-stack-3" />
  <label for="crb-stack-3"><strong>Off</strong><em>Silent mode</em></label>
  <span class="crb-stack-rail"></span>
</fieldset>
```

**CSS:**
```css
.crb-stack {
  display: flex; flex-direction: column;
  position: relative; padding-left: 12px;
  border: 0; border-left: 2px solid rgba(255,255,255,0.06);
}
.crb-stack input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-stack label {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; transition: color 0.25s, background 0.25s;
}
.crb-stack label strong {
  font: 600 13px/1 system-ui, sans-serif; color: #cbd5e1;
}
.crb-stack label em {
  font: 500 11px/1 system-ui, sans-serif; color: #b8b6d4; font-style: normal;
}
.crb-stack input:checked + label strong { color: #fff; }
.crb-stack input:checked + label { background: rgba(124,108,255,0.06); }
.crb-stack-rail {
  position: absolute; left: -2px; top: 0;
  width: 2px; height: 33.333%;
  background: linear-gradient(180deg, #7c6cff, #a78bfa);
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
}
#crb-stack-2:checked ~ .crb-stack-rail { transform: translateY(100%); }
#crb-stack-3:checked ~ .crb-stack-rail { transform: translateY(200%); }

.crb-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;
}

```

### 17. 3D Push

**Type:** Pure CSS
**Description:** Skeuomorphic depressed-button style — the selected option sinks into the surface with an inverted shadow for tactile feedback.

**HTML:**
```html
<fieldset class="crb-push">
  <legend class="crb-sr">Difficulty</legend>
  <label><input type="radio" name="crb-push" /><span>Easy</span></label>
  <label><input type="radio" name="crb-push" checked /><span>Hard</span></label>
  <label><input type="radio" name="crb-push" /><span>Expert</span></label>
</fieldset>
```

**CSS:**
```css
.crb-push { display: flex; gap: 8px; border: 0; padding: 0; }
.crb-push input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-push label { cursor: pointer; }
.crb-push span {
  display: block; padding: 10px 18px;
  background: linear-gradient(180deg, #2a2a3e, #1a1a28);
  color: #cbd5e1; font: 600 12px/1 system-ui, sans-serif;
  border-radius: 8px;
  box-shadow: 0 3px 0 #0c0c12, inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(0);
  transition: transform 0.12s, box-shadow 0.12s, color 0.2s, background 0.25s;
}
.crb-push input:checked + span {
  transform: translateY(3px);
  background: linear-gradient(180deg, #1a1a28, #0c0c12);
  color: #a78bfa;
  box-shadow: 0 0 0 #0c0c12, inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(124,108,255,0.3);
}

.crb-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;
}

```

### 18. Glow Pulse

**Type:** Pure CSS
**Description:** Selecting a radio fires a soft expanding halo that radiates outward from the dot — pure CSS, animation runs once per selection via a keyframed box-shadow ripple.

**HTML:**
```html
<fieldset class="crb-glow">
  <legend class="crb-sr">Reaction</legend>
  <label><input type="radio" name="crb-glow" /><span></span>Like</label>
  <label><input type="radio" name="crb-glow" /><span></span>Love</label>
  <label><input type="radio" name="crb-glow" /><span></span>Celebrate</label>
</fieldset>
```

**CSS:**
```css
.crb-glow { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-glow label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-glow input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-glow span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative;
  transition: border-color 0.2s, background 0.25s;
}
.crb-glow span::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,108,138,0.7);
  pointer-events: none;
}
.crb-glow input:checked + span {
  background: linear-gradient(135deg, #ff6c8a, #a78bfa);
  border-color: transparent;
}
.crb-glow input:checked + span::after {
  animation: crb-glow-ripple 0.9s ease-out;
}
@keyframes crb-glow-ripple {
  0%   { box-shadow: 0 0 0 0   rgba(255,108,138,0.7), 0 0 0 0  rgba(167,139,250,0.5); }
  60%  { box-shadow: 0 0 0 14px rgba(255,108,138,0),   0 0 0 22px rgba(167,139,250,0); }
  100% { box-shadow: 0 0 0 14px rgba(255,108,138,0),   0 0 0 22px rgba(167,139,250,0); }
}

@media (prefers-reduced-motion: reduce) {
  .crb-glow,
  .crb-glow * {
    animation: none !important;
  }
}

.crb-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;
}

```

---
## 20 CSS Responsive Navbar Designs

URL: https://codefronts.com/navigation/css-responsive-navbar/
Description: 20 hand-coded CSS responsive navbar designs with live demos — glassmorphism frosted bar, CSS-only mega menu, sidebar drawer, animated underline tabs, pill highlight, scroll-shrink on scroll, synthwave neon, reading-progress breadcrumb, split two-tone, mobile bottom tab bar, conic-gradient animated border, centered logo, icon dot indicator, full-screen overlay, morphing search expand, floating island, step wizard, vertical rail, dual announcement bar, and scroll-spy active highlight. 14 pure CSS + 6 with a tiny vanilla JS snippet — no framework. Mobile-first, WCAG-friendly, copy-paste ready, MIT licensed.
Demo count: 20

### 01. CSS Glassmorphism Frosted Navbar

**Type:** Pure CSS
**Description:** Dark frosted-glass sticky navbar with backdrop-filter blur, smooth hover pills, and a pure CSS hamburger toggle.

**HTML:**
```html
<div class="nav-01">
  <input type="checkbox" id="nav-01-toggle">
  <div class="nav-01__bar">
    <a href="#" class="nav-01__logo">
      <div class="nav-01__logo-icon">✦</div>
      Prisma
    </a>
    <ul class="nav-01__links">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Products</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">
      <button class="nav-01__btn nav-01__btn--ghost">Sign in</button>
      <button class="nav-01__btn nav-01__btn--primary">Get started</button>
    </div>
    <label for="nav-01-toggle" class="nav-01__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-01__mobile">
    <a href="#">Home</a>
    <a href="#">Products</a>
    <a href="#">Pricing</a>
    <a href="#">Blog</a>
    <a href="#">About</a>
    <div class="nav-01__mobile-actions">
      <button class="nav-01__btn nav-01__btn--ghost">Sign in</button>
      <button class="nav-01__btn nav-01__btn--primary">Get started</button>
    </div>
  </div>
</div>
<div style="padding:4rem 2rem; color:#f0eeff; max-width:700px; margin:0 auto;">
  <h1 style="font-size:3rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:1rem; background:linear-gradient(135deg,#a78bfa,#60a5fa); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">Glassmorphism Navbar</h1>
  <p style="color:rgba(240,238,255,0.65); font-size:1.1rem; line-height:1.7;">Resize the window to see the hamburger menu appear. The nav uses <code>backdrop-filter: blur()</code> for the frosted glass effect.</p>
</div>
```

**CSS:**
```css
.nav-01, .nav-01 *, .nav-01 *::before, .nav-01 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-01 {
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.15);
  --text: #f0eeff;
  --accent: #a78bfa;
  --hover-bg: rgba(167,139,250,0.15);
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-01__bar {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: relative;
}
.nav-01__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.nav-01__logo-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.nav-01__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.nav-01__links a {
  color: rgba(240,238,255,0.75);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  position: relative;
}
.nav-01__links a:hover,
.nav-01__links a.is-active {
  background: var(--hover-bg);
  color: var(--accent);
}
.nav-01__links a.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.nav-01__actions {
  display: flex; align-items: center; gap: 0.75rem;
}
.nav-01__btn {
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.2s;
}
.nav-01__btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass-border);
}
.nav-01__btn--ghost:hover { background: var(--hover-bg); }
.nav-01__btn--primary {
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  color: #fff;
}
.nav-01__btn--primary:hover { opacity: 0.85; transform: translateY(-1px); }
.nav-01__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border: none;
  background: transparent;
}
.nav-01__hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
#nav-01-toggle { display: none; }
#nav-01-toggle:checked ~ .nav-01__bar .nav-01__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-01-toggle:checked ~ .nav-01__bar .nav-01__hamburger span:nth-child(2) { opacity: 0; }
#nav-01-toggle:checked ~ .nav-01__bar .nav-01__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-01__mobile {
  display: none;
  background: rgba(15,12,41,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: 1rem 1.5rem;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-01__mobile a {
  color: rgba(240,238,255,0.8);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.nav-01__mobile a:hover { background: var(--hover-bg); color: var(--accent); }
.nav-01__mobile-actions { display: flex; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--glass-border); margin-top: 0.5rem; }
.nav-01__mobile-actions .nav-01__btn { flex: 1; text-align: center; }

#nav-01-toggle:checked ~ .nav-01__mobile { display: flex; }

@media (max-width: 768px) {
  .nav-01__links, .nav-01__actions { display: none; }
  .nav-01__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-01__btn--primary { transition: none; }
  .nav-01__hamburger span { transition: none; }
}
```

### 02. CSS Mega Menu Dropdown Navbar

**Type:** Pure CSS
**Description:** Full-width mega menu with multi-column layout, icon cards, and a featured highlight panel triggered by CSS focus-within.

**HTML:**
```html
<div class="nav-02">
  <input type="checkbox" id="nav-02-toggle">
  <div class="nav-02__inner">
    <a href="#" class="nav-02__logo">Nova<span>.</span></a>
    <ul class="nav-02__menu">
      <li class="nav-02__item">
        <a href="#">Products</a>
        <div class="nav-02__mega nav-02__mega--grid nav-02__mega--wide">
          <div>
            <div class="nav-02__mega-col-title">Core tools</div>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">🎨</div><div><div class="nav-02__mega-title">Design Studio</div><div class="nav-02__mega-desc">Create pixel-perfect interfaces</div></div></a>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">⚡</div><div><div class="nav-02__mega-title">Prototyping</div><div class="nav-02__mega-desc">Interactive mockups in minutes</div></div></a>
          </div>
          <div>
            <div class="nav-02__mega-col-title">Collaboration</div>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">👥</div><div><div class="nav-02__mega-title">Teams</div><div class="nav-02__mega-desc">Real-time multiplayer editing</div></div></a>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">💬</div><div><div class="nav-02__mega-title">Comments</div><div class="nav-02__mega-desc">Contextual feedback flows</div></div></a>
          </div>
          <div>
            <div class="nav-02__mega-col-title">Integrations</div>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">🔌</div><div><div class="nav-02__mega-title">Plugins</div><div class="nav-02__mega-desc">500+ community extensions</div></div></a>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">🔗</div><div><div class="nav-02__mega-title">API</div><div class="nav-02__mega-desc">Build on top of Nova</div></div></a>
          </div>
        </div>
      </li>
      <li class="nav-02__item">
        <a href="#">Solutions</a>
        <div class="nav-02__mega nav-02__mega--grid">
          <div>
            <div class="nav-02__mega-col-title">By team</div>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">🏢</div><div><div class="nav-02__mega-title">Enterprise</div><div class="nav-02__mega-desc">Advanced security & compliance</div></div></a>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">🚀</div><div><div class="nav-02__mega-title">Startups</div><div class="nav-02__mega-desc">Move fast, ship beautiful</div></div></a>
          </div>
          <div>
            <div class="nav-02__mega-col-title">By role</div>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">✏️</div><div><div class="nav-02__mega-title">Designers</div><div class="nav-02__mega-desc">Your complete design OS</div></div></a>
            <a href="#" class="nav-02__mega-link"><div class="nav-02__mega-icon">💻</div><div><div class="nav-02__mega-title">Developers</div><div class="nav-02__mega-desc">Inspect & export production code</div></div></a>
          </div>
        </div>
      </li>
      <li class="nav-02__item nav-02__item--plain"><a href="#">Pricing</a></li>
      <li class="nav-02__item nav-02__item--plain"><a href="#">Blog</a></li>
    </ul>
    <div class="nav-02__cta">
      <button class="nav-02__btn nav-02__btn--ghost">Log in</button>
      <button class="nav-02__btn nav-02__btn--pink">Try for free</button>
    </div>
    <label for="nav-02-toggle" class="nav-02__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-02__drawer">
    <a href="#">Products</a>
    <a href="#">Solutions</a>
    <a href="#">Pricing</a>
    <a href="#">Blog</a>
    <a href="#">Log in</a>
    <a href="#" style="color:#e84393;">Try for free →</a>
  </div>
</div>
<div style="padding:4rem 2rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:1rem; color:#1a1a2e;">Mega Menu Dropdown Navbar</h1>
  <p style="color:#6b7280; font-size:1.1rem; line-height:1.7;">Hover over Products or Solutions to see the mega menu panels. Pure CSS :hover-driven with grid layout. Resize to see mobile drawer.</p>
</div>
```

**CSS:**
```css
.nav-02, .nav-02 *, .nav-02 *::before, .nav-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-02 {
  --bg: #ffffff;
  --text: #1a1a2e;
  --muted: #6b7280;
  --accent: #e84393;
  --border: #e5e7eb;
  --mega-bg: #ffffff;
  --icon-bg: #fdf2f8;
  font-family: 'DM Sans', sans-serif;
  position: sticky; top: 0; z-index: 200;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nav-02__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  height: 68px;
  gap: 2rem;
}
.nav-02__logo {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.nav-02__logo span { color: var(--accent); }
.nav-02__menu {
  display: flex;
  list-style: none;
  gap: 0;
  flex: 1;
}
.nav-02__item {
  position: relative;
}
.nav-02__item > a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nav-02__item > a::after {
  content: '▾';
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.2s;
}
.nav-02__item--plain > a::after { display: none; }
.nav-02__item:hover > a { background: #fdf2f8; color: var(--accent); }
.nav-02__item:hover > a::after { transform: rotate(180deg); }

/* Mega menu panel */
.nav-02__mega {
  position: absolute;
  top: calc(100% + 8px);
  left: -1rem;
  background: var(--mega-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  display: none;
  min-width: 560px;
  gap: 1.5rem;
}
.nav-02__mega--grid { display: none; grid-template-columns: repeat(2, 1fr); }
.nav-02__mega--wide { min-width: 700px; grid-template-columns: repeat(3, 1fr); }
.nav-02__item:hover .nav-02__mega--grid { display: grid; }
.nav-02__mega-col-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.nav-02__mega-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-decoration: none;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  transition: background 0.15s;
  margin-bottom: 0.25rem;
}
.nav-02__mega-link:hover { background: #fdf2f8; }
.nav-02__mega-icon {
  width: 36px; height: 36px;
  background: var(--icon-bg);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.nav-02__mega-link:hover .nav-02__mega-icon { background: #fce7f3; }
.nav-02__mega-title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.nav-02__mega-desc { font-size: 0.775rem; color: var(--muted); line-height: 1.4; }

.nav-02__spacer { flex: 1; }
.nav-02__cta {
  display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
}
.nav-02__btn {
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.2s;
}
.nav-02__btn--ghost { background: transparent; color: var(--text); }
.nav-02__btn--ghost:hover { background: #f3f4f6; }
.nav-02__btn--pink { background: var(--accent); color: #fff; }
.nav-02__btn--pink:hover { background: #d1236a; transform: translateY(-1px); }

/* Mobile */
#nav-02-toggle { display: none; }
.nav-02__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; margin-left: auto; }
.nav-02__hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-02-toggle:checked ~ .nav-02__inner .nav-02__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-02-toggle:checked ~ .nav-02__inner .nav-02__hamburger span:nth-child(2) { opacity: 0; }
#nav-02-toggle:checked ~ .nav-02__inner .nav-02__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-02__drawer {
  display: none;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  flex-direction: column;
  gap: 0.25rem;
}
.nav-02__drawer a { display: block; padding: 0.65rem 0.5rem; color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem; border-radius: 8px; }
.nav-02__drawer a:hover { background: #fdf2f8; color: var(--accent); padding-left: 1rem; }
#nav-02-toggle:checked ~ .nav-02__drawer { display: flex; }
@media (max-width: 768px) {
  .nav-02__menu, .nav-02__cta { display: none; }
  .nav-02__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-02__btn { transition: none; }
  .nav-02__hamburger span { transition: none; }
  .nav-02__drawer a { transition: none; }
}
```

### 03. CSS Sidebar Drawer Navigation

**Type:** Pure CSS
**Description:** Off-canvas sidebar drawer that slides in from the left using a hidden checkbox toggle with overlay backdrop.

**HTML:**
```html
<div class="nav-03">
  <input type="checkbox" id="nav-03-toggle">
  <div class="nav-03__bar">
    <label for="nav-03-toggle" class="nav-03__menu-btn" aria-label="Toggle sidebar">
      <span></span><span></span><span></span>
    </label>
    <a href="#" class="nav-03__logo">Arch<em>ive</em></a>
    <div class="nav-03__search">
      <span class="nav-03__search-icon">🔍</span>
      <input type="text" placeholder="Search...">
    </div>
    <div class="nav-03__bar-actions">
      <button class="nav-03__icon-btn">🔔</button>
      <button class="nav-03__icon-btn">⚙️</button>
      <div class="nav-03__avatar">VR</div>
    </div>
  </div>
  <label for="nav-03-toggle" class="nav-03__overlay"></label>
  <nav class="nav-03__drawer">
    <div class="nav-03__drawer-header">
      <div class="nav-03__drawer-title">Navigation</div>
    </div>
    <div class="nav-03__section">
      <div class="nav-03__section-label">Main</div>
      <a href="#" class="nav-03__link is-active"><span class="nav-03__link-icon">🏠</span> Dashboard</a>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">📊</span> Analytics <span class="nav-03__badge">New</span></a>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">📁</span> Projects</a>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">✉️</span> Messages <span class="nav-03__badge">4</span></a>
    </div>
    <div class="nav-03__section">
      <div class="nav-03__section-label">Workspace</div>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">📋</span> Tasks</a>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">📅</span> Calendar</a>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">🗂️</span> Files</a>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">👥</span> Team</a>
    </div>
    <div class="nav-03__section">
      <div class="nav-03__section-label">Account</div>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">👤</span> Profile</a>
      <a href="#" class="nav-03__link"><span class="nav-03__link-icon">⚙️</span> Settings</a>
    </div>
    <div class="nav-03__drawer-footer">
      <div class="nav-03__profile">
        <div class="nav-03__avatar">VR</div>
        <div>
          <div class="nav-03__profile-name">Vimal Raj</div>
          <div class="nav-03__profile-role">Admin</div>
        </div>
      </div>
    </div>
  </nav>
  <div class="nav-03__content">
    <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:1rem; color:#e6edf3;">Sidebar Drawer <span style="color:#f78166;">Navigation</span></h1>
    <p style="color:#7d8590; font-size:1.1rem; line-height:1.7; max-width:600px;">On desktop the sidebar is always visible. On mobile, tap the hamburger icon to slide it in over an overlay. Pure CSS checkbox toggle — no JavaScript.</p>
  </div>
</div>
```

**CSS:**
```css
.nav-03, .nav-03 *, .nav-03 *::before, .nav-03 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-03 {
  --bg: #161b22;
  --sidebar: #0d1117;
  --text: #e6edf3;
  --muted: #7d8590;
  --accent: #f78166;
  --border: rgba(240,246,252,0.1);
  --drawer-w: 280px;
  font-family: 'Syne', sans-serif;
}
#nav-03-toggle { display: none; }

/* Top bar */
.nav-03__bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
}
.nav-03__menu-btn {
  width: 36px; height: 36px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  cursor: pointer;
  border: none; background: transparent;
  border-radius: 8px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-03__menu-btn:hover { background: rgba(255,255,255,0.07); }
.nav-03__menu-btn span {
  display: block; width: 18px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s, width 0.3s;
}
#nav-03-toggle:checked ~ .nav-03__bar .nav-03__menu-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-03-toggle:checked ~ .nav-03__bar .nav-03__menu-btn span:nth-child(2) { opacity: 0; width: 0; }
#nav-03-toggle:checked ~ .nav-03__bar .nav-03__menu-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-03__logo {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.nav-03__logo em { color: var(--accent); font-style: normal; }
.nav-03__search {
  flex: 1;
  max-width: 340px;
  position: relative;
}
.nav-03__search input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem 0.45rem 2.2rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.nav-03__search input:focus { border-color: var(--accent); background: rgba(247,129,102,0.05); }
.nav-03__search input::placeholder { color: var(--muted); }
.nav-03__search-icon { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.875rem; pointer-events: none; }
.nav-03__bar-actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.nav-03__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f78166, #ffa657);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  cursor: pointer;
}
.nav-03__icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.nav-03__icon-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }

/* Overlay */
.nav-03__overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
#nav-03-toggle:checked ~ .nav-03__overlay { opacity: 1; pointer-events: all; }

/* Drawer */
.nav-03__drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--drawer-w);
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  z-index: 250;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  padding: 1rem 0;
  display: flex; flex-direction: column;
}
#nav-03-toggle:checked ~ .nav-03__drawer { transform: translateX(0); }
.nav-03__drawer-header {
  padding: 0.75rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.nav-03__drawer-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.nav-03__section { margin-bottom: 0.25rem; }
.nav-03__section-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0.75rem 1.25rem 0.35rem; }
.nav-03__link {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.55rem 1.25rem;
  border-radius: 6px;
  margin: 0 0.5rem;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.nav-03__link:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.nav-03__link.is-active { color: var(--text); background: rgba(247,129,102,0.1); }
.nav-03__link.is-active::before {
  content: ''; position: absolute; left: -0.5rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; background: var(--accent); border-radius: 0 2px 2px 0;
}
.nav-03__link-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.nav-03__badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
}
.nav-03__drawer-footer { margin-top: auto; padding: 1rem; border-top: 1px solid var(--border); }
.nav-03__profile { display: flex; align-items: center; gap: 0.75rem; }
.nav-03__profile-name { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.nav-03__profile-role { font-size: 0.75rem; color: var(--muted); }

.nav-03__content { padding-top: 60px; padding: 80px 2rem 2rem; color: var(--text); }

@media (min-width: 768px) {
  .nav-03__drawer { transform: translateX(0) !important; }
  .nav-03__overlay { display: none !important; }
  .nav-03__menu-btn { display: none; }
  .nav-03__content { padding-left: calc(var(--drawer-w) + 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-03__drawer { transition: none; }
  .nav-03__overlay { transition: none; }
  .nav-03__menu-btn span { transition: none; }
}
```

### 04. CSS Animated Underline Tabs Navbar

**Type:** Pure CSS
**Description:** Tab-style navbar with an animated bottom border that slides between items using CSS transitions and radio-button state.

**HTML:**
```html
<div class="nav-04">
  <input type="checkbox" id="nav-04-toggle">
  <div class="nav-04__top">
    <a href="#" class="nav-04__logo">Stack<span>.</span></a>
    <div class="nav-04__spacer"></div>
    <div class="nav-04__actions">
      <a href="#" class="nav-04__action-link">Sign in</a>
      <button class="nav-04__btn">Start building</button>
    </div>
    <label for="nav-04-toggle" class="nav-04__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-04__tabs">
    <a href="#" class="nav-04__tab is-active">Overview</a>
    <a href="#" class="nav-04__tab">Components <span class="nav-04__tab-count">48</span></a>
    <a href="#" class="nav-04__tab">Templates <span class="nav-04__tab-count">12</span></a>
    <a href="#" class="nav-04__tab">Documentation</a>
    <a href="#" class="nav-04__tab">Changelog <span class="nav-04__tab-count">3</span></a>
    <a href="#" class="nav-04__tab">Community</a>
    <a href="#" class="nav-04__tab">Showcase</a>
  </div>
  <div class="nav-04__mobile">
    <a href="#">Overview</a>
    <a href="#">Components</a>
    <a href="#">Templates</a>
    <a href="#">Documentation</a>
    <a href="#">Changelog</a>
    <a href="#">Community</a>
    <a href="#">Showcase</a>
  </div>
</div>
<div style="padding:4rem 2.5rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.04em; margin-bottom:1rem;">Animated Underline <span style="color:#ff6b35;">Tabs Navbar</span></h1>
  <p style="color:#888; font-size:1.1rem; line-height:1.7;">The sliding underline is a <code>scaleX</code> transform on an <code>::after</code> pseudo-element. Hover shows a 60% preview; active tab shows 100% width. No JavaScript.</p>
</div>
```

**CSS:**
```css
.nav-04, .nav-04 *, .nav-04 *::before, .nav-04 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-04 {
  --bg: #fff;
  --text: #1c1c1c;
  --muted: #888;
  --accent: #ff6b35;
  --track: #f0ebe3;
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  border-bottom: 1px solid #f0ebe3;
  position: sticky; top: 0; z-index: 100;
}
.nav-04__top {
  display: flex;
  align-items: center;
  padding: 0 2.5rem;
  height: 60px;
  gap: 2rem;
}
.nav-04__logo {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.nav-04__logo span { color: var(--accent); }
.nav-04__spacer { flex: 1; }
.nav-04__actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-04__action-link {
  font-size: 0.875rem; font-weight: 600;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s;
}
.nav-04__action-link:hover { color: var(--text); }
.nav-04__btn {
  padding: 0.45rem 1.1rem;
  border-radius: 6px;
  font-size: 0.875rem; font-weight: 700;
  cursor: pointer; border: none;
  font-family: inherit;
  background: var(--text); color: #fff;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: -0.01em;
}
.nav-04__btn:hover { background: var(--accent); transform: translateY(-1px); }

/* Tab nav */
.nav-04__tabs {
  display: flex;
  align-items: flex-end;
  padding: 0 2.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  height: 48px;
}
.nav-04__tabs::-webkit-scrollbar { display: none; }
.nav-04__tab {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 1.25rem;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-04__tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2.5px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.nav-04__tab:hover { color: var(--text); }
.nav-04__tab:hover::after { transform: scaleX(0.6); }
.nav-04__tab.is-active { color: var(--accent); }
.nav-04__tab.is-active::after { transform: scaleX(1); }
.nav-04__tab-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--track);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.nav-04__tab.is-active .nav-04__tab-count { background: #ffe8df; color: var(--accent); }

/* Mobile */
#nav-04-toggle { display: none; }
.nav-04__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; }
.nav-04__hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-04-toggle:checked ~ .nav-04__top .nav-04__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-04-toggle:checked ~ .nav-04__top .nav-04__hamburger span:nth-child(2) { opacity: 0; }
#nav-04-toggle:checked ~ .nav-04__top .nav-04__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-04__mobile {
  display: none; flex-direction: column; gap: 0.25rem;
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--track);
}
.nav-04__mobile a { display: block; padding: 0.6rem 0.5rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-radius: 6px; transition: background 0.15s, color 0.15s; }
.nav-04__mobile a:hover { background: #ffe8df; color: var(--accent); padding-left: 1rem; }
#nav-04-toggle:checked ~ .nav-04__mobile { display: flex; }
@media (max-width: 640px) {
  .nav-04__tabs, .nav-04__actions { display: none; }
  .nav-04__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-04__tab::after { transition: none; }
  .nav-04__btn { transition: none; }
  .nav-04__hamburger span { transition: none; }
}
```

### 05. CSS Pill Highlight Navigation Bar

**Type:** Pure CSS
**Description:** Compact pill-shaped nav links that highlight on hover with a soft background fill and subtle scale animation.

**HTML:**
```html
<div class="nav-05">
  <div class="nav-05__bar">
    <a href="#" class="nav-05__logo">⬡ Helix</a>
    <div class="nav-05__sep"></div>
    <ul class="nav-05__links">
      <li><a href="#" class="is-active">Home</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-05__sep"></div>
    <button class="nav-05__cta">Get access</button>
  </div>
</div>
<input type="checkbox" id="nav-05-toggle">
<div class="nav-05__mobile-bar">
  <a href="#" class="nav-05__mobile-logo">⬡ Helix</a>
  <label for="nav-05-toggle" class="nav-05__hamburger" aria-label="Toggle menu">
    <span></span><span></span><span></span>
  </label>
</div>
<div class="nav-05__mobile-links">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a href="#">Pricing</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
  <a href="#" style="color:#818cf8; font-weight:600;">Get access →</a>
</div>
<div style="padding:4rem 2rem; color:#f9fafb; max-width:700px; margin:0 auto; text-align:center;">
  <h1 style="font-size:3rem; font-weight:700; letter-spacing:-0.04em; margin-bottom:1rem;">Pill Highlight <br>Navigation Bar</h1>
  <p style="color:#9ca3af; font-size:1.1rem; line-height:1.7;">A floating pill-style navbar centered on the page. Active state uses a solid white pill with dark text. Hover shows a translucent pill preview.</p>
</div>
```

**CSS:**
```css
.nav-05, .nav-05 *, .nav-05 *::before, .nav-05 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-05 {
  --text: #f9fafb;
  --muted: #9ca3af;
  --pill: rgba(255,255,255,0.1);
  --active-pill: #ffffff;
  --active-text: #111827;
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem;
  position: sticky; top: 0; z-index: 100;
}
.nav-05__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 0.35rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-05__logo {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  padding: 0.4rem 1rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.nav-05__sep {
  width: 1px; height: 20px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.nav-05__links {
  display: flex;
  list-style: none;
  gap: 0.25rem;
}
.nav-05__links a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-05__links a:hover { color: var(--text); background: var(--pill); }
.nav-05__links a.is-active {
  background: var(--active-pill);
  color: var(--active-text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.nav-05__cta {
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  transition: opacity 0.2s, transform 0.15s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,102,241,0.4);
}
.nav-05__cta:hover { opacity: 0.85; transform: scale(0.97); }

/* Mobile — stack center-aligned */
#nav-05-toggle { display: none; }
.nav-05__mobile-bar {
  display: none;
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}
.nav-05__mobile-logo { font-weight: 700; font-size: 1rem; color: #f9fafb; text-decoration: none; }
.nav-05__hamburger { display: flex; flex-direction: column; gap: 4px; cursor: pointer; border: none; background: transparent; padding: 6px; }
.nav-05__hamburger span { display: block; width: 20px; height: 1.5px; background: #f9fafb; border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-05-toggle:checked ~ .nav-05__mobile-bar .nav-05__hamburger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
#nav-05-toggle:checked ~ .nav-05__mobile-bar .nav-05__hamburger span:nth-child(2) { opacity: 0; }
#nav-05-toggle:checked ~ .nav-05__mobile-bar .nav-05__hamburger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-05__mobile-links {
  display: none; flex-direction: column; gap: 0.25rem;
  background: rgba(10,10,10,0.95); backdrop-filter: blur(12px);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky; top: 56px; z-index: 99;
}
.nav-05__mobile-links a { display: block; color: #9ca3af; text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 0.6rem 0.75rem; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.nav-05__mobile-links a:hover { background: rgba(255,255,255,0.06); color: #f9fafb; }
#nav-05-toggle:checked ~ .nav-05__mobile-links { display: flex; }

@media (max-width: 640px) {
  .nav-05 { display: none; }
  .nav-05__mobile-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-05__links a, .nav-05__cta { transition: none; }
  .nav-05__hamburger span { transition: none; }
  .nav-05__mobile-links a { transition: none; }
}
```

### 06. CSS Scroll-Aware Shrink Navbar

**Type:** CSS + JS
**Description:** Full-height hero navbar that compresses to a compact strip on scroll with JS class-toggle and CSS transition.

**HTML:**
```html
<div class="nav-06" id="navbar06">
  <input type="checkbox" id="nav-06-toggle">
  <div class="nav-06__inner">
    <a href="#" class="nav-06__logo">Kol<em>or</em></a>
    <ul class="nav-06__links">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Studio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <button class="nav-06__btn">Hire us</button>
    <label for="nav-06-toggle" class="nav-06__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-06__mobile">
    <a href="#">Home</a><a href="#">Work</a><a href="#">Services</a><a href="#">Studio</a><a href="#">Contact</a>
    <a href="#" style="color:#e8a838; font-weight:600;">Hire us →</a>
  </div>
</div>
<div class="nav-06__hero">
  <h1>Scroll to see the navbar transform</h1>
  <p>As you scroll down, the navbar shrinks in height, gains a frosted white background, and switches from ghost to solid button style.</p>
  <div class="nav-06__scroll-hint">↓ scroll down ↓</div>
</div>
<div style="padding:4rem 2rem; max-width:700px; margin:0 auto;">
  <h2 style="font-size:2rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:1rem;">Page content area</h2>
  <p style="color:#6b5f4a; font-size:1.05rem; line-height:1.75;">The navbar listens to the <code>scroll</code> event and adds an <code>.is-scrolled</code> class when the page scrolls past 60px. All style changes are CSS transitions on that class toggle.</p>
</div>
```

**CSS:**
```css
.nav-06, .nav-06 *, .nav-06 *::before, .nav-06 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-06 {
  --bg: transparent;
  --scrolled-bg: rgba(255,255,255,0.95);
  --text: #faf5ee;
  --scrolled-text: #1a1206;
  --accent: #e8a838;
  --border: rgba(255,255,255,0.15);
  --scrolled-border: rgba(0,0,0,0.08);
  font-family: 'Outfit', sans-serif;
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: background 0.4s, box-shadow 0.4s, height 0.4s;
  height: 80px;
}
.nav-06.is-scrolled {
  background: var(--scrolled-bg);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.06);
  height: 60px;
}
.nav-06__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 2rem;
  display: flex; align-items: center;
  height: 100%;
  gap: 2rem;
}
.nav-06__logo {
  font-weight: 800; font-size: 1.3rem;
  color: var(--text); text-decoration: none;
  letter-spacing: -0.03em;
  transition: color 0.4s;
  flex-shrink: 0;
}
.nav-06.is-scrolled .nav-06__logo { color: var(--scrolled-text); }
.nav-06__logo em { color: var(--accent); font-style: normal; }
.nav-06__links {
  display: flex; list-style: none; gap: 0.25rem; flex: 1;
}
.nav-06__links a {
  color: rgba(250,245,238,0.85);
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
  padding: 0.45rem 0.9rem; border-radius: 8px;
  transition: color 0.4s, background 0.2s;
}
.nav-06.is-scrolled .nav-06__links a { color: rgba(26,18,6,0.7); }
.nav-06__links a:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text) !important;
}
.nav-06.is-scrolled .nav-06__links a:hover { background: rgba(232,168,56,0.1); color: var(--accent) !important; }
.nav-06__links a.is-active { color: var(--accent) !important; font-weight: 600; }
.nav-06__btn {
  padding: 0.5rem 1.3rem;
  border-radius: 8px;
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer; border: 2px solid rgba(255,255,255,0.35);
  font-family: inherit;
  color: var(--text);
  background: transparent;
  transition: all 0.4s;
  flex-shrink: 0;
}
.nav-06.is-scrolled .nav-06__btn {
  border-color: transparent;
  background: var(--accent);
  color: #1a1206;
}
.nav-06__btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,168,56,0.35); }

/* Hero */
.nav-06__hero {
  height: 100vh;
  background: linear-gradient(135deg, #1a1206 0%, #3d2b00 50%, #1a1206 100%);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  color: #faf5ee;
  text-align: center;
  padding: 2rem;
  position: relative;
}
.nav-06__hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(232,168,56,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.nav-06__hero h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 1rem; }
.nav-06__hero p { color: rgba(250,245,238,0.65); font-size: 1.1rem; max-width: 500px; line-height: 1.7; }
.nav-06__scroll-hint { margin-top: 3rem; color: rgba(250,245,238,0.4); font-size: 0.875rem; animation: nav-06-bob 2s ease-in-out infinite; }
@keyframes nav-06-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Mobile */
#nav-06-toggle { display: none; }
.nav-06__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; margin-left: auto; }
.nav-06__hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s, background 0.4s; }
.nav-06.is-scrolled .nav-06__hamburger span { background: var(--scrolled-text); }
#nav-06-toggle:checked ~ .nav-06__inner .nav-06__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-06-toggle:checked ~ .nav-06__inner .nav-06__hamburger span:nth-child(2) { opacity: 0; }
#nav-06-toggle:checked ~ .nav-06__inner .nav-06__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-06__mobile {
  display: none; flex-direction: column; gap: 0.25rem;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(16px);
  padding: 0.75rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nav-06__mobile a { display: block; color: rgba(26,18,6,0.8); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 0.65rem 0.5rem; border-radius: 8px; transition: background 0.15s; }
.nav-06__mobile a:hover { background: rgba(232,168,56,0.1); color: #e8a838; padding-left: 1rem; }
#nav-06-toggle:checked ~ .nav-06__mobile { display: flex; }
@media (max-width: 768px) {
  .nav-06__links, .nav-06__btn { display: none; }
  .nav-06__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-06, .nav-06__logo, .nav-06__links a, .nav-06__btn, .nav-06__hamburger span { transition: none; }
  .nav-06__scroll-hint { animation: none; }
}
```

**JS:**
```js
const nav = document.getElementById('navbar06');
  function onScroll() {
    if (window.scrollY > 60) {
      nav.classList.add('is-scrolled');
    } else {
      nav.classList.remove('is-scrolled');
    }
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
```

### 07. CSS Neon Dark Navbar

**Type:** Pure CSS
**Description:** High-contrast dark navbar with neon-glow text effects, glowing CTA button, and animated pulse indicator dot.

**HTML:**
```html
<div class="nav-07">
  <input type="checkbox" id="nav-07-toggle">
  <div class="nav-07__inner">
    <a href="#" class="nav-07__logo">NEXUS</a>
    <ul class="nav-07__links">
      <li><a href="#" class="is-active">System</a></li>
      <li><a href="#">Networks</a></li>
      <li><a href="#">Data</a></li>
      <li><a href="#">Security</a></li>
      <li><a href="#">Console</a></li>
    </ul>
    <div class="nav-07__status">ONLINE</div>
    <button class="nav-07__btn">Connect</button>
    <label for="nav-07-toggle" class="nav-07__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-07__mobile">
    <a href="#">System</a><a href="#">Networks</a><a href="#">Data</a><a href="#">Security</a><a href="#">Console</a>
  </div>
</div>
<div style="padding:4rem 2rem; color:#e0e8ff; max-width:700px; margin:0 auto;">
  <h1 style="font-family:'Orbitron',monospace; font-size:2.5rem; font-weight:900; letter-spacing:0.05em; margin-bottom:1rem; background:linear-gradient(90deg,#00f5ff,#ff00cc); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">Neon Dark Navbar</h1>
  <p style="color:rgba(224,232,255,0.55); font-size:1rem; line-height:1.7; font-family:'DM Sans',sans-serif;">Hover the nav links to see the neon underline slide in. The glowing status dot uses a CSS keyframe. All glow effects are achieved with <code>box-shadow</code> and <code>filter: drop-shadow</code>.</p>
</div>
```

**CSS:**
```css
.nav-07, .nav-07 *, .nav-07 *::before, .nav-07 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-07 {
  --bg: #0a0a1a;
  --border: rgba(0,245,255,0.2);
  --text: #e0e8ff;
  --muted: rgba(224,232,255,0.45);
  --cyan: #00f5ff;
  --magenta: #ff00cc;
  --green: #00ff88;
  font-family: 'Orbitron', monospace;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 0 40px rgba(0,245,255,0.05), 0 1px 0 rgba(0,245,255,0.15);
}
.nav-07__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 2rem;
  display: flex; align-items: center;
  height: 64px; gap: 2rem;
}
.nav-07__logo {
  font-weight: 900; font-size: 1.1rem;
  text-decoration: none; letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0,245,255,0.5));
  flex-shrink: 0;
  transition: filter 0.3s;
}
.nav-07__logo:hover { filter: drop-shadow(0 0 16px rgba(0,245,255,0.9)); }
.nav-07__links {
  display: flex; list-style: none; gap: 0; flex: 1;
}
.nav-07__links a {
  display: block;
  color: var(--muted);
  text-decoration: none; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  position: relative;
  transition: color 0.25s;
}
.nav-07__links a::before {
  content: '';
  position: absolute; bottom: 6px; left: 50%; right: 50%;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan), 0 0 12px var(--cyan);
  transition: left 0.25s, right 0.25s;
}
.nav-07__links a:hover { color: var(--cyan); }
.nav-07__links a:hover::before { left: 1rem; right: 1rem; }
.nav-07__links a.is-active { color: var(--cyan); }
.nav-07__links a.is-active::before { left: 1rem; right: 1rem; }

.nav-07__status {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.65rem; letter-spacing: 0.1em;
  color: var(--green);
  border: 1px solid rgba(0,255,136,0.3);
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  background: rgba(0,255,136,0.05);
  flex-shrink: 0;
}
.nav-07__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green), 0 0 12px var(--green);
  animation: nav-07-pulse 2s ease-in-out infinite;
}
@keyframes nav-07-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.nav-07__btn {
  padding: 0.45rem 1.3rem;
  border: 1px solid var(--cyan);
  border-radius: 4px; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
  background: transparent; color: var(--cyan);
  box-shadow: 0 0 8px rgba(0,245,255,0.2), inset 0 0 8px rgba(0,245,255,0.05);
  transition: box-shadow 0.25s, background 0.25s, color 0.25s;
  flex-shrink: 0;
}
.nav-07__btn:hover {
  background: rgba(0,245,255,0.1);
  box-shadow: 0 0 20px rgba(0,245,255,0.5), inset 0 0 20px rgba(0,245,255,0.1);
  color: #fff;
}
/* Mobile */
#nav-07-toggle { display: none; }
.nav-07__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; margin-left: auto; }
.nav-07__hamburger span { display: block; width: 22px; height: 1.5px; background: var(--cyan); box-shadow: 0 0 4px var(--cyan); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-07-toggle:checked ~ .nav-07__inner .nav-07__hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-07-toggle:checked ~ .nav-07__inner .nav-07__hamburger span:nth-child(2) { opacity: 0; }
#nav-07-toggle:checked ~ .nav-07__inner .nav-07__hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-07__mobile {
  display: none; flex-direction: column; gap: 0.25rem;
  background: #0a0a1a; padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0,245,255,0.15);
}
.nav-07__mobile a { display: block; color: var(--muted); text-decoration: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.65rem 0.5rem; border-bottom: 1px solid rgba(0,245,255,0.08); transition: color 0.2s, padding-left 0.2s; }
.nav-07__mobile a:last-child { border-bottom: none; }
.nav-07__mobile a:hover { color: var(--cyan); padding-left: 1rem; }
#nav-07-toggle:checked ~ .nav-07__mobile { display: flex; }
@media (max-width: 768px) {
  .nav-07__links, .nav-07__status, .nav-07__btn { display: none; }
  .nav-07__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-07__status::before { animation: none; }
  .nav-07__links a::before, .nav-07__logo, .nav-07__btn { transition: none; }
  .nav-07__hamburger span { transition: none; }
}
```

### 08. CSS Breadcrumb Reading Progress Navbar

**Type:** CSS + JS
**Description:** Dual-row navbar with an auto-updating breadcrumb trail and a thin color-fill reading progress bar driven by scroll position.

**HTML:**
```html
<div class="nav-08" id="nav08">
  <div class="nav-08__progress-track">
    <div class="nav-08__progress-bar" id="nav08Progress"></div>
  </div>
  <input type="checkbox" id="nav-08-toggle">
  <div class="nav-08__main">
    <a href="#" class="nav-08__logo">Docs</a>
    <ol class="nav-08__crumbs">
      <li><a href="#">Home</a></li>
      <li><a href="#">Guide</a></li>
      <li><a href="#">CSS</a></li>
      <li><span>Responsive Navbar</span></li>
    </ol>
    <div class="nav-08__sep"></div>
    <ul class="nav-08__sections">
      <li><a href="#" class="is-active">Overview</a></li>
      <li><a href="#">Installation</a></li>
      <li><a href="#">Usage</a></li>
      <li><a href="#">API</a></li>
      <li><a href="#">Examples</a></li>
    </ul>
    <div class="nav-08__actions">
      <span class="nav-08__time">12 min read</span>
      <button class="nav-08__edit">Edit page</button>
    </div>
    <label for="nav-08-toggle" class="nav-08__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-08__mobile">
    <a href="#">Overview</a>
    <a href="#">Installation</a>
    <a href="#">Usage</a>
    <a href="#">API</a>
    <a href="#">Examples</a>
  </div>
</div>
<div style="padding:3rem 2rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:1.5rem;">Breadcrumb + Reading Progress Navbar</h1>
  <p style="color:#78716c; font-size:1.05rem; line-height:1.75; margin-bottom:1.5rem;">Scroll this page to see the green reading progress bar fill up. The bar width is set by JavaScript reading <code>scrollY / (documentHeight - viewportHeight)</code>.</p>
  <p style="color:#78716c; font-size:1.05rem; line-height:1.75; margin-bottom:1.5rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  <p style="color:#78716c; font-size:1.05rem; line-height:1.75; margin-bottom:1.5rem;">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p style="color:#78716c; font-size:1.05rem; line-height:1.75;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
```

**CSS:**
```css
.nav-08, .nav-08 *, .nav-08 *::before, .nav-08 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-08 {
  --bg: #fff;
  --border: #e4e4e0;
  --text: #111110;
  --muted: #78716c;
  --accent: #10b981;
  --progress-bg: #e4e4e0;
  font-family: 'IBM Plex Sans', sans-serif;
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* Read progress bar at very top */
.nav-08__progress-track {
  height: 3px;
  background: var(--progress-bg);
  position: relative;
}
.nav-08__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #06d6a0, #34d399);
  width: 0%;
  transition: width 0.1s linear;
  position: relative;
}
.nav-08__progress-bar::after {
  content: '';
  position: absolute; right: -1px; top: -1px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #06d6a0;
  box-shadow: 0 0 6px #06d6a0;
}
/* Main nav */
.nav-08__main {
  display: flex; align-items: center;
  padding: 0 2rem;
  height: 56px;
  gap: 0;
}
.nav-08__logo {
  font-weight: 700; font-size: 1.1rem;
  color: var(--text); text-decoration: none;
  letter-spacing: -0.02em;
  margin-right: 1.5rem;
  flex-shrink: 0;
}
/* Breadcrumb */
.nav-08__crumbs {
  display: flex; align-items: center; gap: 0;
  list-style: none;
  flex: 1;
  overflow: hidden;
}
.nav-08__crumbs li {
  display: flex; align-items: center;
  font-size: 0.875rem;
  white-space: nowrap;
}
.nav-08__crumbs li + li::before {
  content: '/';
  color: #d4d4d0;
  margin: 0 0.5rem;
  font-size: 0.8rem;
}
.nav-08__crumbs a {
  color: var(--muted); text-decoration: none; font-weight: 500;
  padding: 0.25rem 0.5rem; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.nav-08__crumbs a:hover { color: var(--text); background: #f4f4f2; }
.nav-08__crumbs li:last-child a,
.nav-08__crumbs li:last-child span {
  color: var(--text); font-weight: 600;
  pointer-events: none;
}
.nav-08__sep { width: 1px; height: 24px; background: var(--border); margin: 0 1.25rem; flex-shrink: 0; }
/* Section nav */
.nav-08__sections {
  display: flex; list-style: none; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.nav-08__sections::-webkit-scrollbar { display: none; }
.nav-08__sections a {
  display: block;
  color: var(--muted); text-decoration: none; font-size: 0.8rem; font-weight: 500;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-08__sections a:hover { color: var(--text); background: #f4f4f2; }
.nav-08__sections a.is-active { color: var(--accent); background: rgba(16,185,129,0.08); font-weight: 600; }
/* Right */
.nav-08__actions { margin-left: auto; flex-shrink: 0; display: flex; gap: 0.5rem; align-items: center; }
.nav-08__time { font-size: 0.775rem; color: var(--muted); }
.nav-08__edit {
  padding: 0.35rem 0.85rem; border-radius: 6px;
  font-size: 0.775rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border);
  font-family: inherit; color: var(--text); background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.nav-08__edit:hover { background: #f4f4f2; border-color: #ccc; }

/* Mobile */
#nav-08-toggle { display: none; }
.nav-08__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; border: none; background: transparent; }
.nav-08__hamburger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-08-toggle:checked ~ .nav-08__main .nav-08__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-08-toggle:checked ~ .nav-08__main .nav-08__hamburger span:nth-child(2) { opacity: 0; }
#nav-08-toggle:checked ~ .nav-08__main .nav-08__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-08__mobile { display: none; flex-direction: column; gap: 0; padding: 0.75rem 1.5rem 1rem; border-top: 1px solid var(--border); }
.nav-08__mobile a { display: block; color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.6rem 0.5rem; border-radius: 6px; }
.nav-08__mobile a:hover { background: #f4f4f2; color: var(--text); }
#nav-08-toggle:checked ~ .nav-08__mobile { display: flex; }
@media (max-width: 768px) {
  .nav-08__crumbs li:not(:first-child):not(:last-child) { display: none; }
  .nav-08__sep, .nav-08__sections, .nav-08__time { display: none; }
  .nav-08__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-08__progress-bar { transition: none; }
  .nav-08__hamburger span { transition: none; }
}
```

**JS:**
```js
const bar = document.getElementById('nav08Progress');
  function updateProgress() {
    const scrolled = window.scrollY;
    const total = document.documentElement.scrollHeight - window.innerHeight;
    const pct = total > 0 ? (scrolled / total) * 100 : 0;
    bar.style.width = pct + '%';
  }
  window.addEventListener('scroll', updateProgress, { passive: true });
  updateProgress();
```

### 09. CSS Split Two-Tone Navbar

**Type:** Pure CSS
**Description:** Split-color navbar with dark left branding panel and light right links panel — bold editorial contrast layout.

**HTML:**
```html
<div class="nav-09">
  <div class="nav-09__left">
    <a href="#" class="nav-09__logo">Geo<span>metric</span></a>
  </div>
  <div class="nav-09__center">
    <ul class="nav-09__links">
      <li><a href="#" class="is-active">Studio</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Process</a></li>
      <li><a href="#">Journal</a></li>
    </ul>
  </div>
  <div class="nav-09__right">
    <button class="nav-09__btn nav-09__btn--ghost">Log in</button>
    <button class="nav-09__btn nav-09__btn--dark">Start project</button>
  </div>
</div>
<input type="checkbox" id="nav-09-toggle">
<div class="nav-09__mobile-bar">
  <a href="#" class="nav-09__mobile-logo">Geo<span>metric</span></a>
  <label for="nav-09-toggle" class="nav-09__hamburger" aria-label="Toggle menu">
    <span></span><span></span><span></span>
  </label>
</div>
<div class="nav-09__mobile-menu">
  <a href="#">Studio</a>
  <a href="#">Work</a>
  <a href="#">Process</a>
  <a href="#">Journal</a>
  <a href="#">Start project →</a>
</div>
<div style="padding:4rem 2rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:1rem;">Split Two-Tone Navbar</h1>
  <p style="color:#6b7280; font-size:1.1rem; line-height:1.7;">The angled divider between the dark and yellow sections is achieved with <code>clip-path: polygon()</code> — no pseudo-elements, no borders. The skew angle is 24px offset on the left and right panels.</p>
</div>
```

**CSS:**
```css
.nav-09, .nav-09 *, .nav-09 *::before, .nav-09 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-09 {
  --left-bg: #1a1a2e;
  --right-bg: #f7c948;
  --left-text: #f0eeff;
  --right-text: #1a1a2e;
  --accent: #f7c948;
  font-family: 'Space Grotesk', sans-serif;
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: 68px;
  position: sticky; top: 0; z-index: 100;
  overflow: hidden;
}
.nav-09__left {
  background: var(--left-bg);
  display: flex; align-items: center;
  padding: 0 2.5rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  min-width: 220px;
}
.nav-09__logo {
  font-weight: 700; font-size: 1.2rem;
  color: var(--left-text); text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.nav-09__logo span { color: var(--accent); }
.nav-09__center {
  background: var(--left-bg);
  display: flex; align-items: center; justify-content: center;
  gap: 0;
}
.nav-09__links {
  display: flex; list-style: none; gap: 0;
}
.nav-09__links a {
  display: block;
  color: rgba(240,238,255,0.6);
  text-decoration: none; font-size: 0.875rem; font-weight: 500;
  padding: 0.5rem 1.1rem; border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.nav-09__links a:hover { color: var(--left-text); background: rgba(255,255,255,0.08); }
.nav-09__links a.is-active { color: var(--accent); font-weight: 600; }
.nav-09__right {
  background: var(--right-bg);
  display: flex; align-items: center;
  padding: 0 2rem 0 2.5rem;
  gap: 0.75rem;
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%);
}
.nav-09__btn {
  padding: 0.45rem 1.2rem;
  border-radius: 6px; font-size: 0.875rem; font-weight: 700;
  cursor: pointer; border: none; font-family: inherit;
  transition: all 0.2s;
}
.nav-09__btn--ghost {
  background: rgba(26,26,46,0.1); color: var(--right-text);
  border: 1.5px solid rgba(26,26,46,0.2);
}
.nav-09__btn--ghost:hover { background: rgba(26,26,46,0.18); }
.nav-09__btn--dark { background: var(--left-bg); color: var(--left-text); }
.nav-09__btn--dark:hover { background: #2a2a4e; transform: translateY(-1px); }

/* Mobile */
#nav-09-toggle { display: none; }
.nav-09__mobile-bar {
  display: none;
  position: sticky; top: 0; z-index: 100;
  background: #1a1a2e;
  height: 60px; padding: 0 1.5rem;
  align-items: center; justify-content: space-between;
}
.nav-09__mobile-logo { font-weight: 700; font-size: 1.1rem; color: #f0eeff; text-decoration: none; letter-spacing: -0.02em; }
.nav-09__mobile-logo span { color: #f7c948; }
.nav-09__hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; border: none; background: transparent; padding: 8px; }
.nav-09__hamburger span { display: block; width: 22px; height: 2px; background: #f0eeff; border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-09-toggle:checked ~ .nav-09__mobile-bar .nav-09__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-09-toggle:checked ~ .nav-09__mobile-bar .nav-09__hamburger span:nth-child(2) { opacity: 0; }
#nav-09-toggle:checked ~ .nav-09__mobile-bar .nav-09__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-09__mobile-menu {
  display: none; flex-direction: column;
  background: #1a1a2e; padding: 0.75rem 1.5rem 1.25rem;
  position: sticky; top: 60px; z-index: 99;
  border-bottom: 3px solid #f7c948;
}
.nav-09__mobile-menu a { display: block; color: rgba(240,238,255,0.7); text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 0.65rem 0.5rem; border-radius: 6px; transition: color 0.2s, background 0.2s; }
.nav-09__mobile-menu a:hover { color: #f7c948; background: rgba(247,201,72,0.08); padding-left: 1rem; }
.nav-09__mobile-menu a:last-child { color: #f7c948; font-weight: 700; margin-top: 0.5rem; }
#nav-09-toggle:checked ~ .nav-09__mobile-menu { display: flex; }
@media (max-width: 768px) {
  .nav-09 { display: none; }
  .nav-09__mobile-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-09__btn, .nav-09__links a { transition: none; }
  .nav-09__hamburger span { transition: none; }
  .nav-09__mobile-menu a { transition: none; }
}
```

### 10. CSS Bottom Tab Bar Navigation

**Type:** Pure CSS
**Description:** Mobile-first fixed bottom tab bar with icon + label layout, active fill highlight, and animated indicator dot.

**HTML:**
```html
<div class="nav-10">
  <div class="nav-10__desktop">
    <a href="#" class="nav-10__logo">Pulse<span>.</span></a>
    <ul class="nav-10__desktop-links">
      <li><a href="#" class="is-active">🏠 Home</a></li>
      <li><a href="#">📊 Analytics</a></li>
      <li><a href="#">💬 Messages</a></li>
      <li><a href="#">📁 Files</a></li>
      <li><a href="#">👤 Profile</a></li>
    </ul>
    <div class="nav-10__desktop-actions">
      <button class="nav-10__desktop-btn">Upgrade plan</button>
    </div>
  </div>
  <div class="nav-10__tab-bar">
    <ul class="nav-10__tabs">
      <li>
        <a href="#" class="nav-10__tab is-active">
          <div class="nav-10__tab-icon">🏠</div>
          Home
        </a>
      </li>
      <li>
        <a href="#" class="nav-10__tab">
          <div class="nav-10__tab-icon">📊</div>
          <span class="nav-10__tab-badge">2</span>
          Stats
        </a>
      </li>
      <li>
        <a href="#" class="nav-10__tab nav-10__tab--fab">
          <div class="nav-10__tab-icon">＋</div>
          New
        </a>
      </li>
      <li>
        <a href="#" class="nav-10__tab">
          <div class="nav-10__tab-icon">💬</div>
          <span class="nav-10__tab-badge">5</span>
          Chat
        </a>
      </li>
      <li>
        <a href="#" class="nav-10__tab">
          <div class="nav-10__tab-icon">👤</div>
          Profile
        </a>
      </li>
    </ul>
  </div>
  <div class="nav-10__content">
    <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:1rem; color:#1e1b4b;">Bottom Tab Bar Navigation</h1>
    <p style="color:#6b7280; font-size:1.1rem; line-height:1.7; max-width:600px;">On desktop you see a standard horizontal navbar. Resize below 768px to see the iOS-style bottom tab bar with a floating action button in the center. The FAB uses a negative <code>translateY</code> to lift above the bar.</p>
  </div>
</div>
```

**CSS:**
```css
.nav-10, .nav-10 *, .nav-10 *::before, .nav-10 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-10 {
  --bg: #fff;
  --text: #1e1b4b;
  --muted: #9ca3af;
  --accent: #6366f1;
  --accent-light: #eef2ff;
  font-family: 'Nunito', sans-serif;
}

/* Top desktop nav */
.nav-10__desktop {
  background: var(--bg);
  border-bottom: 1px solid #e5e7eb;
  padding: 0 2rem;
  display: flex; align-items: center; height: 64px;
  gap: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.nav-10__logo {
  font-weight: 800; font-size: 1.2rem; color: var(--text);
  text-decoration: none; letter-spacing: -0.02em; flex-shrink: 0;
}
.nav-10__logo span { color: var(--accent); }
.nav-10__desktop-links { display: flex; list-style: none; gap: 0; flex: 1; }
.nav-10__desktop-links a {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 0.875rem; font-weight: 600;
  padding: 0.5rem 0.9rem; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.nav-10__desktop-links a:hover { background: var(--accent-light); color: var(--accent); }
.nav-10__desktop-links a.is-active { color: var(--accent); background: var(--accent-light); }
.nav-10__desktop-actions { margin-left: auto; display: flex; gap: 0.75rem; }
.nav-10__desktop-btn {
  padding: 0.45rem 1.1rem; border-radius: 8px;
  font-size: 0.875rem; font-weight: 700; cursor: pointer; border: none;
  font-family: inherit; background: var(--accent); color: #fff;
  transition: background 0.2s, transform 0.15s;
}
.nav-10__desktop-btn:hover { background: #4f46e5; transform: translateY(-1px); }

/* Bottom tab bar */
.nav-10__tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid #e5e7eb;
  display: none;
  padding: 0 0.5rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 200;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
}
.nav-10__tabs {
  display: flex;
  list-style: none;
  height: 60px;
}
.nav-10__tabs li { flex: 1; }
.nav-10__tab {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  height: 100%;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 8px;
  transition: color 0.2s;
  position: relative;
}
.nav-10__tab-icon {
  font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 28px;
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s;
}
.nav-10__tab:hover { color: var(--text); }
.nav-10__tab:hover .nav-10__tab-icon { background: #f3f4f6; }
.nav-10__tab.is-active { color: var(--accent); }
.nav-10__tab.is-active .nav-10__tab-icon {
  background: var(--accent-light);
  transform: translateY(-2px);
}
.nav-10__tab-badge {
  position: absolute; top: 8px; right: calc(50% - 22px);
  background: #ef4444; color: #fff;
  font-size: 0.55rem; font-weight: 800;
  padding: 1px 5px; border-radius: 999px;
  min-width: 16px; text-align: center;
  border: 2px solid var(--bg);
}

/* Center FAB tab */
.nav-10__tab--fab .nav-10__tab-icon {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 1.4rem;
  width: 44px; height: 40px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(99,102,241,0.45);
  transform: translateY(-8px);
}
.nav-10__tab--fab { color: var(--accent); }
.nav-10__tab--fab:hover .nav-10__tab-icon { transform: translateY(-10px) scale(1.05); }

.nav-10__content { padding: 2rem; }
@media (max-width: 768px) {
  .nav-10__desktop { display: none; }
  .nav-10__tab-bar { display: block; }
  .nav-10__content { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-10__tab-icon, .nav-10__tab { transition: none; }
  .nav-10__desktop-btn { transition: none; }
}
```

### 11. CSS Gradient Border Animated Navbar

**Type:** Pure CSS
**Description:** Transparent navbar with a rotating conic-gradient animated bottom border and shimmer hover effects on links.

**HTML:**
```html
<div class="nav-11">
  <input type="checkbox" id="nav-11-toggle">
  <div class="nav-11__bar">
    <a href="#" class="nav-11__logo"><em>Violet</em>Lab</a>
    <ul class="nav-11__links">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <button class="nav-11__btn">Get started</button>
    <label for="nav-11-toggle" class="nav-11__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-11__mobile">
    <a href="#">Home</a><a href="#">Products</a><a href="#">Docs</a><a href="#">Pricing</a><a href="#">Blog</a>
    <a href="#" style="color:#a78bfa; font-weight:700;">Get started →</a>
  </div>
</div>
<div style="padding:4rem 2rem; color:#f5f0ff; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:1rem; background:linear-gradient(90deg,#c026d3,#7c3aed,#2563eb); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">Gradient Border Navbar</h1>
  <p style="color:rgba(245,240,255,0.55); font-size:1.1rem; line-height:1.7;">The animated gradient border uses an <code>::before</code> pseudo-element positioned 1px outside the card with a <code>border-radius</code> that's 1px larger. The card itself sits on top with a dark semi-transparent background.</p>
</div>
```

**CSS:**
```css
.nav-11, .nav-11 *, .nav-11 *::before, .nav-11 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-11 {
  --text: #f5f0ff;
  --muted: rgba(245,240,255,0.5);
  --grad-a: #c026d3;
  --grad-b: #7c3aed;
  --grad-c: #2563eb;
  font-family: 'Raleway', sans-serif;
  padding: 1.25rem 2rem;
  position: sticky; top: 0; z-index: 100;
}
.nav-11__bar {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  background: rgba(10,0,22,0.6);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  position: relative;
}
/* Gradient border via pseudo-element */
.nav-11__bar::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b), var(--grad-c));
  z-index: -1;
  animation: nav-11-rotategrad 4s linear infinite;
}
@keyframes nav-11-rotategrad {
  0% { background: linear-gradient(135deg, #c026d3, #7c3aed, #2563eb); }
  25% { background: linear-gradient(225deg, #c026d3, #7c3aed, #2563eb); }
  50% { background: linear-gradient(315deg, #c026d3, #7c3aed, #2563eb); }
  75% { background: linear-gradient(45deg, #c026d3, #7c3aed, #2563eb); }
  100% { background: linear-gradient(135deg, #c026d3, #7c3aed, #2563eb); }
}
.nav-11__logo {
  font-weight: 800; font-size: 1.2rem; color: var(--text);
  text-decoration: none; letter-spacing: -0.02em; flex-shrink: 0;
}
.nav-11__logo em {
  font-style: normal;
  background: linear-gradient(90deg, #c026d3, #7c3aed);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-11__links { display: flex; list-style: none; gap: 0.25rem; flex: 1; }
.nav-11__links a {
  display: block; color: var(--muted); text-decoration: none;
  font-size: 0.875rem; font-weight: 600;
  padding: 0.45rem 0.9rem; border-radius: 10px;
  transition: color 0.2s, background 0.2s;
}
.nav-11__links a:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.nav-11__links a.is-active { color: var(--text); }
.nav-11__btn {
  padding: 0.55rem 1.3rem; border-radius: 10px;
  font-size: 0.875rem; font-weight: 700;
  cursor: pointer; border: none; font-family: inherit;
  background: linear-gradient(135deg, #c026d3, #7c3aed);
  color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}
.nav-11__btn:hover { opacity: 0.85; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(124,58,237,0.55); }

/* Mobile */
#nav-11-toggle { display: none; }
.nav-11__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; }
.nav-11__hamburger span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-11-toggle:checked ~ .nav-11__bar .nav-11__hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-11-toggle:checked ~ .nav-11__bar .nav-11__hamburger span:nth-child(2) { opacity: 0; }
#nav-11-toggle:checked ~ .nav-11__bar .nav-11__hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-11__mobile {
  display: none; flex-direction: column; gap: 0.25rem;
  background: rgba(15,5,30,0.95); backdrop-filter: blur(20px);
  padding: 0.75rem 1rem 1rem;
  border-radius: 0 0 12px 12px;
  margin-top: -8px; position: relative; z-index: -1;
  border: 1px solid rgba(124,58,237,0.2); border-top: none;
}
.nav-11__mobile a { display: block; color: rgba(245,240,255,0.7); text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 0.6rem 0.75rem; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.nav-11__mobile a:hover { background: rgba(124,58,237,0.15); color: var(--text); }
#nav-11-toggle:checked ~ .nav-11__mobile { display: flex; }
@media (max-width: 640px) {
  .nav-11__links, .nav-11__btn { display: none; }
  .nav-11__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-11__bar::before { animation: none; background: linear-gradient(135deg, #c026d3, #7c3aed, #2563eb); }
  .nav-11__btn, .nav-11__hamburger span { transition: none; }
}
```

### 12. CSS Centered Logo Navbar

**Type:** Pure CSS
**Description:** Classic agency-style navbar with centered logo, symmetrical link groups left and right, and outlined CTA button.

**HTML:**
```html
<div class="nav-12">
  <div class="nav-12__bar">
    <ul class="nav-12__left">
      <li><a href="#" class="is-active">Collections</a></li>
      <li><a href="#">Lookbook</a></li>
      <li><a href="#">Stores</a></li>
    </ul>
    <div class="nav-12__logo-wrap">
      <a href="#" class="nav-12__logo">AURORE</a>
      <span class="nav-12__logo-sub">Paris — since 1924</span>
    </div>
    <ul class="nav-12__right">
      <li><a href="#">About</a></li>
      <li><a href="#">Atelier</a></li>
      <li><a href="#" class="is-cta">Reserve</a></li>
    </ul>
  </div>
  <input type="checkbox" id="nav-12-toggle">
  <div class="nav-12__mobile-bar">
    <a href="#" class="nav-12__mobile-logo">AURORE</a>
    <label for="nav-12-toggle" class="nav-12__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-12__mobile-menu">
    <a href="#">Collections</a>
    <a href="#">Lookbook</a>
    <a href="#">Stores</a>
    <a href="#">About</a>
    <a href="#">Atelier</a>
    <a href="#" style="color:#c4a55a;">Reserve</a>
  </div>
</div>
<div style="padding:4rem 2.5rem; max-width:700px; margin:0 auto; text-align:center;">
  <h1 style="font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:600; letter-spacing:0.05em; margin-bottom:1rem; color:#1a1612;">Centered Logo Navbar</h1>
  <p style="color:#8c8070; font-size:1.05rem; line-height:1.8;">A luxury brand–style navbar using CSS Grid with <code>1fr auto 1fr</code> columns to perfectly center the logo while allowing left and right link groups to fill equal space.</p>
</div>
```

**CSS:**
```css
.nav-12, .nav-12 *, .nav-12 *::before, .nav-12 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-12 {
  --bg: #faf8f5;
  --text: #1a1612;
  --muted: #8c8070;
  --accent: #c4a55a;
  --border: #e8e0d4;
  font-family: 'Jost', sans-serif;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.nav-12__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 2.5rem;
  height: 72px;
}
.nav-12__left {
  display: flex; align-items: center; gap: 0;
  list-style: none;
}
.nav-12__left a {
  color: var(--muted); text-decoration: none;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 1rem; border-radius: 4px;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-12__left a:hover { color: var(--text); }
.nav-12__left a.is-active { color: var(--text); }
.nav-12__logo-wrap {
  text-align: center; padding: 0 1.5rem;
}
.nav-12__logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: 1.5rem;
  color: var(--text); text-decoration: none;
  letter-spacing: 0.08em;
  display: block;
  white-space: nowrap;
}
.nav-12__logo-sub {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-family: 'Jost', sans-serif; font-weight: 500;
  display: block; margin-top: -2px;
}
.nav-12__right {
  display: flex; align-items: center; justify-content: flex-end; gap: 0;
  list-style: none;
}
.nav-12__right a {
  color: var(--muted); text-decoration: none;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 1rem; border-radius: 4px;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-12__right a:hover { color: var(--text); }
.nav-12__right a.is-cta {
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: 4px; padding: 0.4rem 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.nav-12__right a.is-cta:hover { background: var(--accent); color: var(--bg); }
/* Mobile */
#nav-12-toggle { display: none; }
.nav-12__mobile-bar {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 0 1.5rem; height: 60px;
}
.nav-12__mobile-logo { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.3rem; color: var(--text); text-decoration: none; letter-spacing: 0.08em; }
.nav-12__hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; border: none; background: transparent; padding: 6px; }
.nav-12__hamburger span { display: block; width: 20px; height: 1px; background: var(--text); border-radius: 1px; transition: transform 0.3s, opacity 0.3s; }
#nav-12-toggle:checked ~ .nav-12__mobile-bar .nav-12__hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#nav-12-toggle:checked ~ .nav-12__mobile-bar .nav-12__hamburger span:nth-child(2) { opacity: 0; }
#nav-12-toggle:checked ~ .nav-12__mobile-bar .nav-12__hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-12__mobile-menu {
  display: none; flex-direction: column; gap: 0;
  padding: 0.75rem 1.5rem 1.25rem; border-top: 1px solid var(--border);
}
.nav-12__mobile-menu a { display: block; color: var(--muted); text-decoration: none; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.7rem 0.5rem; border-bottom: 1px solid rgba(232,224,212,0.5); transition: color 0.2s; }
.nav-12__mobile-menu a:last-child { border-bottom: none; }
.nav-12__mobile-menu a:hover { color: var(--text); }
#nav-12-toggle:checked ~ .nav-12__mobile-menu { display: flex; }
@media (max-width: 768px) {
  .nav-12__bar { display: none; }
  .nav-12__mobile-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-12__hamburger span { transition: none; }
}
```

### 13. CSS Icon Dot Indicator Navbar

**Type:** Pure CSS
**Description:** Clean minimal navbar where the active link is marked by an animated accent dot appearing below the text.

**HTML:**
```html
<div class="nav-13">
  <div class="nav-13__bar">
    <a href="#" class="nav-13__logo">
      <div class="nav-13__logo-dot"></div>
      Orbit
    </a>
    <div class="nav-13__sep"></div>
    <ul class="nav-13__links">
      <li>
        <a href="#" class="is-active">
          <span class="nav-13__icon">🏠</span>
          <span class="nav-13__label">Home</span>
        </a>
        <div class="nav-13__dot-ind"></div>
      </li>
      <li>
        <a href="#">
          <span class="nav-13__icon">🔍</span>
          <span class="nav-13__label">Explore</span>
        </a>
        <div class="nav-13__dot-ind"></div>
      </li>
      <li style="position:relative">
        <a href="#">
          <span class="nav-13__icon">🔔</span>
          <span class="nav-13__label">Alerts</span>
        </a>
        <div class="nav-13__badge"></div>
        <div class="nav-13__dot-ind"></div>
      </li>
      <li>
        <a href="#">
          <span class="nav-13__icon">💎</span>
          <span class="nav-13__label">Premium</span>
        </a>
        <div class="nav-13__dot-ind"></div>
      </li>
      <li>
        <a href="#">
          <span class="nav-13__icon">👤</span>
          <span class="nav-13__label">Profile</span>
        </a>
        <div class="nav-13__dot-ind"></div>
      </li>
    </ul>
    <div class="nav-13__sep"></div>
    <button class="nav-13__action">Upgrade</button>
  </div>
</div>
<input type="checkbox" id="nav-13-toggle">
<div class="nav-13__mobile-bar">
  <a href="#" class="nav-13__mobile-logo">
    <div class="nav-13__logo-dot"></div>
    Orbit
  </a>
  <label for="nav-13-toggle" class="nav-13__hamburger" aria-label="Toggle menu">
    <span></span><span></span><span></span>
  </label>
</div>
<div class="nav-13__mobile-menu">
  <a href="#">🏠 Home</a>
  <a href="#">🔍 Explore</a>
  <a href="#">🔔 Alerts</a>
  <a href="#">💎 Premium</a>
  <a href="#">👤 Profile</a>
</div>
<div style="padding:4rem 2rem; color:#f0e6ff; max-width:700px; margin:0 auto; text-align:center;">
  <h1 style="font-size:2.5rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:1rem;">Icon + Dot Indicator Navbar</h1>
  <p style="color:rgba(240,230,255,0.5); font-size:1rem; line-height:1.7; font-family:'Poppins',sans-serif;">Each icon tab shows a label below it. The active indicator is a small glowing dot beneath the active item, controlled by <code>:has(a.is-active)</code>. Notification badge uses a positioned dot.</p>
</div>
```

**CSS:**
```css
.nav-13, .nav-13 *, .nav-13 *::before, .nav-13 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-13 {
  --bg: rgba(20,8,40,0.85);
  --border: rgba(255,255,255,0.08);
  --text: #f0e6ff;
  --muted: rgba(240,230,255,0.4);
  --accent: #d946ef;
  --accent-glow: rgba(217,70,239,0.35);
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem;
  position: sticky; top: 0; z-index: 100;
}
.nav-13__bar {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.75rem 1.25rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.nav-13__logo {
  font-weight: 700; font-size: 1rem; color: var(--text);
  text-decoration: none; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.nav-13__logo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.nav-13__sep { width: 1px; height: 24px; background: var(--border); }
.nav-13__links {
  display: flex; list-style: none; gap: 0.25rem;
}
.nav-13__links li { position: relative; }
.nav-13__links a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border-radius: 12px;
  transition: background 0.2s;
  min-width: 56px;
}
.nav-13__links a:hover { background: rgba(255,255,255,0.05); }
.nav-13__icon { font-size: 1.1rem; line-height: 1; }
.nav-13__label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); transition: color 0.2s; }
.nav-13__links a:hover .nav-13__label { color: var(--text); }
.nav-13__links a.is-active { background: rgba(217,70,239,0.12); }
.nav-13__links a.is-active .nav-13__label { color: var(--accent); }
.nav-13__dot-ind {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  opacity: 0; transition: opacity 0.2s;
}
.nav-13__links a.is-active + .nav-13__dot-ind,
.nav-13__links li:has(a.is-active) .nav-13__dot-ind { opacity: 1; }

/* notif badge */
.nav-13__badge {
  position: absolute; top: 4px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #f43f5e;
  border: 2px solid #14082808;
}

.nav-13__action {
  padding: 0.5rem 1.1rem; border-radius: 12px;
  font-size: 0.8rem; font-weight: 700;
  cursor: pointer; border: none; font-family: inherit;
  background: linear-gradient(135deg, #d946ef, #9333ea);
  color: #fff;
  box-shadow: 0 2px 12px var(--accent-glow);
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.nav-13__action:hover { opacity: 0.85; transform: scale(0.97); }

/* Mobile */
#nav-13-toggle { display: none; }
.nav-13__mobile-bar {
  display: none; position: sticky; top: 0; z-index: 100;
  background: rgba(20,8,40,0.9); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem; height: 60px;
  align-items: center; justify-content: space-between;
}
.nav-13__mobile-logo { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav-13__hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; border: none; background: transparent; padding: 8px; }
.nav-13__hamburger span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-13-toggle:checked ~ .nav-13__mobile-bar .nav-13__hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-13-toggle:checked ~ .nav-13__mobile-bar .nav-13__hamburger span:nth-child(2) { opacity: 0; }
#nav-13-toggle:checked ~ .nav-13__mobile-bar .nav-13__hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-13__mobile-menu {
  display: none; flex-direction: column; gap: 0.25rem;
  background: rgba(20,8,40,0.97); backdrop-filter: blur(20px);
  padding: 0.75rem 1.25rem 1rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 60px; z-index: 99;
}
.nav-13__mobile-menu a { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.65rem 0.75rem; border-radius: 10px; transition: background 0.15s, color 0.15s; }
.nav-13__mobile-menu a:hover { background: rgba(255,255,255,0.05); color: var(--text); }
#nav-13-toggle:checked ~ .nav-13__mobile-menu { display: flex; }
@media (max-width: 640px) {
  .nav-13 { display: none; }
  .nav-13__mobile-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-13__links a, .nav-13__action, .nav-13__dot-ind { transition: none; }
  .nav-13__hamburger span { transition: none; }
}
```

### 14. CSS Full-Screen Overlay Menu

**Type:** CSS + JS
**Description:** Button-triggered full-viewport overlay menu with staggered link entrance animations and a blurred background.

**HTML:**
```html
<div class="nav-14" id="nav14">
  <div class="nav-14__bar">
    <a href="#" class="nav-14__logo">Forma</a>
    <button class="nav-14__toggle" id="nav14Toggle" aria-label="Toggle menu" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
  </div>
  <div class="nav-14__overlay" aria-hidden="true">
    <ul class="nav-14__nav-links">
      <li>
        <a href="#"><span class="nav-14__nav-num">01</span><span class="nav-14__nav-title">Studio</span><span class="nav-14__nav-arrow">→</span></a>
      </li>
      <li>
        <a href="#"><span class="nav-14__nav-num">02</span><span class="nav-14__nav-title">Work</span><span class="nav-14__nav-arrow">→</span></a>
      </li>
      <li>
        <a href="#"><span class="nav-14__nav-num">03</span><span class="nav-14__nav-title">Services</span><span class="nav-14__nav-arrow">→</span></a>
      </li>
      <li>
        <a href="#"><span class="nav-14__nav-num">04</span><span class="nav-14__nav-title">Journal</span><span class="nav-14__nav-arrow">→</span></a>
      </li>
      <li>
        <a href="#"><span class="nav-14__nav-num">05</span><span class="nav-14__nav-title">Contact</span><span class="nav-14__nav-arrow">→</span></a>
      </li>
    </ul>
    <div class="nav-14__overlay-footer">
      <div class="nav-14__social">
        <a href="#">Instagram</a>
        <a href="#">Behance</a>
        <a href="#">LinkedIn</a>
      </div>
      <div class="nav-14__contact">hello@<a href="#">forma.studio</a></div>
    </div>
  </div>
</div>
<div class="nav-14__content">
  <h1 style="font-family:'Bebas Neue',sans-serif; font-size:clamp(3rem,8vw,7rem); letter-spacing:0.04em; line-height:0.9; margin-bottom:2rem;">Full-Screen<br>Overlay Menu</h1>
  <p style="color:#6b5f4a; font-size:1.05rem; line-height:1.75; max-width:600px;">Click the hamburger icon to see the full-screen overlay slide down. The overlay covers the entire viewport and displays large typographic navigation links. Hover each link to see it accent-colored and shift right.</p>
</div>
```

**CSS:**
```css
.nav-14, .nav-14 *, .nav-14 *::before, .nav-14 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-14 {
  --bg: #f0ede8;
  --text: #1a1612;
  --overlay: #1a1612;
  --overlay-text: #f0ede8;
  --accent: #e85d26;
  font-family: 'DM Sans', sans-serif;
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
}
.nav-14__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 2rem;
  position: relative; z-index: 510;
  transition: color 0.4s;
}
.nav-14__logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; letter-spacing: 0.1em;
  text-decoration: none; color: var(--text);
  transition: color 0.4s;
}
.nav-14.is-open .nav-14__logo { color: var(--overlay-text); }
.nav-14__toggle {
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; padding: 8px; border: none; background: transparent;
  width: 44px; height: 44px; justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.nav-14__toggle:hover { background: rgba(0,0,0,0.06); }
.nav-14.is-open .nav-14__toggle:hover { background: rgba(255,255,255,0.1); }
.nav-14__toggle span {
  display: block; width: 28px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s, background 0.4s, width 0.3s;
}
.nav-14.is-open .nav-14__toggle span { background: var(--overlay-text); }
.nav-14.is-open .nav-14__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-14.is-open .nav-14__toggle span:nth-child(2) { opacity: 0; width: 0; }
.nav-14.is-open .nav-14__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Overlay */
.nav-14__overlay {
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 505;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
  padding: 100px 2.5rem 2.5rem;
}
.nav-14.is-open .nav-14__overlay { transform: translateY(0); }
.nav-14__nav-links {
  list-style: none; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.nav-14__nav-links li {
  overflow: hidden;
  border-bottom: 1px solid rgba(240,237,232,0.1);
}
.nav-14__nav-links li:first-child { border-top: 1px solid rgba(240,237,232,0.1); }
.nav-14__nav-links a {
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none;
  padding: 1.25rem 0;
  transition: padding-left 0.25s;
}
.nav-14__nav-links a:hover { padding-left: 1rem; }
.nav-14__nav-num {
  font-size: 0.7rem; font-weight: 600; color: rgba(240,237,232,0.3);
  letter-spacing: 0.1em; align-self: flex-start; padding-top: 0.5rem;
}
.nav-14__nav-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--overlay-text); letter-spacing: 0.04em;
  line-height: 1; flex: 1; padding: 0 1rem;
  transition: color 0.2s;
}
.nav-14__nav-links a:hover .nav-14__nav-title { color: var(--accent); }
.nav-14__nav-arrow { color: rgba(240,237,232,0.3); font-size: 1.5rem; transition: color 0.2s, transform 0.2s; }
.nav-14__nav-links a:hover .nav-14__nav-arrow { color: var(--accent); transform: translateX(4px); }
.nav-14__overlay-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1.5rem; border-top: 1px solid rgba(240,237,232,0.1);
}
.nav-14__social { display: flex; gap: 1.5rem; }
.nav-14__social a { color: rgba(240,237,232,0.4); text-decoration: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; }
.nav-14__social a:hover { color: var(--overlay-text); }
.nav-14__contact { color: rgba(240,237,232,0.4); font-size: 0.8rem; letter-spacing: 0.04em; }
.nav-14__contact a { color: var(--accent); text-decoration: none; }

.nav-14__content { padding-top: 80px; padding: 100px 2rem 2rem; color: #1a1612; }
@media (prefers-reduced-motion: reduce) {
  .nav-14__overlay { transition: none; }
  .nav-14__toggle span { transition: none; }
  .nav-14__nav-links a, .nav-14__logo, .nav-14__toggle span { transition: none; }
}
```

**JS:**
```js
const nav = document.getElementById('nav14');
  const btn = document.getElementById('nav14Toggle');
  btn.addEventListener('click', function() {
    const isOpen = nav.classList.toggle('is-open');
    btn.setAttribute('aria-expanded', isOpen);
    document.body.style.overflow = isOpen ? 'hidden' : '';
  });
```

### 15. CSS Morphing Search Expand Navbar

**Type:** CSS + JS
**Description:** Navbar with a search icon that morphs into a full-width input field using JS and CSS max-width transition.

**HTML:**
```html
<div class="nav-15" id="nav15">
  <input type="checkbox" id="nav-15-toggle">
  <div class="nav-15__inner">
    <a href="#" class="nav-15__logo">Synapse<span>.</span></a>
    <ul class="nav-15__links">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <div class="nav-15__search-wrap">
      <div class="nav-15__search" id="nav15Search">
        <button class="nav-15__search-btn" id="nav15SearchBtn" aria-label="Search">🔍</button>
        <input type="text" class="nav-15__search-input" id="nav15SearchInput" placeholder="Search docs, features...">
      </div>
    </div>
    <button class="nav-15__btn">Sign up</button>
    <label for="nav-15-toggle" class="nav-15__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-15__mobile">
    <a href="#">Home</a><a href="#">Features</a><a href="#">Pricing</a><a href="#">Docs</a><a href="#">Blog</a>
    <a href="#" style="color:#3b82f6; font-weight:700;">Sign up →</a>
  </div>
</div>
<div style="padding:4rem 2rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.04em; margin-bottom:1rem; color:#0f172a;">Morphing Search Expand Navbar</h1>
  <p style="color:#64748b; font-size:1.05rem; line-height:1.75;">Click the 🔍 icon to expand the search bar. It grows from 40px to 280px with a smooth <code>width</code> transition, the nav links fade out to give it room, and clicking outside collapses it.</p>
</div>
```

**CSS:**
```css
.nav-15, .nav-15 *, .nav-15 *::before, .nav-15 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-15 {
  --bg: #fff;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #3b82f6;
  --accent-light: #eff6ff;
  --border: #e2e8f0;
  font-family: 'Figtree', sans-serif;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.nav-15__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 2rem;
  display: flex; align-items: center;
  height: 64px; gap: 1.5rem;
  position: relative;
}
.nav-15__logo {
  font-weight: 800; font-size: 1.2rem; color: var(--text);
  text-decoration: none; letter-spacing: -0.03em; flex-shrink: 0;
}
.nav-15__logo span { color: var(--accent); }
.nav-15__links {
  display: flex; list-style: none; gap: 0.25rem; flex: 1;
  transition: opacity 0.3s, visibility 0.3s;
}
.nav-15__links a {
  color: var(--muted); text-decoration: none; font-size: 0.875rem; font-weight: 600;
  padding: 0.45rem 0.9rem; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.nav-15__links a:hover { color: var(--text); background: var(--accent-light); }
.nav-15__links a.is-active { color: var(--accent); }
/* Search */
.nav-15__search-wrap {
  display: flex; align-items: center; gap: 0.5rem; margin-left: auto;
}
.nav-15__search {
  display: flex; align-items: center;
  background: var(--accent-light);
  border: 1.5px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  width: 40px;
  transition: width 0.4s cubic-bezier(.4,0,.2,1), border-color 0.3s, background 0.3s;
}
.nav-15__search.is-expanded {
  width: 280px;
  border-color: var(--accent);
  background: #fff;
}
.nav-15__search-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--accent); font-size: 1rem;
  border-radius: 10px;
  transition: color 0.2s;
}
.nav-15__search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--text); padding-right: 0.75rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.nav-15__search.is-expanded .nav-15__search-input { opacity: 1; pointer-events: all; }
.nav-15__search-input::placeholder { color: var(--muted); }
/* When expanded, hide links */
.nav-15.is-searching .nav-15__links { opacity: 0; visibility: hidden; pointer-events: none; }

.nav-15__btn {
  padding: 0.45rem 1.1rem; border-radius: 8px;
  font-size: 0.875rem; font-weight: 700; cursor: pointer; border: none;
  font-family: inherit; background: var(--accent); color: #fff;
  transition: background 0.2s, transform 0.15s; flex-shrink: 0;
}
.nav-15__btn:hover { background: #2563eb; transform: translateY(-1px); }

/* Mobile */
#nav-15-toggle { display: none; }
.nav-15__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; }
.nav-15__hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(2) { opacity: 0; }
#nav-15-toggle:checked ~ .nav-15__inner .nav-15__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-15__mobile { display: none; flex-direction: column; padding: 0.75rem 1.5rem 1rem; border-top: 1px solid var(--border); gap: 0.25rem; }
.nav-15__mobile a { display: block; color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 0.6rem 0.5rem; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.nav-15__mobile a:hover { background: var(--accent-light); color: var(--accent); }
#nav-15-toggle:checked ~ .nav-15__mobile { display: flex; }
@media (max-width: 768px) {
  .nav-15__links, .nav-15__btn { display: none; }
  .nav-15__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-15__search, .nav-15__links, .nav-15__search-input { transition: none; }
  .nav-15__btn, .nav-15__hamburger span { transition: none; }
}
```

**JS:**
```js
const nav = document.getElementById('nav15');
  const search = document.getElementById('nav15Search');
  const btn = document.getElementById('nav15SearchBtn');
  const input = document.getElementById('nav15SearchInput');
  let open = false;
  function openSearch() {
    open = true;
    search.classList.add('is-expanded');
    nav.classList.add('is-searching');
    setTimeout(() => input.focus(), 350);
  }
  function closeSearch() {
    open = false;
    search.classList.remove('is-expanded');
    nav.classList.remove('is-searching');
    input.value = '';
  }
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    open ? closeSearch() : openSearch();
  });
  document.addEventListener('click', function(e) {
    if (open && !search.contains(e.target)) closeSearch();
  });
  input.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeSearch();
  });
```

### 16. CSS Floating Island Multi-Segment Navbar

**Type:** Pure CSS
**Description:** Detached floating pill navbar with three independently styled segments for branding, links, and actions.

**HTML:**
```html
<div class="nav-16">
  <div class="nav-16__island">
    <a href="#" class="nav-16__logo">
      <div class="nav-16__logo-badge"></div>
      Canopy
    </a>
  </div>
  <div class="nav-16__island">
    <ul class="nav-16__links">
      <li><a href="#" class="is-active">Explore</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Sustainability</a></li>
      <li><a href="#">Journal</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
  <div class="nav-16__island nav-16__cta-island">
    <span class="nav-16__cta-text">Join 12k+ members</span>
    <button class="nav-16__cta-btn">Get started</button>
  </div>
</div>
<input type="checkbox" id="nav-16-toggle">
<div class="nav-16__mobile-bar">
  <a href="#" class="nav-16__mobile-logo">
    <div style="width:8px;height:8px;border-radius:50%;background:#6abf40;"></div>
    Canopy
  </a>
  <label for="nav-16-toggle" class="nav-16__hamburger" aria-label="Toggle menu">
    <span></span><span></span><span></span>
  </label>
</div>
<div class="nav-16__mobile-menu">
  <a href="#">Explore</a>
  <a href="#">Products</a>
  <a href="#">Sustainability</a>
  <a href="#">Journal</a>
  <a href="#">About</a>
  <a href="#" style="color:#4a8c2a; font-weight:700; margin-top:0.25rem;">Get started →</a>
</div>
<div style="padding:4rem 2rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.04em; margin-bottom:1rem; color:#1c2b0e;">Floating Island Multi-Segment Navbar</h1>
  <p style="color:#5a7040; font-size:1.05rem; line-height:1.75;">Three separate floating pill-shaped islands: logo, nav links, and CTA. Each uses <code>backdrop-filter</code> glass effect independently. The islands sit inside a flex row with <code>justify-content: space-between</code>.</p>
</div>
```

**CSS:**
```css
.nav-16, .nav-16 *, .nav-16 *::before, .nav-16 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-16 {
  --text: #1c2b0e;
  --muted: rgba(28,43,14,0.45);
  --accent: #4a8c2a;
  --bg: rgba(255,255,255,0.85);
  --border: rgba(28,43,14,0.1);
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 1.25rem 1.5rem;
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
/* Each section is its own floating island */
.nav-16__island {
  background: var(--bg);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
  display: flex; align-items: center;
}
.nav-16__logo {
  font-weight: 800; font-size: 1rem; color: var(--text);
  text-decoration: none; letter-spacing: -0.02em;
  padding: 0.6rem 1.3rem;
  display: flex; align-items: center; gap: 8px;
}
.nav-16__logo-badge {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6abf40;
  box-shadow: 0 0 0 3px rgba(106,191,64,0.2);
}
.nav-16__links {
  display: flex; list-style: none; gap: 0;
  padding: 0.35rem;
}
.nav-16__links a {
  display: block; color: var(--muted); text-decoration: none;
  font-size: 0.85rem; font-weight: 600;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-16__links a:hover { color: var(--text); background: rgba(74,140,42,0.08); }
.nav-16__links a.is-active { color: var(--accent); background: rgba(74,140,42,0.12); }
.nav-16__cta-island { gap: 0.5rem; padding: 0.35rem 0.35rem 0.35rem 1rem; }
.nav-16__cta-text { font-size: 0.8rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.nav-16__cta-btn {
  padding: 0.5rem 1.1rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer; border: none; font-family: inherit;
  background: var(--accent); color: #fff;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(74,140,42,0.35);
}
.nav-16__cta-btn:hover { background: #3a6e20; transform: scale(0.97); }

/* Mobile */
#nav-16-toggle { display: none; }
.nav-16__mobile-bar {
  display: none; position: sticky; top: 0; z-index: 100;
  padding: 1rem 1.25rem;
  align-items: center; justify-content: space-between;
}
.nav-16__mobile-logo { font-weight: 800; font-size: 1rem; color: #1c2b0e; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav-16__hamburger {
  display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 0.5rem 0.75rem; border: none;
  background: rgba(255,255,255,0.85); border-radius: 999px;
  border: 1px solid rgba(28,43,14,0.1);
  backdrop-filter: blur(12px);
}
.nav-16__hamburger span { display: block; width: 18px; height: 1.5px; background: #1c2b0e; border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-16-toggle:checked ~ .nav-16__mobile-bar .nav-16__hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-16-toggle:checked ~ .nav-16__mobile-bar .nav-16__hamburger span:nth-child(2) { opacity: 0; }
#nav-16-toggle:checked ~ .nav-16__mobile-bar .nav-16__hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-16__mobile-menu {
  display: none; flex-direction: column; gap: 0.25rem;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(20px);
  margin: 0 1.25rem; border-radius: 16px;
  padding: 0.75rem 0.75rem 1rem;
  border: 1px solid rgba(28,43,14,0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  position: sticky; top: 70px; z-index: 99;
}
.nav-16__mobile-menu a { display: block; color: rgba(28,43,14,0.6); text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 0.6rem 0.75rem; border-radius: 10px; transition: background 0.15s, color 0.15s; }
.nav-16__mobile-menu a:hover { background: rgba(74,140,42,0.08); color: #4a8c2a; }
#nav-16-toggle:checked ~ .nav-16__mobile-menu { display: flex; }
@media (max-width: 768px) {
  .nav-16 { display: none; }
  .nav-16__mobile-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-16__links a, .nav-16__cta-btn { transition: none; }
  .nav-16__hamburger span { transition: none; }
}
```

### 17. CSS Step Progress Wizard Navbar

**Type:** Pure CSS
**Description:** Multi-step wizard header showing step numbers, titles, connector lines, and completion state in a horizontal flow.

**HTML:**
```html
<div class="nav-17">
  <div class="nav-17__top">
    <a href="#" class="nav-17__logo">Form<span>Flow</span></a>
    <a href="#" class="nav-17__help">💬 Need help?</a>
  </div>
  <div class="nav-17__steps">
    <div class="nav-17__step is-done">
      <div class="nav-17__step-content">
        <div class="nav-17__step-circle">✓</div>
        <div class="nav-17__step-info">
          <div class="nav-17__step-label">Step 1</div>
          <div class="nav-17__step-title">Account</div>
        </div>
      </div>
    </div>
    <div class="nav-17__connector"></div>
    <div class="nav-17__step is-done">
      <div class="nav-17__step-content">
        <div class="nav-17__step-circle">✓</div>
        <div class="nav-17__step-info">
          <div class="nav-17__step-label">Step 2</div>
          <div class="nav-17__step-title">Profile</div>
        </div>
      </div>
    </div>
    <div class="nav-17__connector"></div>
    <div class="nav-17__step is-active">
      <div class="nav-17__step-content">
        <div class="nav-17__step-circle">3</div>
        <div class="nav-17__step-info">
          <div class="nav-17__step-label">Step 3</div>
          <div class="nav-17__step-title">Payment</div>
        </div>
      </div>
    </div>
    <div class="nav-17__connector"></div>
    <div class="nav-17__step">
      <div class="nav-17__step-content">
        <div class="nav-17__step-circle">4</div>
        <div class="nav-17__step-info">
          <div class="nav-17__step-label">Step 4</div>
          <div class="nav-17__step-title">Review</div>
        </div>
      </div>
    </div>
    <div class="nav-17__connector"></div>
    <div class="nav-17__step">
      <div class="nav-17__step-content">
        <div class="nav-17__step-circle">5</div>
        <div class="nav-17__step-info">
          <div class="nav-17__step-label">Step 5</div>
          <div class="nav-17__step-title">Confirm</div>
        </div>
      </div>
    </div>
  </div>
  <div class="nav-17__summary">
    <span class="nav-17__summary-text">Step 3 of 5 — Payment details</span>
    <div class="nav-17__progress-bar-wrap">
      <div class="nav-17__progress-bar"></div>
    </div>
    <button class="nav-17__save">Save & exit</button>
  </div>
</div>
<div style="padding:3rem 2rem; max-width:600px; margin:0 auto;">
  <h1 style="font-size:2.2rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:1rem; color:#1e2337;">Step Progress Wizard Navbar</h1>
  <p style="color:#8891a8; font-size:1.05rem; line-height:1.75;">Used for multi-step forms and checkout flows. Completed steps show a green checkmark, the active step is purple-filled, and connector lines animate to filled when the previous step is done. Built entirely with CSS.</p>
</div>
```

**CSS:**
```css
.nav-17, .nav-17 *, .nav-17 *::before, .nav-17 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-17 {
  --bg: #fff;
  --border: #e5e8f0;
  --text: #1e2337;
  --muted: #8891a8;
  --accent: #5b4ef8;
  --done: #22c55e;
  --done-light: #f0fdf4;
  --accent-light: #f0eeff;
  font-family: 'Nunito Sans', sans-serif;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  position: sticky; top: 0; z-index: 100;
}
.nav-17__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--border);
}
.nav-17__logo { font-weight: 800; font-size: 1.1rem; color: var(--text); text-decoration: none; letter-spacing: -0.02em; }
.nav-17__logo span { color: var(--accent); }
.nav-17__help { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: color 0.2s; }
.nav-17__help:hover { color: var(--text); }
/* Steps */
.nav-17__steps {
  display: flex; align-items: center;
  padding: 1rem 2rem;
  overflow-x: auto; scrollbar-width: none;
}
.nav-17__steps::-webkit-scrollbar { display: none; }
.nav-17__step {
  display: flex; align-items: center;
  flex-shrink: 0;
}
.nav-17__step-content {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-17__step-content:hover { background: #f5f6fa; }
.nav-17__step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
  border: 2px solid var(--border);
  color: var(--muted); background: var(--bg);
}
.nav-17__step.is-done .nav-17__step-circle {
  background: var(--done); border-color: var(--done); color: #fff;
  font-size: 0.9rem;
}
.nav-17__step.is-active .nav-17__step-circle {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.nav-17__step-info { display: flex; flex-direction: column; gap: 1px; }
.nav-17__step-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.nav-17__step.is-done .nav-17__step-label { color: var(--done); }
.nav-17__step.is-active .nav-17__step-label { color: var(--accent); }
.nav-17__step-title { font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.nav-17__step.is-done .nav-17__step-title,
.nav-17__step.is-active .nav-17__step-title { color: var(--text); }
/* Connector line */
.nav-17__connector {
  flex: 1; min-width: 2rem; max-width: 5rem;
  height: 2px; margin: 0 0.25rem;
  background: var(--border);
  position: relative; border-radius: 2px;
}
.nav-17__connector::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--done);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s;
}
.nav-17__step.is-done + .nav-17__connector::after { transform: scaleX(1); }
/* Progress summary */
.nav-17__summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 2rem;
  background: var(--accent-light);
  border-top: 1px solid rgba(91,78,248,0.1);
}
.nav-17__summary-text { font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.nav-17__progress-bar-wrap { flex: 1; max-width: 200px; height: 6px; background: rgba(91,78,248,0.15); border-radius: 3px; margin: 0 1rem; }
.nav-17__progress-bar { height: 100%; border-radius: 3px; background: var(--accent); width: 40%; transition: width 0.5s; }
.nav-17__save { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-decoration: none; cursor: pointer; background: none; border: none; font-family: inherit; transition: color 0.2s; }
.nav-17__save:hover { color: var(--text); }

@media (max-width: 640px) {
  .nav-17__step-info { display: none; }
  .nav-17__connector { min-width: 1rem; max-width: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-17__connector::after, .nav-17__progress-bar, .nav-17__step-circle { transition: none; }
}
```

### 18. CSS Vertical Rail Sidebar Navbar

**Type:** Pure CSS
**Description:** Persistent left-rail sidebar with icon + label vertical links, section dividers, and a collapsible bottom profile area.

**HTML:**
```html
<div class="nav-18">
  <input type="checkbox" id="nav-18-toggle">
  <div class="nav-18__layout">
    <nav class="nav-18__rail">
      <div class="nav-18__rail-top">
        <label for="nav-18-toggle" class="nav-18__expand-btn" aria-label="Expand sidebar">⇥</label>
        <a href="#" class="nav-18__brand">Code<span>Lab</span></a>
      </div>
      <div class="nav-18__nav">
        <div class="nav-18__section-label">Main</div>
        <a href="#" class="nav-18__item is-active">
          <span class="nav-18__icon">⬡</span>
          <span class="nav-18__item-label">Overview</span>
        </a>
        <a href="#" class="nav-18__item">
          <span class="nav-18__icon">📊</span>
          <span class="nav-18__item-label">Analytics</span>
          <span class="nav-18__item-badge">New</span>
        </a>
        <a href="#" class="nav-18__item">
          <span class="nav-18__icon">🚀</span>
          <span class="nav-18__item-label">Deployments</span>
        </a>
        <a href="#" class="nav-18__item">
          <span class="nav-18__icon">⚙️</span>
          <span class="nav-18__item-label">Functions</span>
        </a>
        <div class="nav-18__section-label">Resources</div>
        <a href="#" class="nav-18__item">
          <span class="nav-18__icon">🗄️</span>
          <span class="nav-18__item-label">Storage</span>
        </a>
        <a href="#" class="nav-18__item">
          <span class="nav-18__icon">🔐</span>
          <span class="nav-18__item-label">Auth</span>
        </a>
        <a href="#" class="nav-18__item">
          <span class="nav-18__icon">📋</span>
          <span class="nav-18__item-label">Logs</span>
          <span class="nav-18__item-badge">24</span>
        </a>
        <div class="nav-18__section-label">Account</div>
        <a href="#" class="nav-18__item">
          <span class="nav-18__icon">💳</span>
          <span class="nav-18__item-label">Billing</span>
        </a>
        <a href="#" class="nav-18__item">
          <span class="nav-18__icon">🔧</span>
          <span class="nav-18__item-label">Settings</span>
        </a>
      </div>
      <div class="nav-18__rail-bottom">
        <div class="nav-18__avatar-wrap">
          <div class="nav-18__avatar">
            <div class="nav-18__avatar-img">VR</div>
          </div>
          <div class="nav-18__user-info">
            <div class="nav-18__user-name">Vimal Raj</div>
            <div class="nav-18__user-role">Pro plan</div>
          </div>
        </div>
      </div>
    </nav>
    <div class="nav-18__content">
      <h1 style="font-size:2rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:1rem; color:#f59e0b;">Vertical Rail Navbar</h1>
      <p style="color:rgba(232,234,242,0.55); font-size:1rem; line-height:1.75; max-width:560px;">Click the ⇥ icon to expand the sidebar from icon-only 64px to full 220px. Labels, badges, section headers, and user info all transition in using <code>opacity</code> and <code>width</code>. Pure CSS checkbox toggle.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.nav-18, .nav-18 *, .nav-18 *::before, .nav-18 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-18 {
  --bg: #16181f;
  --text: #e8eaf2;
  --muted: rgba(232,234,242,0.4);
  --accent: #f59e0b;
  --border: rgba(255,255,255,0.07);
  --collapsed-w: 64px;
  --expanded-w: 220px;
  font-family: 'Inter', sans-serif;
}
#nav-18-toggle { display: none; }
.nav-18__rail {
  width: var(--collapsed-w);
  min-height: 100vh;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: width 0.3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
}
#nav-18-toggle:checked ~ .nav-18__layout .nav-18__rail { width: var(--expanded-w); }
.nav-18__rail-top {
  height: 56px; display: flex; align-items: center;
  padding: 0 0 0 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-18__expand-btn {
  width: 64px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; background: transparent;
  color: var(--muted); font-size: 1.1rem;
  transition: color 0.2s, background 0.2s;
}
.nav-18__expand-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav-18__brand {
  font-weight: 700; font-size: 0.95rem; color: var(--text);
  text-decoration: none; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden;
  opacity: 0; width: 0;
  transition: opacity 0.2s, width 0.3s;
}
.nav-18__brand span { color: var(--accent); }
#nav-18-toggle:checked ~ .nav-18__layout .nav-18__brand { opacity: 1; width: auto; }
.nav-18__nav { flex: 1; padding: 0.75rem 0; overflow-y: auto; scrollbar-width: none; }
.nav-18__nav::-webkit-scrollbar { display: none; }
.nav-18__section-label {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); padding: 0.75rem 0 0.35rem;
  white-space: nowrap; overflow: hidden; opacity: 0;
  transition: opacity 0.2s;
  padding-left: 1.25rem;
}
#nav-18-toggle:checked ~ .nav-18__layout .nav-18__section-label { opacity: 1; }
.nav-18__item {
  display: flex; align-items: center; gap: 0;
  text-decoration: none;
  height: 44px; padding: 0;
  color: var(--muted);
  border-radius: 0; position: relative;
  transition: color 0.2s;
  overflow: hidden;
}
.nav-18__item:hover { color: var(--text); }
.nav-18__item.is-active { color: var(--accent); }
.nav-18__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;
}
.nav-18__item:hover { background: rgba(255,255,255,0.03); }
.nav-18__icon {
  width: 64px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.nav-18__item-label {
  font-size: 0.875rem; font-weight: 500;
  white-space: nowrap; overflow: hidden;
  opacity: 0; width: 0;
  transition: opacity 0.2s, width 0.3s;
}
#nav-18-toggle:checked ~ .nav-18__layout .nav-18__item-label { opacity: 1; width: auto; }
.nav-18__item-badge {
  margin-left: auto; margin-right: 1rem;
  background: var(--accent); color: #1a1206;
  font-size: 0.6rem; font-weight: 800; padding: 1px 5px; border-radius: 10px;
  opacity: 0; transition: opacity 0.2s; white-space: nowrap;
}
#nav-18-toggle:checked ~ .nav-18__layout .nav-18__item-badge { opacity: 1; }
.nav-18__rail-bottom {
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-18__avatar-wrap {
  display: flex; align-items: center; gap: 0;
  padding: 0.5rem 0; height: 52px;
  overflow: hidden;
}
.nav-18__avatar {
  width: 64px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-18__avatar-img {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
}
.nav-18__user-info { white-space: nowrap; opacity: 0; transition: opacity 0.2s; }
#nav-18-toggle:checked ~ .nav-18__layout .nav-18__user-info { opacity: 1; }
.nav-18__user-name { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.nav-18__user-role { font-size: 0.7rem; color: var(--muted); }

/* Content */
.nav-18__layout { display: flex; flex: 1; min-width: 0; }
.nav-18__content {
  flex: 1; padding: 2rem; color: var(--text);
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nav-18__rail, .nav-18__brand, .nav-18__item-label, .nav-18__item-badge,
  .nav-18__section-label, .nav-18__user-info { transition: none; }
}
```

### 19. CSS Announcement Bar Dual Navbar

**Type:** CSS + JS
**Description:** Three-layer header: a dismissible announcement strip, a secondary utility bar, and the primary navigation row.

**HTML:**
```html
<div class="nav-19">
  <div class="nav-19__announce">
    <span class="nav-19__announce-emoji">🎉</span>
    <span>Summer sale — up to 40% off everything. <a href="#">Shop now →</a></span>
    <button class="nav-19__announce-close" id="announceDismiss" aria-label="Dismiss">×</button>
  </div>
  <div class="nav-19__utility">
    <div class="nav-19__utility-left">
      <span>📍 Free shipping on orders over $50</span>
      <span>🔒 Secure checkout</span>
    </div>
    <div class="nav-19__utility-right">
      <a href="#">Help</a>
      <a href="#">Track order</a>
      <a href="#">English ▾</a>
    </div>
  </div>
  <input type="checkbox" id="nav-19-toggle">
  <div class="nav-19__main">
    <a href="#" class="nav-19__logo">Shop<span>ify</span></a>
    <ul class="nav-19__links">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">New arrivals</a></li>
      <li><a href="#">Collections</a></li>
      <li><a href="#">Sale</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <div class="nav-19__actions">
      <button class="nav-19__cart">
        🛒 Cart
        <span class="nav-19__cart-badge">3</span>
      </button>
      <button class="nav-19__btn">Sign in</button>
    </div>
    <label for="nav-19-toggle" class="nav-19__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-19__mobile">
    <a href="#">Home</a><a href="#">New arrivals</a><a href="#">Collections</a>
    <a href="#">Sale</a><a href="#">About</a>
    <a href="#" style="color:#7c3aed; font-weight:700;">Sign in →</a>
  </div>
</div>
<div style="padding:3rem 2rem; max-width:700px; margin:0 auto;">
  <h1 style="font-size:2.5rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:1rem; color:#111;">Announcement Bar + Dual Navbar</h1>
  <p style="color:#6b7280; font-size:1.05rem; line-height:1.75;">Three stacked bars: a dismissible announcement strip, a utility info row, and the main navigation. The dismiss button uses JavaScript to hide the announcement bar. Common e-commerce pattern.</p>
</div>
```

**CSS:**
```css
.nav-19, .nav-19 *, .nav-19 *::before, .nav-19 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-19 {
  --bg: #fff;
  --text: #111;
  --muted: #6b7280;
  --accent: #7c3aed;
  --announce-bg: #7c3aed;
  --announce-text: #fff;
  --border: #f0f0f0;
  font-family: 'Rubik', sans-serif;
  position: sticky; top: 0; z-index: 100;
}
/* Announcement bar */
.nav-19__announce {
  background: var(--announce-bg);
  color: var(--announce-text);
  text-align: center;
  padding: 0.5rem 2.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  line-height: 1.4;
}
.nav-19__announce a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.nav-19__announce a:hover { opacity: 0.8; }
.nav-19__announce-close {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.2); border: none; cursor: pointer;
  color: #fff; font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.nav-19__announce-close:hover { background: rgba(255,255,255,0.35); }
.nav-19__announce-emoji { font-size: 1rem; }
/* Utility bar */
.nav-19__utility {
  background: #f9f9fa;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.3rem 2rem;
  font-size: 0.75rem; color: var(--muted); font-weight: 500;
}
.nav-19__utility-left { display: flex; gap: 1.25rem; }
.nav-19__utility-left span { display: flex; align-items: center; gap: 4px; }
.nav-19__utility-right { display: flex; gap: 1.25rem; align-items: center; }
.nav-19__utility-right a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
.nav-19__utility-right a:hover { color: var(--text); }
/* Main nav */
.nav-19__main {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 2rem;
  height: 64px;
  gap: 2rem;
}
.nav-19__logo {
  font-weight: 800; font-size: 1.3rem; color: var(--text);
  text-decoration: none; letter-spacing: -0.03em; flex-shrink: 0;
}
.nav-19__logo span { color: var(--accent); }
.nav-19__links {
  display: flex; list-style: none; gap: 0; flex: 1;
}
.nav-19__links a {
  display: block; color: var(--muted); text-decoration: none;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.5rem 0.9rem; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav-19__links a:hover { color: var(--text); background: #f4f4f8; }
.nav-19__links a.is-active { color: var(--accent); font-weight: 600; }
.nav-19__actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-19__cart {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 0.875rem; font-weight: 600;
  cursor: pointer; border: none; background: transparent;
  font-family: inherit; padding: 0.45rem 0.75rem; border-radius: 8px;
  transition: color 0.15s, background 0.15s; position: relative;
}
.nav-19__cart:hover { color: var(--text); background: #f4f4f8; }
.nav-19__cart-badge {
  position: absolute; top: 2px; right: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 0.6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.nav-19__btn {
  padding: 0.45rem 1.1rem; border-radius: 8px;
  font-size: 0.875rem; font-weight: 700; cursor: pointer; border: none;
  font-family: inherit; background: var(--accent); color: #fff;
  transition: background 0.2s, transform 0.15s;
}
.nav-19__btn:hover { background: #6d28d9; transform: translateY(-1px); }
/* Mobile */
#nav-19-toggle { display: none; }
.nav-19__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; margin-left: auto; }
.nav-19__hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
#nav-19-toggle:checked ~ .nav-19__main .nav-19__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-19-toggle:checked ~ .nav-19__main .nav-19__hamburger span:nth-child(2) { opacity: 0; }
#nav-19-toggle:checked ~ .nav-19__main .nav-19__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-19__mobile { display: none; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1.5rem 1rem; border-top: 1px solid var(--border); background: var(--bg); }
.nav-19__mobile a { display: block; color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.6rem 0.5rem; border-radius: 6px; transition: background 0.15s, color 0.15s; }
.nav-19__mobile a:hover { background: #f4f4f8; color: var(--text); }
#nav-19-toggle:checked ~ .nav-19__mobile { display: flex; }
@media (max-width: 768px) {
  .nav-19__links, .nav-19__actions, .nav-19__utility { display: none; }
  .nav-19__hamburger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-19__btn, .nav-19__links a, .nav-19__hamburger span { transition: none; }
}
```

**JS:**
```js
document.getElementById('announceDismiss').addEventListener('click', function() {
  this.closest('.nav-19__announce').style.display = 'none';
});
```

### 20. CSS Scroll Spy Active Highlight Navbar

**Type:** CSS + JS
**Description:** IntersectionObserver scroll spy that moves a springy pill indicator to the active section link with a reading progress bar.

**HTML:**
```html
<div class="nav-20" id="nav20">
  <input type="checkbox" class="nav-20__toggle" id="nav-20-toggle">
  <div class="nav-20__bar">
    <a href="#" class="nav-20__logo">
      <div class="nav-20__logo-mark">✦</div>
      Prism
    </a>
    <ul class="nav-20__links" id="nav20Links">
      <div class="nav-20__indicator" id="nav20Indicator"></div>
      <li><a href="#sec-about" class="is-active"><span class="nav-20__dot"></span>About</a></li>
      <li><a href="#sec-work"><span class="nav-20__dot"></span>Work</a></li>
      <li><a href="#sec-services"><span class="nav-20__dot"></span>Services</a></li>
      <li><a href="#sec-team"><span class="nav-20__dot"></span>Team</a></li>
      <li><a href="#sec-contact"><span class="nav-20__dot"></span>Contact</a></li>
    </ul>
    <div class="nav-20__actions">
      <button class="nav-20__ghost">Log in</button>
      <button class="nav-20__cta">Get started →</button>
    </div>
    <label for="nav-20-toggle" class="nav-20__hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="nav-20__progress"><div class="nav-20__progress-fill" id="nav20Progress"></div></div>
  <div class="nav-20__mobile" id="nav20Mobile">
    <a href="#sec-about" class="is-active">About</a>
    <a href="#sec-work">Work</a>
    <a href="#sec-services">Services</a>
    <a href="#sec-team">Team</a>
    <a href="#sec-contact">Contact</a>
    <div class="nav-20__mobile-actions">
      <button class="m-ghost">Log in</button>
      <button class="m-cta">Get started →</button>
    </div>
  </div>
</div>

<!-- Page sections for scroll spy demo -->
<div style="max-width:720px; margin:0 auto; padding:2rem 2rem 6rem;">
  <section id="sec-about" style="padding:3.5rem 0 3rem; border-bottom:1px solid #e5e0d8;">
    <p style="font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#b09050; margin-bottom:0.75rem;">About</p>
    <h2 style="font-size:2.4rem; font-weight:800; letter-spacing:-0.04em; color:#0d0d0d; margin-bottom:1rem; line-height:1.15;">Scroll down to watch<br>the navbar update</h2>
    <p style="color:#6b6560; font-size:1.05rem; line-height:1.75; max-width:560px;">As you scroll through sections below, the active link shifts with a springy pill indicator. A reading progress bar also tracks how far through the page you are.</p>
  </section>
  <section id="sec-work" style="padding:3.5rem 0 3rem; border-bottom:1px solid #e5e0d8;">
    <p style="font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#b09050; margin-bottom:0.75rem;">Work</p>
    <h2 style="font-size:2rem; font-weight:800; letter-spacing:-0.04em; color:#0d0d0d; margin-bottom:1rem;">Selected projects</h2>
    <p style="color:#6b6560; font-size:1.05rem; line-height:1.75; max-width:560px;">The scroll spy uses IntersectionObserver to watch each section. When a section crosses the 25% threshold from the top, its matching nav link becomes active.</p>
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem;">
      <div style="background:#0d0d0d; border-radius:12px; height:140px; display:grid; place-items:center; color:#f0c14b; font-weight:700; font-size:1.1rem;">Project A</div>
      <div style="background:#1a1a2e; border-radius:12px; height:140px; display:grid; place-items:center; color:#a78bfa; font-weight:700; font-size:1.1rem;">Project B</div>
    </div>
  </section>
  <section id="sec-services" style="padding:3.5rem 0 3rem; border-bottom:1px solid #e5e0d8;">
    <p style="font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#b09050; margin-bottom:0.75rem;">Services</p>
    <h2 style="font-size:2rem; font-weight:800; letter-spacing:-0.04em; color:#0d0d0d; margin-bottom:1rem;">What we do</h2>
    <p style="color:#6b6560; font-size:1.05rem; line-height:1.75; max-width:560px;">The pill indicator moves with a springy CSS cubic-bezier bounce, giving it a physical feel without any animation libraries. Width transitions smoothly between links of different text lengths.</p>
    <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin-top:2rem;">
      <div style="background:#f0c14b18; border:1px solid #f0c14b40; border-radius:10px; padding:1.25rem; font-weight:600; color:#0d0d0d; font-size:0.9rem;">Strategy</div>
      <div style="background:#f0c14b18; border:1px solid #f0c14b40; border-radius:10px; padding:1.25rem; font-weight:600; color:#0d0d0d; font-size:0.9rem;">Design</div>
      <div style="background:#f0c14b18; border:1px solid #f0c14b40; border-radius:10px; padding:1.25rem; font-weight:600; color:#0d0d0d; font-size:0.9rem;">Build</div>
    </div>
  </section>
  <section id="sec-team" style="padding:3.5rem 0 3rem; border-bottom:1px solid #e5e0d8;">
    <p style="font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#b09050; margin-bottom:0.75rem;">Team</p>
    <h2 style="font-size:2rem; font-weight:800; letter-spacing:-0.04em; color:#0d0d0d; margin-bottom:1rem;">Meet the crew</h2>
    <p style="color:#6b6560; font-size:1.05rem; line-height:1.75; max-width:560px;">Four people, one shared obsession: making software feel inevitable. We're small by design — it keeps us fast, honest, and close to the work.</p>
    <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem; margin-top:2rem;">
      <div style="background:#f8f6f2; border:1px solid #e5e0d8; border-radius:10px; padding:1rem; text-align:center;">
        <div style="width:40px;height:40px;border-radius:50%;background:#0d0d0d;margin:0 auto 0.5rem;display:grid;place-items:center;color:#f0c14b;font-weight:800;">A</div>
        <div style="font-weight:600;font-size:0.8rem;color:#0d0d0d;">Alex</div>
        <div style="font-size:0.72rem;color:#9e9890;">Design</div>
      </div>
      <div style="background:#f8f6f2; border:1px solid #e5e0d8; border-radius:10px; padding:1rem; text-align:center;">
        <div style="width:40px;height:40px;border-radius:50%;background:#0d0d0d;margin:0 auto 0.5rem;display:grid;place-items:center;color:#f0c14b;font-weight:800;">J</div>
        <div style="font-weight:600;font-size:0.8rem;color:#0d0d0d;">Jamie</div>
        <div style="font-size:0.72rem;color:#9e9890;">Dev</div>
      </div>
      <div style="background:#f8f6f2; border:1px solid #e5e0d8; border-radius:10px; padding:1rem; text-align:center;">
        <div style="width:40px;height:40px;border-radius:50%;background:#0d0d0d;margin:0 auto 0.5rem;display:grid;place-items:center;color:#f0c14b;font-weight:800;">S</div>
        <div style="font-weight:600;font-size:0.8rem;color:#0d0d0d;">Sam</div>
        <div style="font-size:0.72rem;color:#9e9890;">Strategy</div>
      </div>
      <div style="background:#f8f6f2; border:1px solid #e5e0d8; border-radius:10px; padding:1rem; text-align:center;">
        <div style="width:40px;height:40px;border-radius:50%;background:#0d0d0d;margin:0 auto 0.5rem;display:grid;place-items:center;color:#f0c14b;font-weight:800;">R</div>
        <div style="font-weight:600;font-size:0.8rem;color:#0d0d0d;">Riley</div>
        <div style="font-size:0.72rem;color:#9e9890;">Growth</div>
      </div>
    </div>
  </section>
  <section id="sec-contact" style="padding:3.5rem 0 3rem;">
    <p style="font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#b09050; margin-bottom:0.75rem;">Contact</p>
    <h2 style="font-size:2rem; font-weight:800; letter-spacing:-0.04em; color:#0d0d0d; margin-bottom:1rem;">Let's talk</h2>
    <p style="color:#6b6560; font-size:1.05rem; line-height:1.75; max-width:560px;">Scroll all the way here and the progress bar is full. The scroll spy updates both the desktop pill and mobile link states simultaneously from one observer loop.</p>
    <button style="margin-top:1.5rem; background:#0d0d0d; color:#f0c14b; border:none; border-radius:999px; padding:0 28px; height:46px; font-family:'Bricolage Grotesque',sans-serif; font-size:0.95rem; font-weight:700; cursor:pointer; letter-spacing:-0.01em;">Start a project →</button>
  </section>
</div>
```

**CSS:**
```css
.nav-20, .nav-20 *, .nav-20 *::before, .nav-20 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.nav-20 {
  --bg: #0d0d0d;
  --text: #e8e4dc;
  --text-muted: rgba(232,228,220,0.5);
  --accent: #f0c14b;
  --accent-bg: rgba(240,193,75,0.12);
  --pill-h: 38px;
  font-family: 'Bricolage Grotesque', sans-serif;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-20__bar {
  background: var(--bg);
  padding: 0 2rem;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-20__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.nav-20__logo-mark {
  width: 30px; height: 30px;
  background: var(--accent);
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 14px;
  color: #0d0d0d;
}

.nav-20__links {
  display: flex;
  align-items: center;
  list-style: none;
  position: relative;
  gap: 2px;
}

/* The sliding highlight pill */
.nav-20__indicator {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  height: var(--pill-h);
  background: var(--accent-bg);
  border: 1px solid rgba(240,193,75,0.25);
  border-radius: 999px;
  transition: left 0.35s cubic-bezier(0.34,1.56,0.64,1), width 0.35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  z-index: 0;
}

.nav-20__links li {
  position: relative;
  z-index: 1;
}

.nav-20__links a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0 14px;
  height: var(--pill-h);
  border-radius: 999px;
  transition: color 0.2s;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.nav-20__links a .nav-20__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.25s, transform 0.25s;
}
.nav-20__links a.is-active {
  color: var(--accent);
}
.nav-20__links a.is-active .nav-20__dot {
  opacity: 1;
  transform: scale(1);
}
.nav-20__links a:hover:not(.is-active) {
  color: var(--text);
}

.nav-20__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-20__cta {
  background: var(--accent);
  color: #0d0d0d;
  border: none;
  border-radius: 999px;
  padding: 0 18px;
  height: 36px;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: -0.01em;
}
.nav-20__cta:hover { opacity: 0.88; transform: scale(1.03); }
.nav-20__ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 0 16px;
  height: 36px;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  letter-spacing: -0.01em;
}
.nav-20__ghost:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }

/* Progress bar */
.nav-20__progress {
  height: 2px;
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.nav-20__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* Mobile toggle */
.nav-20__toggle { display: none; }
.nav-20__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.nav-20__hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, width 0.3s;
  transform-origin: center;
}
.nav-20__toggle:checked ~ .nav-20__bar .nav-20__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-20__toggle:checked ~ .nav-20__bar .nav-20__hamburger span:nth-child(2) { opacity: 0; width: 0; }
.nav-20__toggle:checked ~ .nav-20__bar .nav-20__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-20__mobile {
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0.75rem 1rem 1rem;
}
.nav-20__mobile a {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.nav-20__mobile a:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.nav-20__mobile a.is-active { color: var(--accent); }
.nav-20__mobile a.is-active::after { content: '●'; font-size: 0.5rem; }
.nav-20__mobile-actions {
  display: flex; gap: 8px; padding: 0.75rem 0.75rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 0.5rem;
}
.nav-20__mobile-actions button {
  flex: 1; height: 38px; border-radius: 8px;
  font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.nav-20__mobile-actions .m-cta { background: var(--accent); color: #0d0d0d; border: none; }
.nav-20__mobile-actions .m-ghost { background: transparent; color: var(--text-muted); border: 1px solid rgba(255,255,255,0.12); }

.nav-20__toggle:checked ~ .nav-20__mobile { display: flex; }

@media (max-width: 680px) {
  .nav-20__links, .nav-20__actions { display: none !important; }
  .nav-20__hamburger { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-20__indicator { transition: none; }
  .nav-20__links a, .nav-20__links a .nav-20__dot,
  .nav-20__cta, .nav-20__ghost,
  .nav-20__hamburger span,
  .nav-20__progress-fill { transition: none; }
}
```

**JS:**
```js
const links = document.querySelectorAll('#nav20Links a');
  const mobileLinks = document.querySelectorAll('#nav20Mobile a:not(.m-ghost):not(.m-cta)');
  const indicator = document.getElementById('nav20Indicator');
  const linksContainer = document.getElementById('nav20Links');
  const progress = document.getElementById('nav20Progress');

  function moveIndicator(activeLink) {
    if (!activeLink || !indicator) return;
    const linkRect = activeLink.getBoundingClientRect();
    const containerRect = linksContainer.getBoundingClientRect();
    indicator.style.left = (linkRect.left - containerRect.left) + 'px';
    indicator.style.width = linkRect.width + 'px';
  }

  function setActive(sectionId) {
    links.forEach(function(a) {
      const active = a.getAttribute('href') === '#' + sectionId;
      a.classList.toggle('is-active', active);
      if (active) moveIndicator(a);
    });
    mobileLinks.forEach(function(a) {
      a.classList.toggle('is-active', a.getAttribute('href') === '#' + sectionId);
    });
  }

  // Scroll progress
  function updateProgress() {
    const scrollTop = window.scrollY;
    const docH = document.documentElement.scrollHeight - window.innerHeight;
    const pct = docH > 0 ? Math.min(100, (scrollTop / docH) * 100) : 0;
    progress.style.width = pct + '%';
  }

  // IntersectionObserver scroll spy
  const sections = document.querySelectorAll('#sec-about, #sec-work, #sec-services, #sec-team, #sec-contact');
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) setActive(entry.target.id);
    });
  }, { rootMargin: '-25% 0px -60% 0px', threshold: 0 });

  sections.forEach(function(s) { observer.observe(s); });
  window.addEventListener('scroll', updateProgress, { passive: true });

  // Init indicator on first active link
  const firstActive = linksContainer ? linksContainer.querySelector('a.is-active') : null;
  if (firstActive) setTimeout(function() { moveIndicator(firstActive); }, 50);
  window.addEventListener('resize', function() {
    const cur = linksContainer ? linksContainer.querySelector('a.is-active') : null;
    if (cur) moveIndicator(cur);
  });
```

---
## 12 CSS Retro UI Designs

URL: https://codefronts.com/design-styles/css-retro-designs/
Description: 12 hand-coded retro / vintage UI designs covering the era-aesthetics search demand actually targets — pixel-faithful Windows 95 desktop in pure CSS (no framework dependency), CRT terminal with scanlines and boot reveal, 8-bit pixel-art buttons via box-shadow, neo-brutalism component toggle board, skeuomorphic cassette player, vaporwave scene with masked gradients, retro arcade game UI kit, working ASCII art bash interpreter, Web 1.0 / 90s guestbook with hit counter and webring, Y2K aqua-gloss kit, retro clothing-store storefront, and a draggable desktop-portfolio template. 10 truly pure-CSS, 2 with optional vanilla JS for the interactive bash + window-drag. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.
Demo count: 12

### 01. Retro Windows 95 UI (CSS Template)

**Type:** Pure CSS
**Description:** A pixel-faithful Windows 95 desktop rebuilt in pure CSS — raised/inset bevels via split border-colors, the conic-gradient Start orb, a checkbox-hack Start menu, draggable-looking title bars, dotted focus rings and a working taskbar with tray clock. Pixelify Sans + VT323 on the classic teal hatched wallpaper.

**HTML:**
```html
<div class="ret-01">
  <input type="checkbox" id="ret-01-start" class="ret-01__chk">

  <div class="ret-01__desktop">
    <div class="ret-01__icons">
      <div class="ret-01__icon"><i>🖥️</i><span>My Computer</span></div>
      <div class="ret-01__icon"><i>📁</i><span>Documents</span></div>
      <div class="ret-01__icon"><i>🗑️</i><span>Recycle Bin</span></div>
      <div class="ret-01__icon"><i>🌐</i><span>Network</span></div>
    </div>
  </div>

  <div class="ret-01__win">
    <div class="ret-01__title">
      <span class="ret-01__tl"><b>📝</b> Welcome.txt — Notepad</span>
      <span class="ret-01__btns">
        <label class="ret-01__tb" for="ret-01-start">_</label>
        <span class="ret-01__tb">▢</span>
        <span class="ret-01__tb">✕</span>
      </span>
    </div>
    <div class="ret-01__menu"><span><u>F</u>ile</span><span><u>E</u>dit</span><span><u>S</u>earch</span><span><u>H</u>elp</span></div>
    <div class="ret-01__body">
      <h2>System Properties</h2>
      A faithful reconstruction of the 1995 desktop metaphor — raised bevels,
      dotted focus rings and the conic Start orb, all in pure CSS.
      <div class="ret-01__inset">
        C:\&gt; The grey box bevel uses split border-colors:<br>
        white top-left, charcoal bottom-right.<br>
        Click <b>Start</b> to pop the menu — checkbox hack, zero JS.
        <div class="ret-01__prog"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="ret-01__row">
        <span class="ret-01__push ret-01__push--def">OK</span>
        <span class="ret-01__push">Cancel</span>
        <span class="ret-01__push">Apply</span>
      </div>
    </div>
  </div>

  <div class="ret-01__win ret-01__win--alt">
    <div class="ret-01__title">
      <span class="ret-01__tl"><b>⚠️</b> Error</span>
      <span class="ret-01__btns"><span class="ret-01__tb">✕</span></span>
    </div>
    <div class="ret-01__body" style="text-align:center">
      <div style="font-size:40px">⚠️</div>
      This program has performed an<br>illegal operation of pure nostalgia.
      <div class="ret-01__row" style="justify-content:center">
        <span class="ret-01__push ret-01__push--def">Close</span>
        <span class="ret-01__push">Details »</span>
      </div>
    </div>
  </div>

  <div class="ret-01__startmenu">
    <div class="ret-01__spine">Codefronts&nbsp;95</div>
    <div class="ret-01__slist">
      <div class="ret-01__sitem"><i>📑</i>Programs</div>
      <div class="ret-01__sitem"><i>📂</i>Documents</div>
      <div class="ret-01__sitem"><i>⚙️</i>Settings</div>
      <div class="ret-01__sitem"><i>🔍</i>Find</div>
      <div class="ret-01__sitem"><i>❓</i>Help</div>
      <div class="ret-01__sep"></div>
      <div class="ret-01__sitem"><i>🔌</i>Shut Down…</div>
    </div>
  </div>

  <div class="ret-01__taskbar">
    <label class="ret-01__start" for="ret-01-start"><i>W</i>Start</label>
    <div class="ret-01__tasks">
      <div class="ret-01__task ret-01__task--active">📝 Welcome.txt</div>
      <div class="ret-01__task">⚠️ Error</div>
    </div>
    <div class="ret-01__tray">🔊 📅 12:00 PM</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Pixelify+Sans:wght@400;700&display=swap');

.ret-01, .ret-01 *, .ret-01 *::before, .ret-01 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-01 ::selection{background:#000080;color:#fff}
.ret-01 ::-moz-selection{background:#000080;color:#fff}

.ret-01{
  --teal:#008080;
  --gray:#c0c0c0;
  --dark:#808080;
  --darker:#404040;
  --navy:#000080;
  --white:#fdfdfd;
  --black:#0a0a0a;
  font-family:'Pixelify Sans',sans-serif;
  background:var(--teal);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  color:var(--black);
}
/* desktop icons */
.ret-01__desktop{position:absolute;inset:0;bottom:46px;padding:14px}
.ret-01__icons{display:flex;flex-direction:column;gap:22px;width:84px}
.ret-01__icon{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;width:84px;text-align:center}
.ret-01__icon i{width:46px;height:42px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,#dfe7ef,#9aa9bb);border:1px solid var(--darker);box-shadow:inset 1px 1px 0 #fff}
.ret-01__icon span{color:#fff;font-size:14px;text-shadow:1px 1px 0 #000;padding:1px 3px;line-height:1.1}
.ret-01__icon:hover span{background:var(--navy)}

/* WINDOW with the classic raised bevel: light top-left, dark bottom-right */
.ret-01__win{
  position:absolute;top:64px;left:120px;width:min(560px,calc(100% - 40px));
  background:var(--gray);
  border:2px solid;
  border-color:var(--white) var(--darker) var(--darker) var(--white);
  box-shadow:1px 1px 0 #000;
}
.ret-01__win--alt{top:300px;left:auto;right:30px;width:min(330px,calc(100% - 40px));display:none}
@media(min-width:880px){.ret-01__win--alt{display:block}}
.ret-01__title{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(90deg,var(--navy),#1084d0);
  color:#fff;padding:4px 4px 4px 8px;font-weight:700;font-size:15px;letter-spacing:.02em;
}
.ret-01__title .ret-01__tl{display:flex;align-items:center;gap:7px}
.ret-01__title .ret-01__tl b{font-size:16px}
.ret-01__btns{display:flex;gap:3px}
.ret-01__tb{width:20px;height:18px;background:var(--gray);border:1px solid;
  border-color:var(--white) var(--darker) var(--darker) var(--white);
  display:grid;place-items:center;font-size:11px;font-weight:700;cursor:pointer;color:#000;font-family:'VT323',monospace}
.ret-01__tb:active{border-color:var(--darker) var(--white) var(--white) var(--darker)}
.ret-01__menu{display:flex;gap:0;background:var(--gray);padding:2px 4px;font-size:14px;border-bottom:1px solid var(--dark)}
.ret-01__menu span{padding:2px 8px;cursor:pointer}
.ret-01__menu span u{text-decoration:underline}
.ret-01__menu span:hover{background:var(--navy);color:#fff}
.ret-01__body{padding:16px;font-family:'VT323',monospace;font-size:19px;line-height:1.35}
.ret-01__inset{
  background:var(--white);border:2px solid;
  border-color:var(--darker) var(--white) var(--white) var(--darker);
  padding:14px;margin-top:12px;min-height:120px
}
.ret-01__body h2{font-family:'Pixelify Sans';font-size:20px;margin-bottom:6px}
.ret-01__row{display:flex;gap:10px;margin-top:14px;justify-content:flex-end}
.ret-01__push{
  font-family:'Pixelify Sans';font-size:15px;padding:6px 18px;background:var(--gray);cursor:pointer;
  border:2px solid;border-color:var(--white) var(--darker) var(--darker) var(--white);
  box-shadow:1px 1px 0 #000
}
.ret-01__push:active{border-color:var(--darker) var(--white) var(--white) var(--darker);box-shadow:none}
.ret-01__push--def{outline:1px dotted #000;outline-offset:-5px}
.ret-01__prog{height:22px;background:var(--white);border:2px solid;border-color:var(--darker) var(--white) var(--white) var(--darker);margin-top:10px;display:flex;gap:2px;padding:2px}
.ret-01__prog i{flex:0 0 14px;background:var(--navy)}
.ret-01__prog i:nth-child(n+9){background:transparent}

/* taskbar */
.ret-01__taskbar{
  position:absolute;left:0;right:0;bottom:0;height:42px;
  background:var(--gray);border-top:2px solid var(--white);
  display:flex;align-items:center;gap:6px;padding:4px 6px;
}
.ret-01__start{
  display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px;
  padding:3px 12px 3px 7px;background:var(--gray);cursor:pointer;
  border:2px solid;border-color:var(--white) var(--darker) var(--darker) var(--white);
}
.ret-01__start i{width:22px;height:22px;display:grid;place-items:center;
  background:conic-gradient(from 90deg,#f00 0 25%,#0f0 0 50%,#00f 0 75%,#ff0 0);font-size:0;border-radius:2px}
.ret-01__start:active,.ret-01.is-open .ret-01__start{border-color:var(--darker) var(--white) var(--white) var(--darker)}
.ret-01__tasks{display:flex;gap:5px;flex:1;overflow:hidden}
.ret-01__task{padding:3px 12px;font-size:14px;background:var(--gray);border:2px solid;border-color:var(--white) var(--darker) var(--darker) var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.ret-01__task--active{border-color:var(--darker) var(--white) var(--white) var(--darker);font-weight:700}
.ret-01__tray{display:flex;align-items:center;gap:8px;padding:3px 10px;font-family:'VT323',monospace;font-size:17px;
  border:2px solid;border-color:var(--darker) var(--white) var(--white) var(--darker)}

/* START MENU via checkbox hack */
.ret-01__chk{position:absolute;opacity:0;pointer-events:none}
.ret-01__startmenu{
  position:absolute;left:6px;bottom:46px;width:212px;z-index:30;
  background:var(--gray);border:2px solid;border-color:var(--white) var(--darker) var(--darker) var(--white);
  box-shadow:2px 2px 0 #000;
  display:flex;transform:scaleY(0);transform-origin:bottom;transition:transform .14s steps(4);
}
.ret-01__chk:checked ~ .ret-01__taskbar .ret-01__start{border-color:var(--darker) var(--white) var(--white) var(--darker)}
.ret-01__chk:checked ~ .ret-01__startmenu{transform:scaleY(1)}
.ret-01__spine{width:30px;background:linear-gradient(180deg,var(--navy),#4040a0);writing-mode:vertical-rl;transform:rotate(180deg);
  color:#fff;font-weight:700;text-align:center;padding:8px 0;font-size:16px;letter-spacing:.1em}
.ret-01__slist{flex:1;padding:3px}
.ret-01__sitem{display:flex;align-items:center;gap:9px;padding:6px 10px;font-size:15px;cursor:pointer}
.ret-01__sitem i{font-size:18px}
.ret-01__sitem:hover{background:var(--navy);color:#fff}
.ret-01__sep{height:2px;margin:3px 2px;border-top:1px solid var(--dark);border-bottom:1px solid var(--white)}

@media(max-width:680px){.ret-01__win{left:14px;width:calc(100% - 28px)}.ret-01__icons{display:none}}
@media (prefers-reduced-motion: reduce){.ret-01__startmenu{transition:none}}
```

### 02. Retro Futuristic Terminal UI Code

**Type:** Pure CSS
**Description:** A boot-sequence CRT terminal with curved glass: layered scanlines, rolling interlace, vignette curvature, phosphor glow and a flicker keyframe, plus staggered line-by-line teletype reveal and a blinking block cursor. Share Tech Mono / Orbitron on deep green, ANSI-coloured output and ASCII headline — zero JS.

**HTML:**
```html
<div class="ret-02">
  <div class="ret-02__crt">
    <div class="ret-02__glow"></div>
    <div class="ret-02__scr">
      <div class="ret-02__head">
        <span>[ <b>NEXUS//OS</b> v9.84 ]</span>
        <span class="dim">NODE 0xFA · SECURE LINK · 1984 baud</span>
      </div>

      <div class="ret-02__ascii">  _   _ _____ __  __ _   _ ____
 | \ | | ____|  \/  | | | / ___|
 |  \| |  _| | |\/| | | | \___ \
 | |\  | |___| |  | | |_| |___) |
 |_| \_|_____|_|  |_|\___/|____/</div>

      <span class="ret-02__l"><span class="dim">user@nexus:~$</span> ./boot --diagnostic</span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] mounting /dev/neural0 ............ <span class="cy">linked</span></span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] decrypting handshake <span class="amb">RSA-4096</span> ... <span class="cy">verified</span></span>
      <span class="ret-02__l">[<span class="ret-02__ok">OK</span>] uplink to <span class="amb">ORBITAL-7</span> .......... <span class="cy">stable</span></span>
      <span class="ret-02__l"><span class="dim">     phosphor calibration</span></span>
      <span class="ret-02__l">     <span class="ret-02__bar">▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰</span><span class="dim">▱▱</span>  92%</span>
      <span class="ret-02__l"> </span>
      <span class="ret-02__l"><span class="amb">WARNING:</span> reality buffer overflow in sector 7G.</span>
      <span class="ret-02__l"><span class="dim">// the green glow is real phosphor decay, faked in pure CSS:</span></span>
      <span class="ret-02__l"><span class="dim">// scanlines + vignette + flicker keyframes, layered on glass.</span></span>
      <span class="ret-02__l">Awaiting input<span class="dim"> — type a command, jack in.</span></span>

      <div class="ret-02__prompt">
        <b>user@nexus:~$</b><span class="ret-02__cursor"></span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@500;700;900&display=swap');

.ret-02, .ret-02 *, .ret-02 *::before, .ret-02 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-02 ::selection{background:#00ff9c;color:#02110a}
.ret-02 ::-moz-selection{background:#00ff9c;color:#02110a}

.ret-02{
  --bg:#030806;
  --green:#27ff9c;
  --dim:#13895a;
  --amber:#ffb000;
  --cyan:#21e6ff;
  --scan:rgba(0,0,0,.28);
  font-family:'Share Tech Mono',monospace;
  background:radial-gradient(120% 120% at 50% 0%,#06170f,#020604 70%);
  color:var(--green);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  padding:clamp(14px,3vw,40px);
}
/* the CRT glass: curvature via radial vignette + scanlines + flicker */
.ret-02__crt{
  position:relative;height:calc(100vh - clamp(28px,6vw,80px));
  border-radius:26px;padding:clamp(16px,3vw,38px);
  background:linear-gradient(180deg,rgba(39,255,156,.04),transparent),var(--bg);
  box-shadow:inset 0 0 120px rgba(39,255,156,.12),inset 0 0 30px rgba(0,0,0,.9),0 0 0 3px #0b1f16,0 0 0 9px #050d09,0 30px 80px rgba(0,0,0,.8);
  overflow:hidden;
}
.ret-02__crt::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:8;
  background:repeating-linear-gradient(0deg,transparent 0 2px,var(--scan) 2px 4px);mix-blend-mode:multiply;
  animation:ret-02-roll 8s linear infinite}
@keyframes ret-02-roll{to{background-position:0 200px}}
.ret-02__crt::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;border-radius:26px;
  background:radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.7)}
.ret-02__glow{position:absolute;inset:0;z-index:7;pointer-events:none;animation:ret-02-flick 5s infinite;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(39,255,156,.03),transparent)}
@keyframes ret-02-flick{0%,96%,100%{opacity:1}97%{opacity:.78}98%{opacity:.92}}

.ret-02__scr{position:relative;z-index:6;height:100%;overflow-y:auto;font-size:clamp(13px,1.6vw,16px);line-height:1.7;text-shadow:0 0 6px rgba(39,255,156,.6)}
.ret-02__scr::-webkit-scrollbar{width:8px}
.ret-02__scr::-webkit-scrollbar-thumb{background:var(--dim)}

.ret-02__head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-bottom:1px dashed var(--dim);padding-bottom:10px;margin-bottom:14px;color:var(--dim)}
.ret-02__head b{font-family:'Orbitron';color:var(--green);letter-spacing:.2em;font-weight:900;font-size:1.1em}
.ret-02__l{display:block;white-space:pre-wrap;word-break:break-word;opacity:0;transform:translateY(2px);animation:ret-02-type .01s forwards}
.ret-02__l:nth-child(1){animation-delay:.1s}
.ret-02__l:nth-child(2){animation-delay:.35s}
.ret-02__l:nth-child(3){animation-delay:.6s}
.ret-02__l:nth-child(4){animation-delay:.85s}
.ret-02__l:nth-child(5){animation-delay:1.15s}
.ret-02__l:nth-child(6){animation-delay:1.5s}
.ret-02__l:nth-child(7){animation-delay:1.8s}
.ret-02__l:nth-child(8){animation-delay:2.1s}
.ret-02__l:nth-child(9){animation-delay:2.45s}
.ret-02__l:nth-child(10){animation-delay:2.8s}
.ret-02__l:nth-child(11){animation-delay:3.1s}
@keyframes ret-02-type{to{opacity:1;transform:none}}
.ret-02 .amb{color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.6)}
.ret-02 .cy{color:var(--cyan);text-shadow:0 0 6px rgba(33,230,255,.6)}
.ret-02 .dim{color:var(--dim);text-shadow:none}
.ret-02__ok{color:#02110a;background:var(--green);padding:0 6px}
.ret-02__bar{display:inline-block;color:var(--green)}

.ret-02__ascii{color:var(--dim);font-size:clamp(8px,1.2vw,12px);line-height:1.15;white-space:pre;margin:6px 0 10px}

.ret-02__prompt{display:flex;align-items:center;gap:8px;margin-top:14px;border-top:1px dashed var(--dim);padding-top:12px}
.ret-02__prompt b{color:var(--amber)}
.ret-02__cursor{width:10px;height:1.1em;background:var(--green);box-shadow:0 0 8px var(--green);animation:ret-02-blink 1s steps(2) infinite}
@keyframes ret-02-blink{50%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .ret-02__crt::before,.ret-02__glow,.ret-02__cursor,.ret-02__l{animation:none !important;opacity:1 !important;transform:none !important}
}
```

### 03. 8 Bit Pixel Art UI Elements & Buttons

**Type:** Pure CSS
**Description:** An 8-bit RPG HUD kit drawn entirely with layered box-shadows — no border-radius, no images: chunky pixel panels, a heart-based HP row, a stepped XP bar, coin counter, type-on dialogue box and depressible 3D pixel buttons. Press Start 2P + VT323 on a 16-colour dusk palette with a CRT grid.

**HTML:**
```html
<div class="ret-03">
  <div class="ret-03__stage">

    <div class="ret-03__panel">
      <h2>★ QUEST START ★</h2>
      <div class="ret-03__dialog" style="margin-top:18px">
        <div class="ret-03__avatar">🧙</div>
        <div class="ret-03__speech">
          <div class="ret-03__name">OLD WIZARD</div>
          <div class="ret-03__type">Every border here is pure box-shadow...</div>
        </div>
      </div>
    </div>

    <div class="ret-03__panel">
      <div class="ret-03__hud">
        <div>
          <div class="ret-03__name" style="color:var(--red);font-size:10px;margin-bottom:8px">HP</div>
          <div class="ret-03__hearts">
            <span>❤️</span><span>❤️</span><span>❤️</span><span class="e">🤍</span><span class="e">🤍</span>
          </div>
        </div>
        <div class="ret-03__xp">
          <small>EXP &nbsp;LV.7 → LV.8</small>
          <div class="ret-03__xpbar"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        </div>
        <div class="ret-03__coins">🪙 x 1280</div>
      </div>
    </div>

    <div class="ret-03__btns">
      <span class="ret-03__btn">⚔️ ATTACK</span>
      <span class="ret-03__btn ret-03__btn--g">🛡️ DEFEND</span>
      <span class="ret-03__btn ret-03__btn--b">🎒 ITEMS</span>
    </div>

    <div class="ret-03__blink">▶ PRESS START ◀</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

.ret-03, .ret-03 *, .ret-03 *::before, .ret-03 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-03 ::selection{background:#ffd23f;color:#1a1c2c}
.ret-03 ::-moz-selection{background:#ffd23f;color:#1a1c2c}

.ret-03{
  --bg:#1a1c2c;
  --bg2:#29366f;
  --ink:#f4f4f4;
  --red:#ef476f;
  --green:#5fe36c;
  --blue:#3fa7ff;
  --gold:#ffd23f;
  --shadow:#0d0e1a;
  font-family:'Press Start 2P',monospace;
  background:var(--bg);
  background-image:
    linear-gradient(rgba(63,167,255,.05) 2px,transparent 2px),
    linear-gradient(90deg,rgba(63,167,255,.05) 2px,transparent 2px);
  background-size:32px 32px;
  color:var(--ink);
  min-height:100vh;
  image-rendering:pixelated;
  padding:clamp(14px,4vw,46px);
  display:flex;align-items:center;justify-content:center;
}
.ret-03__stage{width:100%;max-width:760px;display:grid;gap:22px}

/* the chunky pixel border, drawn with layered box-shadows (no border-radius) */
.ret-03__panel{
  background:var(--bg2);
  padding:22px;position:relative;
  box-shadow:
    0 -6px 0 0 var(--ink), 0 6px 0 0 var(--shadow),
    -6px 0 0 0 var(--ink), 6px 0 0 0 var(--shadow),
    0 0 0 6px var(--ink),
    -6px -6px 0 6px var(--ink), 6px 6px 0 6px var(--shadow);
}
.ret-03__panel h2{font-size:13px;line-height:1.8;color:var(--gold);text-shadow:2px 2px 0 var(--shadow)}
.ret-03__panel p{font-family:'VT323',monospace;font-size:21px;line-height:1.4;margin-top:14px;color:#cfd3f0}

/* dialog with portrait + typed text */
.ret-03__dialog{display:flex;gap:18px;align-items:flex-start}
.ret-03__avatar{
  width:64px;height:64px;flex:0 0 64px;background:var(--shadow);
  display:grid;place-items:center;font-size:30px;
  box-shadow:0 0 0 4px var(--ink),0 0 0 8px var(--shadow);
}
.ret-03__speech{flex:1}
.ret-03__speech .ret-03__name{color:var(--green);font-size:11px}
.ret-03__type{font-family:'VT323',monospace;font-size:22px;line-height:1.35;margin-top:10px;overflow:hidden;white-space:nowrap;border-right:3px solid var(--gold);
  width:0;animation:ret-03-typing 3s steps(38) infinite alternate, ret-03-cur .6s steps(2) infinite}
@keyframes ret-03-typing{0%,8%{width:0}92%,100%{width:30ch}}
@keyframes ret-03-cur{50%{border-color:transparent}}

/* HUD: hearts + XP bar + coins */
.ret-03__hud{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.ret-03__hearts{display:flex;gap:5px;font-size:20px}
.ret-03__hearts span{filter:drop-shadow(2px 2px 0 var(--shadow))}
.ret-03__hearts .e{opacity:.25}
.ret-03__coins{font-size:11px;color:var(--gold);text-shadow:2px 2px 0 var(--shadow);display:flex;align-items:center;gap:8px}
.ret-03__xp{flex:1 1 200px;min-width:160px}
.ret-03__xp small{font-family:'VT323';font-size:18px;color:#9aa3d8;display:block;margin-bottom:5px}
.ret-03__xpbar{height:18px;background:var(--shadow);box-shadow:0 0 0 3px var(--ink);display:flex;padding:3px;gap:3px}
.ret-03__xpbar i{flex:0 0 16px;background:var(--green);box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.ret-03__xpbar i:nth-child(n+8){background:#3a3f5e;box-shadow:none}

/* pixel buttons that depress on hover/active */
.ret-03__btns{display:flex;gap:16px;flex-wrap:wrap}
.ret-03__btn{
  font-family:'Press Start 2P';font-size:11px;color:var(--ink);cursor:pointer;
  padding:14px 20px;background:var(--red);position:relative;
  box-shadow:0 6px 0 0 #a8264a, 0 0 0 4px var(--shadow);
  transition:transform .05s steps(2),box-shadow .05s steps(2);user-select:none;
}
.ret-03__btn--g{background:var(--green);box-shadow:0 6px 0 0 #2f9b3a,0 0 0 4px var(--shadow);color:var(--shadow)}
.ret-03__btn--b{background:var(--blue);box-shadow:0 6px 0 0 #1f6fb0,0 0 0 4px var(--shadow)}
.ret-03__btn:hover{transform:translateY(2px)}
.ret-03__btn:active{transform:translateY(6px);box-shadow:0 0 0 0 #a8264a,0 0 0 4px var(--shadow)}
.ret-03__btn--g:active{box-shadow:0 0 0 0 #2f9b3a,0 0 0 4px var(--shadow)}
.ret-03__btn--b:active{box-shadow:0 0 0 0 #1f6fb0,0 0 0 4px var(--shadow)}

.ret-03__blink{font-family:'Press Start 2P';font-size:10px;color:var(--gold);text-align:center;animation:ret-03-bl 1s steps(2) infinite}
@keyframes ret-03-bl{50%{opacity:0}}

@media(max-width:520px){.ret-03__type{animation:none;width:auto;white-space:normal;border:0}}
@media (prefers-reduced-motion: reduce){.ret-03__type,.ret-03__blink{animation:none !important;width:auto;white-space:normal;border:0}}
```

### 04. Neo Brutalist UI Components Examples

**Type:** Pure CSS
**Description:** A neo-brutalist component board: 3px black strokes, blunt offset hard-shadows that grow on hover, clashing primaries, an inset-shadow text field, a stepped checkbox-hack toggle, badges, stat tiles and a punch-down CTA. Archivo Black + Space Grotesk on a dotted cream grid — deliberately anti-minimal.

**HTML:**
```html
<div class="ret-04">
  <div class="ret-04__grid">

    <div class="ret-04__card c-hello">
      <span class="ret-04__eyebrow">Neo-Brutalism · 2026</span>
      <h1>Raw edges.<br><mark>Hard shadows.</mark><br>No apologies.</h1>
      <p class="ret-04__sub">Thick black strokes, blunt offset shadows and clashing primaries — the anti-minimalist system that refuses to whisper.</p>
    </div>

    <div class="ret-04__card c-tag">
      <h3>Components</h3>
      <div class="ret-04__chips">
        <span class="ret-04__chip">BUTTONS</span>
        <span class="ret-04__chip">TOGGLES</span>
        <span class="ret-04__chip">INPUTS</span>
        <span class="ret-04__chip">CARDS</span>
        <span class="ret-04__chip">BADGES</span>
      </div>
    </div>

    <div class="ret-04__card c-toggle">
      <b>Brutal Switch</b>
      <input type="checkbox" id="ret-04-sw" class="ret-04__sw" checked>
      <label class="ret-04__track" for="ret-04-sw"><span class="ret-04__knob"></span></label>
      <div class="ret-04__state">Status: </div>
    </div>

    <div class="ret-04__card c-input">
      <label class="ret-04__field" for="ret-04-name">Your loud opinion</label>
      <input type="text" id="ret-04-name" placeholder="TYPE SOMETHING UNHINGED…">
    </div>

    <div class="ret-04__card c-stat"><b>99%</b><span>Less Gradient</span></div>
    <div class="ret-04__card c-stat2"><b>0px</b><span>Border Radius</span></div>

    <div class="ret-04__card c-cta">
      <h3>Ship it loud.</h3>
      <span class="ret-04__btn">Grab the kit →</span>
    </div>

  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap');

.ret-04, .ret-04 *, .ret-04 *::before, .ret-04 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-04 ::selection{background:#ff4d00;color:#fff}
.ret-04 ::-moz-selection{background:#ff4d00;color:#fff}

.ret-04{
  --paper:#fef0d9;
  --ink:#0d0d0d;
  --orange:#ff4d00;
  --lime:#c4f000;
  --blue:#2b50ff;
  --pink:#ff2e88;
  --cyan:#16e0e0;
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  font-family:'Space Grotesk',sans-serif;
  background:var(--paper);
  background-image:radial-gradient(var(--ink) 1.4px,transparent 1.4px);
  background-size:26px 26px;
  color:var(--ink);
  min-height:100vh;
  padding:clamp(18px,4vw,52px);
}
.ret-04__grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.ret-04__card{background:#fff;border:3px solid var(--ink);box-shadow:var(--shadow);padding:22px;transition:transform .12s cubic-bezier(.7,0,.2,1),box-shadow .12s}
.ret-04__card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}

.ret-04 .c-hello{grid-column:span 7;background:var(--lime)}
.ret-04 .c-tag{grid-column:span 5;background:var(--blue);color:#fff}
.ret-04 .c-toggle{grid-column:span 4}
.ret-04 .c-input{grid-column:span 8}
.ret-04 .c-stat{grid-column:span 3;background:var(--pink);color:#fff}
.ret-04 .c-stat2{grid-column:span 3;background:var(--cyan)}
.ret-04 .c-cta{grid-column:span 6;background:var(--orange);color:#fff}
@media(max-width:720px){
  .ret-04 .c-hello,.ret-04 .c-tag,.ret-04 .c-input,.ret-04 .c-cta{grid-column:1/-1}
  .ret-04 .c-toggle,.ret-04 .c-stat,.ret-04 .c-stat2{grid-column:span 6}
}

.ret-04__eyebrow{display:inline-block;background:var(--ink);color:var(--paper);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border:2px solid var(--ink);margin-bottom:16px}
.ret-04 h1{font-family:'Archivo Black';font-size:clamp(2rem,6vw,3.6rem);line-height:.92;letter-spacing:-.02em;text-transform:uppercase}
.ret-04 h1 mark{background:var(--orange);color:#fff;padding:0 6px;box-decoration-break:clone}
.ret-04__sub{font-weight:500;margin-top:14px;font-size:1.02rem;line-height:1.45;max-width:42ch}

.ret-04 .c-tag h3{font-family:'Archivo Black';font-size:1.3rem;text-transform:uppercase}
.ret-04__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ret-04__chip{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 12px;font-weight:700;font-size:.82rem}

.ret-04 label.ret-04__field{display:block;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.ret-04 input[type=text]{width:100%;font-family:'Space Grotesk';font-size:1rem;font-weight:500;padding:13px 14px;border:3px solid var(--ink);background:var(--paper);box-shadow:inset 4px 4px 0 rgba(0,0,0,.08);outline:none}
.ret-04 input[type=text]:focus{background:#fff;box-shadow:inset 4px 4px 0 var(--lime)}

/* toggle switch — checkbox hack */
.ret-04__sw{position:absolute;opacity:0;pointer-events:none}
.ret-04 .c-toggle b{font-family:'Archivo Black';text-transform:uppercase;font-size:.9rem;display:block;margin-bottom:14px}
.ret-04__track{display:inline-flex;align-items:center;width:88px;height:42px;border:3px solid var(--ink);background:#fff;box-shadow:var(--shadow);cursor:pointer;padding:4px;position:relative}
.ret-04__knob{width:30px;height:30px;background:var(--ink);transition:transform .14s steps(3)}
.ret-04__sw:checked ~ .ret-04__track{background:var(--lime)}
.ret-04__sw:checked ~ .ret-04__track .ret-04__knob{transform:translateX(46px);background:var(--orange)}
.ret-04__state{font-weight:700;margin-top:12px;font-size:.82rem}
.ret-04__state::after{content:'OFF'}
.ret-04__sw:checked ~ .ret-04__state::after{content:'ON'}

.ret-04 .c-stat b,.ret-04 .c-stat2 b{font-family:'Archivo Black';font-size:2.4rem;line-height:1;display:block}
.ret-04 .c-stat span,.ret-04 .c-stat2 span{font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}

.ret-04 .c-cta{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.ret-04 .c-cta h3{font-family:'Archivo Black';font-size:1.5rem;text-transform:uppercase;line-height:1}
.ret-04__btn{align-self:flex-start;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-family:'Archivo Black';text-transform:uppercase;font-size:.95rem;padding:13px 24px;cursor:pointer;transition:transform .1s,box-shadow .1s}
.ret-04__btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.ret-04__btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}

@media (prefers-reduced-motion: reduce){.ret-04 *{transition:none !important}}
```

### 05. Retro Cassette Player UI Web Component

**Type:** Pure CSS
**Description:** A skeuomorphic tape deck modelled in pure CSS gradients — moulded plastic body with inset highlights, a recessed window with two spinning reels, an LCD with an animated VU meter, real pressable transport keys with travel, and three rotary knobs with pointer ticks. Major Mono Display + Oswald, warm 80s-hi-fi tones.

**HTML:**
```html
<div class="ret-05">
  <div class="ret-05__deck">
    <div class="ret-05__brand">
      <b>cassettone</b>
      <span>Stereo · Auto-Reverse · Dolby</span>
    </div>

    <div class="ret-05__window">
      <div class="ret-05__label">◦ SIDE A · MIXTAPE '88 ◦</div>
      <div class="ret-05__tape">
        <div class="ret-05__reel"></div>
        <div class="ret-05__reel" style="animation-duration:3.4s"></div>
      </div>
    </div>

    <div class="ret-05__lcd">
      <span class="t">▶ 02:14 / 04:51</span>
      <div class="ret-05__meter"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    </div>

    <div class="ret-05__transport">
      <button class="ret-05__key">⏮</button>
      <button class="ret-05__key ret-05__key--play">▶</button>
      <button class="ret-05__key">⏸</button>
      <button class="ret-05__key">⏭</button>
      <button class="ret-05__key">⏹</button>
    </div>

    <div class="ret-05__knobs">
      <div class="ret-05__knobwrap">
        <div class="ret-05__knob ret-05__knob--1"></div>
        <div class="ret-05__dots"><i></i><i></i><i></i><i></i><i></i></div>
        <small>Volume</small>
      </div>
      <div class="ret-05__knobwrap">
        <div class="ret-05__knob ret-05__knob--2"></div>
        <div class="ret-05__dots"><i></i><i></i><i></i><i></i><i></i></div>
        <small>Bass</small>
      </div>
      <div class="ret-05__knobwrap">
        <div class="ret-05__knob ret-05__knob--3"></div>
        <div class="ret-05__dots"><i></i><i></i><i></i><i></i><i></i></div>
        <small>Treble</small>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Oswald:wght@300;500;700&display=swap');

.ret-05, .ret-05 *, .ret-05 *::before, .ret-05 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-05 ::selection{background:#e8743b;color:#1c140e}

.ret-05{
  --case:#d8c5a8;
  --case-d:#b39d7c;
  --metal:#c9ccd1;
  --dark:#2a2420;
  --orange:#e8743b;
  --cream:#f3e9d6;
  --led:#7dff4f;
  font-family:'Oswald',sans-serif;
  background:radial-gradient(120% 100% at 50% 0%,#5a4632,#2b211a 70%);
  min-height:100vh;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);
  color:var(--dark);
}
/* the plastic body: stacked gradients + inset highlights + drop shadow */
.ret-05__deck{
  width:min(560px,100%);
  background:
    linear-gradient(160deg,#e8d7b8,#c3ad88 55%,#a98f6b);
  border-radius:22px;
  padding:26px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -4px 8px rgba(0,0,0,.28),
    0 30px 60px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.4);
  position:relative;
}
.ret-05__deck::before{content:'';position:absolute;inset:11px;border-radius:14px;border:1px solid rgba(255,255,255,.25);pointer-events:none}
.ret-05__brand{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.ret-05__brand b{font-family:'Major Mono Display';font-size:1.5rem;letter-spacing:.06em;color:#3a2f25;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.ret-05__brand span{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:#6b5a44;font-weight:500}

/* cassette window: dark recess with spinning reels */
.ret-05__window{
  background:linear-gradient(180deg,#1b1612,#322820);
  border-radius:12px;padding:22px;margin-bottom:22px;
  box-shadow:inset 0 4px 10px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.4);
  position:relative;overflow:hidden;
}
.ret-05__tape{display:flex;align-items:center;justify-content:center;gap:64px;position:relative}
.ret-05__tape::before{content:'';position:absolute;top:50%;left:18%;right:18%;height:10px;transform:translateY(-50%);
  background:linear-gradient(180deg,#1a120b,#0d0805);border-radius:2px;box-shadow:inset 0 1px 1px rgba(0,0,0,.8)}
.ret-05__reel{width:74px;height:74px;border-radius:50%;position:relative;z-index:2;
  background:radial-gradient(circle at 35% 30%,#5a5048,#221c16 70%);
  box-shadow:inset 0 0 0 6px #15110d,inset 0 0 14px rgba(0,0,0,.9),0 0 0 2px #3a3128;
  animation:ret-05-spin 3s linear infinite}
.ret-05__reel::before{content:'';position:absolute;inset:24px;border-radius:50%;background:repeating-conic-gradient(#d8cdbe 0 12deg,#8a7d6c 12deg 24deg);box-shadow:0 0 0 3px #15110d}
.ret-05__reel::after{content:'';position:absolute;inset:32px;border-radius:50%;background:radial-gradient(circle,#2a221a,#0d0805)}
@keyframes ret-05-spin{to{transform:rotate(360deg)}}
.ret-05__label{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:'Major Mono Display';font-size:.62rem;letter-spacing:.2em;color:var(--orange);z-index:3;white-space:nowrap}

/* LCD + level meter */
.ret-05__lcd{display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:#2f3a2c;border-radius:8px;padding:10px 16px;margin-bottom:22px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7);font-family:'Major Mono Display';color:var(--led);text-shadow:0 0 6px rgba(125,255,79,.6)}
.ret-05__lcd .t{font-size:1.1rem;letter-spacing:.05em}
.ret-05__meter{display:flex;gap:3px;align-items:flex-end;height:22px}
.ret-05__meter i{width:5px;background:var(--led);border-radius:1px;animation:ret-05-eq 1.1s ease-in-out infinite}
.ret-05__meter i:nth-child(1){height:30%;animation-delay:0s}
.ret-05__meter i:nth-child(2){height:60%;animation-delay:.15s}
.ret-05__meter i:nth-child(3){height:95%;animation-delay:.3s;background:#ffd23f}
.ret-05__meter i:nth-child(4){height:50%;animation-delay:.45s}
.ret-05__meter i:nth-child(5){height:75%;animation-delay:.6s;background:#ffd23f}
.ret-05__meter i:nth-child(6){height:40%;animation-delay:.75s}
@keyframes ret-05-eq{50%{height:20%}}

/* transport buttons: real pressable plastic */
.ret-05__transport{display:flex;gap:12px;margin-bottom:24px}
.ret-05__key{flex:1;height:48px;border-radius:7px;border:none;cursor:pointer;font-size:1rem;color:#2a2018;
  background:linear-gradient(180deg,#efe2cb,#c7b18c);
  box-shadow:0 4px 0 #9a805e,inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .06s,box-shadow .06s;display:grid;place-items:center}
.ret-05__key:hover{filter:brightness(1.04)}
.ret-05__key:active{transform:translateY(4px);box-shadow:0 0 0 #9a805e,inset 0 1px 3px rgba(0,0,0,.3)}
.ret-05__key--play{background:linear-gradient(180deg,#f29a5c,#d8612a);color:#fff;box-shadow:0 4px 0 #a8451a,inset 0 1px 0 rgba(255,255,255,.5)}
.ret-05__key--play:active{box-shadow:0 0 0 #a8451a,inset 0 1px 3px rgba(0,0,0,.4)}

/* knobs */
.ret-05__knobs{display:flex;justify-content:space-around;align-items:flex-start}
.ret-05__knobwrap{display:flex;flex-direction:column;align-items:center;gap:9px}
.ret-05__knob{width:62px;height:62px;border-radius:50%;cursor:grab;position:relative;
  background:conic-gradient(from -135deg,#3a322a,#6a5e4f 50%,#2a241e);
  box-shadow:0 5px 10px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.6)}
.ret-05__knob::before{content:'';position:absolute;top:6px;left:50%;width:4px;height:18px;background:var(--orange);border-radius:2px;transform:translateX(-50%);box-shadow:0 0 5px rgba(232,116,59,.7)}
.ret-05__knob--2{transform:rotate(80deg)}
.ret-05__knob--3{transform:rotate(-70deg)}
.ret-05__knobwrap small{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#5a4a36;font-weight:600}
.ret-05__dots{position:relative;width:62px;height:14px;margin-top:-4px}
.ret-05__dots i{position:absolute;width:3px;height:3px;border-radius:50%;background:#5a4a36;top:0}
.ret-05__dots i:nth-child(1){left:0}
.ret-05__dots i:nth-child(2){left:30%;top:-3px}
.ret-05__dots i:nth-child(3){left:50%;top:-5px}
.ret-05__dots i:nth-child(4){left:70%;top:-3px}
.ret-05__dots i:nth-child(5){right:0}

@media(max-width:480px){.ret-05__tape{gap:30px}.ret-05__knob{width:50px;height:50px}}
@media (prefers-reduced-motion: reduce){.ret-05__reel,.ret-05__meter i{animation:none !important}}
```

### 06. Vaporwave Aesthetic Website Theme Design

**Type:** Pure CSS
**Description:** A vaporwave scene assembled from CSS masks and gradients only — a halftone striped sun bobbing on the horizon, an infinite scrolling neon perspective grid floor, chrome gradient-clip title type with a glitch shudder, and a translucent retro window card. Monoton + Yatra One + Space Mono in pink/cyan/purple.

**HTML:**
```html
<div class="ret-06">
  <div class="ret-06__sun"></div>
  <div class="ret-06__floor"></div>

  <div class="ret-06__card">
    <div class="ret-06__jp">ヴェイパーウェイヴ</div>
    <h1 class="ret-06__title">A E S T H E T I C</h1>
    <div class="ret-06__sub">mall softnone · <b>1992</b> · neon dreams</div>

    <div class="ret-06__win">
      <div class="ret-06__winbar"><i></i><i></i><i></i><span>system32 / vibes.exe</span></div>
      <div class="ret-06__wincontent">
        Chrome type, a halftone <b>sun</b>, and an infinite neon grid floor —
        the whole scene is layered CSS gradients and masks. No images.
        The grid scrolls on a linear keyframe; the sun bobs on the horizon.
        <div class="ret-06__row">
          <a href="#" class="ret-06__btn">Enter Mall</a>
          <a href="#" class="ret-06__btn ret-06__btn--p">Play Tape</a>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Yatra+One&family=Space+Mono:wght@400;700&display=swap');

.ret-06, .ret-06 *, .ret-06 *::before, .ret-06 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-06 ::selection{background:#ff71ce;color:#1a0b2e}

.ret-06{
  --pink:#ff71ce;
  --cyan:#05ffa1;
  --blue:#01cdfe;
  --purple:#b967ff;
  --deep:#1a0b2e;
  --sun1:#ffd319;
  --sun2:#ff2975;
  font-family:'Space Mono',monospace;
  background:linear-gradient(180deg,#2b1055 0%,#7a2a8f 45%,#ff2975 75%,#ffd319 100%);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  color:#fff;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,40px);
}
/* sun */
.ret-06__sun{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:min(340px,70vw);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,var(--sun1),var(--sun2));z-index:0;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px),linear-gradient(180deg,transparent 52%,#000 52%);
  mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px),linear-gradient(180deg,transparent 52%,#000 52%);
  -webkit-mask-composite:source-out;mask-composite:subtract;
  filter:drop-shadow(0 0 60px rgba(255,41,117,.6));animation:ret-06-rise 6s ease-in-out infinite alternate}
@keyframes ret-06-rise{to{transform:translateX(-50%) translateY(-14px)}}
.ret-06__sun::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,var(--sun1),var(--sun2));z-index:-1;-webkit-mask:linear-gradient(180deg,#000 52%,transparent 52%);mask:linear-gradient(180deg,#000 52%,transparent 52%)}

/* perspective grid floor */
.ret-06__floor{position:absolute;left:-25%;right:-25%;bottom:0;height:48%;z-index:0;
  background-image:linear-gradient(var(--cyan) 2px,transparent 2px),linear-gradient(90deg,var(--cyan) 2px,transparent 2px);
  background-size:48px 48px;
  transform:perspective(340px) rotateX(72deg);transform-origin:bottom;
  opacity:.55;animation:ret-06-grid 1.4s linear infinite}
@keyframes ret-06-grid{to{background-position:0 48px}}
.ret-06__floor::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--deep) 0%,transparent 40%)}

/* chrome title card */
.ret-06__card{position:relative;z-index:3;text-align:center;max-width:680px}
.ret-06__jp{font-family:'Yatra One',cursive;font-size:1.1rem;letter-spacing:.5em;color:var(--cyan);opacity:.9;margin-bottom:10px;text-shadow:0 0 10px var(--cyan)}
.ret-06__title{font-family:'Monoton';font-size:clamp(2.6rem,12vw,6rem);line-height:1;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff 10%,#cdebff 38%,var(--blue) 50%,#fff 52%,var(--pink) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 var(--pink)) drop-shadow(-2px -2px 0 var(--cyan));
  animation:ret-06-glitch 4s steps(1) infinite}
@keyframes ret-06-glitch{0%,90%,100%{transform:none}92%{transform:translate(-3px,1px) skewX(-3deg)}94%{transform:translate(3px,-1px)}}
.ret-06__sub{margin-top:18px;font-size:.84rem;letter-spacing:.3em;text-transform:uppercase;color:#fff;text-shadow:0 0 8px var(--pink)}
.ret-06__sub b{color:var(--cyan)}

.ret-06__win{margin-top:30px;background:rgba(26,11,46,.55);backdrop-filter:blur(8px);
  border:2px solid var(--pink);border-radius:6px;text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 30px rgba(255,113,206,.5),8px 8px 0 rgba(1,205,254,.4)}
.ret-06__winbar{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--purple),var(--pink));padding:7px 12px;border-radius:4px 4px 0 0}
.ret-06__winbar i{width:12px;height:12px;border-radius:50%;background:#fff;opacity:.85}
.ret-06__winbar span{margin-left:6px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.ret-06__wincontent{padding:18px 20px;font-size:.82rem;line-height:1.7;color:#e9d5ff}
.ret-06__wincontent b{color:var(--cyan)}
.ret-06__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.ret-06__btn{flex:1;min-width:130px;text-align:center;text-decoration:none;padding:11px;border:2px solid var(--cyan);color:var(--cyan);
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(5,255,161,.06);
  box-shadow:0 0 14px rgba(5,255,161,.3);transition:.25s}
.ret-06__btn:hover{background:var(--cyan);color:var(--deep);box-shadow:0 0 26px var(--cyan)}
.ret-06__btn--p{border-color:var(--pink);color:var(--pink);background:rgba(255,113,206,.06);box-shadow:0 0 14px rgba(255,113,206,.3)}
.ret-06__btn--p:hover{background:var(--pink);color:var(--deep);box-shadow:0 0 26px var(--pink)}

@media (prefers-reduced-motion: reduce){.ret-06__sun,.ret-06__floor,.ret-06__title{animation:none !important}}
```

### 07. Retro Arcade Game UI Kit

**Type:** Pure CSS
**Description:** A full arcade cabinet UI kit: an animated rainbow marquee, a bezelled CRT attract-screen with scanlines, hue-shifting logo, marching sprites and a blinking PUSH START, plus a control panel with a wiggling joystick and four glossy convex pressable buttons. Press Start 2P + Silkscreen on a neon-magenta cab.

**HTML:**
```html
<div class="ret-07">
  <div class="ret-07__cab">
    <div class="ret-07__marquee"><b>NEON RAIDERS</b></div>

    <div class="ret-07__bezel">
      <div class="ret-07__screen">
        <span class="ret-07__hi">HI 999990</span>
        <span class="ret-07__credit">1UP 042150</span>
        <div class="ret-07__logo">NEON<br>RAIDERS</div>
        <div class="ret-07__sprites">👾 🛸 👾 🛸 👾</div>
        <div class="ret-07__sub">© 1986 CODEFRONTS<br><i>insert coin to continue</i></div>
        <div class="ret-07__start">▶ PUSH START ◀</div>
      </div>
    </div>

    <div class="ret-07__panel">
      <div class="ret-07__joy">
        <span class="base"></span><span class="stick"></span><span class="ball"></span>
      </div>
      <div class="ret-07__buttons">
        <button class="ret-07__b ret-07__b--r"></button>
        <button class="ret-07__b ret-07__b--y"></button>
        <button class="ret-07__b ret-07__b--c"></button>
        <button class="ret-07__b ret-07__b--g"></button>
      </div>
    </div>

    <div class="ret-07__coin"><span>◉ INSERT COIN ◉</span></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap');

.ret-07, .ret-07 *, .ret-07 *::before, .ret-07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-07 ::selection{background:#ffcb05;color:#10001f}

.ret-07{
  --cab:#1b0033;
  --cab2:#33005c;
  --magenta:#ff2e97;
  --yellow:#ffcb05;
  --cyan:#00f0ff;
  --green:#39ff14;
  --screen:#05010f;
  font-family:'Press Start 2P',monospace;
  background:
    radial-gradient(circle at 50% 0%,#3a006b,#10001f 70%);
  min-height:100vh;
  display:grid;place-items:center;
  padding:clamp(14px,3vw,40px);
  color:#fff;
}
.ret-07__cab{
  width:min(480px,100%);
  background:linear-gradient(180deg,var(--cab2),var(--cab));
  border-radius:30px 30px 14px 14px;
  padding:18px;
  position:relative;
  box-shadow:0 0 0 4px #000,0 0 0 8px var(--magenta),0 0 40px rgba(255,46,151,.5),0 30px 60px rgba(0,0,0,.7);
}
/* marquee */
.ret-07__marquee{
  background:linear-gradient(90deg,var(--magenta),var(--yellow),var(--cyan),var(--magenta));
  background-size:300% 100%;
  border-radius:14px;padding:14px;text-align:center;margin-bottom:16px;
  box-shadow:inset 0 0 14px rgba(0,0,0,.5),0 0 20px rgba(255,203,5,.4);
  animation:ret-07-shift 6s linear infinite}
@keyframes ret-07-shift{to{background-position:300% 0}}
.ret-07__marquee b{font-size:1.1rem;letter-spacing:.06em;color:#10001f;text-shadow:1px 1px 0 #fff}

/* CRT screen with bezel */
.ret-07__bezel{background:#000;border-radius:16px;padding:16px;box-shadow:inset 0 0 0 3px #2a2a2a,inset 0 0 30px #000}
.ret-07__screen{
  background:var(--screen);border-radius:8px;padding:22px 18px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,240,255,.12);min-height:280px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.ret-07__screen::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.25) 3px 4px)}
.ret-07__hi{font-family:'Silkscreen';font-size:.7rem;letter-spacing:.2em;color:var(--magenta);position:absolute;top:12px;left:14px}
.ret-07__credit{font-family:'Silkscreen';font-size:.7rem;color:var(--cyan);position:absolute;top:12px;right:14px}
.ret-07__logo{font-size:1.7rem;line-height:1.5;color:var(--yellow);text-shadow:3px 3px 0 var(--magenta),-1px -1px 0 var(--cyan);animation:ret-07-hue 4s linear infinite}
@keyframes ret-07-hue{50%{filter:hue-rotate(40deg)}}
.ret-07__sub{font-family:'Silkscreen';font-size:.8rem;letter-spacing:.1em;color:#fff;line-height:1.6}
.ret-07__sub i{color:var(--green)}
.ret-07__start{font-size:.78rem;color:var(--cyan);animation:ret-07-blink 1s steps(2) infinite}
@keyframes ret-07-blink{50%{opacity:0}}
/* little sprite row */
.ret-07__sprites{display:flex;gap:14px;font-size:1.2rem;animation:ret-07-march 1s steps(2) infinite}
@keyframes ret-07-march{50%{transform:translateY(-3px)}}

/* control panel */
.ret-07__panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;padding:16px;
  background:linear-gradient(180deg,#000,#1a1a1a);border-radius:12px;box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.ret-07__joy{width:58px;height:58px;position:relative}
.ret-07__joy .base{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:46px;height:20px;border-radius:50%;background:radial-gradient(#444,#111)}
.ret-07__joy .stick{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:8px;height:30px;background:linear-gradient(90deg,#777,#222);border-radius:4px;transform-origin:bottom;animation:ret-07-wiggle 2s ease-in-out infinite}
.ret-07__joy .ball{position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6ba8,var(--magenta));box-shadow:0 0 10px var(--magenta)}
@keyframes ret-07-wiggle{0%,100%{transform:translateX(-50%) rotate(-8deg)}50%{transform:translateX(-50%) rotate(10deg)}}
.ret-07__buttons{display:flex;gap:12px}
.ret-07__b{width:44px;height:44px;border-radius:50%;cursor:pointer;border:none;
  box-shadow:0 5px 0 rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.4);transition:transform .06s,box-shadow .06s}
.ret-07__b:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.6),inset 0 2px 4px rgba(0,0,0,.3)}
.ret-07__b--r{background:radial-gradient(circle at 35% 30%,#ff8da8,#ff2e3c)}
.ret-07__b--y{background:radial-gradient(circle at 35% 30%,#fff0a0,var(--yellow))}
.ret-07__b--c{background:radial-gradient(circle at 35% 30%,#a0fbff,var(--cyan))}
.ret-07__b--g{background:radial-gradient(circle at 35% 30%,#b6ffae,var(--green))}

.ret-07__coin{text-align:center;margin-top:14px;font-family:'Silkscreen';font-size:.72rem;letter-spacing:.18em;color:var(--yellow)}
.ret-07__coin span{display:inline-block;border:2px solid var(--yellow);border-radius:4px;padding:6px 12px}

@media(max-width:420px){.ret-07__logo{font-size:1.3rem}.ret-07__buttons{gap:8px}}
@media (prefers-reduced-motion: reduce){.ret-07 *{animation:none !important}}
```

### 08. ASCII Art Web Interface Code

**Type:** CSS + JS
**Description:** A live, typeable bash shell with an ASCII logo, ANSI-coloured output and a blinking caret — type real commands (help, ls, neofetch, cowsay, echo, clear) and watch them execute. The phosphor look, window chrome and caret are pure CSS; a tiny vanilla-JS interpreter drives the interactivity. IBM Plex Mono on a hatched dark room.

**HTML:**
```html
<div class="ret-08">
  <div class="ret-08__term">
    <div class="ret-08__bar"><i></i><i></i><i></i><span>guest@codefronts: ~/retro — bash</span></div>
    <div class="ret-08__body" id="ret-08-body">
<pre>   ___          _      ___              _
  / __|___  ___| |___ / __|_ _ ___ _ _| |_ ___
 | (__/ _ \/ _` / -_) _/ '_/ _ \ ' \  _(_-<
  \___\___/\__,_\___\__|_| \___/_||_\__/__/</pre>
      <div class="l"><span class="d">Last login: Tue Jun 03 on ttys001</span></div>
      <div class="l"><span class="d"># Type a command and hit Enter. Try: <span class="y">help</span>, <span class="y">ls</span>, <span class="y">neofetch</span>, <span class="y">cowsay hi</span></span></div>
      <div id="ret-08-out"></div>
      <div class="ret-08__input-line">
        <span class="ret-08__ps1">guest@codefronts<span class="p">:~$</span></span>
        <span class="ret-08__typed" id="ret-08-typed"></span><span class="ret-08__cur"></span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');

.ret-08, .ret-08 *, .ret-08 *::before, .ret-08 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-08 ::selection{background:#ffaf00;color:#0c0c0c}

.ret-08{
  --bg:#0c0c0c;
  --panel:#161616;
  --fg:#e4e4e4;
  --green:#33d17a;
  --blue:#5c9eff;
  --yellow:#ffaf00;
  --red:#f25f5c;
  --magenta:#c264f0;
  --dim:#6a6a6a;
  font-family:'IBM Plex Mono',monospace;
  background:repeating-linear-gradient(45deg,#0a0a0a 0 12px,#0c0c0c 12px 24px);
  min-height:100vh;display:grid;place-items:center;
  padding:clamp(12px,3vw,40px);color:var(--fg);
}
.ret-08__term{
  width:min(780px,100%);height:min(560px,82vh);display:flex;flex-direction:column;
  background:var(--bg);border-radius:10px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
}
.ret-08__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(180deg,#2a2a2a,#1c1c1c);border-bottom:1px solid #000}
.ret-08__bar i{width:12px;height:12px;border-radius:50%}
.ret-08__bar i:nth-child(1){background:#ff5f56}
.ret-08__bar i:nth-child(2){background:#ffbd2e}
.ret-08__bar i:nth-child(3){background:#27c93f}
.ret-08__bar span{margin-left:10px;font-size:.78rem;color:var(--dim)}
.ret-08__body{flex:1;overflow-y:auto;padding:16px 18px;font-size:clamp(12px,1.5vw,14px);line-height:1.55}
.ret-08__body::-webkit-scrollbar{width:8px}
.ret-08__body::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:4px}
.ret-08 pre{white-space:pre;font-family:inherit;color:var(--magenta);line-height:1.1;font-size:clamp(8px,1.4vw,12px);margin-bottom:8px}
.ret-08 .l{white-space:pre-wrap;word-break:break-word}
.ret-08 .g{color:var(--green)}
.ret-08 .b{color:var(--blue)}
.ret-08 .y{color:var(--yellow)}
.ret-08 .r{color:var(--red)}
.ret-08 .m{color:var(--magenta)}
.ret-08 .d{color:var(--dim)}
.ret-08__prompt-l{color:var(--green);font-weight:700}
.ret-08__prompt-l .p{color:var(--blue)}
.ret-08__input-line{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.ret-08__ps1{color:var(--green);font-weight:700;white-space:nowrap}
.ret-08__ps1 .p{color:var(--blue)}
.ret-08__typed{color:var(--fg)}
.ret-08__cur{display:inline-block;width:8px;height:1.05em;background:var(--fg);transform:translateY(2px);animation:ret-08-bl 1.1s steps(2) infinite}
@keyframes ret-08-bl{50%{opacity:0}}
.ret-08__hint{margin-top:10px;color:var(--dim);font-size:.74rem}
.ret-08 a{color:var(--blue);text-decoration:underline}
@media (prefers-reduced-motion: reduce){.ret-08__cur{animation:none}}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ret-08');
  if (!root) return;
  const body = root.querySelector('#ret-08-body');
  const out  = root.querySelector('#ret-08-out');
  const typedEl = root.querySelector('#ret-08-typed');
  let buf = '';
  const esc = s => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');

  const cmds = {
    help: () => `<span class="g">Available:</span> help · ls · pwd · whoami · date · neofetch · cowsay &lt;text&gt; · echo &lt;text&gt; · clear`,
    ls: () => `<span class="b">projects/</span>  <span class="b">art/</span>  readme.md  <span class="g">retro.sh</span>  .secret`,
    pwd: () => `/home/guest/retro`,
    whoami: () => `guest <span class="d">(uid=1000 groups=demos,retro)</span>`,
    date: () => new Date().toString(),
    neofetch: () => `<span class="m">  ___   </span> <span class="g">guest</span>@<span class="g">codefronts</span>
<span class="m"> / _ \\  </span> <span class="y">OS:</span>    RetroLinux 8.6 "Phosphor"
<span class="m">| | | | </span> <span class="y">Shell:</span> bash 5.1 · pure CSS+JS
<span class="m">| |_| | </span> <span class="y">Term:</span>  codefronts-term
<span class="m"> \\___/  </span> <span class="y">Theme:</span> ANSI green-on-black`,
    clear: () => { out.innerHTML=''; return null; }
  };

  function run(raw){
    const line = `<div class="l"><span class="ret-08__ps1">guest@codefronts<span class="p">:~$</span></span> ${esc(raw)}</div>`;
    let res = '';
    const trimmed = raw.trim();
    const [c, ...rest] = trimmed.split(/\s+/);
    const arg = rest.join(' ');
    if (trimmed === '') { res=''; }
    else if (c === 'echo') res = esc(arg);
    else if (c === 'cowsay') {
      const t = esc(arg || 'moo');
      const bar = '_'.repeat(t.length + 2);
      const bar2 = '-'.repeat(t.length + 2);
      res = `<span class="y"> ${bar}\n&lt; ${t} &gt;\n ${bar2}\n        \\   ^__^\n         \\  (oo)\\_______\n            (__)\\       )\\/\\\n                ||----w |\n                ||     ||</span>`;
    }
    else if (cmds[c]) { const r = cmds[c](); if (r===null){return;} res = r; }
    else res = `<span class="r">bash: ${esc(c)}: command not found</span> <span class="d">(try 'help')</span>`;
    out.insertAdjacentHTML('beforeend', line + (res!=='' ? `<div class="l">${res}</div>` : ''));
    body.scrollTop = body.scrollHeight;
  }

  window.addEventListener('keydown', (e) => {
    if (e.metaKey || e.ctrlKey || e.altKey) return;
    if (e.key === 'Enter') { run(buf); buf=''; }
    else if (e.key === 'Backspace') { buf = buf.slice(0,-1); e.preventDefault(); }
    else if (e.key.length === 1) { buf += e.key; }
    else return;
    typedEl.textContent = buf;
  });
  // seed one example
  run('neofetch');
})();
```

### 09. 90s Website Guestbook Widget

**Type:** Pure CSS
**Description:** An authentic Web 1.0 GeoCities-era homepage: a rainbow banner with a blinking hit counter, a scrolling marquee, ridge/inset bevelled tables, a sign-the-guestbook form with vintage entries, a webring, 88×31-style badges and an animated UNDER CONSTRUCTION sign. Times + Comic Neue + Courier Prime on tiled teal.

**HTML:**
```html
<div class="ret-09">
  <div class="ret-09__page">
    <div class="ret-09__banner">
      <div class="ret-09__bannerin">
        <h1>~*~ DAVE'S RAD HOMEPAGE ~*~</h1>
        <div class="blink">★ YOU ARE VISITOR NUMBER 0024891 ★</div>
      </div>
    </div>

    <div class="ret-09__marquee"><span>★彡 WELCOME 2 MY CORNER OF THE WWW!! ★ best viewed in Netscape Navigator 4.0 @ 800x600 ★ sign my guestbook below!! ★彡</span></div>

    <div class="ret-09__nav">
      <a href="#">[ HOME ]</a><a href="#">[ ABOUT ME ]</a><a href="#">[ MY DOG ]</a><a href="#">[ LINKS ]</a><a href="#">[ GUESTBOOK ]</a><a href="#">[ EMAIL ME! ]</a>
    </div>

    <div class="ret-09__body">
      <div class="ret-09__main">
        <h2>Sign My Guestbook!!</h2>
        <p class="ret-09__welcome">Hey there netizen! Thanks 4 stopping by my totally awesome website. Don't forget to <b>bookmark this page</b> and tell all ur friends. Leave me a note below!! :o)</p>

        <div class="ret-09__gb">
          <div class="ret-09__entry"><span class="who">xX_SkaterDude_Xx</span><span class="when">06/14/2001</span><span class="msg">kewl site dude!! how'd u make the spinning skull gif?? <b>l8r</b></span></div>
          <div class="ret-09__entry"><span class="who">~PrincessSparkle~</span><span class="when">06/12/2001</span><span class="msg">omg luv the rainbow text!!1! added u 2 my webring :) :) :)</span></div>
          <div class="ret-09__entry"><span class="who">webmaster_steve</span><span class="when">06/09/2001</span><span class="msg">nice tables. all hand-coded HTML, no css frameworks here. <b>RESPECT</b></span></div>
        </div>

        <div class="ret-09__form">
          <label>Ur Name:</label>
          <input type="text" placeholder="kewl_username_99">
          <label>Ur Message:</label>
          <textarea placeholder="say something rad..."></textarea>
          <button class="ret-09__sign">✎ Sign Guestbook!</button>
        </div>
      </div>

      <div class="ret-09__side">
        <div class="ret-09__box">
          <h3>VISITORS</h3>
          <div class="ret-09__counter"><span>0</span><span>0</span><span>2</span><span>4</span><span>8</span><span>9</span><span>1</span></div>
        </div>
        <div class="ret-09__box ret-09__webring">
          <h3>WEBRING</h3>
          <a href="#">◄</a> &nbsp;❤ &nbsp;<a href="#">►</a>
          <div style="margin-top:6px;font-size:.72rem">The 90s Kids Ring</div>
        </div>
        <div class="ret-09__box">
          <h3>BADGES</h3>
          <div class="ret-09__badges">
            <span class="ret-09__badge">HTML 4.0</span>
            <span class="ret-09__badge">NETSCAPE</span>
            <span class="ret-09__badge">GEOCITIES</span>
            <span class="ret-09__badge">Y2K OK</span>
          </div>
        </div>
        <div class="ret-09__construction"><span>🚧 UNDER<br>CONSTRUCTION 🚧</span></div>
      </div>
    </div>

    <div class="ret-09__foot">
      Made with Notepad &amp; ♥ · © 2001 Dave · <a href="#">webmaster@daverad.geocities.com</a><br>
      This page best viewed at 800×600 · Get <a href="#">Netscape Now!</a>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Courier+Prime:wght@400;700&display=swap');

.ret-09, .ret-09 *, .ret-09 *::before, .ret-09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-09 ::selection{background:#000080;color:#fff}

.ret-09{
  --teal:#008080;
  --silver:#c0c0c0;
  --navy:#000080;
  --purple:#800080;
  --lime:#00ff00;
  --yellow:#ffff00;
  font-family:'Times New Roman',Times,serif;
  background:#008080;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23008080'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23007070' stroke-width='1'/%3E%3C/svg%3E");
  min-height:100vh;color:#000;padding:14px;
}
.ret-09__page{max-width:760px;margin:0 auto;background:#fff;border:3px ridge var(--silver);padding:0}
/* rainbow top banner */
.ret-09__banner{background:linear-gradient(90deg,#f00,#ff7f00,#ff0,#0f0,#00f,#4b0082,#9400d3);padding:3px}
.ret-09__bannerin{background:#000;text-align:center;padding:14px 10px}
.ret-09__bannerin h1{font-family:'Courier Prime';color:var(--yellow);font-size:clamp(1.4rem,5vw,2.4rem);font-weight:700;text-shadow:2px 2px 0 #f00;letter-spacing:.05em}
.ret-09__bannerin .blink{color:var(--lime);font-family:'Comic Neue';font-weight:700;font-size:.95rem;animation:ret-09-blink 1s steps(2) infinite}
@keyframes ret-09-blink{50%{opacity:0}}

/* marquee */
.ret-09__marquee{background:var(--navy);color:var(--yellow);font-family:'Courier Prime';font-weight:700;padding:6px 0;overflow:hidden;white-space:nowrap;border-top:2px solid #fff;border-bottom:2px solid #404040}
.ret-09__marquee span{display:inline-block;padding-left:100%;animation:ret-09-scroll 16s linear infinite}
@keyframes ret-09-scroll{to{transform:translateX(-100%)}}

.ret-09__nav{background:var(--silver);border-bottom:2px solid #808080;padding:8px;text-align:center;font-family:'Comic Neue';font-size:.9rem}
.ret-09__nav a{color:var(--navy);font-weight:700;text-decoration:underline;margin:0 6px}
.ret-09__nav a:hover{color:#f00;background:var(--yellow)}

.ret-09__body{padding:18px;display:grid;grid-template-columns:1fr 200px;gap:18px}
@media(max-width:640px){.ret-09__body{grid-template-columns:1fr}}

.ret-09__main h2{font-family:'Comic Neue';color:var(--purple);font-size:1.5rem;border-bottom:2px dotted var(--purple);padding-bottom:4px;margin-bottom:10px}
.ret-09__main h2::before{content:'» '}
.ret-09__welcome{font-size:.96rem;line-height:1.5;margin-bottom:14px}
.ret-09__welcome b{background:var(--yellow)}

/* guestbook entries */
.ret-09__gb{border:2px inset var(--silver);background:#fffef0;padding:10px;margin-bottom:14px}
.ret-09__entry{font-family:'Comic Neue';font-size:.88rem;line-height:1.45;padding:8px;border-bottom:1px dashed #999;margin-bottom:8px}
.ret-09__entry:last-child{border:0;margin:0}
.ret-09__entry .who{color:var(--navy);font-weight:700}
.ret-09__entry .when{color:#888;font-size:.78rem;float:right}
.ret-09__entry .msg{display:block;margin-top:4px;color:#222}
.ret-09__entry .msg b{color:#f00}

.ret-09__form{border:2px ridge var(--silver);background:var(--silver);padding:10px;font-family:'Comic Neue'}
.ret-09__form label{display:block;font-weight:700;font-size:.82rem;margin:6px 0 3px}
.ret-09__form input,.ret-09__form textarea{width:100%;border:2px inset #fff;padding:5px;font-family:'Courier Prime';font-size:.85rem}
.ret-09__form textarea{height:54px;resize:none}
.ret-09__sign{margin-top:10px;background:var(--silver);border:2px outset #fff;padding:5px 16px;font-family:'Comic Neue';font-weight:700;cursor:pointer}
.ret-09__sign:active{border-style:inset}

/* sidebar */
.ret-09__side{display:flex;flex-direction:column;gap:14px;font-family:'Comic Neue';font-size:.82rem}
.ret-09__box{border:2px outset var(--silver);background:#fff;padding:8px;text-align:center}
.ret-09__box h3{background:var(--navy);color:#fff;font-size:.8rem;margin:-8px -8px 8px;padding:4px}
.ret-09__counter{display:inline-flex;gap:2px;font-family:'Courier Prime';font-weight:700}
.ret-09__counter span{background:#000;color:var(--lime);padding:3px 5px;border-radius:2px}
.ret-09__webring a{color:var(--navy);text-decoration:none;font-size:1.3rem}
.ret-09__badges{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.ret-09__badge{font-family:'Courier Prime';font-size:.6rem;font-weight:700;padding:3px 5px;border:1px solid #000;color:#fff}
.ret-09__badge:nth-child(1){background:#f00}
.ret-09__badge:nth-child(2){background:var(--navy)}
.ret-09__badge:nth-child(3){background:var(--purple)}
.ret-09__badge:nth-child(4){background:#000}
.ret-09__construction{text-align:center;font-family:'Comic Neue';font-weight:700;color:#000;background:repeating-linear-gradient(45deg,var(--yellow) 0 12px,#000 12px 24px);padding:3px;margin-top:6px}
.ret-09__construction span{background:#fff;display:block;padding:6px}

.ret-09__foot{text-align:center;font-family:'Comic Neue';font-size:.74rem;color:#555;padding:12px;border-top:2px groove var(--silver)}
.ret-09__foot a{color:var(--navy)}

@media (prefers-reduced-motion: reduce){.ret-09 *{animation:none !important}.ret-09__marquee span{padding-left:0}}
```

### 10. Y2K Style Web UI Kit

**Type:** Pure CSS
**Description:** A glossy Y2K / Aqua interface — candy jelly buttons with specular top-gloss and a 3D push, a pinstripe-animated progress pill, a frosted aqua titlebar with gel orbs, and a glassy toggle switch. Michroma + Rajdhani on an icy aqua-to-lilac gradient with chrome-clip headline type, pure CSS gloss.

**HTML:**
```html
<div class="ret-10">
  <div class="ret-10__shell">
    <div class="ret-10__chrome">
      <div class="ret-10__tb">
        <b>◈ AquaOS · System Preferences</b>
        <span class="ret-10__orbs"><i class="ret-10__orb"></i><i class="ret-10__orb ret-10__orb--c"></i><i class="ret-10__orb ret-10__orb--x"></i></span>
      </div>
      <div class="ret-10__win">
        <div class="ret-10__hero">
          <span class="ret-10__chip">Y2K · FUTURE READY · 2001</span>
          <h1>Glossy. Glassy.<br>Gloriously Y2K.</h1>
          <p>Candy-coated jelly buttons, aqua gradients and pinstripe progress — pure CSS gloss.</p>
        </div>

        <div class="ret-10__btns">
          <button class="ret-10__jelly">Download</button>
          <button class="ret-10__jelly ret-10__jelly--g">Install ✓</button>
          <button class="ret-10__jelly ret-10__jelly--p">Customize</button>
        </div>

        <div class="ret-10__panel">
          <div class="ret-10__glass">
            <small>SYNCING…</small>
            <div class="ret-10__load"><i></i></div>
            <div class="ret-10__pct">68% — 2.4 MB/s</div>
          </div>
          <div class="ret-10__glass" style="display:flex;align-items:center">
            <input type="checkbox" id="ret-10-sw" class="ret-10__sw" checked>
            <label class="ret-10__toggle" for="ret-10-sw">
              <span class="ret-10__rail"></span>
              <b>Aqua FX</b>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rajdhani:wght@400;500;600;700&display=swap');

.ret-10, .ret-10 *, .ret-10 *::before, .ret-10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-10 ::selection{background:#00e5ff;color:#001018}

.ret-10{
  --bg1:#aee9ff;
  --bg2:#d6c2ff;
  --aqua:#00b4ff;
  --aqua-d:#0066cc;
  --silver:#dfe8f0;
  --ink:#0a2540;
  --lime:#9dff3c;
  font-family:'Rajdhani',sans-serif;
  background:
    radial-gradient(circle at 20% 15%,#ffffff,transparent 40%),
    linear-gradient(135deg,var(--bg1),var(--bg2) 60%,#ffd1f5);
  min-height:100vh;display:grid;place-items:center;
  padding:clamp(16px,4vw,46px);color:var(--ink);
}
.ret-10__shell{width:min(700px,100%);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(220,235,250,.7));
  backdrop-filter:blur(6px);
  border-radius:26px;padding:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 2px rgba(0,120,200,.25),0 30px 60px rgba(0,80,160,.35);
}
.ret-10__chrome{background:linear-gradient(180deg,#fff,#cfe2f2);border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 0 #fff}

/* glossy titlebar */
.ret-10__tb{display:flex;align-items:center;gap:10px;padding:12px 16px;position:relative;
  background:linear-gradient(180deg,#6fc8ff 0%,#1f8fe0 48%,#0a6cc0 52%,#1f8fe0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.2)}
.ret-10__tb::after{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);pointer-events:none}
.ret-10__tb b{font-family:'Michroma';color:#fff;font-size:.92rem;letter-spacing:.05em;text-shadow:0 1px 2px rgba(0,0,0,.4);position:relative;z-index:2}
.ret-10__orbs{margin-left:auto;display:flex;gap:7px;position:relative;z-index:2}
.ret-10__orb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cdd 60%,#889);box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 -2px 3px rgba(0,0,0,.3)}
.ret-10__orb--c{background:radial-gradient(circle at 35% 30%,#d6ffb0,var(--lime) 60%,#5a9e00)}
.ret-10__orb--x{background:radial-gradient(circle at 35% 30%,#ffd0d0,#ff5555 60%,#aa0000)}

.ret-10__win{padding:24px;display:grid;gap:20px}
.ret-10__hero{text-align:center}
.ret-10__chip{display:inline-block;font-family:'Michroma';font-size:.62rem;letter-spacing:.25em;color:var(--aqua-d);
  background:linear-gradient(180deg,#fff,#d6ecff);padding:6px 14px;border-radius:20px;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(0,80,160,.3);margin-bottom:14px}
.ret-10__hero h1{font-family:'Michroma';font-size:clamp(1.6rem,6vw,2.8rem);line-height:1.05;letter-spacing:-.01em;
  background:linear-gradient(180deg,#0a6cc0,#00b4ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(255,255,255,.8))}
.ret-10__hero p{font-size:1.05rem;font-weight:500;margin-top:10px;color:#2a5575}

/* the glossy jelly buttons */
.ret-10__btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.ret-10__jelly{position:relative;border:none;cursor:pointer;font-family:'Rajdhani';font-weight:700;font-size:1.05rem;letter-spacing:.04em;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);padding:15px 34px;border-radius:30px;overflow:hidden;
  background:linear-gradient(180deg,#3fc0ff,#0a78d0 52%,#0a6cc0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #04508f,0 8px 16px rgba(0,80,160,.4);
  transition:transform .08s,box-shadow .08s}
.ret-10__jelly::before{content:'';position:absolute;top:3px;left:8%;right:8%;height:42%;border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
.ret-10__jelly:hover{filter:brightness(1.06)}
.ret-10__jelly:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 #04508f,0 4px 8px rgba(0,80,160,.4)}
.ret-10__jelly--g{background:linear-gradient(180deg,#c8ff7a,#7ec000 52%,#5a9e00);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #437400,0 8px 16px rgba(80,140,0,.4);color:#1a3000;text-shadow:0 1px 1px rgba(255,255,255,.4)}
.ret-10__jelly--g:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 #437400,0 4px 8px rgba(80,140,0,.4)}
.ret-10__jelly--p{background:linear-gradient(180deg,#ff9be8,#d63caa 52%,#b01f8f);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #8a1570,0 8px 16px rgba(160,0,120,.4)}

/* progress pill + toggle */
.ret-10__panel{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.ret-10__panel{grid-template-columns:1fr}.ret-10__hero h1{font-size:1.5rem}}
.ret-10__glass{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(210,232,250,.6));border-radius:16px;padding:16px;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(0,80,160,.18)}
.ret-10__glass small{font-family:'Michroma';font-size:.6rem;letter-spacing:.18em;color:var(--aqua-d);display:block;margin-bottom:10px}
.ret-10__load{height:18px;border-radius:12px;background:linear-gradient(180deg,#c2d8ea,#e8f2fb);box-shadow:inset 0 2px 3px rgba(0,60,120,.3);overflow:hidden;padding:2px}
.ret-10__load i{display:block;height:100%;width:68%;border-radius:10px;
  background:linear-gradient(180deg,#7fe0ff,#00b4ff 50%,#0078c8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);position:relative;overflow:hidden}
.ret-10__load i::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 8px,transparent 8px 16px);animation:ret-10-stripe 1s linear infinite}
@keyframes ret-10-stripe{to{background-position:16px 0}}
.ret-10__pct{font-weight:700;color:var(--aqua-d);margin-top:8px;font-size:.9rem}

/* aqua toggle - checkbox hack */
.ret-10__sw{position:absolute;opacity:0;pointer-events:none}
.ret-10__toggle{display:flex;align-items:center;gap:12px;cursor:pointer}
.ret-10__rail{width:64px;height:30px;border-radius:20px;background:linear-gradient(180deg,#c2d8ea,#e8f2fb);box-shadow:inset 0 2px 4px rgba(0,60,120,.35);position:relative;transition:background .2s}
.ret-10__rail::before{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#cdd 70%);box-shadow:0 2px 3px rgba(0,0,0,.3);transition:transform .2s}
.ret-10__sw:checked ~ .ret-10__toggle .ret-10__rail{background:linear-gradient(180deg,#7fe0ff,#00b4ff)}
.ret-10__sw:checked ~ .ret-10__toggle .ret-10__rail::before{transform:translateX(34px);background:radial-gradient(circle at 35% 30%,#fff,#aef)}
.ret-10__toggle b{font-weight:700;font-size:1rem;color:var(--ink)}

@media (prefers-reduced-motion: reduce){.ret-10__load i::after{animation:none}}
```

### 11. Retro Clothing Store Web UI Design

**Type:** Pure CSS
**Description:** A vintage mail-order catalogue storefront: a double-rule masthead, halftone-textured paper, ticket-stub price tags, a wax-seal discount badge, a product grid with diagonal-weave thumbnails that lift on hover, and an old-school phone-order footer. Bebas Neue + DM Serif Display + Courier Prime in rust/mustard/teal.

**HTML:**
```html
<div class="ret-11">
  <div class="ret-11__cat">
    <div class="ret-11__masthead">
      <div class="ret-11__brand">The <b>General</b> Goods <em>Co.</em></div>
      <div class="ret-11__est">Catalogue No. 47<br><b>EST. 1974</b> · MAIL ORDER</div>
    </div>

    <div class="ret-11__strip">
      <span>◆ Free shipping over $25 ◆</span>
      <span>★ Satisfaction guaranteed ★</span>
      <span>◆ Order by phone or post ◆</span>
    </div>

    <div class="ret-11__hero">
      <div>
        <h1>Genuine goods,<br><em>honest prices.</em></h1>
        <p>Hand-picked wares from our warehouse to your doorstep. Halftone textures, double-rule borders and ticket-stub price tags — every pixel is pure CSS, no images.</p>
      </div>
      <div class="ret-11__seal">
        <div>
          <div class="big">25%<br>OFF</div>
          <small>This Month Only</small>
        </div>
      </div>
    </div>

    <div class="ret-11__grid">
      <div class="ret-11__item">
        <div class="ret-11__thumb t1"><span class="ret-11__tag">New</span>📻</div>
        <div class="ret-11__info"><h3>Tube Radio</h3><div class="sku">SKU · 0042</div>
          <div class="ret-11__price"><span class="p">$38</span><span class="was">$52</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t2">📷</div>
        <div class="ret-11__info"><h3>Field Camera</h3><div class="sku">SKU · 0118</div>
          <div class="ret-11__price"><span class="p">$94</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t3"><span class="ret-11__tag">Sale</span>☎️</div>
        <div class="ret-11__info"><h3>Rotary Phone</h3><div class="sku">SKU · 0076</div>
          <div class="ret-11__price"><span class="p">$29</span><span class="was">$45</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t4">⌚</div>
        <div class="ret-11__info"><h3>Wind-Up Watch</h3><div class="sku">SKU · 0203</div>
          <div class="ret-11__price"><span class="p">$61</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t5"><span class="ret-11__tag">Hot</span>🕹️</div>
        <div class="ret-11__info"><h3>Joystick Set</h3><div class="sku">SKU · 0159</div>
          <div class="ret-11__price"><span class="p">$22</span><span class="was">$30</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t6">🧳</div>
        <div class="ret-11__info"><h3>Travel Trunk</h3><div class="sku">SKU · 0011</div>
          <div class="ret-11__price"><span class="p">$110</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
    </div>

    <div class="ret-11__order">
      <span class="t">To order, ring us today —</span>
      <span class="phone">☎ 1-800-RETRO-CO</span>
      <button class="cart">🛒 View Cart (3)</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Courier+Prime:wght@400;700&display=swap');

.ret-11, .ret-11 *, .ret-11 *::before, .ret-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-11 ::selection{background:#d4451f;color:#f4ecd8}

.ret-11{
  --paper:#f4ecd8;
  --ink:#2b2118;
  --rust:#d4451f;
  --mustard:#e0a92e;
  --teal:#1f6b5e;
  --cream:#fbf6e9;
  font-family:'Courier Prime',monospace;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 50% 50%,rgba(212,69,31,.04) 1px,transparent 1px),
    radial-gradient(circle,rgba(0,0,0,.025) 1px,transparent 1px);
  background-size:8px 8px,4px 4px;
  color:var(--ink);
  min-height:100vh;padding:clamp(14px,3vw,40px);
}
.ret-11__cat{max-width:920px;margin:0 auto;background:var(--cream);border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);position:relative}
/* aged paper edge */
.ret-11__cat::before{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(120,80,30,.12)}

.ret-11__masthead{border-bottom:3px double var(--ink);padding:18px 22px;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px;background:var(--ink);color:var(--paper)}
.ret-11__masthead .ret-11__brand{font-family:'DM Serif Display';font-size:clamp(1.8rem,6vw,3rem);line-height:.9;font-style:italic}
.ret-11__masthead .ret-11__brand b{color:var(--mustard);font-style:normal}
.ret-11__masthead .ret-11__est{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-align:right;line-height:1.6}
.ret-11__est b{color:var(--rust)}

.ret-11__strip{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;background:var(--mustard);color:var(--ink);padding:7px 22px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--ink)}

.ret-11__hero{padding:22px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;border-bottom:2px solid var(--ink)}
@media(max-width:640px){.ret-11__hero{grid-template-columns:1fr}}
.ret-11__hero h1{font-family:'Bebas Neue';font-size:clamp(2.4rem,9vw,4.4rem);line-height:.9;letter-spacing:.01em}
.ret-11__hero h1 em{color:var(--rust);font-style:normal}
.ret-11__hero p{margin-top:10px;font-size:.92rem;line-height:1.5}
.ret-11__seal{aspect-ratio:1;max-width:200px;margin:0 auto;border-radius:50%;background:var(--rust);color:var(--cream);
  display:grid;place-items:center;text-align:center;padding:20px;position:relative;
  box-shadow:0 0 0 4px var(--cream),0 0 0 6px var(--rust)}
.ret-11__seal .big{font-family:'Bebas Neue';font-size:2.6rem;line-height:.85}
.ret-11__seal small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;display:block;margin-top:6px}
.ret-11__seal::before{content:'★ ★ ★';position:absolute;bottom:14px;font-size:.6rem;letter-spacing:.3em}

.ret-11__grid{padding:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:640px){.ret-11__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.ret-11__grid{grid-template-columns:1fr}}
.ret-11__item{border:1.5px solid var(--ink);background:var(--cream);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.ret-11__item:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.ret-11__thumb{aspect-ratio:1;display:grid;place-items:center;font-size:2.6rem;border-bottom:1.5px solid var(--ink);position:relative;overflow:hidden}
.ret-11__thumb.t1{background:repeating-linear-gradient(45deg,#e8c9a0 0 10px,#dcb98a 10px 20px)}
.ret-11__thumb.t2{background:repeating-linear-gradient(45deg,#bcd9d2 0 10px,#a8cdc4 10px 20px)}
.ret-11__thumb.t3{background:repeating-linear-gradient(45deg,#f0cdbf 0 10px,#e8bba8 10px 20px)}
.ret-11__thumb.t4{background:repeating-linear-gradient(45deg,#e4dca0 0 10px,#d8cf88 10px 20px)}
.ret-11__thumb.t5{background:repeating-linear-gradient(45deg,#cfc4e0 0 10px,#bfb2d6 10px 20px)}
.ret-11__thumb.t6{background:repeating-linear-gradient(45deg,#d9d0c4 0 10px,#cabfb0 10px 20px)}
.ret-11__tag{position:absolute;top:8px;left:8px;background:var(--rust);color:var(--cream);font-size:.6rem;font-weight:700;letter-spacing:.1em;padding:3px 7px;text-transform:uppercase}
.ret-11__info{padding:12px;flex:1;display:flex;flex-direction:column}
.ret-11__info h3{font-family:'DM Serif Display';font-size:1.05rem;line-height:1.1}
.ret-11__info .sku{font-size:.66rem;color:#8a7a64;letter-spacing:.1em;margin:3px 0 8px}
.ret-11__price{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between}
.ret-11__price .p{font-family:'Bebas Neue';font-size:1.6rem;color:var(--teal)}
.ret-11__price .was{font-size:.74rem;text-decoration:line-through;color:#a89880}
.ret-11__add{display:block;text-align:center;margin-top:10px;background:var(--ink);color:var(--cream);text-decoration:none;
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:8px;transition:background .2s}
.ret-11__add:hover{background:var(--rust)}

.ret-11__order{border-top:3px double var(--ink);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;background:var(--teal);color:var(--cream)}
.ret-11__order .t{font-family:'DM Serif Display';font-size:1.2rem;font-style:italic}
.ret-11__order .phone{font-family:'Bebas Neue';font-size:1.8rem;letter-spacing:.04em}
.ret-11__order .cart{background:var(--mustard);color:var(--ink);border:2px solid var(--cream);font-family:'Bebas Neue';font-size:1.2rem;letter-spacing:.05em;padding:8px 22px;cursor:pointer}

@media (prefers-reduced-motion: reduce){.ret-11 *{transition:none !important}}
```

### 12. Retro Desktop Portfolio Website Template

**Type:** CSS + JS
**Description:** A classic desktop-OS portfolio: a System-style menu bar with live clock, desktop folder icons, and stacked windows (about / projects / contact) you can drag and bring-to-focus. The chrome — pin-striped title bars, gel close dots, dashed dividers — is pure CSS; focus + drag are tiny vanilla JS. Pixelify Sans + Space Mono on a dotted teal desktop.

**HTML:**
```html
<div class="ret-12">
  <div class="ret-12__menubar">
    <span class="apple">❖</span>
    <span>File</span><span>Edit</span><span>View</span><span>Special</span>
    <span class="spacer"><span>◐ 88%</span><span class="clock" id="ret-12-clock">12:00 PM</span></span>
  </div>

  <div class="ret-12__desk" id="ret-12-desk">
    <div class="ret-12__shortcuts">
      <div class="ret-12__sc"><i>📁</i><span>Work</span></div>
      <div class="ret-12__sc"><i>📄</i><span>Resume</span></div>
      <div class="ret-12__sc"><i>🗑️</i><span>Trash</span></div>
    </div>

    <div class="ret-12__window ret-12__about is-focus" data-win>
      <div class="ret-12__titlebar" data-drag><span class="dot r"></span><span class="dot"></span><b>about_me.txt</b><span class="x">▢</span></div>
      <div class="ret-12__content">
        <div class="ret-12__avatar">🧑‍💻</div>
        <h2>Hi, I'm Mara.<small>// CREATIVE DEVELOPER</small></h2>
        <p>I build playful interfaces with a soft spot for old machines. Drag these windows around — focus &amp; drag are tiny vanilla JS, everything else is pure CSS.</p>
        <div class="ret-12__tags"><span>CSS</span><span>Motion</span><span>WebGL</span><span>Type</span><span>Pixels</span></div>
      </div>
    </div>

    <div class="ret-12__window ret-12__projects" data-win>
      <div class="ret-12__titlebar" data-drag><span class="dot r"></span><span class="dot"></span><b>projects</b><span class="x">▢</span></div>
      <div class="ret-12__content">
        <h2 style="font-size:16px">Selected Work</h2>
        <hr class="ret-12__divider">
        <div class="ret-12__proj"><i>🎨</i><div class="meta"><b>Pixel Painter</b><small>Canvas · 2025</small></div><span class="arrow">→</span></div>
        <div class="ret-12__proj"><i>🎹</i><div class="meta"><b>Synth Web Toy</b><small>WebAudio · 2024</small></div><span class="arrow">→</span></div>
        <div class="ret-12__proj"><i>🌀</i><div class="meta"><b>CRT Shader Lab</b><small>GLSL · 2024</small></div><span class="arrow">→</span></div>
      </div>
    </div>

    <div class="ret-12__window ret-12__contact" data-win>
      <div class="ret-12__titlebar" data-drag><span class="dot r"></span><span class="dot"></span><b>contact</b><span class="x">▢</span></div>
      <div class="ret-12__content">
        <a href="#">→ hello@mara.studio</a>
        <a href="#">→ github.com/mara</a>
        <a href="#">→ dribbble.com/mara</a>
        <a href="#">→ read.cv/mara</a>
      </div>
    </div>

    <div class="ret-12__hint">▲ drag any title bar · click to focus ▲</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Chicago&family=Pixelify+Sans:wght@400;700&family=Space+Mono:wght@400;700&display=swap');

.ret-12, .ret-12 *, .ret-12 *::before, .ret-12 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-12 ::selection{background:#000;color:#d6f5e3}

.ret-12{
  --bg:#3a6b5e;
  --win:#e8e4d8;
  --ink:#1a1a1a;
  --bar:#1a1a1a;
  --accent:#ff5a3c;
  --accent2:#3c7dff;
  --line:#1a1a1a;
  font-family:'Space Mono',monospace;
  background:var(--bg);
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:6px 6px;
  min-height:100vh;position:relative;overflow:hidden;color:var(--ink);
  padding:10px;
}
/* menu bar */
.ret-12__menubar{display:flex;align-items:center;gap:18px;background:var(--win);border:2px solid var(--ink);padding:5px 14px;
  box-shadow:3px 3px 0 var(--ink);font-family:'Pixelify Sans';font-size:15px;position:relative;z-index:100}
.ret-12__menubar .apple{font-weight:700}
.ret-12__menubar span{cursor:default}
.ret-12__menubar .spacer{margin-left:auto;font-size:13px;display:flex;gap:14px;align-items:center}
.ret-12__menubar .clock{font-family:'Space Mono';font-size:12px}

.ret-12__desk{position:relative;height:calc(100vh - 70px);margin-top:10px}

/* desktop folder icons */
.ret-12__shortcuts{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:18px;z-index:1}
.ret-12__sc{width:74px;text-align:center;cursor:pointer;color:var(--win);text-shadow:1px 1px 0 #000}
.ret-12__sc i{display:block;font-size:30px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4))}
.ret-12__sc span{font-size:11px;font-family:'Pixelify Sans';display:inline-block;margin-top:3px;padding:1px 4px}
.ret-12__sc:hover span{background:var(--ink);color:var(--win)}

/* windows */
.ret-12__window{position:absolute;background:var(--win);border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(0,0,0,.5);
  display:flex;flex-direction:column;min-width:240px}
.ret-12__window.is-focus{box-shadow:7px 7px 0 var(--ink);z-index:50}
.ret-12__titlebar{display:flex;align-items:center;gap:8px;background:var(--bar);color:var(--win);padding:5px 8px;cursor:grab;user-select:none}
.ret-12__titlebar.is-drag{cursor:grabbing}
.ret-12__titlebar .dot{width:13px;height:13px;border:2px solid var(--win);border-radius:50%;flex:0 0 auto}
.ret-12__titlebar .dot.r{background:var(--accent)}
.ret-12__titlebar b{font-family:'Pixelify Sans';font-size:14px;letter-spacing:.02em;flex:1;
  background:repeating-linear-gradient(var(--win) 0 1px,transparent 1px 3px);padding:2px 8px;text-align:center;color:var(--win)}
.ret-12__titlebar .x{margin-left:auto}
.ret-12__content{padding:16px;font-size:12px;line-height:1.55}
.ret-12__content h2{font-family:'Pixelify Sans';font-size:20px;margin-bottom:4px}
.ret-12__content h2 small{display:block;font-family:'Space Mono';font-size:11px;color:#5a6b64;letter-spacing:.1em;margin-top:4px}
.ret-12__content p{color:#3a3a3a}
.ret-12__divider{border:0;border-top:2px dashed var(--ink);margin:12px 0}

/* about window */
.ret-12__about{width:300px;top:18px;left:14px}
.ret-12__avatar{width:64px;height:64px;border:2px solid var(--ink);float:left;margin:0 14px 8px 0;
  background:repeating-conic-gradient(var(--accent) 0 90deg,var(--accent2) 0 180deg) 0 0/16px 16px;display:grid;place-items:center;font-size:30px;background-blend-mode:multiply}
.ret-12__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;clear:both}
.ret-12__tags span{font-size:10px;border:1.5px solid var(--ink);padding:3px 7px;font-family:'Pixelify Sans'}

/* projects window */
.ret-12__projects{width:330px;top:120px;left:230px}
@media(max-width:680px){.ret-12__projects{left:14px;top:300px}}
.ret-12__proj{display:flex;align-items:center;gap:10px;border:1.5px solid var(--ink);padding:9px;margin-bottom:8px;cursor:pointer;transition:transform .1s,background .1s}
.ret-12__proj:hover{transform:translate(-2px,-2px);background:#fff;box-shadow:3px 3px 0 var(--ink)}
.ret-12__proj i{font-size:22px}
.ret-12__proj .meta b{font-family:'Pixelify Sans';font-size:13px;display:block}
.ret-12__proj .meta small{font-size:10px;color:#5a6b64}
.ret-12__proj .arrow{margin-left:auto;font-weight:700}

/* contact window */
.ret-12__contact{width:248px;top:330px;left:30px}
@media(max-width:680px){.ret-12__contact{display:none}}
.ret-12__contact a{display:block;color:var(--accent2);text-decoration:none;border-bottom:1px dotted var(--accent2);padding:4px 0;font-size:12px}
.ret-12__contact a:hover{background:var(--accent2);color:#fff;padding-left:6px}

.ret-12__hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.1em;z-index:1}

@media(max-width:680px){.ret-12__about{left:14px;width:calc(100% - 60px);max-width:300px}.ret-12__shortcuts{display:none}}
@media (prefers-reduced-motion: reduce){.ret-12 *{transition:none !important}}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ret-12');
  if (!root) return;
  const desk = root.querySelector('#ret-12-desk');
  const wins = Array.from(root.querySelectorAll('[data-win]'));
  let z = 50;

  function focus(win){
    wins.forEach(w => w.classList.remove('is-focus'));
    win.classList.add('is-focus');
    win.style.zIndex = ++z;
  }
  wins.forEach(win => {
    win.addEventListener('mousedown', () => focus(win), true);
    const bar = win.querySelector('[data-drag]');
    let sx, sy, ox, oy, dragging = false;
    const start = (cx, cy) => {
      dragging = true; focus(win);
      const r = win.getBoundingClientRect();
      const d = desk.getBoundingClientRect();
      ox = r.left - d.left; oy = r.top - d.top; sx = cx; sy = cy;
      win.style.left = ox + 'px'; win.style.top = oy + 'px'; win.style.right = 'auto';
      bar.classList.add('is-drag');
    };
    const move = (cx, cy) => {
      if (!dragging) return;
      let nx = ox + (cx - sx), ny = oy + (cy - sy);
      const d = desk.getBoundingClientRect();
      nx = Math.max(0, Math.min(nx, d.width - 60));
      ny = Math.max(0, Math.min(ny, d.height - 30));
      win.style.left = nx + 'px'; win.style.top = ny + 'px';
    };
    const end = () => { dragging = false; bar.classList.remove('is-drag'); };
    bar.addEventListener('mousedown', e => { e.preventDefault(); start(e.clientX, e.clientY); });
    window.addEventListener('mousemove', e => move(e.clientX, e.clientY));
    window.addEventListener('mouseup', end);
    bar.addEventListener('touchstart', e => { start(e.touches[0].clientX, e.touches[0].clientY); }, {passive:true});
    window.addEventListener('touchmove', e => { if(dragging){ move(e.touches[0].clientX, e.touches[0].clientY); } }, {passive:true});
    window.addEventListener('touchend', end);
  });

  const clock = root.querySelector('#ret-12-clock');
  const tick = () => {
    const d = new Date();
    let h = d.getHours(), m = String(d.getMinutes()).padStart(2,'0');
    const ap = h >= 12 ? 'PM' : 'AM'; h = h % 12 || 12;
    clock.textContent = `${h}:${m} ${ap}`;
  };
  tick(); setInterval(tick, 10000);
})();
```

---
## 12 CSS Ripple Effects

URL: https://codefronts.com/motion/css-ripple-designs/
Description: 12 hand-coded CSS ripple animations covering every production pattern in 2026 — interactive water-surface click ripples with multi-ring concentric expansion, vanilla Material Design ink button ripple, animated pond background with bubble particles, neon glow ripple, pure-CSS ripple loading spinner, sonar ping for live status indicators, heartbeat pulse for medical and fitness UIs, ripple card hover effect, sound wave visualiser (no Web Audio API required), liquid drop animation, ripple-driven login form, and aurora borealis ripple background. All GPU-accelerated via transform + opacity only (no layout thrashing, 60fps on mid-tier mobile), respect prefers-reduced-motion, use scoped .rpl-NN__* class names so multiple can coexist on the same page, and ship MIT-licensed with zero framework dependencies. 6 demos are 100% pure CSS, 6 use vanilla JavaScript for click coordinates / particle spawning / live state.
Demo count: 12

### 01. CSS Water Ripple Click Effect

**Type:** CSS + JS
**Description:** An interactive water-surface pond you click to create realistic multi-ring ripples — four concentric CSS rings (box-shadow glow, fade-out scale) spawn at the exact cursor coordinate via JS, plus a radial-gradient caustic shimmer overlay and animated floating bubble particles. Outfit on a deep ocean radial-gradient with phosphor-blue palette.

**HTML:**
```html
<div class="rpl-01">
  <div class="rpl-01__header">
    <h1>Water Ripple Click Effect</h1>
    <p>Click anywhere on the surface to create realistic water ripples</p>
  </div>

  <div class="rpl-01__pond" id="rpl-01-pond">
    <div class="rpl-01__label">click the surface</div>
  </div>

  <div class="rpl-01__info">
    <div class="rpl-01__stat">
      <b id="rpl-01-count">0</b>
      <span>Drops</span>
    </div>
    <div class="rpl-01__stat">
      <b id="rpl-01-rings">0</b>
      <span>Active Rings</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

.rpl-01, .rpl-01 *, .rpl-01 *::before, .rpl-01 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-01 ::selection { background: #00d4ff; color: #001a2e; }

.rpl-01 {
  --deep: #001a2e;
  --mid: #003a5c;
  --water: #00a8cc;
  --foam: #00d4ff;
  --glint: #7ef7ff;
  --text: #e0f7ff;
  font-family: 'Outfit', sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #003a5c, #001015 70%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px 20px;
  color: var(--text);
  overflow: hidden;
  position: relative;
}

/* Animated depth lines */
.rpl-01::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 48px, rgba(0,168,204,0.06) 48px, rgba(0,168,204,0.06) 50px);
  pointer-events: none;
}

.rpl-01__header {
  text-align: center;
  z-index: 2;
}
.rpl-01__header h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--glint), var(--foam), var(--water));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rpl-01__header p {
  margin-top: 8px;
  font-size: 1rem;
  color: rgba(224,247,255,0.55);
  font-weight: 300;
}

/* The water surface */
.rpl-01__pond {
  width: min(700px, 100%);
  height: 400px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid rgba(0,212,255,0.2);
  box-shadow: 0 0 60px rgba(0,168,204,0.25), inset 0 0 80px rgba(0,20,40,0.6);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,168,204,0.18), transparent 60%),
    linear-gradient(180deg, #001f38 0%, #000e1a 100%);
  z-index: 2;
}

/* Caustic shimmer overlay */
.rpl-01__pond::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 200% 80% at 50% 100%, rgba(0,168,204,0.12), transparent),
    repeating-linear-gradient(60deg, transparent 0px, transparent 20px, rgba(0,212,255,0.03) 20px, rgba(0,212,255,0.03) 21px),
    repeating-linear-gradient(-60deg, transparent 0px, transparent 20px, rgba(0,212,255,0.03) 20px, rgba(0,212,255,0.03) 21px);
  animation: rpl-01-caustic 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes rpl-01-caustic { to { background-position: 0 40px, 30px 0, -30px 0; } }

.rpl-01__pond::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,10,20,0.5) 100%);
  pointer-events: none;
  z-index: 3;
}

/* A ripple ring spawned by JS */
.rpl-01__ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 2;
  animation: rpl-01-wave 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes rpl-01-wave {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* Three concentric ring sizes */
.rpl-01__ripple--a {
  width: 60px; height: 60px;
  border: 2px solid rgba(0,212,255,0.9);
  box-shadow: 0 0 12px rgba(0,212,255,0.5), inset 0 0 12px rgba(0,212,255,0.1);
}
.rpl-01__ripple--b {
  width: 130px; height: 130px;
  border: 1.5px solid rgba(0,168,204,0.65);
  box-shadow: 0 0 20px rgba(0,168,204,0.3);
  animation-delay: 0.12s;
}
.rpl-01__ripple--c {
  width: 220px; height: 220px;
  border: 1px solid rgba(0,120,160,0.4);
  animation-delay: 0.26s;
}
.rpl-01__ripple--d {
  width: 340px; height: 340px;
  border: 0.5px solid rgba(0,90,120,0.25);
  animation-delay: 0.44s;
}

/* Center drop dot */
.rpl-01__drop {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7ef7ff, #00d4ff);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 4;
  animation: rpl-01-drop 0.4s cubic-bezier(0.2, 0.9, 0.4, 1) forwards;
  box-shadow: 0 0 14px #00d4ff;
}
@keyframes rpl-01-drop {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.6); opacity: 0; }
}

.rpl-01__label {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(0,212,255,0.4);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
  animation: rpl-01-pulse 2s ease-in-out infinite;
}
@keyframes rpl-01-pulse { 50% { opacity: 0.2; } }

/* Ambient floating particles */
.rpl-01__particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,212,255,0.6);
  pointer-events: none;
  z-index: 1;
  animation: rpl-01-float linear infinite;
}
@keyframes rpl-01-float {
  0% { transform: translateY(0) scale(1); opacity: 0.6; }
  50% { opacity: 0.2; }
  100% { transform: translateY(-380px) scale(0.3); opacity: 0; }
}

.rpl-01__info {
  display: flex;
  gap: 32px;
  z-index: 2;
  flex-wrap: wrap;
  justify-content: center;
}
.rpl-01__stat {
  text-align: center;
}
.rpl-01__stat b {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--foam);
}
.rpl-01__stat span {
  font-size: 0.75rem;
  color: rgba(224,247,255,0.4);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .rpl-01__pond::before, .rpl-01__label, .rpl-01__particle { animation: none !important; }
  .rpl-01__ripple, .rpl-01__drop { animation-duration: 0.01ms !important; }
}
```

**JS:**
```js
(() => {
  const pond = document.getElementById('rpl-01-pond');
  const countEl = document.getElementById('rpl-01-count');
  const ringsEl = document.getElementById('rpl-01-rings');
  let dropCount = 0;
  let activeRings = 0;

  // Spawn ambient particles
  for (let i = 0; i < 12; i++) {
    const p = document.createElement('div');
    p.className = 'rpl-01__particle';
    const size = Math.random() * 4 + 1;
    p.style.cssText = `
      width:${size}px; height:${size}px;
      left:${Math.random()*100}%;
      bottom:${Math.random()*100}%;
      opacity:${Math.random()*0.6+0.1};
      animation-duration:${Math.random()*6+4}s;
      animation-delay:${Math.random()*-6}s;
    `;
    pond.appendChild(p);
  }

  pond.addEventListener('click', (e) => {
    const rect = pond.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    dropCount++;
    countEl.textContent = dropCount;

    // spawn drop dot
    const drop = document.createElement('div');
    drop.className = 'rpl-01__drop';
    drop.style.left = x + 'px';
    drop.style.top = y + 'px';
    pond.appendChild(drop);

    // spawn 4 concentric rings
    ['a','b','c','d'].forEach((t, i) => {
      const r = document.createElement('div');
      r.className = `rpl-01__ripple rpl-01__ripple--${t}`;
      r.style.left = x + 'px';
      r.style.top = y + 'px';
      pond.appendChild(r);
      activeRings++;
      ringsEl.textContent = activeRings;
      r.addEventListener('animationend', () => {
        r.remove();
        activeRings = Math.max(0, activeRings - 1);
        ringsEl.textContent = activeRings;
      }, { once: true });
    });

    drop.addEventListener('animationend', () => drop.remove(), { once: true });
  });
})();
```

### 02. CSS Ripple Button Click Animation

**Type:** CSS + JS
**Description:** A full Material-style ink-ripple button kit in eight color variants — fire, ocean, emerald, violet, gold, rose, ghost and dark-surface — each with a radial ink span injected at the click coordinate that scales to fill and fades. A live code snippet panel explains the technique. Inter on a near-black surface.

**HTML:**
```html
<div class="rpl-02">
  <div class="rpl-02__header">
    <h1>Ripple Button Click Animation</h1>
    <p>Material-style ink ripple on every button press — pure CSS + minimal JS</p>
  </div>

  <div class="rpl-02__grid">
    <button class="rpl-02__btn rpl-02__btn--fire">
      <span class="rpl-02__icon">🔥</span> Get Started
    </button>
    <button class="rpl-02__btn rpl-02__btn--ocean">
      <span class="rpl-02__icon">🌊</span> Dive In
    </button>
    <button class="rpl-02__btn rpl-02__btn--emerald">
      <span class="rpl-02__icon">✓</span> Confirm
    </button>
    <button class="rpl-02__btn rpl-02__btn--violet">
      <span class="rpl-02__icon">✦</span> Upgrade
    </button>
    <button class="rpl-02__btn rpl-02__btn--gold">
      <span class="rpl-02__icon">★</span> Premium
    </button>
    <button class="rpl-02__btn rpl-02__btn--rose">
      <span class="rpl-02__icon">♥</span> Save
    </button>
    <button class="rpl-02__btn rpl-02__btn--ghost">
      Ghost Style
    </button>
    <button class="rpl-02__btn rpl-02__btn--dark">
      Dark Surface
    </button>
  </div>

  <div class="rpl-02__code">
    <h3>How it works</h3>
    <pre><span class="cm">/* On click, inject a positioned ink div */</span>
<span class="kw">.btn</span> { position: relative; overflow: hidden; }

<span class="kw">.ink</span> {
  position: absolute; border-radius: 50%;
  animation: <span class="str">ink-expand</span> 0.6s linear forwards;
}
@keyframes <span class="str">ink-expand</span> {
  to { transform: scale(4); opacity: 0; }
}</pre>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

.rpl-02, .rpl-02 *, .rpl-02 *::before, .rpl-02 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-02 ::selection { background: #ff6b35; color: #fff; }

.rpl-02 {
  --bg: #0f0f13;
  --surface: #1a1a23;
  --border: rgba(255,255,255,0.08);
  --text: #f0f0f5;
  --muted: rgba(240,240,245,0.45);
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 60px 24px;
  color: var(--text);
}

.rpl-02__header {
  text-align: center;
}
.rpl-02__header h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.rpl-02__header p {
  margin-top: 10px;
  color: var(--muted);
  font-weight: 300;
  font-size: 0.95rem;
}

.rpl-02__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: min(860px, 100%);
}

/* The core ripple button */
.rpl-02__btn {
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  font-family: 'Inter';
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 18px 32px;
  border-radius: 12px;
  color: #fff;
  transition: transform 0.15s, filter 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
}
.rpl-02__btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.rpl-02__btn:active { transform: translateY(1px); filter: brightness(0.95); }

/* Ripple ink */
.rpl-02__btn .ink {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  animation: rpl-02-ink 0.6s linear forwards;
}
@keyframes rpl-02-ink {
  to { transform: scale(4); opacity: 0; }
}

/* Variant colors */
.rpl-02__btn--fire {
  background: linear-gradient(135deg, #ff4500, #ff6b35);
  box-shadow: 0 8px 32px rgba(255,69,0,0.35);
}
.rpl-02__btn--fire .ink { background: rgba(255,200,150,0.45); }

.rpl-02__btn--ocean {
  background: linear-gradient(135deg, #0077b6, #00b4d8);
  box-shadow: 0 8px 32px rgba(0,119,182,0.35);
}
.rpl-02__btn--ocean .ink { background: rgba(160,230,255,0.4); }

.rpl-02__btn--emerald {
  background: linear-gradient(135deg, #065f46, #10b981);
  box-shadow: 0 8px 32px rgba(16,185,129,0.3);
}
.rpl-02__btn--emerald .ink { background: rgba(160,255,210,0.4); }

.rpl-02__btn--violet {
  background: linear-gradient(135deg, #5b21b6, #8b5cf6);
  box-shadow: 0 8px 32px rgba(139,92,246,0.35);
}
.rpl-02__btn--violet .ink { background: rgba(220,190,255,0.4); }

.rpl-02__btn--gold {
  background: linear-gradient(135deg, #92400e, #f59e0b);
  box-shadow: 0 8px 32px rgba(245,158,11,0.3);
}
.rpl-02__btn--gold .ink { background: rgba(255,245,180,0.45); }

.rpl-02__btn--rose {
  background: linear-gradient(135deg, #9f1239, #fb7185);
  box-shadow: 0 8px 32px rgba(251,113,133,0.35);
}
.rpl-02__btn--rose .ink { background: rgba(255,200,210,0.4); }

/* Outlined ghost variant */
.rpl-02__btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--text);
  box-shadow: none;
}
.rpl-02__btn--ghost:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); }
.rpl-02__btn--ghost .ink { background: rgba(255,255,255,0.15); }

/* Dark surface variant */
.rpl-02__btn--dark {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.rpl-02__btn--dark .ink { background: rgba(255,255,255,0.12); }

/* Icon pill */
.rpl-02__icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* Code snippet */
.rpl-02__code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: min(860px, 100%);
}
.rpl-02__code h3 {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.rpl-02__code pre {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(240,240,245,0.75);
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.rpl-02__code .kw { color: #c084fc; }
.rpl-02__code .str { color: #86efac; }
.rpl-02__code .cm { color: rgba(240,240,245,0.3); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .rpl-02__btn .ink { animation: none !important; }
  .rpl-02__btn { transition: none; }
}
```

**JS:**
```js
document.querySelectorAll('.rpl-02__btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const size = Math.max(rect.width, rect.height);
    const ink = document.createElement('span');
    ink.className = 'ink';
    ink.style.cssText = `
      left:${x - size/2}px; top:${y - size/2}px;
      width:${size}px; height:${size}px;
    `;
    this.appendChild(ink);
    ink.addEventListener('animationend', () => ink.remove(), { once: true });
  });
});
```

### 03. CSS Pond Ripple Background Animation

**Type:** CSS + JS
**Description:** A multi-origin pond ripple hero with four separate drop-sources — each triggering 2–4 staggered ring keyframes at different radii and speeds — plus pulsing drop-center dots, a frosted-glass editorial card and drifting leaf particles, all pure CSS. DM Serif Display + DM Sans on a deep emerald gradient.

**HTML:**
```html
<div class="rpl-03">
  <div class="rpl-03__fog"></div>

  <!-- Ripple groups -->
  <div class="rpl-03__ring rpl-03__ring--a1"></div>
  <div class="rpl-03__ring rpl-03__ring--a2"></div>
  <div class="rpl-03__ring rpl-03__ring--a3"></div>
  <div class="rpl-03__ring rpl-03__ring--a4"></div>
  <div class="rpl-03__ring rpl-03__ring--b1"></div>
  <div class="rpl-03__ring rpl-03__ring--b2"></div>
  <div class="rpl-03__ring rpl-03__ring--b3"></div>
  <div class="rpl-03__ring rpl-03__ring--c1"></div>
  <div class="rpl-03__ring rpl-03__ring--c2"></div>
  <div class="rpl-03__ring rpl-03__ring--d1"></div>
  <div class="rpl-03__ring rpl-03__ring--d2"></div>

  <!-- Drop-point centers -->
  <div class="rpl-03__drop rpl-03__drop--a"></div>
  <div class="rpl-03__drop rpl-03__drop--b"></div>
  <div class="rpl-03__drop rpl-03__drop--c"></div>
  <div class="rpl-03__drop rpl-03__drop--d"></div>

  <div class="rpl-03__card">
    <div class="eyebrow">Pure CSS Background</div>
    <h1>Still waters,<br><em>endless ripples.</em></h1>
    <p>A multi-origin pond ripple background built from layered CSS keyframes — no canvas, no JavaScript, just rings that breathe.</p>
    <a href="#" class="rpl-03__cta">Explore the Demo →</a>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

.rpl-03, .rpl-03 *, .rpl-03 *::before, .rpl-03 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-03 ::selection { background: #5eead4; color: #042f2e; }

.rpl-03 {
  font-family: 'DM Sans', sans-serif;
  background: linear-gradient(160deg, #042f2e 0%, #064e3b 35%, #065f46 60%, #022c22 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* ─── Animated pond ripple rings (pure CSS, no JS) ─── */
.rpl-03__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(94,234,212,0.5);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

/* Ripple group A — center-left */
.rpl-03__ring--a1 { left: 28%; top: 55%; width: 400px; height: 400px; animation: rpl-03-expand 4s ease-out infinite; }
.rpl-03__ring--a2 { left: 28%; top: 55%; width: 400px; height: 400px; animation: rpl-03-expand 4s ease-out 0.8s infinite; border-color: rgba(94,234,212,0.3); }
.rpl-03__ring--a3 { left: 28%; top: 55%; width: 400px; height: 400px; animation: rpl-03-expand 4s ease-out 1.6s infinite; border-color: rgba(94,234,212,0.15); }
.rpl-03__ring--a4 { left: 28%; top: 55%; width: 400px; height: 400px; animation: rpl-03-expand 4s ease-out 2.4s infinite; border-color: rgba(94,234,212,0.07); }

/* Ripple group B — right */
.rpl-03__ring--b1 { left: 72%; top: 38%; width: 320px; height: 320px; animation: rpl-03-expand 5s ease-out 1.2s infinite; border-color: rgba(52,211,153,0.45); }
.rpl-03__ring--b2 { left: 72%; top: 38%; width: 320px; height: 320px; animation: rpl-03-expand 5s ease-out 2.2s infinite; border-color: rgba(52,211,153,0.25); }
.rpl-03__ring--b3 { left: 72%; top: 38%; width: 320px; height: 320px; animation: rpl-03-expand 5s ease-out 3.2s infinite; border-color: rgba(52,211,153,0.1); }

/* Ripple group C — top-right (small) */
.rpl-03__ring--c1 { left: 85%; top: 20%; width: 200px; height: 200px; animation: rpl-03-expand 3.2s ease-out 0.4s infinite; border-color: rgba(110,231,183,0.6); }
.rpl-03__ring--c2 { left: 85%; top: 20%; width: 200px; height: 200px; animation: rpl-03-expand 3.2s ease-out 1.1s infinite; border-color: rgba(110,231,183,0.3); }

/* Ripple group D — bottom-left (tiny) */
.rpl-03__ring--d1 { left: 12%; top: 78%; width: 160px; height: 160px; animation: rpl-03-expand 2.8s ease-out 1.8s infinite; border-color: rgba(167,243,208,0.55); }
.rpl-03__ring--d2 { left: 12%; top: 78%; width: 160px; height: 160px; animation: rpl-03-expand 2.8s ease-out 2.5s infinite; border-color: rgba(167,243,208,0.25); }

@keyframes rpl-03-expand {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  70%  { opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* Drop-point dots */
.rpl-03__drop {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a7f3d0, #5eead4);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(94,234,212,0.8);
  animation: rpl-03-drip 4s ease-in-out infinite;
}
.rpl-03__drop--a { left: 28%; top: 55%; }
.rpl-03__drop--b { left: 72%; top: 38%; animation-delay: 1.2s; animation-duration: 5s; }
.rpl-03__drop--c { left: 85%; top: 20%; animation-delay: 0.4s; animation-duration: 3.2s; width: 5px; height: 5px; }
.rpl-03__drop--d { left: 12%; top: 78%; animation-delay: 1.8s; animation-duration: 2.8s; width: 5px; height: 5px; }

@keyframes rpl-03-drip {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  40%       { transform: translate(-50%,-50%) scale(1.5); opacity: 0.6; }
  50%       { transform: translate(-50%,-50%) scale(0.5); opacity: 1; }
}

/* Soft gradient fog layers */
.rpl-03__fog {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 28% 55%, rgba(16,185,129,0.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 72% 38%, rgba(52,211,153,0.10), transparent 70%),
    radial-gradient(ellipse 35% 30% at 85% 20%, rgba(110,231,183,0.08), transparent 70%);
  pointer-events: none;
}

/* Content card */
.rpl-03__card {
  position: relative;
  z-index: 10;
  background: rgba(4,47,46,0.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(94,234,212,0.2);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 6vw, 64px);
  text-align: center;
  max-width: 560px;
  box-shadow: 0 0 0 1px rgba(94,234,212,0.05) inset, 0 40px 80px rgba(0,0,0,0.4);
}

.rpl-03__card .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #5eead4;
  margin-bottom: 16px;
}
.rpl-03__card h1 {
  font-family: 'DM Serif Display';
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: 1.0;
  color: #f0fdfb;
}
.rpl-03__card h1 em {
  color: #5eead4;
  font-style: italic;
}
.rpl-03__card p {
  margin-top: 16px;
  font-size: 1rem;
  color: rgba(209,250,229,0.65);
  line-height: 1.6;
  font-weight: 300;
}

.rpl-03__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px 30px;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 8px 24px rgba(5,150,105,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.rpl-03__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 16px 40px rgba(5,150,105,0.5);
}

/* Floating leaf particles */
.rpl-03__leaf {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(52,211,153,0.5);
  pointer-events: none;
  animation: rpl-03-drift linear infinite;
}
@keyframes rpl-03-drift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; }
  50%  { transform: translateY(-80px) translateX(20px) scale(0.7); opacity: 0.3; }
  100% { transform: translateY(-160px) translateX(-10px) scale(0.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-03__ring, .rpl-03__drop, .rpl-03__leaf { animation: none !important; opacity: 0.2; }
  .rpl-03__cta { transition: none; }
}
```

**JS:**
```js
// Spawn floating particles
(function() {
  const scene = document.querySelector('.rpl-03');
  for (let i = 0; i < 16; i++) {
    const el = document.createElement('div');
    el.className = 'rpl-03__leaf';
    const size = Math.random() * 5 + 3;
    el.style.cssText = `
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;
      top:${Math.random()*100}%;
      animation-duration:${Math.random()*8+6}s;
      animation-delay:${Math.random()*-8}s;
      opacity:${Math.random()*0.5+0.1};
    `;
    scene.appendChild(el);
  }
})();
```

### 04. CSS Neon Glow Ripple Effect

**Type:** Pure CSS
**Description:** Six neon-core ripple emitters on a dark grid: magenta, cyan, lime, orange, electric-blue and plasma-white — each a 24px glowing core with four rings that scale from 0 to 100% with staggered delays, box-shadow neon glow and color-matched hues. Orbitron + Rajdhani on a near-black #050008 background.

**HTML:**
```html
<div class="rpl-04">
  <div class="rpl-04__title">Neon Glow Ripple Effects</div>

  <div class="rpl-04__stage">
    <!-- MAGENTA -->
    <div class="rpl-04__node rpl-04__node--mag">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Magenta</div>
    </div>

    <!-- CYAN -->
    <div class="rpl-04__node rpl-04__node--cyn">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Cyan</div>
    </div>

    <!-- LIME -->
    <div class="rpl-04__node rpl-04__node--lim">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Lime</div>
    </div>

    <!-- ORANGE -->
    <div class="rpl-04__node rpl-04__node--org">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Orange</div>
    </div>

    <!-- BLUE -->
    <div class="rpl-04__node rpl-04__node--blu">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Electric</div>
    </div>

    <!-- WHITE -->
    <div class="rpl-04__node rpl-04__node--wht">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Plasma</div>
    </div>
  </div>

  <div class="rpl-04__hero">
    <h2>CSS box-shadow glow · keyframe scale</h2>
    <p>Every ring is a single div, scaled from 0 to 1 with a staggered delay. The neon glow comes from layered box-shadow — no SVG filters required.</p>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap');

.rpl-04, .rpl-04 *, .rpl-04 *::before, .rpl-04 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-04 ::selection { background: #f0ff00; color: #0a0010; }

.rpl-04 {
  font-family: 'Rajdhani', sans-serif;
  background: #050008;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 60px 24px;
  color: #e8e0ff;
  overflow: hidden;
  position: relative;
}

/* Subtle grid */
.rpl-04::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(160,80,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,80,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.rpl-04__title {
  font-family: 'Orbitron';
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ff00ff, #a000ff, #00ffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(160,0,255,0.5));
  z-index: 2;
}

/* ─── Main neon ripple display ─── */
.rpl-04__stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  z-index: 2;
  width: min(900px, 100%);
}
@media (max-width: 640px) { .rpl-04__stage { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 420px) { .rpl-04__stage { grid-template-columns: 1fr; } }

.rpl-04__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rpl-04__ripple-wrap {
  position: relative;
  width: 120px; height: 120px;
  display: grid;
  place-items: center;
}

/* Center core */
.rpl-04__core {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
}

/* Neon rings — 4 per node */
.rpl-04__ring {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  inset: 0;
  animation: rpl-04-glow 3s ease-out infinite;
}

/* MAGENTA node */
.rpl-04__node--mag .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #ff80ff, #ff00cc);
  box-shadow: 0 0 20px #ff00cc, 0 0 40px rgba(255,0,204,0.5);
}
.rpl-04__node--mag .rpl-04__ring { border: 1.5px solid #ff00cc; box-shadow: 0 0 8px #ff00cc; }
.rpl-04__node--mag .rpl-04__ring:nth-child(2) { animation-delay: 0.6s; }
.rpl-04__node--mag .rpl-04__ring:nth-child(3) { animation-delay: 1.2s; }
.rpl-04__node--mag .rpl-04__ring:nth-child(4) { animation-delay: 1.8s; }

/* CYAN node */
.rpl-04__node--cyn .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #80ffff, #00ffee);
  box-shadow: 0 0 20px #00ffee, 0 0 40px rgba(0,255,238,0.5);
}
.rpl-04__node--cyn .rpl-04__ring { border: 1.5px solid #00ffee; box-shadow: 0 0 8px #00ffee; }
.rpl-04__node--cyn .rpl-04__ring:nth-child(2) { animation-delay: 0.5s; }
.rpl-04__node--cyn .rpl-04__ring:nth-child(3) { animation-delay: 1.0s; }
.rpl-04__node--cyn .rpl-04__ring:nth-child(4) { animation-delay: 1.5s; }

/* YELLOW-GREEN node */
.rpl-04__node--lim .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #eeff80, #aaff00);
  box-shadow: 0 0 20px #aaff00, 0 0 40px rgba(170,255,0,0.5);
}
.rpl-04__node--lim .rpl-04__ring { border: 1.5px solid #aaff00; box-shadow: 0 0 8px #aaff00; }
.rpl-04__node--lim .rpl-04__ring:nth-child(2) { animation-delay: 0.7s; }
.rpl-04__node--lim .rpl-04__ring:nth-child(3) { animation-delay: 1.4s; }
.rpl-04__node--lim .rpl-04__ring:nth-child(4) { animation-delay: 2.1s; }

/* ORANGE node */
.rpl-04__node--org .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #ffcc80, #ff6600);
  box-shadow: 0 0 20px #ff6600, 0 0 40px rgba(255,102,0,0.5);
}
.rpl-04__node--org .rpl-04__ring { border: 1.5px solid #ff6600; box-shadow: 0 0 8px #ff6600; }
.rpl-04__node--org .rpl-04__ring:nth-child(2) { animation-delay: 0.55s; }
.rpl-04__node--org .rpl-04__ring:nth-child(3) { animation-delay: 1.1s; }
.rpl-04__node--org .rpl-04__ring:nth-child(4) { animation-delay: 1.65s; }

/* BLUE node */
.rpl-04__node--blu .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #80b0ff, #0055ff);
  box-shadow: 0 0 20px #0055ff, 0 0 40px rgba(0,85,255,0.5);
}
.rpl-04__node--blu .rpl-04__ring { border: 1.5px solid #4488ff; box-shadow: 0 0 8px #4488ff; }
.rpl-04__node--blu .rpl-04__ring:nth-child(2) { animation-delay: 0.65s; }
.rpl-04__node--blu .rpl-04__ring:nth-child(3) { animation-delay: 1.3s; }
.rpl-04__node--blu .rpl-04__ring:nth-child(4) { animation-delay: 1.95s; }

/* WHITE/PURPLE node */
.rpl-04__node--wht .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #fff, #cc88ff);
  box-shadow: 0 0 20px #fff, 0 0 40px rgba(200,136,255,0.6);
}
.rpl-04__node--wht .rpl-04__ring { border: 1.5px solid rgba(220,180,255,0.9); box-shadow: 0 0 8px rgba(220,180,255,0.7); }
.rpl-04__node--wht .rpl-04__ring:nth-child(2) { animation-delay: 0.4s; }
.rpl-04__node--wht .rpl-04__ring:nth-child(3) { animation-delay: 0.8s; }
.rpl-04__node--wht .rpl-04__ring:nth-child(4) { animation-delay: 1.2s; }

@keyframes rpl-04-glow {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.rpl-04__label {
  font-family: 'Orbitron';
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Bottom hero text */
.rpl-04__hero {
  text-align: center;
  z-index: 2;
  max-width: 560px;
}
.rpl-04__hero h2 {
  font-family: 'Orbitron';
  font-size: clamp(0.8rem, 2vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(232,224,255,0.5);
  margin-bottom: 10px;
}
.rpl-04__hero p {
  font-size: 1rem;
  color: rgba(232,224,255,0.4);
  line-height: 1.6;
  font-weight: 300;
}

@media (prefers-reduced-motion: reduce) {
  .rpl-04__ring { animation: none !important; opacity: 0.15; }
}
```

### 05. CSS Ripple Loading Spinner

**Type:** Pure CSS
**Description:** A six-spinner loading kit, all CSS ripple variants: an orbit-ring trio, a pulse-expand sequence, a conic-gradient radar sweep, a dot-wave orbit, a morphing square ripple and a dual-arc contrarotating spinner. Space Grotesk on a deep charcoal-brown background with amber, violet, green, cyan, rose and gold accents.

**HTML:**
```html
<div class="rpl-05">
  <div class="rpl-05__header">
    <h1>CSS Ripple Loading Spinners</h1>
    <p>Six ripple-based loaders — pure CSS, no SVG, no JavaScript</p>
  </div>

  <div class="rpl-05__grid">
    <div class="rpl-05__item">
      <div class="rpl-05__spin-1">
        <span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Orbit Ring</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-2">
        <span></span><span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Pulse Expand</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-3"></div>
      <div class="rpl-05__label">Radar Sweep</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-4">
        <span></span><span></span><span></span>
        <span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Dot Wave</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-5">
        <span></span><span></span><span></span><span></span>
      </div>
      <div class="rpl-05__label">Square Ripple</div>
    </div>

    <div class="rpl-05__item">
      <div class="rpl-05__spin-6"></div>
      <div class="rpl-05__label">Double Arc</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

.rpl-05, .rpl-05 *, .rpl-05 *::before, .rpl-05 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-05 ::selection { background: #f97316; color: #fff; }

.rpl-05 {
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #0c0a09 0%, #1c1410 50%, #0c0a09 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 60px 24px;
  color: #faf5f0;
}

.rpl-05__header {
  text-align: center;
}
.rpl-05__header h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #faf5f0;
  letter-spacing: -0.02em;
}
.rpl-05__header p {
  margin-top: 8px;
  font-size: 0.9rem;
  color: rgba(250,245,240,0.4);
  font-weight: 300;
}

/* Spinner grid */
.rpl-05__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 40px 32px;
  width: min(860px, 100%);
  align-items: start;
}

.rpl-05__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ─── Spinner 1: Classic ripple ─── */
.rpl-05__spin-1 {
  position: relative;
  width: 80px; height: 80px;
}
.rpl-05__spin-1 span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f97316;
  animation: rpl-05-s1 1.2s linear infinite;
}
.rpl-05__spin-1 span:nth-child(2) {
  inset: 12px;
  border-top-color: #fb923c;
  animation-duration: 1.6s;
  animation-direction: reverse;
}
.rpl-05__spin-1 span:nth-child(3) {
  inset: 24px;
  border-top-color: #fdba74;
  animation-duration: 1s;
}
@keyframes rpl-05-s1 { to { transform: rotate(360deg); } }

/* ─── Spinner 2: Ripple pulse ─── */
.rpl-05__spin-2 {
  position: relative;
  width: 80px; height: 80px;
  display: grid;
  place-items: center;
}
.rpl-05__spin-2 span {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #a78bfa;
  animation: rpl-05-s2 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.rpl-05__spin-2 span:nth-child(1) { width: 24px; height: 24px; animation-delay: 0s; }
.rpl-05__spin-2 span:nth-child(2) { width: 24px; height: 24px; animation-delay: 0.6s; }
.rpl-05__spin-2 span:nth-child(3) { width: 24px; height: 24px; animation-delay: 1.2s; }
.rpl-05__spin-2 span:nth-child(4) { width: 24px; height: 24px; animation-delay: 1.8s; }
@keyframes rpl-05-s2 {
  0%   { width: 0; height: 0; opacity: 1; border-color: #c4b5fd; }
  70%  { opacity: 0.4; border-color: #7c3aed; }
  100% { width: 80px; height: 80px; opacity: 0; }
}

/* ─── Spinner 3: Radar sweep ─── */
.rpl-05__spin-3 {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(34,197,94,0.8) 100%);
  animation: rpl-05-s3 1.4s linear infinite;
  box-shadow: 0 0 20px rgba(34,197,94,0.2);
}
.rpl-05__spin-3::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #0c0a09;
}
.rpl-05__spin-3::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(34,197,94,0.3);
}
@keyframes rpl-05-s3 { to { transform: rotate(360deg); } }

/* ─── Spinner 4: Dots ripple ─── */
.rpl-05__spin-4 {
  position: relative;
  width: 80px; height: 80px;
  display: grid;
  place-items: center;
}
.rpl-05__spin-4 span {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #06b6d4;
  animation: rpl-05-s4 1.4s ease-in-out infinite;
}
.rpl-05__spin-4 span:nth-child(1) { transform: rotate(0deg) translateX(28px); animation-delay: 0s; }
.rpl-05__spin-4 span:nth-child(2) { transform: rotate(60deg) translateX(28px); animation-delay: 0.23s; }
.rpl-05__spin-4 span:nth-child(3) { transform: rotate(120deg) translateX(28px); animation-delay: 0.46s; }
.rpl-05__spin-4 span:nth-child(4) { transform: rotate(180deg) translateX(28px); animation-delay: 0.69s; }
.rpl-05__spin-4 span:nth-child(5) { transform: rotate(240deg) translateX(28px); animation-delay: 0.92s; }
.rpl-05__spin-4 span:nth-child(6) { transform: rotate(300deg) translateX(28px); animation-delay: 1.15s; }
@keyframes rpl-05-s4 {
  0%, 100% { transform: rotate(var(--r,0deg)) translateX(28px) scale(0.5); opacity: 0.3; }
  50%       { transform: rotate(var(--r,0deg)) translateX(28px) scale(1.2); opacity: 1; }
}
.rpl-05__spin-4 span:nth-child(1) { --r: 0deg; }
.rpl-05__spin-4 span:nth-child(2) { --r: 60deg; }
.rpl-05__spin-4 span:nth-child(3) { --r: 120deg; }
.rpl-05__spin-4 span:nth-child(4) { --r: 180deg; }
.rpl-05__spin-4 span:nth-child(5) { --r: 240deg; }
.rpl-05__spin-4 span:nth-child(6) { --r: 300deg; }

/* ─── Spinner 5: Square ripple ─── */
.rpl-05__spin-5 {
  position: relative;
  width: 80px; height: 80px;
  display: grid;
  place-items: center;
}
.rpl-05__spin-5 span {
  position: absolute;
  border: 2px solid #f43f5e;
  animation: rpl-05-s5 2s ease-out infinite;
}
.rpl-05__spin-5 span:nth-child(1) { width: 0; height: 0; animation-delay: 0s; }
.rpl-05__spin-5 span:nth-child(2) { width: 0; height: 0; animation-delay: 0.5s; }
.rpl-05__spin-5 span:nth-child(3) { width: 0; height: 0; animation-delay: 1.0s; }
.rpl-05__spin-5 span:nth-child(4) { width: 0; height: 0; animation-delay: 1.5s; }
@keyframes rpl-05-s5 {
  0%   { width: 0; height: 0; opacity: 1; border-radius: 0; }
  100% { width: 80px; height: 80px; opacity: 0; border-radius: 4px; }
}

/* ─── Spinner 6: Double arc ─── */
.rpl-05__spin-6 {
  position: relative;
  width: 80px; height: 80px;
}
.rpl-05__spin-6::before, .rpl-05__spin-6::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.rpl-05__spin-6::before {
  inset: 0;
  border: 3px solid transparent;
  border-top-color: #fbbf24;
  border-bottom-color: #fbbf24;
  animation: rpl-05-s1 1.1s linear infinite;
}
.rpl-05__spin-6::after {
  inset: 14px;
  border: 3px solid transparent;
  border-left-color: #f59e0b;
  border-right-color: #f59e0b;
  animation: rpl-05-s1 0.8s linear infinite reverse;
}

.rpl-05__label {
  font-size: 0.78rem;
  color: rgba(250,245,240,0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
}

@media (max-width: 520px) { .rpl-05__grid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .rpl-05 * { animation-play-state: paused !important; }
}
```

### 06. CSS Sonar Ping Ripple Animation

**Type:** Pure CSS
**Description:** A military-grade sonar scope: conic-gradient sweep arm with a glowing edge, four concentric range-circle grids, four animated blips that appear as the sweep passes and each sprout their own CSS ripple ring. Data readout panels and a blinking status line. Share Tech Mono + Orbitron on phosphor-green #001408.

**HTML:**
```html
<div class="rpl-06">
  <div class="rpl-06__panel">
    <div class="rpl-06__hdr">
      <h1>SONAR PING RIPPLE</h1>
      <p>CSS conic-gradient sweep · animated contact blips</p>
    </div>

    <div class="rpl-06__scope">
      <!-- Grid rings -->
      <div class="rpl-06__grid-ring"></div>
      <div class="rpl-06__grid-ring"></div>
      <div class="rpl-06__grid-ring"></div>
      <div class="rpl-06__grid-ring"></div>

      <!-- Sweep -->
      <div class="rpl-06__sweep"></div>

      <!-- Blips & their ripple rings -->
      <div class="rpl-06__blip rpl-06__blip--a"></div>
      <div class="rpl-06__blip-ring rpl-06__blip-ring--a"></div>
      <div class="rpl-06__blip rpl-06__blip--b"></div>
      <div class="rpl-06__blip-ring rpl-06__blip-ring--b"></div>
      <div class="rpl-06__blip rpl-06__blip--c"></div>
      <div class="rpl-06__blip-ring rpl-06__blip-ring--c"></div>
      <div class="rpl-06__blip rpl-06__blip--d"></div>
      <div class="rpl-06__blip-ring rpl-06__blip-ring--d"></div>

      <!-- Center -->
      <div class="rpl-06__center"></div>
    </div>

    <div class="rpl-06__readout">
      <div class="rpl-06__data">
        <div class="key">Contacts</div>
        <div class="val">04</div>
      </div>
      <div class="rpl-06__data">
        <div class="key">Sweep / min</div>
        <div class="val">20 RPM</div>
      </div>
      <div class="rpl-06__data">
        <div class="key">Range</div>
        <div class="val">48 nmi</div>
      </div>
      <div class="rpl-06__data">
        <div class="key">Mode</div>
        <div class="val">ACTIVE</div>
      </div>
    </div>

    <div class="rpl-06__status">▌ SCANNING · PURE CSS · NO CANVAS ▌</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;500;700&display=swap');

.rpl-06, .rpl-06 *, .rpl-06 *::before, .rpl-06 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-06 ::selection { background: #22c55e; color: #001408; }

.rpl-06 {
  font-family: 'Share Tech Mono', monospace;
  background: #001408;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #22c55e;
  position: relative;
  overflow: hidden;
}

/* dark grid lines */
.rpl-06::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34,197,94,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,197,94,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

.rpl-06__panel {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ─── Sonar scope ─── */
.rpl-06__scope {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #002810, #000c04 70%);
  border: 2px solid rgba(34,197,94,0.3);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.1),
    0 0 40px rgba(34,197,94,0.15),
    inset 0 0 60px rgba(0,0,0,0.7);
  overflow: hidden;
}

/* Crosshairs */
.rpl-06__scope::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, transparent 49.5%, rgba(34,197,94,0.15) 49.5%, rgba(34,197,94,0.15) 50.5%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(34,197,94,0.15) 49.5%, rgba(34,197,94,0.15) 50.5%, transparent 50.5%);
  pointer-events: none;
  z-index: 3;
}

/* Concentric range rings */
.rpl-06__grid-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(34,197,94,0.18);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.rpl-06__grid-ring:nth-child(1) { width: 25%; height: 25%; }
.rpl-06__grid-ring:nth-child(2) { width: 50%; height: 50%; }
.rpl-06__grid-ring:nth-child(3) { width: 75%; height: 75%; }
.rpl-06__grid-ring:nth-child(4) { width: 100%; height: 100%; border-color: rgba(34,197,94,0.3); }

/* Rotating sweep arm */
.rpl-06__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(34,197,94,0.45) 0deg, rgba(34,197,94,0.15) 25deg, transparent 90deg);
  animation: rpl-06-sweep 3s linear infinite;
  z-index: 2;
}
@keyframes rpl-06-sweep { to { transform: rotate(360deg); } }

/* Sweep edge glow */
.rpl-06__sweep::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,0.9));
  transform-origin: left center;
  transform: translateY(-1px) rotate(0deg);
  animation: rpl-06-sweep 3s linear infinite;
  filter: blur(1px);
}

/* Contact blips */
.rpl-06__blip {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #86efac, #22c55e);
  box-shadow: 0 0 8px #22c55e, 0 0 16px rgba(34,197,94,0.5);
  z-index: 4;
  animation: rpl-06-blip 3s linear infinite;
}
.rpl-06__blip--a { width: 8px; height: 8px; left: 65%; top: 32%; animation-delay: 0.6s; }
.rpl-06__blip--b { width: 6px; height: 6px; left: 28%; top: 61%; animation-delay: 1.8s; }
.rpl-06__blip--c { width: 10px; height: 10px; left: 72%; top: 68%; animation-delay: 2.3s; }
.rpl-06__blip--d { width: 5px; height: 5px; left: 42%; top: 22%; animation-delay: 0.1s; }
@keyframes rpl-06-blip {
  0%, 30%  { opacity: 0; }
  35%      { opacity: 1; }
  60%      { opacity: 0.6; }
  90%,100% { opacity: 0; }
}

/* Blip ripple effect */
.rpl-06__blip-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(34,197,94,0.7);
  z-index: 3;
  animation: rpl-06-blip-ring 3s linear infinite;
}
.rpl-06__blip-ring--a { left: 65%; top: 32%; width: 0; height: 0; animation-delay: 0.7s; }
.rpl-06__blip-ring--b { left: 28%; top: 61%; width: 0; height: 0; animation-delay: 1.9s; }
.rpl-06__blip-ring--c { left: 72%; top: 68%; width: 0; height: 0; animation-delay: 2.4s; }
.rpl-06__blip-ring--d { left: 42%; top: 22%; width: 0; height: 0; animation-delay: 0.2s; }
@keyframes rpl-06-blip-ring {
  0%, 30%  { width: 0; height: 0; opacity: 0; transform: translate(-50%,-50%); }
  35%      { opacity: 1; }
  80%      { width: 30px; height: 30px; opacity: 0; transform: translate(-50%,-50%); }
  100%     { opacity: 0; }
}

/* Center dot */
.rpl-06__center {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #22c55e;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px #22c55e;
  z-index: 5;
}

/* Readout panel */
.rpl-06__readout {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rpl-06__data {
  background: rgba(34,197,94,0.05);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 6px;
  padding: 12px 14px;
}
.rpl-06__data .key {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(34,197,94,0.5);
  margin-bottom: 4px;
}
.rpl-06__data .val {
  font-family: 'Orbitron';
  font-size: 1rem;
  font-weight: 500;
  color: #86efac;
}

/* Header */
.rpl-06__hdr {
  text-align: center;
  width: 100%;
}
.rpl-06__hdr h1 {
  font-family: 'Orbitron';
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #22c55e;
  text-shadow: 0 0 20px rgba(34,197,94,0.5);
}
.rpl-06__hdr p {
  font-size: 0.75rem;
  color: rgba(34,197,94,0.45);
  margin-top: 6px;
  letter-spacing: 0.1em;
}

/* Scrolling status line */
.rpl-06__status {
  font-size: 0.72rem;
  color: rgba(34,197,94,0.5);
  text-align: center;
  letter-spacing: 0.1em;
  animation: rpl-06-blink 1.4s steps(2) infinite;
}
@keyframes rpl-06-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rpl-06__sweep, .rpl-06__sweep::after { animation: none !important; }
  .rpl-06__blip, .rpl-06__blip-ring, .rpl-06__status { animation: none !important; opacity: 0.5; }
}
```

### 07. CSS Heartbeat Pulse Ripple Effect

**Type:** CSS + JS
**Description:** A cardiac monitor UI — a large animated heart icon with three concentric fill-pulse rings and two stroke rings, a looping SVG ECG trace with animated stroke-dashoffset, vital-signs stat tiles and a blinking LIVE indicator. All pulse timing matches a 72 BPM heartbeat rhythm. Nunito on deep maroon-black.

**HTML:**
```html
<div class="rpl-07">
  <div class="rpl-07__bg" id="rpl-07-bg"></div>

  <div class="rpl-07__header">
    <h1>Heartbeat Pulse Ripple Effect</h1>
    <p>CSS keyframe animation with multi-wave pulse rings and ECG trace</p>
  </div>

  <div class="rpl-07__hero">
    <div class="rpl-07__pulse"></div>
    <div class="rpl-07__pulse"></div>
    <div class="rpl-07__pulse"></div>
    <div class="rpl-07__ring-border"></div>
    <div class="rpl-07__ring-border"></div>
    <div class="rpl-07__heart">❤️</div>
    <div class="rpl-07__bpm"><b>72</b> BPM</div>
  </div>

  <div class="rpl-07__ecg">
    <div class="rpl-07__ecg-label">ECG · Lead II</div>
    <svg viewBox="0 0 560 64" preserveAspectRatio="none">
      <path class="rpl-07__ecg-line"
        d="M0,32 L40,32 L48,32 L52,28 L56,32 L60,32 L66,8 L70,60 L74,20 L78,32 L84,32
           L124,32 L132,32 L136,28 L140,32 L144,32 L150,8 L154,60 L158,20 L162,32 L168,32
           L208,32 L216,32 L220,28 L224,32 L228,32 L234,8 L238,60 L242,20 L246,32 L252,32
           L292,32 L300,32 L304,28 L308,32 L312,32 L318,8 L322,60 L326,20 L330,32 L336,32
           L376,32 L384,32 L388,28 L392,32 L396,32 L402,8 L406,60 L410,20 L414,32 L420,32
           L460,32 L468,32 L472,28 L476,32 L480,32 L486,8 L490,60 L494,20 L498,32 L560,32"/>
    </svg>
  </div>

  <div class="rpl-07__stats">
    <div class="rpl-07__stat">
      <div class="num">72</div>
      <div class="lbl">BPM</div>
    </div>
    <div class="rpl-07__stat">
      <div class="num">98%</div>
      <div class="lbl">SpO₂</div>
    </div>
    <div class="rpl-07__stat">
      <div class="num">120</div>
      <div class="lbl">SBP</div>
    </div>
    <div class="rpl-07__stat">
      <div class="num">80</div>
      <div class="lbl">DBP</div>
    </div>
  </div>

  <div class="rpl-07__live">
    <div class="rpl-07__dot"></div>
    Live monitoring · CSS animation only
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

.rpl-07, .rpl-07 *, .rpl-07 *::before, .rpl-07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-07 ::selection { background: #fb2d5c; color: #fff; }

.rpl-07 {
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(160deg, #0d0009 0%, #1a0010 40%, #0d000b 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 60px 24px;
  color: #ffe8ee;
  overflow: hidden;
  position: relative;
}

/* subtle particles background */
.rpl-07__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.rpl-07__bg-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(251,45,92,0.35);
  animation: rpl-07-float linear infinite;
}
@keyframes rpl-07-float {
  0% { transform: translateY(0) scale(1); opacity: 0.6; }
  100% { transform: translateY(-100vh) scale(0.2); opacity: 0; }
}

.rpl-07__header {
  text-align: center;
  z-index: 2;
}
.rpl-07__header h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffe8ee;
}
.rpl-07__header p {
  margin-top: 8px;
  color: rgba(255,232,238,0.45);
  font-weight: 300;
  font-size: 0.9rem;
}

/* ─── Hero heartbeat ─── */
.rpl-07__hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px; height: 220px;
  z-index: 2;
}

/* Pulse rings */
.rpl-07__pulse {
  position: absolute;
  border-radius: 50%;
  background: rgba(251,45,92,0.15);
  animation: rpl-07-pulse 1.5s ease-out infinite;
}
.rpl-07__pulse:nth-child(1) { width: 100%; height: 100%; animation-delay: 0s; }
.rpl-07__pulse:nth-child(2) { width: 100%; height: 100%; animation-delay: 0.5s; }
.rpl-07__pulse:nth-child(3) { width: 100%; height: 100%; animation-delay: 1.0s; }
@keyframes rpl-07-pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Ring borders */
.rpl-07__ring-border {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(251,45,92,0.6);
  animation: rpl-07-ring 1.5s ease-out infinite;
}
.rpl-07__ring-border:nth-child(4) { width: 100%; height: 100%; animation-delay: 0s; }
.rpl-07__ring-border:nth-child(5) { width: 100%; height: 100%; animation-delay: 0.5s; }
@keyframes rpl-07-ring {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* The heart itself */
.rpl-07__heart {
  position: relative;
  z-index: 3;
  font-size: 72px;
  line-height: 1;
  animation: rpl-07-beat 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(251,45,92,0.7)) drop-shadow(0 0 40px rgba(251,45,92,0.3));
}
@keyframes rpl-07-beat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.18); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.12); }
  70%      { transform: scale(1); }
}

/* BPM display */
.rpl-07__bpm {
  position: absolute;
  bottom: -36px;
  font-size: 0.75rem;
  color: rgba(255,232,238,0.5);
  letter-spacing: 0.1em;
}
.rpl-07__bpm b { color: #fb2d5c; font-weight: 800; font-size: 1.1rem; }

/* ECG line SVG */
.rpl-07__ecg {
  z-index: 2;
  width: min(560px, 100%);
  background: rgba(251,45,92,0.04);
  border: 1px solid rgba(251,45,92,0.15);
  border-radius: 12px;
  padding: 18px 20px;
  overflow: hidden;
  position: relative;
}
.rpl-07__ecg-label {
  font-size: 0.65rem;
  color: rgba(251,45,92,0.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.rpl-07__ecg svg {
  width: 100%;
  height: 64px;
  overflow: visible;
}
.rpl-07__ecg-line {
  fill: none;
  stroke: #fb2d5c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(251,45,92,0.6));
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: rpl-07-draw 3s linear infinite;
}
@keyframes rpl-07-draw {
  to { stroke-dashoffset: 0; }
}

/* Stats row */
.rpl-07__stats {
  display: flex;
  gap: 24px;
  z-index: 2;
  flex-wrap: wrap;
  justify-content: center;
}
.rpl-07__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(251,45,92,0.06);
  border: 1px solid rgba(251,45,92,0.15);
  border-radius: 12px;
  padding: 16px 22px;
  min-width: 100px;
}
.rpl-07__stat .num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fb2d5c;
  line-height: 1;
}
.rpl-07__stat .lbl {
  font-size: 0.7rem;
  color: rgba(255,232,238,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Animated live indicator */
.rpl-07__live {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  font-size: 0.75rem;
  color: rgba(255,232,238,0.4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rpl-07__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fb2d5c;
  box-shadow: 0 0 8px #fb2d5c;
  animation: rpl-07-blink 1.5s steps(2) infinite;
}
@keyframes rpl-07-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rpl-07__pulse, .rpl-07__ring-border, .rpl-07__heart, .rpl-07__bg-dot, .rpl-07__ecg-line, .rpl-07__dot { animation: none !important; }
  .rpl-07__pulse { opacity: 0.2; }
}
```

**JS:**
```js
(function() {
  const bg = document.getElementById('rpl-07-bg');
  for (let i = 0; i < 20; i++) {
    const d = document.createElement('div');
    d.className = 'rpl-07__bg-dot';
    const size = Math.random() * 4 + 1;
    d.style.cssText = `
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;
      top:${Math.random()*100}%;
      animation-duration:${Math.random()*8+6}s;
      animation-delay:${Math.random()*-8}s;
    `;
    bg.appendChild(d);
  }
})();
```

### 08. CSS Ripple Card Hover Effect

**Type:** Pure CSS
**Description:** A six-card portfolio grid where each card fires a radial-gradient ripple from its center on hover via a CSS ::before pseudo-element — the ripple scale transitions from 0 to 2.5x with opacity fade. Six distinct warm palettes: amber, charcoal, terracotta, cream, deep-rust and oat. The icon bounces and an arrow link slides in. Syne + Syne Mono on linen.

**HTML:**
```html
<div class="rpl-08">
  <div class="rpl-08__header">
    <h1>Ripple Card Hover Effect</h1>
    <p>Radial gradient ripple expands from center on hover — pure CSS transitions</p>
  </div>

  <div class="rpl-08__grid">
    <div class="rpl-08__card rpl-08__card--a">
      <div class="rpl-08__card-num">01 / DESIGN</div>
      <span class="rpl-08__card-icon">🎨</span>
      <h3>Visual Systems</h3>
      <p>Cohesive design languages built from the ground up — color, type, motion.</p>
      <div class="rpl-08__arrow">Explore → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--b">
      <div class="rpl-08__card-num">02 / CODE</div>
      <span class="rpl-08__card-icon">⌨️</span>
      <h3>Frontend Engineering</h3>
      <p>Production-grade CSS, zero-dependency animations, WebGL experiments.</p>
      <div class="rpl-08__arrow">View work → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--c">
      <div class="rpl-08__card-num">03 / MOTION</div>
      <span class="rpl-08__card-icon">✦</span>
      <h3>Interaction Design</h3>
      <p>Micro-interactions, page transitions and haptic-inspired feedback loops.</p>
      <div class="rpl-08__arrow">See demos → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--d">
      <div class="rpl-08__card-num">04 / BRAND</div>
      <span class="rpl-08__card-icon">◈</span>
      <h3>Identity & Type</h3>
      <p>Custom wordmarks, editorial typography and brand system documentation.</p>
      <div class="rpl-08__arrow">Browse → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--e">
      <div class="rpl-08__card-num">05 / LAB</div>
      <span class="rpl-08__card-icon">🧪</span>
      <h3>Experiments</h3>
      <p>Weird CSS, generative art, shader sketches and ideas with no brief.</p>
      <div class="rpl-08__arrow">Open lab → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--f">
      <div class="rpl-08__card-num">06 / ABOUT</div>
      <span class="rpl-08__card-icon">👤</span>
      <h3>Hello, I'm Mara</h3>
      <p>Designer-developer. I believe the best interfaces feel inevitable.</p>
      <div class="rpl-08__arrow">Say hi → </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Syne+Mono&display=swap');

.rpl-08, .rpl-08 *, .rpl-08 *::before, .rpl-08 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-08 ::selection { background: #ff9500; color: #1a0e00; }

.rpl-08 {
  font-family: 'Syne', sans-serif;
  background: #f5f0eb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 64px 24px;
  color: #1a1209;
}

.rpl-08__header {
  text-align: center;
}
.rpl-08__header h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1a1209;
}
.rpl-08__header p {
  margin-top: 10px;
  font-size: 0.95rem;
  color: rgba(26,18,9,0.5);
}

/* ─── Card grid ─── */
.rpl-08__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  width: min(920px, 100%);
}

/* Base card */
.rpl-08__card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 32px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}
.rpl-08__card:hover { transform: translateY(-6px) scale(1.01); }

/* Ripple on hover: pseudoelement that expands from center */
.rpl-08__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.4s;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}
.rpl-08__card:hover::before {
  transform: scale(2.5);
  opacity: 1;
}

/* Card A — sand/amber */
.rpl-08__card--a {
  background: #ffd185;
  box-shadow: 0 4px 20px rgba(255,149,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
}
.rpl-08__card--a:hover { box-shadow: 0 20px 60px rgba(255,149,0,0.3); }
.rpl-08__card--a::before { background: radial-gradient(circle, rgba(255,200,80,0.6), transparent); }

/* Card B — warm charcoal */
.rpl-08__card--b {
  background: #2a2016;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  color: #f5ede0;
}
.rpl-08__card--b:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.rpl-08__card--b::before { background: radial-gradient(circle, rgba(255,149,0,0.25), transparent); }

/* Card C — terracotta */
.rpl-08__card--c {
  background: #e07050;
  box-shadow: 0 4px 20px rgba(224,112,80,0.3);
  color: #fff;
}
.rpl-08__card--c:hover { box-shadow: 0 20px 60px rgba(224,112,80,0.5); }
.rpl-08__card--c::before { background: radial-gradient(circle, rgba(255,200,170,0.5), transparent); }

/* Card D — cream */
.rpl-08__card--d {
  background: #fffaf3;
  border: 2px solid rgba(26,18,9,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.rpl-08__card--d:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
.rpl-08__card--d::before { background: radial-gradient(circle, rgba(255,200,100,0.35), transparent); }

/* Card E — deep rust */
.rpl-08__card--e {
  background: #5c1a00;
  box-shadow: 0 4px 20px rgba(92,26,0,0.4);
  color: #ffd185;
}
.rpl-08__card--e:hover { box-shadow: 0 20px 60px rgba(92,26,0,0.6); }
.rpl-08__card--e::before { background: radial-gradient(circle, rgba(255,149,0,0.3), transparent); }

/* Card F — oat */
.rpl-08__card--f {
  background: linear-gradient(135deg, #e8dcc8, #d4c4a8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.rpl-08__card--f:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.rpl-08__card--f::before { background: radial-gradient(circle, rgba(255,255,220,0.5), transparent); }

/* Card content */
.rpl-08__card-num {
  font-family: 'Syne Mono';
  font-size: 0.72rem;
  opacity: 0.45;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}
.rpl-08__card-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}
.rpl-08__card:hover .rpl-08__card-icon { transform: scale(1.15) rotate(-5deg); }
.rpl-08__card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}
.rpl-08__card p {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.65;
  font-weight: 400;
  position: relative;
  z-index: 2;
}

.rpl-08__card .rpl-08__arrow {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s;
}
.rpl-08__card:hover .rpl-08__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) { .rpl-08__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .rpl-08__card, .rpl-08__card::before,
  .rpl-08__card-icon, .rpl-08__arrow { transition: none !important; }
}
```

### 09. CSS Sound Wave Ripple Visualizer

**Type:** Pure CSS
**Description:** An audio player UI with a central speaker icon surrounded by five CSS ripple waves at staggered delays, twelve animated EQ bars (alternating height keyframes), a looping dashed SVG sine-wave path with stroke-dashoffset scroll, and minimal player controls. Outfit + Space Mono on deep purple-black #0a0015.

**HTML:**
```html
<div class="rpl-09">
  <div class="rpl-09__header">
    <h1>Sound Wave Ripple Visualizer</h1>
    <p>CSS ripple rings, animated EQ bars and a looping SVG waveform</p>
  </div>

  <div class="rpl-09__speaker">
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__icon">🔊</div>
  </div>

  <div class="rpl-09__eq">
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
  </div>

  <div class="rpl-09__waveform">
    <svg viewBox="0 0 560 100" preserveAspectRatio="none">
      <defs>
        <linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#7c3aed"/>
          <stop offset="50%" stop-color="#e879f9"/>
          <stop offset="100%" stop-color="#7c3aed"/>
        </linearGradient>
      </defs>
      <path class="rpl-09__wave-path"
        stroke-dasharray="8 4"
        d="M0,50 C20,10 40,90 60,50 C80,10 100,90 120,50 C140,10 160,90 180,50 C200,10 220,90 240,50 C260,10 280,90 300,50 C320,10 340,90 360,50 C380,10 400,90 420,50 C440,10 460,90 480,50 C500,10 520,90 540,50 C555,22 560,40 560,50"/>
    </svg>
  </div>

  <div class="rpl-09__track">
    <div class="title">Midnight Frequencies</div>
    <div class="artist">The Static Assembly — Transmit EP</div>
  </div>

  <div class="rpl-09__controls">
    <div class="rpl-09__ctrl">⏮</div>
    <div class="rpl-09__ctrl rpl-09__ctrl--play">▶</div>
    <div class="rpl-09__ctrl">⏭</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Outfit:wght@300;600;700&display=swap');

.rpl-09, .rpl-09 *, .rpl-09 *::before, .rpl-09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-09 ::selection { background: #e879f9; color: #0f0021; }

.rpl-09 {
  font-family: 'Outfit', sans-serif;
  background: #0a0015;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 48px 24px;
  color: #f5e8ff;
  overflow: hidden;
  position: relative;
}

/* Grid bg */
.rpl-09::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,121,249,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,121,249,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.rpl-09__header {
  text-align: center;
  z-index: 2;
}
.rpl-09__header h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  background: linear-gradient(135deg, #e879f9, #c026d3, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.rpl-09__header p {
  margin-top: 8px;
  color: rgba(245,232,255,0.4);
  font-weight: 300;
  font-size: 0.9rem;
}

/* ─── Central speaker ripple ─── */
.rpl-09__speaker {
  position: relative;
  width: 160px; height: 160px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.rpl-09__wave {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(232,121,249,0.7);
  animation: rpl-09-wave 2s ease-out infinite;
}
.rpl-09__wave:nth-child(1) { inset: 0; animation-delay: 0s; }
.rpl-09__wave:nth-child(2) { inset: 0; animation-delay: 0.4s; border-color: rgba(192,38,211,0.55); }
.rpl-09__wave:nth-child(3) { inset: 0; animation-delay: 0.8s; border-color: rgba(124,58,237,0.4); }
.rpl-09__wave:nth-child(4) { inset: 0; animation-delay: 1.2s; border-color: rgba(109,40,217,0.25); }
.rpl-09__wave:nth-child(5) { inset: 0; animation-delay: 1.6s; border-color: rgba(91,33,182,0.12); }
@keyframes rpl-09-wave {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.rpl-09__icon {
  position: relative;
  z-index: 3;
  font-size: 48px;
  filter: drop-shadow(0 0 16px rgba(232,121,249,0.7));
  animation: rpl-09-throb 2s ease-in-out infinite;
}
@keyframes rpl-09-throb {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

/* ─── EQ Bars ─── */
.rpl-09__eq {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 80px;
  z-index: 2;
}
.rpl-09__bar {
  width: 14px;
  border-radius: 3px 3px 0 0;
  animation: rpl-09-bar ease-in-out infinite alternate;
  background: linear-gradient(0deg, #7c3aed, #c026d3, #e879f9);
  box-shadow: 0 0 8px rgba(232,121,249,0.4);
  min-height: 4px;
}
.rpl-09__bar:nth-child(1)  { height: 35%; animation-duration: 0.7s; animation-delay: 0s; }
.rpl-09__bar:nth-child(2)  { height: 70%; animation-duration: 0.5s; animation-delay: 0.1s; }
.rpl-09__bar:nth-child(3)  { height: 55%; animation-duration: 0.9s; animation-delay: 0.05s; }
.rpl-09__bar:nth-child(4)  { height: 90%; animation-duration: 0.4s; animation-delay: 0.2s; }
.rpl-09__bar:nth-child(5)  { height: 45%; animation-duration: 0.6s; animation-delay: 0.15s; }
.rpl-09__bar:nth-child(6)  { height: 100%; animation-duration: 0.35s; animation-delay: 0s; }
.rpl-09__bar:nth-child(7)  { height: 75%; animation-duration: 0.55s; animation-delay: 0.08s; }
.rpl-09__bar:nth-child(8)  { height: 60%; animation-duration: 0.8s; animation-delay: 0.12s; }
.rpl-09__bar:nth-child(9)  { height: 85%; animation-duration: 0.45s; animation-delay: 0.18s; }
.rpl-09__bar:nth-child(10) { height: 50%; animation-duration: 0.65s; animation-delay: 0.06s; }
.rpl-09__bar:nth-child(11) { height: 30%; animation-duration: 0.75s; animation-delay: 0.22s; }
.rpl-09__bar:nth-child(12) { height: 65%; animation-duration: 0.5s; animation-delay: 0.3s; }
@keyframes rpl-09-bar { to { height: 8%; opacity: 0.3; } }

/* ─── Waveform line ─── */
.rpl-09__waveform {
  width: min(560px, 100%);
  height: 100px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}
.rpl-09__waveform svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rpl-09__wave-path {
  fill: none;
  stroke: url(#waveGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(232,121,249,0.5));
  animation: rpl-09-shift 2s linear infinite;
}
@keyframes rpl-09-shift {
  to { stroke-dashoffset: -120; }
}

/* Track info */
.rpl-09__track {
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rpl-09__track .title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.rpl-09__track .artist {
  font-size: 0.82rem;
  color: rgba(245,232,255,0.45);
  font-weight: 300;
}

/* Controls */
.rpl-09__controls {
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 2;
}
.rpl-09__ctrl {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(232,121,249,0.1);
  border: 1px solid rgba(232,121,249,0.25);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  color: #e879f9;
}
.rpl-09__ctrl:hover { background: rgba(232,121,249,0.2); transform: scale(1.08); }
.rpl-09__ctrl--play {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #c026d3, #7c3aed);
  border-color: transparent;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: 0 0 24px rgba(192,38,211,0.5);
}
.rpl-09__ctrl--play:hover { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .rpl-09__wave, .rpl-09__icon, .rpl-09__bar, .rpl-09__wave-path { animation: none !important; }
  .rpl-09__bar { height: 50% !important; }
}
```

### 10. CSS Liquid Drop Ripple Animation

**Type:** Pure CSS
**Description:** Three liquid-drop simulations with physically accurate CSS morphing — each drop shape-shifts border-radius from oval to sphere on fall then squishes on impact — followed by elliptical concentric ripple rings (width and height animated separately for perspective foreshortening). Amber, indigo and rose on a warm cream background. Playfair Display + Lato.

**HTML:**
```html
<div class="rpl-10">
  <div class="rpl-10__header">
    <h1>Liquid Drop<br>Ripple Animation</h1>
    <p>CSS-only falling drops with elliptical surface ripple rings</p>
  </div>

  <div class="rpl-10__stage">
    <!-- Amber drop -->
    <div class="rpl-10__drop-group rpl-10__group--a">
      <div class="rpl-10__surface">
        <div class="rpl-10__falling-drop"></div>
        <div class="rpl-10__ripple-set">
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
        </div>
        <div class="rpl-10__line"></div>
      </div>
      <div class="rpl-10__label">Amber</div>
    </div>

    <!-- Indigo drop -->
    <div class="rpl-10__drop-group rpl-10__group--b">
      <div class="rpl-10__surface">
        <div class="rpl-10__falling-drop"></div>
        <div class="rpl-10__ripple-set">
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
        </div>
        <div class="rpl-10__line"></div>
      </div>
      <div class="rpl-10__label">Indigo</div>
    </div>

    <!-- Rose drop -->
    <div class="rpl-10__drop-group rpl-10__group--c">
      <div class="rpl-10__surface">
        <div class="rpl-10__falling-drop"></div>
        <div class="rpl-10__ripple-set">
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
        </div>
        <div class="rpl-10__line"></div>
      </div>
      <div class="rpl-10__label">Rose</div>
    </div>
  </div>

  <div class="rpl-10__info">
    <p>Each drop uses a <strong>border-radius morph</strong> on fall, then elliptical <strong>scale + fade rings</strong> on impact — the perspective foreshortening is achieved by animating height and width separately. Pure CSS, no JavaScript.</p>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap');

.rpl-10, .rpl-10 *, .rpl-10 *::before, .rpl-10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-10 ::selection { background: #fb923c; color: #fff; }

.rpl-10 {
  font-family: 'Lato', sans-serif;
  background: linear-gradient(160deg, #fff8f0 0%, #fef3e2 50%, #fff8f0 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 60px 24px;
  color: #2c1a08;
}

.rpl-10__header {
  text-align: center;
}
.rpl-10__header h1 {
  font-family: 'Playfair Display';
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700;
  color: #2c1a08;
  line-height: 1.1;
}
.rpl-10__header p {
  margin-top: 12px;
  color: rgba(44,26,8,0.5);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ─── Drop showcase ─── */
.rpl-10__stage {
  display: flex;
  gap: 56px;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
}

.rpl-10__drop-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* The "liquid surface" */
.rpl-10__surface {
  width: 180px;
  position: relative;
}

/* The drop falling */
.rpl-10__falling-drop {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.8), currentColor 60%);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.1);
  animation: rpl-10-fall linear infinite;
}

/* Ripple circles on surface */
.rpl-10__ripple-set {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rpl-10__r {
  position: absolute;
  border-radius: 50%;
  animation: rpl-10-ring ease-out infinite;
}

@keyframes rpl-10-fall {
  0%   { top: -50px; height: 12px; width: 10px; opacity: 0; }
  40%  { opacity: 1; }
  80%  { top: -8px; height: 14px; width: 10px; opacity: 1; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; }
  85%  { top: -4px; height: 8px; width: 16px; opacity: 1; border-radius: 50%; }
  90%  { top: 0; height: 4px; width: 20px; opacity: 0.7; }
  100% { top: 0; height: 0; width: 22px; opacity: 0; }
}

@keyframes rpl-10-ring {
  0%   { width: 0; height: 0; opacity: 0.9; }
  100% { opacity: 0; }
}

/* DROP A — amber */
.rpl-10__group--a .rpl-10__falling-drop {
  color: #f59e0b;
  width: 12px;
  animation-duration: 2.2s;
  animation-delay: 0s;
}
.rpl-10__group--a .rpl-10__r {
  border: 1.5px solid rgba(245,158,11,0.7);
  animation-duration: 2s;
}
.rpl-10__group--a .rpl-10__r:nth-child(1) { animation-delay: 0.5s; }
.rpl-10__group--a .rpl-10__r:nth-child(2) { animation-delay: 0.8s; border-color: rgba(245,158,11,0.45); }
.rpl-10__group--a .rpl-10__r:nth-child(3) { animation-delay: 1.1s; border-color: rgba(245,158,11,0.2); }
.rpl-10__group--a .rpl-10__label { color: #d97706; }
.rpl-10__group--a .rpl-10__r:nth-child(1) { animation-timing-function: ease-out; }
.rpl-10__group--a .rpl-10__r { --max: 100px; }
@keyframes rpl-10-ring-a {
  0%   { width: 0; height: 0; opacity: 0.9; }
  100% { width: 100px; height: 40px; opacity: 0; }
}
.rpl-10__group--a .rpl-10__r { animation-name: rpl-10-ring-a; }

/* DROP B — indigo */
.rpl-10__group--b .rpl-10__falling-drop {
  color: #6366f1;
  width: 14px;
  animation-duration: 2.8s;
  animation-delay: 0.6s;
}
.rpl-10__group--b .rpl-10__r {
  border: 1.5px solid rgba(99,102,241,0.7);
}
.rpl-10__group--b .rpl-10__r:nth-child(1) { animation-delay: 1.2s; animation-duration: 2.4s; }
.rpl-10__group--b .rpl-10__r:nth-child(2) { animation-delay: 1.6s; animation-duration: 2.4s; border-color: rgba(99,102,241,0.4); }
.rpl-10__group--b .rpl-10__r:nth-child(3) { animation-delay: 2.0s; animation-duration: 2.4s; border-color: rgba(99,102,241,0.18); }
@keyframes rpl-10-ring-b {
  0%   { width: 0; height: 0; opacity: 0.9; }
  100% { width: 120px; height: 50px; opacity: 0; }
}
.rpl-10__group--b .rpl-10__r { animation-name: rpl-10-ring-b; }
.rpl-10__group--b .rpl-10__label { color: #4f46e5; }

/* DROP C — rose */
.rpl-10__group--c .rpl-10__falling-drop {
  color: #ec4899;
  width: 10px;
  animation-duration: 1.8s;
  animation-delay: 1.1s;
}
.rpl-10__group--c .rpl-10__r {
  border: 1.5px solid rgba(236,72,153,0.7);
}
.rpl-10__group--c .rpl-10__r:nth-child(1) { animation-delay: 1.6s; animation-duration: 1.6s; }
.rpl-10__group--c .rpl-10__r:nth-child(2) { animation-delay: 1.9s; animation-duration: 1.6s; border-color: rgba(236,72,153,0.4); }
.rpl-10__group--c .rpl-10__r:nth-child(3) { animation-delay: 2.2s; animation-duration: 1.6s; border-color: rgba(236,72,153,0.18); }
@keyframes rpl-10-ring-c {
  0%   { width: 0; height: 0; opacity: 0.9; }
  100% { width: 80px; height: 32px; opacity: 0; }
}
.rpl-10__group--c .rpl-10__r { animation-name: rpl-10-ring-c; }
.rpl-10__group--c .rpl-10__label { color: #db2777; }

/* Surface line */
.rpl-10__line {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.3;
}
.rpl-10__group--a .rpl-10__line { color: #f59e0b; }
.rpl-10__group--b .rpl-10__line { color: #6366f1; }
.rpl-10__group--c .rpl-10__line { color: #ec4899; }

.rpl-10__label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Info text */
.rpl-10__info {
  max-width: 520px;
  text-align: center;
}
.rpl-10__info p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(44,26,8,0.5);
  font-weight: 300;
}
.rpl-10__info strong {
  color: #2c1a08;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .rpl-10__falling-drop, .rpl-10__r { animation: none !important; opacity: 0.3; }
}
```

### 11. CSS Ripple Login Form UI

**Type:** CSS + JS
**Description:** A split-screen login page: the left panel features multi-origin CSS ripple rings expanding from a glowing contact point over a teal-green gradient; the right panel is a polished dark-surface form with teal focus rings and a JS ink-ripple on the submit and social-login buttons. Plus Jakarta Sans on deep #0a1412.

**HTML:**
```html
<div class="rpl-11">
  <!-- Left panel with ripple background -->
  <div class="rpl-11__left">
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__glow"></div>
    <div class="rpl-11__brand">
      <div class="rpl-11__brand-icon">◈</div>
      <h2>Welcome to<br>Ripple Studio</h2>
      <p>A login form where even the background is a CSS ripple animation.</p>
    </div>
  </div>

  <!-- Right panel: form -->
  <div class="rpl-11__right">
    <div class="rpl-11__form-wrap">
      <div class="rpl-11__form-header">
        <span class="tag">Sign in</span>
        <h1>Good to see<br>you again.</h1>
        <p>Enter your credentials to continue</p>
      </div>

      <div class="rpl-11__field">
        <label>Email address</label>
        <input type="email" placeholder="you@example.com">
      </div>
      <div class="rpl-11__field">
        <label>Password</label>
        <input type="password" placeholder="••••••••">
      </div>

      <button class="rpl-11__submit" id="rpl-11-btn">Sign in</button>

      <div class="rpl-11__divider">or continue with</div>

      <div class="rpl-11__socials">
        <button class="rpl-11__social rpl-11__social-btn">🔵 Google</button>
        <button class="rpl-11__social rpl-11__social-btn">⬛ GitHub</button>
      </div>

      <div class="rpl-11__footer">
        Don't have an account? <a href="#">Sign up free</a>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

.rpl-11, .rpl-11 *, .rpl-11 *::before, .rpl-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-11 ::selection { background: #14b8a6; color: #fff; }

.rpl-11 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: #040f0e;
}
@media (max-width: 720px) {
  .rpl-11 { grid-template-columns: 1fr; }
  .rpl-11__left { display: none; }
}

/* ─── Left: animated ripple background ─── */
.rpl-11__left {
  position: relative;
  background: linear-gradient(135deg, #042f2e 0%, #065f46 50%, #0d4a40 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layered ripple rings from bottom-left */
.rpl-11__bg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(20,184,166,0.3);
  animation: rpl-11-expand ease-out infinite;
}
.rpl-11__bg-ring:nth-child(1) { left: 10%; bottom: 15%; width: 0; height: 0; animation-duration: 5s; animation-delay: 0s; }
.rpl-11__bg-ring:nth-child(2) { left: 10%; bottom: 15%; width: 0; height: 0; animation-duration: 5s; animation-delay: 1.0s; border-color: rgba(20,184,166,0.2); }
.rpl-11__bg-ring:nth-child(3) { left: 10%; bottom: 15%; width: 0; height: 0; animation-duration: 5s; animation-delay: 2.0s; border-color: rgba(20,184,166,0.12); }
.rpl-11__bg-ring:nth-child(4) { left: 10%; bottom: 15%; width: 0; height: 0; animation-duration: 5s; animation-delay: 3.0s; border-color: rgba(20,184,166,0.06); }
.rpl-11__bg-ring:nth-child(5) { left: 75%; top: 20%; width: 0; height: 0; animation-duration: 7s; animation-delay: 1.5s; border-color: rgba(52,211,153,0.25); }
.rpl-11__bg-ring:nth-child(6) { left: 75%; top: 20%; width: 0; height: 0; animation-duration: 7s; animation-delay: 3.0s; border-color: rgba(52,211,153,0.12); }
@keyframes rpl-11-expand {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0;
         width: 700px; height: 700px; }
}

/* Branded content */
.rpl-11__brand {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px;
  color: #e8fffe;
}
.rpl-11__brand-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 20px rgba(20,184,166,0.6));
}
.rpl-11__brand h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.rpl-11__brand p {
  font-size: 0.92rem;
  color: rgba(232,255,254,0.55);
  line-height: 1.6;
  font-weight: 300;
  max-width: 280px;
}

/* Glow dot */
.rpl-11__glow {
  position: absolute;
  left: 10%; bottom: 15%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 20px #14b8a6, 0 0 40px rgba(20,184,166,0.5);
  transform: translate(-50%, 50%);
}

/* ─── Right: Login form ─── */
.rpl-11__right {
  background: #0a1412;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}

.rpl-11__form-wrap {
  width: 100%;
  max-width: 380px;
}

.rpl-11__form-header {
  margin-bottom: 36px;
}
.rpl-11__form-header .tag {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #14b8a6;
  margin-bottom: 10px;
  display: block;
}
.rpl-11__form-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #e8fffe;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rpl-11__form-header p {
  margin-top: 8px;
  font-size: 0.88rem;
  color: rgba(232,255,254,0.4);
  font-weight: 300;
}

/* Form fields */
.rpl-11__field {
  margin-bottom: 20px;
}
.rpl-11__field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(232,255,254,0.5);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.rpl-11__field input {
  width: 100%;
  background: rgba(20,184,166,0.05);
  border: 1.5px solid rgba(20,184,166,0.15);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'Plus Jakarta Sans';
  font-size: 0.95rem;
  color: #e8fffe;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.rpl-11__field input::placeholder { color: rgba(232,255,254,0.2); }
.rpl-11__field input:focus {
  border-color: #14b8a6;
  background: rgba(20,184,166,0.08);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.15);
}

/* Submit button with ripple */
.rpl-11__submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  color: #fff;
  font-family: 'Plus Jakarta Sans';
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(20,184,166,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 8px;
}
.rpl-11__submit:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(20,184,166,0.5); }
.rpl-11__submit:active { transform: translateY(1px); }
.rpl-11__submit .ink {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  pointer-events: none;
  animation: rpl-11-ink 0.6s linear forwards;
}
@keyframes rpl-11-ink { to { transform: scale(4); opacity: 0; } }

/* Social logins */
.rpl-11__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: rgba(232,255,254,0.2);
  font-size: 0.78rem;
}
.rpl-11__divider::before, .rpl-11__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(232,255,254,0.1);
}

.rpl-11__socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rpl-11__social {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1.5px solid rgba(232,255,254,0.1);
  border-radius: 10px;
  background: transparent;
  color: rgba(232,255,254,0.65);
  font-family: 'Plus Jakarta Sans';
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.rpl-11__social:hover { border-color: rgba(20,184,166,0.4); background: rgba(20,184,166,0.05); }
.rpl-11__social .ink {
  position: absolute;
  border-radius: 50%;
  background: rgba(20,184,166,0.25);
  transform: scale(0);
  pointer-events: none;
  animation: rpl-11-ink 0.5s linear forwards;
}

.rpl-11__footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.82rem;
  color: rgba(232,255,254,0.3);
}
.rpl-11__footer a {
  color: #14b8a6;
  text-decoration: none;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .rpl-11__bg-ring { animation: none !important; opacity: 0.1; }
  .rpl-11__submit, .rpl-11__social, .rpl-11__field input { transition: none; }
  .ink { animation: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('.rpl-11__submit, .rpl-11__social-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const size = Math.max(rect.width, rect.height);
    const ink = document.createElement('span');
    ink.className = 'ink';
    ink.style.cssText = `left:${x-size/2}px;top:${y-size/2}px;width:${size}px;height:${size}px;`;
    this.appendChild(ink);
    ink.addEventListener('animationend', () => ink.remove(), { once: true });
  });
});
```

### 12. CSS Aurora Borealis Ripple Background

**Type:** CSS + JS
**Description:** A night-sky hero with four drifting blur-filtered aurora blob layers (mix-blend-mode: screen), concentric ripple rings expanding from multiple anchor points in teal, indigo and cyan, 80 JS-seeded twinkling stars and floating editorial badges. Cormorant Garamond + Outfit on deep #020617 midnight.

**HTML:**
```html
<div class="rpl-12">
  <!-- Aurora blobs -->
  <div class="rpl-12__aurora">
    <div class="rpl-12__blob rpl-12__blob--a"></div>
    <div class="rpl-12__blob rpl-12__blob--b"></div>
    <div class="rpl-12__blob rpl-12__blob--c"></div>
    <div class="rpl-12__blob rpl-12__blob--d"></div>
  </div>

  <!-- Ripple rings -->
  <div class="rpl-12__ripple-field">
    <div class="rpl-12__arc rpl-12__arc--t1"></div>
    <div class="rpl-12__arc rpl-12__arc--t2"></div>
    <div class="rpl-12__arc rpl-12__arc--t3"></div>
    <div class="rpl-12__arc rpl-12__arc--t4"></div>
    <div class="rpl-12__arc rpl-12__arc--i1"></div>
    <div class="rpl-12__arc rpl-12__arc--i2"></div>
    <div class="rpl-12__arc rpl-12__arc--i3"></div>
    <div class="rpl-12__arc rpl-12__arc--c1"></div>
    <div class="rpl-12__arc rpl-12__arc--c2"></div>
  </div>

  <!-- Stars -->
  <div class="rpl-12__stars" id="rpl-12-stars"></div>

  <!-- Floating labels -->
  <div class="rpl-12__badge rpl-12__badge--1">Pure CSS</div>
  <div class="rpl-12__badge rpl-12__badge--2">No Canvas</div>
  <div class="rpl-12__badge rpl-12__badge--3">CSS Ripple</div>
  <div class="rpl-12__badge rpl-12__badge--4">Keyframes</div>

  <!-- Main content -->
  <div class="rpl-12__content">
    <div class="eyebrow">Aurora Ripple Effect</div>
    <h1>Where<br>light <em>ripples</em><br>endlessly.</h1>
    <p>Aurora blobs drift across a starfield while concentric rings expand outward — layered CSS gradients, blur filters and keyframe animations. Zero JavaScript for the background.</p>
    <div class="rpl-12__ctas">
      <a href="#" class="rpl-12__cta rpl-12__cta--primary">Explore Effect →</a>
      <a href="#" class="rpl-12__cta rpl-12__cta--ghost">View Source</a>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,600&family=Outfit:wght@300;400;500&display=swap');

.rpl-12, .rpl-12 *, .rpl-12 *::before, .rpl-12 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-12 ::selection { background: #a5f3fc; color: #020617; }

.rpl-12 {
  font-family: 'Outfit', sans-serif;
  background: #020617;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

/* ─── Aurora layers: radial blobs that drift and pulse ─── */
.rpl-12__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Blob A — teal/green */
.rpl-12__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: rpl-12-drift ease-in-out infinite alternate;
}
.rpl-12__blob--a {
  width: 70vw; height: 50vh;
  top: -10%;  left: -10%;
  background: radial-gradient(ellipse, rgba(52,211,153,0.4) 0%, rgba(16,185,129,0.2) 50%, transparent 100%);
  animation-duration: 12s;
}
.rpl-12__blob--b {
  width: 60vw; height: 60vh;
  top: 20%;  right: -15%;
  background: radial-gradient(ellipse, rgba(99,102,241,0.35) 0%, rgba(79,70,229,0.15) 50%, transparent 100%);
  animation-duration: 16s;
  animation-delay: -4s;
}
.rpl-12__blob--c {
  width: 55vw; height: 45vh;
  bottom: -10%; left: 20%;
  background: radial-gradient(ellipse, rgba(6,182,212,0.3) 0%, rgba(14,165,233,0.15) 50%, transparent 100%);
  animation-duration: 10s;
  animation-delay: -7s;
}
.rpl-12__blob--d {
  width: 40vw; height: 35vh;
  top: 30%; left: 30%;
  background: radial-gradient(ellipse, rgba(167,243,208,0.25) 0%, rgba(52,211,153,0.1) 50%, transparent 100%);
  animation-duration: 20s;
  animation-delay: -10s;
}
@keyframes rpl-12-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(4%, 6%) scale(1.08); }
  66%  { transform: translate(-3%, 4%) scale(0.95); }
  100% { transform: translate(6%, -4%) scale(1.05); }
}

/* ─── Ripple rings that expand from center ─── */
.rpl-12__ripple-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rpl-12__arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: rpl-12-ring ease-out infinite;
}

/* Teal rings */
.rpl-12__arc--t1 { width: 100px; height: 100px; border-color: rgba(52,211,153,0.6); animation-duration: 6s; animation-delay: 0s; }
.rpl-12__arc--t2 { width: 100px; height: 100px; border-color: rgba(52,211,153,0.35); animation-duration: 6s; animation-delay: 1.5s; }
.rpl-12__arc--t3 { width: 100px; height: 100px; border-color: rgba(52,211,153,0.18); animation-duration: 6s; animation-delay: 3.0s; }
.rpl-12__arc--t4 { width: 100px; height: 100px; border-color: rgba(52,211,153,0.08); animation-duration: 6s; animation-delay: 4.5s; }

/* Indigo rings */
.rpl-12__arc--i1 { width: 100px; height: 100px; border-color: rgba(129,140,248,0.5); animation-duration: 8s; animation-delay: 2s; }
.rpl-12__arc--i2 { width: 100px; height: 100px; border-color: rgba(129,140,248,0.25); animation-duration: 8s; animation-delay: 4s; }
.rpl-12__arc--i3 { width: 100px; height: 100px; border-color: rgba(129,140,248,0.12); animation-duration: 8s; animation-delay: 6s; }

/* Cyan rings — slightly offset */
.rpl-12__arc--c1 { width: 100px; height: 100px; border-color: rgba(34,211,238,0.45); animation-duration: 9s; animation-delay: 1s; top: 40%; left: 55%; }
.rpl-12__arc--c2 { width: 100px; height: 100px; border-color: rgba(34,211,238,0.22); animation-duration: 9s; animation-delay: 3.5s; top: 40%; left: 55%; }

@keyframes rpl-12-ring {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(14); opacity: 0; }
}

/* Stars */
.rpl-12__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rpl-12__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: rpl-12-twinkle ease-in-out infinite alternate;
}
@keyframes rpl-12-twinkle {
  to { opacity: 0.1; transform: scale(0.6); }
}

/* Content */
.rpl-12__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 600px;
}

.rpl-12__content .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(165,243,252,0.6);
  margin-bottom: 20px;
  border: 1px solid rgba(165,243,252,0.2);
  border-radius: 40px;
  padding: 6px 16px;
}

.rpl-12__content h1 {
  font-family: 'Cormorant Garamond';
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 300;
  line-height: 0.9;
  color: #f0fdff;
  letter-spacing: -0.01em;
}
.rpl-12__content h1 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, #5eead4, #22d3ee, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rpl-12__content p {
  margin-top: 24px;
  font-size: 1rem;
  color: rgba(240,253,255,0.5);
  line-height: 1.7;
  font-weight: 300;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.rpl-12__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

.rpl-12__cta {
  padding: 14px 30px;
  border-radius: 40px;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rpl-12__cta--primary {
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  color: #fff;
  box-shadow: 0 8px 32px rgba(99,102,241,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.rpl-12__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(99,102,241,0.5);
}
.rpl-12__cta--ghost {
  border: 1px solid rgba(165,243,252,0.25);
  color: rgba(240,253,255,0.75);
  background: rgba(255,255,255,0.04);
}
.rpl-12__cta--ghost:hover {
  border-color: rgba(165,243,252,0.5);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

/* Floating badges */
.rpl-12__badge {
  position: absolute;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(165,243,252,0.15);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 0.72rem;
  color: rgba(165,243,252,0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 5;
  animation: rpl-12-float ease-in-out infinite alternate;
}
.rpl-12__badge--1 { top: 14%; left: 8%; animation-duration: 6s; }
.rpl-12__badge--2 { top: 20%; right: 6%; animation-duration: 8s; animation-delay: -2s; }
.rpl-12__badge--3 { bottom: 18%; left: 6%; animation-duration: 7s; animation-delay: -4s; }
.rpl-12__badge--4 { bottom: 14%; right: 8%; animation-duration: 5s; animation-delay: -1s; }
@keyframes rpl-12-float {
  to { transform: translateY(-10px); }
}

@media (max-width: 640px) {
  .rpl-12__badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-12__blob, .rpl-12__arc, .rpl-12__star, .rpl-12__badge { animation: none !important; }
  .rpl-12__cta { transition: none; }
}
```

**JS:**
```js
(function() {
  const stars = document.getElementById('rpl-12-stars');
  for (let i = 0; i < 80; i++) {
    const s = document.createElement('div');
    s.className = 'rpl-12__star';
    const size = Math.random() * 2.5 + 0.5;
    const delay = Math.random() * 4;
    const dur = Math.random() * 3 + 2;
    s.style.cssText = `
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;
      top:${Math.random()*100}%;
      opacity:${Math.random()*0.8+0.1};
      animation-duration:${dur}s;
      animation-delay:${delay}s;
    `;
    stars.appendChild(s);
  }
})();
```

---
## 12 CSS Scroll Animations

URL: https://codefronts.com/motion/css-scroll-animations/
Description: 12 full-page CSS scroll animation demos — sticky parallax cosmos, kinetic typography, staggered grid waves, animated data stats, clip-path reveals, 3D card entrances, scrollytelling product tours and more. Each demo is a complete, copy-paste-ready HTML document built with IntersectionObserver and scroll-linked motion.
Demo count: 12

### 01. Parallax Cosmos

**Type:** CSS + JS
**Description:** A 320vh sticky scene with six depth layers and a canvas starfield drifting at independent speeds, depth labels, and a scroll-progress bar.

**HTML:**
```html
<div class="prog" id="prog"></div>
<div id="pw">
  <div id="pi">
    <canvas id="cv"></canvas>
    <div class="ly" id="l-r3"><div class="ring r3"></div></div>
    <div class="ly" id="l-r2"><div class="ring r2"></div></div>
    <div class="ly" id="l-orb"><div class="orb"></div></div>
    <div class="ly" id="l-r1"><div class="ring r1"></div></div>
    <div class="ly" id="l-ghost"><div class="ghost">DEPTH</div></div>
    <div class="ly" id="l-tag"><div class="tagline">Scroll to feel the layers</div></div>
    <div class="dot d1" id="dot1"></div>
    <div class="dot d2" id="dot2"></div>
    <div class="dot d3" id="dot3"></div>
    <div class="depth-label a1" id="lbl1">01 — Atmosphere</div>
    <div class="depth-label a2" id="lbl2">02 — Orbit</div>
    <div class="depth-label a3" id="lbl3">03 — Core</div>
  </div>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#04040B;overflow-x:hidden}
#pw{height:320vh;position:relative}
#pi{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:#04040B;display:flex;align-items:center;justify-content:center;
}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ly{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;pointer-events:none;
}
.ghost{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(100px,17vw,250px);
  color:transparent;
  -webkit-text-stroke:1px rgba(201,169,110,0.11);
  letter-spacing:0.05em;user-select:none;white-space:nowrap;
}
.orb{
  width:clamp(320px,46vw,580px);height:clamp(320px,46vw,580px);
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,rgba(201,169,110,0.16),rgba(140,80,220,0.05) 48%,transparent 72%);
}
.ring{border-radius:50%;border:1px solid rgba(201,169,110,0.07)}
.r1{width:clamp(200px,33vw,430px);height:clamp(200px,33vw,430px)}
.r2{width:clamp(450px,72vw,840px);height:clamp(450px,72vw,840px);border-color:rgba(201,169,110,0.04)}
.r3{width:clamp(520px,88vw,1020px);height:clamp(520px,88vw,1020px);border-color:rgba(201,169,110,0.025)}
.tagline{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(16px,2.2vw,28px);
  color:rgba(201,169,110,0.72);text-align:center;
  white-space:nowrap;
}
.dot{
  width:3px;height:3px;border-radius:50%;background:#C9A96E;
  box-shadow:0 0 14px 5px rgba(201,169,110,0.22);
}
.d1{position:absolute;top:30%;right:24%}
.d2{position:absolute;bottom:26%;left:20%}
.d3{position:absolute;top:58%;right:17%}

/* scroll progress */
.prog{
  position:fixed;bottom:0;left:0;height:1px;
  background:linear-gradient(to right,#C9A96E 0%,rgba(201,169,110,0.15) 100%);
  width:0%;z-index:100;transition:width 0.08s linear;
}
/* depth labels */
.depth-label{
  position:absolute;
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(11px,1.2vw,15px);
  color:rgba(201,169,110,0.0);
  letter-spacing:0.1em;
  transition:color 0.6s ease;
}
.depth-label.a1{top:18%;left:8%}
.depth-label.a2{bottom:20%;right:9%}
.depth-label.a3{top:50%;left:50%;transform:translate(-50%,-50%)}
```

**JS:**
```js
const cv = document.getElementById('cv');
const ctx = cv.getContext('2d');
function drawStars(){
  cv.width = window.innerWidth;
  cv.height = window.innerHeight;
  ctx.clearRect(0,0,cv.width,cv.height);
  for(let i=0;i<280;i++){
    const x=Math.random()*cv.width, y=Math.random()*cv.height;
    const r=Math.random()*1.5+0.15;
    ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);
    ctx.fillStyle=`rgba(255,252,215,${Math.random()*0.55+0.07})`;
    ctx.fill();
  }
  for(let i=0;i<12;i++){
    const x=Math.random()*cv.width, y=Math.random()*cv.height;
    ctx.beginPath();ctx.arc(x,y,1.8,0,Math.PI*2);
    ctx.fillStyle='rgba(255,250,200,0.75)';ctx.fill();
  }
}
drawStars();
window.addEventListener('resize',drawStars);

const pw = document.getElementById('pw');
const prog = document.getElementById('prog');
const layers = [
  {el:document.getElementById('l-r3'),  range:60},
  {el:document.getElementById('l-r2'),  range:110},
  {el:document.getElementById('l-orb'), range:180},
  {el:document.getElementById('l-r1'),  range:270},
  {el:document.getElementById('l-ghost'),range:480},
  {el:document.getElementById('l-tag'), range:90},
];

const lbl1=document.getElementById('lbl1');
const lbl2=document.getElementById('lbl2');
const lbl3=document.getElementById('lbl3');

window.addEventListener('scroll',()=>{
  const rect = pw.getBoundingClientRect();
  const scrolled = -rect.top;
  const maxScroll = pw.offsetHeight - window.innerHeight;
  const p = Math.max(0,Math.min(1, scrolled/maxScroll));

  prog.style.width = (p*100)+'%';

  layers.forEach(l=>{
    const offset = (p - 0.5) * l.range;
    l.el.style.transform = `translateY(${offset}px)`;
  });

  lbl1.style.color = p > 0.15 ? `rgba(201,169,110,${Math.min((p-0.15)*4,0.45)})` : 'rgba(201,169,110,0)';
  lbl2.style.color = p > 0.45 ? `rgba(201,169,110,${Math.min((p-0.45)*4,0.45)})` : 'rgba(201,169,110,0)';
  lbl3.style.color = p > 0.72 ? `rgba(201,169,110,${Math.min((p-0.72)*4,0.45)})` : 'rgba(201,169,110,0)';

  document.getElementById('l-ghost').firstElementChild.style.webkitTextStroke =
    `1px rgba(201,169,110,${0.06 + p * 0.22})`;
},{passive:true});
```

### 02. Kinetic Typography

**Type:** CSS + JS
**Description:** Five full-screen type blocks where words slide, stagger, and settle into place as each panel enters the viewport.

**HTML:**
```html
<!-- Block 1: Dark gold -->
<section class="block b1">
  <span class="counter-tag">01 / 05</span>
  <div class="ghost">DE</div>
  <div class="kl"><span class="w">DESIGN</span>&nbsp;<span class="w"><span class="em">that</span></span></div>
  <div class="kl"><span class="w">MOVES</span></div>
  <div class="kl"><span class="w">PEOPLE</span></div>
  <div class="rule"></div>
  <p class="sub">Scroll-driven motion. Cinematic reveals. Zero libraries.</p>
</section>

<!-- Block 2: Cream terracotta -->
<section class="block b2">
  <span class="counter-tag">02 / 05</span>
  <div class="ghost">GO</div>
  <div class="kl"><span class="w">EVERY</span></div>
  <div class="kl"><span class="w">WORD</span>&nbsp;<span class="w"><span class="em">earns</span></span></div>
  <div class="kl"><span class="w">ITS&nbsp;</span><span class="w">PLACE</span></div>
  <div class="rule"></div>
  <p class="sub">Typography as choreography. Each line its own entrance.</p>
</section>

<!-- Block 3: Dark purple -->
<section class="block b3">
  <span class="counter-tag">03 / 05</span>
  <div class="ghost">MO</div>
  <div class="kl"><span class="w">MOTION</span></div>
  <div class="solo"><span class="w"><span class="em">is the</span></span></div>
  <div class="kl" style="margin-top:0.1em"><span class="w">MESSAGE</span></div>
  <div class="rule"></div>
  <p class="sub">The way it arrives matters as much as what it says.</p>
</section>

<!-- Block 4: Warm cream -->
<section class="block b4">
  <span class="counter-tag">04 / 05</span>
  <div class="ghost">AR</div>
  <div class="kl"><span class="w">ARRIVE</span></div>
  <div class="kl"><span class="w">ON&nbsp;</span><span class="w"><span class="em">cue,</span></span></div>
  <div class="kl"><span class="w">ALWAYS</span></div>
  <div class="rule"></div>
  <p class="sub">Timing is everything. Precision in every millisecond.</p>
</section>

<!-- Block 5: Dark neon mono -->
<section class="block b5">
  <span class="counter-tag">05 / 05</span>
  <div class="ghost" style="-webkit-text-stroke:1px rgba(57,255,20,0.04)">SC</div>
  <div class="mono"><span class="w">SCROLL</span></div>
  <div class="mono"><span class="w">IS</span>&nbsp;<span class="w">THE</span></div>
  <div class="mono"><span class="w">INPUT</span></div>
  <div class="rule" style="background:#39FF14"></div>
  <p class="sub" style="color:rgba(57,255,20,0.35);font-family:'Courier New',monospace;font-style:normal;font-size:clamp(12px,1.2vw,16px);letter-spacing:0.08em">USER_SCROLL → ANIMATION_TRIGGER → REVEAL_STATE</p>
</section>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{overflow-x:hidden}

.block{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:8rem 7vw;position:relative;overflow:hidden;
}

/* Block themes */
.b1{background:#0E0C09}
.b2{background:#EDE8DF}
.b3{background:#100A08}
.b4{background:#F0EDE6}
.b5{background:#080C10}

/* Kinetic lines */
.kl{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(62px,12vw,180px);
  line-height:0.91;
  overflow:hidden;display:block;
}
.kl .w{
  display:inline-block;
  transform:translateY(115%);opacity:0;
  transition:transform 0.95s cubic-bezier(0.16,1,0.3,1),opacity 0.38s ease;
}
.kl.in .w{transform:translateY(0);opacity:1}
.kl.in .w:nth-child(2){transition-delay:0.07s}
.kl.in .w:nth-child(3){transition-delay:0.14s}
.kl.in .w:nth-child(4){transition-delay:0.21s}
.kl.in .w:nth-child(5){transition-delay:0.28s}

/* per-block text colors */
.b1 .kl,.b3 .kl,.b5 .kl{color:#F0EBE0}
.b2 .kl,.b4 .kl{color:#16110C}

/* accent color per block */
.b1 .em{color:#C9A96E}
.b2 .em{color:#B34A38}
.b3 .em{color:#9B7FE8}
.b4 .em{color:#2E6B8A}
.b5 .em{color:#39FF14}
.em{font-family:'Fraunces',serif;font-style:italic}

/* rule */
.rule{
  height:2px;width:0;opacity:0;margin:2.5rem 0 2rem;
  transition:width 1s cubic-bezier(0.16,1,0.3,1) 0.45s,opacity 0.4s ease 0.45s;
}
.rule.in{width:80px;opacity:1}
.b1 .rule,.b3 .rule,.b5 .rule{background:#C9A96E}
.b2 .rule{background:#B34A38}
.b4 .rule{background:#2E6B8A}
.b5 .rule{background:#39FF14}

/* sub */
.sub{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(14px,1.7vw,22px);
  opacity:0;transform:translateY(14px);
  transition:opacity 0.8s ease 0.7s,transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s;
}
.sub.in{opacity:1;transform:translateY(0)}
.b1 .sub,.b3 .sub,.b5 .sub{color:rgba(240,235,224,0.35)}
.b2 .sub,.b4 .sub{color:rgba(22,17,12,0.38)}

/* ghost watermark */
.ghost{
  position:absolute;user-select:none;pointer-events:none;
  font-family:'Bebas Neue',sans-serif;font-size:28vw;line-height:1;
  color:transparent;
}
.b1 .ghost,.b3 .ghost,.b5 .ghost{-webkit-text-stroke:1px rgba(255,255,255,0.03);bottom:-8%;right:-4%}
.b2 .ghost,.b4 .ghost{-webkit-text-stroke:1px rgba(0,0,0,0.04);bottom:-8%;right:-4%}

/* counter tag */
.counter-tag{
  position:absolute;top:3rem;right:4rem;
  font-family:'Fraunces',serif;font-style:italic;
  font-size:13px;letter-spacing:0.05em;
}
.b1 .counter-tag,.b3 .counter-tag,.b5 .counter-tag{color:rgba(240,235,224,0.2)}
.b2 .counter-tag,.b4 .counter-tag{color:rgba(22,17,12,0.2)}

/* large italic solo line */
.solo{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(40px,7vw,110px);
  line-height:1;overflow:hidden;display:block;
}
.solo .w{
  display:inline-block;
  transform:translateY(115%);opacity:0;
  transition:transform 1.1s cubic-bezier(0.16,1,0.3,1),opacity 0.5s ease;
}
.solo.in .w{transform:translateY(0);opacity:1}
.solo.in .w:nth-child(2){transition-delay:0.09s}
.solo.in .w:nth-child(3){transition-delay:0.18s}

.b5{font-family:monospace}
.mono{
  font-family:'Courier New',monospace;
  font-size:clamp(48px,9vw,140px);
  font-weight:700;line-height:0.9;
  color:#39FF14;overflow:hidden;display:block;
}
.mono .w{
  display:inline-block;
  transform:translateX(-40px);opacity:0;
  transition:transform 0.8s cubic-bezier(0.16,1,0.3,1),opacity 0.4s ease;
}
.mono.in .w{transform:translateX(0);opacity:1}
.mono.in .w:nth-child(2){transition-delay:0.06s}
.mono.in .w:nth-child(3){transition-delay:0.12s}
.mono.in .w:nth-child(4){transition-delay:0.18s}
.mono.in .w:nth-child(5){transition-delay:0.24s}
```

**JS:**
```js
const io = new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
  });
},{threshold:0.25});
document.querySelectorAll('.kl,.solo,.mono,.rule,.sub').forEach(el=>io.observe(el));
```

### 03. Staggered Grid Waves

**Type:** CSS + JS
**Description:** Four waves of nine-card grids, each wave entering with a different physics — rise, scale, rotate, and depth burst.

**HTML:**
```html
<!-- Wave 1: slide up -->
<div class="grid wave1">
  <div class="card"><div class="img g1">🌊</div><div class="body"><div class="cat" style="color:#60A5FA">Ocean</div><div class="name">Deep Currents</div><div class="meta">Photography · 2024</div></div></div>
  <div class="card"><div class="img g2">🔮</div><div class="body"><div class="cat" style="color:#A78BFA">Crystal</div><div class="name">Refraction</div><div class="meta">Abstract · 2024</div></div></div>
  <div class="card"><div class="img g3">🌿</div><div class="body"><div class="cat" style="color:#34D399">Botanic</div><div class="name">Overgrowth</div><div class="meta">Nature · 2024</div></div></div>
  <div class="card"><div class="img g4">🔥</div><div class="body"><div class="cat" style="color:#FB923C">Ember</div><div class="name">Controlled Burn</div><div class="meta">Documentary · 2024</div></div></div>
  <div class="card"><div class="img g5">⚡</div><div class="body"><div class="cat" style="color:#60A5FA">Storm</div><div class="name">Discharge</div><div class="meta">Science · 2024</div></div></div>
  <div class="card"><div class="img g6">🌸</div><div class="body"><div class="cat" style="color:#F472B6">Bloom</div><div class="name">First Light</div><div class="meta">Portrait · 2024</div></div></div>
  <div class="card"><div class="img g7">🍄</div><div class="body"><div class="cat" style="color:#A3E635">Mycelium</div><div class="name">Spore Networks</div><div class="meta">Macro · 2024</div></div></div>
  <div class="card"><div class="img g8">🏔️</div><div class="body"><div class="cat" style="color:#FB7185">Geology</div><div class="name">Pressure Points</div><div class="meta">Aerial · 2024</div></div></div>
  <div class="card"><div class="img g9">🌌</div><div class="body"><div class="cat" style="color:#818CF8">Cosmos</div><div class="name">Deep Field</div><div class="meta">Astro · 2024</div></div></div>
</div>

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

<!-- Wave 2: alternate sides -->
<div class="grid wave2">
  <div class="card"><div class="img g5">🦋</div><div class="body"><div class="cat" style="color:#67E8F9">Fauna</div><div class="name">Wing Patterns</div><div class="meta">Macro · 2024</div></div></div>
  <div class="card"><div class="img g1">🏞️</div><div class="body"><div class="cat" style="color:#93C5FD">Alpine</div><div class="name">Ridge at Dusk</div><div class="meta">Landscape · 2024</div></div></div>
  <div class="card"><div class="img g6">🌙</div><div class="body"><div class="cat" style="color:#C4B5FD">Lunar</div><div class="name">Crescent</div><div class="meta">Astrophoto · 2024</div></div></div>
  <div class="card"><div class="img g3">🐚</div><div class="body"><div class="cat" style="color:#6EE7B7">Tidal</div><div class="name">Low Tide</div><div class="meta">Seascape · 2024</div></div></div>
  <div class="card"><div class="img g2">🔬</div><div class="body"><div class="cat" style="color:#DDD6FE">Micro</div><div class="name">Cell Division</div><div class="meta">Science · 2024</div></div></div>
  <div class="card"><div class="img g8">🌅</div><div class="body"><div class="cat" style="color:#FCA5A5">Golden</div><div class="name">Hour Break</div><div class="meta">Portrait · 2024</div></div></div>
  <div class="card"><div class="img g4">🏜️</div><div class="body"><div class="cat" style="color:#FCD34D">Desert</div><div class="name">Arid Season</div><div class="meta">Travel · 2024</div></div></div>
  <div class="card"><div class="img g9">🐠</div><div class="body"><div class="cat" style="color:#7DD3FC">Pelagic</div><div class="name">Open Water</div><div class="meta">Underwater · 2024</div></div></div>
  <div class="card"><div class="img g7">🌺</div><div class="body"><div class="cat" style="color:#86EFAC">Tropics</div><div class="name">Hibiscus</div><div class="meta">Flora · 2024</div></div></div>
</div>

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

<!-- Wave 3: fall from above -->
<div class="grid wave3">
  <div class="card"><div class="img g2">🪸</div><div class="body"><div class="cat" style="color:#F9A8D4">Reef</div><div class="name">Coral Maze</div><div class="meta">Underwater · 2024</div></div></div>
  <div class="card"><div class="img g7">🌾</div><div class="body"><div class="cat" style="color:#D9F99D">Field</div><div class="name">Harvest Wind</div><div class="meta">Rural · 2024</div></div></div>
  <div class="card"><div class="img g4">🏙️</div><div class="body"><div class="cat" style="color:#FCA5A5">Urban</div><div class="name">Neon Spill</div><div class="meta">Street · 2024</div></div></div>
  <div class="card"><div class="img g6">❄️</div><div class="body"><div class="cat" style="color:#BAE6FD">Arctic</div><div class="name">Ice Sheet</div><div class="meta">Expedition · 2024</div></div></div>
  <div class="card"><div class="img g1">🌊</div><div class="body"><div class="cat" style="color:#6EE7B7">Biolume</div><div class="name">Night Shore</div><div class="meta">Nature · 2024</div></div></div>
  <div class="card"><div class="img g8">🦅</div><div class="body"><div class="cat" style="color:#FDE68A">Raptor</div><div class="name">Thermal Ride</div><div class="meta">Wildlife · 2024</div></div></div>
  <div class="card"><div class="img g3">🌲</div><div class="body"><div class="cat" style="color:#A7F3D0">Forest</div><div class="name">Old Growth</div><div class="meta">Nature · 2024</div></div></div>
  <div class="card"><div class="img g5">🌫️</div><div class="body"><div class="cat" style="color:#E0F2FE">Mist</div><div class="name">Valley Floor</div><div class="meta">Landscape · 2024</div></div></div>
  <div class="card"><div class="img g9">🪐</div><div class="body"><div class="cat" style="color:#E9D5FF">Orbit</div><div class="name">Ring Shadow</div><div class="meta">Astro · 2024</div></div></div>
</div>

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

<!-- Wave 4: fan out -->
<div class="grid wave4">
  <div class="card"><div class="img g8">🐙</div><div class="body"><div class="cat" style="color:#F9A8D4">Deep Sea</div><div class="name">Ink Cloud</div><div class="meta">Marine · 2024</div></div></div>
  <div class="card"><div class="img g2">🌃</div><div class="body"><div class="cat" style="color:#C4B5FD">Nocturne</div><div class="name">City After Rain</div><div class="meta">Street · 2024</div></div></div>
  <div class="card"><div class="img g5">🌤️</div><div class="body"><div class="cat" style="color:#93C5FD">Aerial</div><div class="name">Cloudbreak</div><div class="meta">Sky · 2024</div></div></div>
  <div class="card"><div class="img g7">🌳</div><div class="body"><div class="cat" style="color:#86EFAC">Canopy</div><div class="name">Sunbeam Path</div><div class="meta">Forest · 2024</div></div></div>
  <div class="card"><div class="img g1">🧊</div><div class="body"><div class="cat" style="color:#BAE6FD">Glacial</div><div class="name">Blue Cavern</div><div class="meta">Expedition · 2024</div></div></div>
  <div class="card"><div class="img g4">🌶️</div><div class="body"><div class="cat" style="color:#FCA5A5">Harvest</div><div class="name">Spice Market</div><div class="meta">Travel · 2024</div></div></div>
  <div class="card"><div class="img g6">🦩</div><div class="body"><div class="cat" style="color:#F0ABFC">Wading</div><div class="name">Still Pool</div><div class="meta">Wildlife · 2024</div></div></div>
  <div class="card"><div class="img g3">🌊</div><div class="body"><div class="cat" style="color:#6EE7B7">Surge</div><div class="name">Wave Break</div><div class="meta">Ocean · 2024</div></div></div>
  <div class="card"><div class="img g9">🌑</div><div class="body"><div class="cat" style="color:#818CF8">Eclipse</div><div class="name">Total Shadow</div><div class="meta">Astro · 2024</div></div></div>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0E0C09;overflow-x:hidden;padding:4vw}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1rem;
  margin-bottom:1.1rem;
}

.card{
  border-radius:14px;overflow:hidden;
  opacity:0;
  transition:opacity 0.78s cubic-bezier(0.16,1,0.3,1),transform 0.78s cubic-bezier(0.16,1,0.3,1);
}
.card.in{opacity:1;transform:none !important}

/* stagger delays */
.card:nth-child(1){transition-delay:0s}
.card:nth-child(2){transition-delay:0.08s}
.card:nth-child(3){transition-delay:0.16s}
.card:nth-child(4){transition-delay:0.06s}
.card:nth-child(5){transition-delay:0.14s}
.card:nth-child(6){transition-delay:0.22s}
.card:nth-child(7){transition-delay:0.04s}
.card:nth-child(8){transition-delay:0.12s}
.card:nth-child(9){transition-delay:0.20s}

/* wave 1: slide up + slight scale */
.wave1 .card{transform:translateY(64px) scale(0.93)}

/* wave 2: slide from alternating sides */
.wave2 .card:nth-child(odd){transform:translateX(-48px) rotate(-1.5deg)}
.wave2 .card:nth-child(even){transform:translateX(48px) rotate(1.5deg)}

/* wave 3: fall from above */
.wave3 .card{transform:translateY(-52px) scale(0.95)}
.wave3 .card:nth-child(2){transform:translateY(-70px) scale(0.92)}
.wave3 .card:nth-child(5){transform:translateY(-85px) scale(0.9)}
.wave3 .card:nth-child(8){transform:translateY(-60px) scale(0.94)}

/* wave 4: fan out from center */
.wave4 .card:nth-child(1){transform:rotate(-4deg) translate(-30px,30px) scale(0.9)}
.wave4 .card:nth-child(2){transform:translateY(50px) scale(0.92)}
.wave4 .card:nth-child(3){transform:rotate(4deg) translate(30px,30px) scale(0.9)}
.wave4 .card:nth-child(4){transform:rotate(-3deg) translateX(-20px) scale(0.93)}
.wave4 .card:nth-child(5){transform:scale(0.85)}
.wave4 .card:nth-child(6){transform:rotate(3deg) translateX(20px) scale(0.93)}
.wave4 .card:nth-child(7){transform:rotate(-5deg) translate(-30px,-20px) scale(0.9)}
.wave4 .card:nth-child(8){transform:translateY(-40px) scale(0.93)}
.wave4 .card:nth-child(9){transform:rotate(5deg) translate(30px,-20px) scale(0.9)}

.img{
  height:190px;display:flex;align-items:center;
  justify-content:center;font-size:2.8rem;
  position:relative;overflow:hidden;
}
.img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.3));
}
.body{background:#1C1915;padding:1.1rem}
.cat{
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;margin-bottom:0.45rem;
}
.name{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:16px;color:#F0EBE0;margin-bottom:0.3rem;
}
.meta{font-size:12px;color:rgba(240,235,224,0.28)}

/* divider between waves */
.divider{
  height:1px;background:rgba(255,255,255,0.05);
  margin:3rem 0;opacity:0;
  transition:opacity 0.8s ease,width 1s cubic-bezier(0.16,1,0.3,1);
  width:0%;
}
.divider.in{opacity:1;width:100%}

/* gradient image backgrounds */
.g1{background:linear-gradient(145deg,#0D2340,#1B3A6B)}
.g2{background:linear-gradient(145deg,#1A0E35,#2E1B5A)}
.g3{background:linear-gradient(145deg,#0D2016,#173A25)}
.g4{background:linear-gradient(145deg,#2E0E0A,#4A1A14)}
.g5{background:linear-gradient(145deg,#0A1628,#162440)}
.g6{background:linear-gradient(145deg,#22102A,#3A1840)}
.g7{background:linear-gradient(145deg,#0A1C12,#142B1C)}
.g8{background:linear-gradient(145deg,#1E0E08,#341A0D)}
.g9{background:linear-gradient(145deg,#0A1828,#14243A)}
```

**JS:**
```js
const io = new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
  });
},{threshold:0.1,rootMargin:'0px 0px -60px 0px'});
document.querySelectorAll('.card,.divider').forEach(el=>io.observe(el));
```

### 04. Animated Data Stats

**Type:** CSS + JS
**Description:** Counters that ease toward their value, eight scroll-triggered progress bars, and five SVG ring gauges that fill on reveal.

**HTML:**
```html
<!-- S1: BIG COUNTERS -->
<section class="section s1">
  <div class="glow s1-glow"></div>
  <div class="counter-grid">
    <div class="c-card">
      <div class="c-num" data-target="4.2" data-suffix="B">0</div>
      <div class="c-lbl">Global Users</div>
      <div class="c-sub">↑ <span>+18%</span> this quarter</div>
    </div>
    <div class="c-card">
      <div class="c-num" data-target="98.7" data-suffix="%">0</div>
      <div class="c-lbl">Uptime SLA</div>
      <div class="c-sub">↑ <span>+0.3pp</span> vs last year</div>
    </div>
    <div class="c-card">
      <div class="c-num" data-target="340" data-suffix="ms">0</div>
      <div class="c-lbl">Avg Response</div>
      <div class="c-sub">↓ <span>-12%</span> latency</div>
    </div>
    <div class="c-card">
      <div class="c-num" data-target="2.1" data-suffix="M">0</div>
      <div class="c-lbl">API Calls / sec</div>
      <div class="c-sub">↑ <span>+31%</span> throughput</div>
    </div>
    <div class="c-card">
      <div class="c-num" data-target="99.4" data-suffix="%">0</div>
      <div class="c-lbl">Data Accuracy</div>
      <div class="c-sub">↑ <span>+0.8pp</span> precision</div>
    </div>
    <div class="c-card">
      <div class="c-num" data-target="7" data-suffix="x">0</div>
      <div class="c-lbl">Faster Ingestion</div>
      <div class="c-sub">↑ vs <span>legacy stack</span></div>
    </div>
  </div>
</section>

<!-- S2: PROGRESS BARS -->
<section class="section s2">
  <div class="glow s2-glow"></div>
  <div class="s2-head">Regional coverage</div>
  <div class="s2-desc">Market penetration by geography · fiscal year 2024</div>
  <div class="bars">
    <div class="bar-row" style="--w:91%;--bc:#00C8FF;--bc2:#00E5D0"><div class="br-top"><span class="br-name">Americas</span><span class="br-val">91%</span></div><div class="br-track"><div class="br-fill"></div></div></div>
    <div class="bar-row" style="--w:87%;--bc:#39FF14;--bc2:#00E5CC"><div class="br-top"><span class="br-name">APAC</span><span class="br-val">87%</span></div><div class="br-track"><div class="br-fill"></div></div></div>
    <div class="bar-row" style="--w:78%;--bc:#A78BFA;--bc2:#C084FC"><div class="br-top"><span class="br-name">Western Europe</span><span class="br-val">78%</span></div><div class="br-track"><div class="br-fill"></div></div></div>
    <div class="bar-row" style="--w:73%;--bc:#60A5FA;--bc2:#34D399"><div class="br-top"><span class="br-name">Eastern Europe</span><span class="br-val">73%</span></div><div class="br-track"><div class="br-fill"></div></div></div>
    <div class="bar-row" style="--w:62%;--bc:#FBBF24;--bc2:#F59E0B"><div class="br-top"><span class="br-name">ANZ</span><span class="br-val">62%</span></div><div class="br-track"><div class="br-fill"></div></div></div>
    <div class="bar-row" style="--w:58%;--bc:#FB7185;--bc2:#F43F5E"><div class="br-top"><span class="br-name">Latam</span><span class="br-val">58%</span></div><div class="br-track"><div class="br-fill"></div></div></div>
    <div class="bar-row" style="--w:44%;--bc:#F472B6;--bc2:#E879F9"><div class="br-top"><span class="br-name">MEA</span><span class="br-val">44%</span></div><div class="br-track"><div class="br-fill"></div></div></div>
    <div class="bar-row" style="--w:31%;--bc:#94A3B8;--bc2:#64748B"><div class="br-top"><span class="br-name">South Asia</span><span class="br-val">31%</span></div><div class="br-track"><div class="br-fill"></div></div></div>
  </div>
</section>

<!-- S3: RING GAUGES -->
<section class="section s3">
  <div class="glow s3-glow"></div>
  <div class="s3-head">Product health</div>
  <div class="s3-desc">Core metrics · rolling 90-day average</div>
  <div class="rings">
    <div class="ring-item">
      <svg width="110" height="110" viewBox="0 0 100 100"><circle class="r-bg" cx="50" cy="50" r="45"/><circle class="r-arc" cx="50" cy="50" r="45" stroke="#39FF14" style="--off:51"/><text class="r-txt" x="50" y="50" fill="#39FF14">82%</text></svg>
      <div class="r-label">Conversion</div>
    </div>
    <div class="ring-item">
      <svg width="110" height="110" viewBox="0 0 100 100"><circle class="r-bg" cx="50" cy="50" r="45"/><circle class="r-arc" cx="50" cy="50" r="45" stroke="#A78BFA" style="--off:88"/><text class="r-txt" x="50" y="50" fill="#A78BFA">69%</text></svg>
      <div class="r-label">Retention</div>
    </div>
    <div class="ring-item">
      <svg width="110" height="110" viewBox="0 0 100 100"><circle class="r-bg" cx="50" cy="50" r="45"/><circle class="r-arc" cx="50" cy="50" r="45" stroke="#00C8FF" style="--off:20"/><text class="r-txt" x="50" y="50" fill="#00C8FF">93%</text></svg>
      <div class="r-label">Satisfaction</div>
    </div>
    <div class="ring-item">
      <svg width="110" height="110" viewBox="0 0 100 100"><circle class="r-bg" cx="50" cy="50" r="45"/><circle class="r-arc" cx="50" cy="50" r="45" stroke="#FBBF24" style="--off:139"/><text class="r-txt" x="50" y="50" fill="#FBBF24">51%</text></svg>
      <div class="r-label">Growth MoM</div>
    </div>
    <div class="ring-item">
      <svg width="110" height="110" viewBox="0 0 100 100"><circle class="r-bg" cx="50" cy="50" r="45"/><circle class="r-arc" cx="50" cy="50" r="45" stroke="#FB7185" style="--off:34"/><text class="r-txt" x="50" y="50" fill="#FB7185">88%</text></svg>
      <div class="r-label">NPS Score</div>
    </div>
  </div>
  <div class="detail-grid">
    <div class="detail-item"><div class="d-num">14.2K</div><div class="d-lbl">Daily Active</div><div class="d-trend" style="color:#39FF14">+9.4%</div></div>
    <div class="detail-item"><div class="d-num">3.8s</div><div class="d-lbl">Session Length</div><div class="d-trend" style="color:#39FF14">+0.3s</div></div>
    <div class="detail-item"><div class="d-num">2.1%</div><div class="d-lbl">Churn Rate</div><div class="d-trend" style="color:#39FF14">−0.4pp</div></div>
    <div class="detail-item"><div class="d-num">$84</div><div class="d-lbl">Avg Rev/User</div><div class="d-trend" style="color:#39FF14">+$12</div></div>
  </div>
</section>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#030508;overflow-x:hidden;color:#fff}

.section{min-height:100vh;padding:8rem 6vw;position:relative;overflow:hidden}

/* glow */
.glow{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--gc),transparent 65%);
}

/* S1: COUNTERS */
.s1-glow{
  --gc:rgba(57,255,20,0.045);
  width:800px;height:800px;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.counter-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  max-width:900px;margin:0 auto;
}
.c-card{
  border:1px solid rgba(57,255,20,0.12);border-radius:14px;
  padding:2.5rem 2rem;background:rgba(57,255,20,0.015);
  opacity:0;transform:translateY(44px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.c-card.in{opacity:1;transform:translateY(0)}
.c-card:nth-child(2){transition-delay:0.13s}
.c-card:nth-child(3){transition-delay:0.26s}
.c-num{
  font-family:'Space Mono',monospace;font-weight:700;
  font-size:clamp(48px,6vw,80px);
  color:#39FF14;line-height:1;margin-bottom:0.6rem;
}
.c-lbl{
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.28);
}
.c-sub{
  font-family:'Space Mono',monospace;font-size:11px;
  color:rgba(57,255,20,0.45);margin-top:1rem;
}
.c-sub span{color:#39FF14}

/* S2: BARS */
.s2{background:#040608}
.s2-glow{
  --gc:rgba(0,200,255,0.035);
  width:700px;height:700px;
  top:40%;left:30%;transform:translate(-50%,-50%);
}
.s2-head{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(28px,4vw,48px);
  margin-bottom:0.5rem;
  opacity:0;transform:translateX(-30px);
  transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.s2-head.in{opacity:1;transform:translateX(0)}
.s2-desc{
  font-family:'Space Mono',monospace;font-size:12px;
  color:rgba(0,200,255,0.5);margin-bottom:4rem;
  opacity:0;transition:opacity 0.7s ease 0.3s;
}
.s2-desc.in{opacity:1}
.bars{display:flex;flex-direction:column;gap:2rem;max-width:760px}
.bar-row{
  opacity:0;transform:translateX(-28px);
  transition:opacity 0.7s ease,transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.bar-row.in{opacity:1;transform:translateX(0)}
.bar-row:nth-child(2){transition-delay:0.08s}
.bar-row:nth-child(3){transition-delay:0.16s}
.bar-row:nth-child(4){transition-delay:0.24s}
.bar-row:nth-child(5){transition-delay:0.32s}
.bar-row:nth-child(6){transition-delay:0.40s}
.bar-row:nth-child(7){transition-delay:0.48s}
.bar-row:nth-child(8){transition-delay:0.56s}
.br-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.br-name{font-family:'Space Mono',monospace;font-size:12px;color:rgba(255,255,255,0.4)}
.br-val{font-family:'Space Mono',monospace;font-size:12px;color:var(--bc)}
.br-track{height:4px;background:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden}
.br-fill{
  height:100%;border-radius:2px;width:0%;
  background:linear-gradient(to right,var(--bc),var(--bc2));
  transition:width 1.4s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
.bar-row.in .br-fill{width:var(--w)}

/* S3: RINGS + DETAILED STATS */
.s3{background:#030407}
.s3-glow{
  --gc:rgba(170,80,255,0.04);
  width:700px;height:700px;
  top:50%;left:60%;transform:translate(-50%,-50%);
}
.s3-head{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(28px,4vw,48px);margin-bottom:0.5rem;
  opacity:0;transform:translateX(-30px);
  transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.s3-head.in{opacity:1;transform:translateX(0)}
.s3-desc{
  font-family:'Space Mono',monospace;font-size:12px;
  color:rgba(170,80,255,0.5);margin-bottom:5rem;
  opacity:0;transition:opacity 0.7s ease 0.3s;
}
.s3-desc.in{opacity:1}
.rings{display:flex;gap:3.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:5rem}
.ring-item{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  opacity:0;transform:scale(0.65);
  transition:opacity 0.9s ease,transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.ring-item.in{opacity:1;transform:scale(1)}
.ring-item:nth-child(2){transition-delay:0.15s}
.ring-item:nth-child(3){transition-delay:0.30s}
.ring-item:nth-child(4){transition-delay:0.45s}
.ring-item:nth-child(5){transition-delay:0.60s}
.r-bg{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:8}
.r-arc{
  fill:none;stroke-width:8;stroke-linecap:round;
  stroke-dasharray:283;stroke-dashoffset:283;
  transform-box:fill-box;transform-origin:center;
  transform:rotate(-90deg);
  transition:stroke-dashoffset 1.7s cubic-bezier(0.16,1,0.3,1) 0.15s;
}
.ring-item.in .r-arc{stroke-dashoffset:var(--off)}
.r-label{
  font-family:'Space Mono',monospace;font-size:10px;
  color:rgba(255,255,255,0.28);text-transform:uppercase;
  letter-spacing:0.1em;text-align:center;
}
.r-txt{font-family:'Space Mono',monospace;font-size:15px;font-weight:700;text-anchor:middle;dominant-baseline:middle}

/* detail row */
.detail-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  max-width:800px;margin:0 auto;
}
.detail-item{
  text-align:center;
  opacity:0;transform:translateY(24px);
  transition:opacity 0.7s ease,transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.detail-item.in{opacity:1;transform:translateY(0)}
.detail-item:nth-child(2){transition-delay:0.1s}
.detail-item:nth-child(3){transition-delay:0.2s}
.detail-item:nth-child(4){transition-delay:0.3s}
.d-num{
  font-family:'Space Mono',monospace;font-size:clamp(22px,2.5vw,34px);
  font-weight:700;color:#fff;margin-bottom:0.4rem;
}
.d-lbl{font-family:'Space Mono',monospace;font-size:10px;color:rgba(255,255,255,0.28);text-transform:uppercase;letter-spacing:0.1em}
.d-trend{font-family:'Space Mono',monospace;font-size:11px;margin-top:0.4rem}
```

**JS:**
```js
function animCount(el){
  const target=parseFloat(el.dataset.target);
  const suffix=el.dataset.suffix||'';
  const dec=String(target).includes('.');
  const dur=1900,start=performance.now();
  const tick=now=>{
    const p=Math.min((now-start)/dur,1);
    const ease=1-Math.pow(1-p,4);
    el.textContent=(dec?(ease*target).toFixed(1):Math.round(ease*target))+suffix;
    if(p<1)requestAnimationFrame(tick);
  };
  requestAnimationFrame(tick);
}

const io=new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
    const n=e.target.querySelector('.c-num');
    if(n&&!n.dataset.done){n.dataset.done='1';animCount(n);}
  });
},{threshold:0.2});

document.querySelectorAll('.c-card,.s2-head,.s2-desc,.bar-row,.s3-head,.s3-desc,.ring-item,.detail-item')
  .forEach(el=>io.observe(el));
```

### 05. Clip-Path Reveals

**Type:** CSS + JS
**Description:** Six full-width panels each unveiled with a different clip-path wipe — bottom-up, horizontal, radial burst, drop, inset zoom.

**HTML:**
```html
<!-- Full-width rows -->
<div class="row"><div class="panel p1"><div class="p-cat">Architecture</div><div class="p-num">01</div><div class="p-cap">Vertical ascent, horizontal ambition — form in tension with itself</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p2"><div class="p-cat">Landscape</div><div class="p-num">02</div><div class="p-cap">Where fog meets stone and neither gives way</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p3"><div class="p-cat">Portrait</div><div class="p-num">03</div><div class="p-cap">Light finds its own angles, always</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p4"><div class="p-cat">Aerial</div><div class="p-num">04</div><div class="p-cap">Patterns visible only from above, invisible to those who live inside them</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p5"><div class="p-cat">Abstract</div><div class="p-num">05</div><div class="p-cap">Form without function. Beauty without purpose. Both are enough.</div></div></div>
<div class="gap"></div>
<div class="row"><div class="panel p6"><div class="p-cat">Seascape</div><div class="p-num">06</div><div class="p-cap">Where the tide forgets itself in the sound of its own return</div></div></div>

<div class="gap-lg"></div>

<!-- 3-column grid section with same clips -->
<div class="cp-3">
  <div class="row"><div class="panel p2"><div class="p-cat">Fauna</div><div class="p-cap">Silent mid-flight</div></div></div>
  <div class="row"><div class="panel p5"><div class="p-cat">Mineral</div><div class="p-cap">Crystalline structure</div></div></div>
  <div class="row"><div class="panel p1"><div class="p-cat">Nocturne</div><div class="p-cap">After the city sleeps</div></div></div>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#060606;overflow-x:hidden}

/* Full-width panels (one per row) */
.row{
  width:100%;overflow:hidden;position:relative;
  margin-bottom:0;
}
.panel{
  width:100%;height:52vh;min-height:280px;
  display:flex;align-items:flex-end;
  padding:2.5rem 5vw;position:relative;overflow:hidden;
}
.panel::before{content:'';position:absolute;inset:0;z-index:0}

/* Atmospheric backgrounds */
.p1{background:#0E0A1C}
.p1::before{background:radial-gradient(ellipse at 70% 30%,rgba(140,60,220,0.4),rgba(80,20,160,0.2) 45%,transparent 70%)}
.p2{background:#08150E}
.p2::before{background:radial-gradient(ellipse at 25% 60%,rgba(20,170,110,0.42),rgba(10,100,60,0.15) 45%,transparent 70%)}
.p3{background:#160A08}
.p3::before{background:radial-gradient(ellipse at 55% 35%,rgba(210,70,50,0.4),rgba(140,30,20,0.2) 45%,transparent 70%)}
.p4{background:#080E18}
.p4::before{background:radial-gradient(ellipse at 38% 65%,rgba(40,100,220,0.42),rgba(20,60,160,0.15) 45%,transparent 70%)}
.p5{background:#141008}
.p5::before{background:radial-gradient(ellipse at 65% 45%,rgba(210,140,30,0.4),rgba(160,90,10,0.2) 45%,transparent 70%)}
.p6{background:#081418}
.p6::before{background:radial-gradient(ellipse at 42% 55%,rgba(20,170,210,0.38),rgba(10,100,160,0.18) 45%,transparent 70%)}

/* Clip-path reveal states */

/* 1: bottom-up wipe */
.row:nth-child(1) .panel{
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(1).in .panel{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

/* 2: horizontal left-to-right */
.row:nth-child(2) .panel{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(2).in .panel{clip-path:inset(0 0% 0 0)}

/* 3: radial circle burst from center */
.row:nth-child(3) .panel{
  clip-path:circle(0% at 50% 50%);
  transition:clip-path 1.3s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(3).in .panel{clip-path:circle(80% at 50% 50%)}

/* 4: top-down drop */
.row:nth-child(4) .panel{
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
  transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(4).in .panel{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

/* 5: right-to-left */
.row:nth-child(5) .panel{
  clip-path:inset(0 0 0 100%);
  transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(5).in .panel{clip-path:inset(0 0 0 0%)}

/* 6: inset zoom from center outward */
.row:nth-child(6) .panel{
  clip-path:inset(50% 50%);
  transition:clip-path 1.3s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(6).in .panel{clip-path:inset(0% 0%)}

/* 3-column grid section */
.cp-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem;
  padding:0.8rem 0;
}
.cp-3 .row{margin-bottom:0}
.cp-3 .panel{height:40vh;min-height:220px}

/* Text inside panels */
.p-cat{
  position:absolute;top:1.75rem;left:5vw;
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);z-index:2;
  opacity:0;transition:opacity 0.5s ease 0.95s;
}
.row.in .p-cat{opacity:1}

.p-num{
  position:absolute;top:1.75rem;right:5vw;
  font-family:'Space Mono',monospace;font-size:11px;
  color:rgba(255,255,255,0.15);z-index:2;
  opacity:0;transition:opacity 0.5s ease 1s;
}
.row.in .p-num{opacity:1}

.p-cap{
  font-family:'DM Serif Display',serif;font-style:italic;
  font-size:clamp(20px,2.4vw,36px);
  color:rgba(255,255,255,0.9);
  position:relative;z-index:2;
  opacity:0;transform:translateY(12px);
  transition:opacity 0.65s ease 0.88s,transform 0.65s ease 0.88s;
  max-width:700px;line-height:1.3;
}
.row.in .p-cap{opacity:1;transform:translateY(0)}

/* section gap */
.gap{height:2px;background:#111}
.gap-lg{height:5rem}

/* 3-col panel text size */
.cp-3 .p-cap{font-size:clamp(16px,1.6vw,24px)}
.cp-3 .p-cat{left:1.5rem}
.cp-3 .p-num{right:1.5rem}
```

**JS:**
```js
const io = new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
    io.unobserve(e.target);
  });
},{threshold:0.15});
document.querySelectorAll('.row').forEach(el=>io.observe(el));
```

### 06. 3D Card Entrances

**Type:** CSS + JS
**Description:** Four rows of cards that rotate, flip, and burst in from 3D space on scroll, then respond to live mouse tilt.

**HTML:**
```html
<!-- Wave A -->
<section class="section">
  <div class="wave-tag">01 — Y-axis rotation</div>
  <div class="grid wa">
    <div class="card">
      <div class="icon" style="background:#EEF2FF">⚡</div>
      <div class="name">Turbine Analytics</div>
      <div class="desc">Real-time processing at massive scale, built for teams moving fast without breaking trust.</div>
      <div class="foot"><span class="badge" style="background:#EEF2FF;color:#6366F1">Infrastructure</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#F0FDF4">🌱</div>
      <div class="name">Grove CMS</div>
      <div class="desc">Content management reimagined for editorial teams who think in systems, not pages.</div>
      <div class="foot"><span class="badge" style="background:#F0FDF4;color:#16A34A">Platform</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#FFF7ED">🧭</div>
      <div class="name">Meridian Maps</div>
      <div class="desc">Geospatial intelligence for logistics, urban planning, and field operations at any scale.</div>
      <div class="foot"><span class="badge" style="background:#FFF7ED;color:#EA580C">Geo</span><span class="arr">→</span></div>
    </div>
  </div>
</section>

<!-- Wave B -->
<section class="section">
  <div class="wave-tag">02 — Compound diagonal</div>
  <div class="grid wb">
    <div class="card">
      <div class="icon" style="background:#FDF4FF">🔐</div>
      <div class="name">Vault Security</div>
      <div class="desc">Zero-knowledge auth and encryption middleware for developer-first security stacks.</div>
      <div class="foot"><span class="badge" style="background:#FDF4FF;color:#A21CAF">Security</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#FFF1F2">📡</div>
      <div class="name">Signal Comms</div>
      <div class="desc">Unified messaging across channels. One API for email, push, SMS, and webhooks globally.</div>
      <div class="foot"><span class="badge" style="background:#FFF1F2;color:#E11D48">Comms</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#F0F9FF">🧩</div>
      <div class="name">Mosaic UI</div>
      <div class="desc">Component library tuned for enterprise design systems. Dark mode native, accessible first.</div>
      <div class="foot"><span class="badge" style="background:#F0F9FF;color:#0284C7">Design</span><span class="arr">→</span></div>
    </div>
  </div>
</section>

<!-- Wave C -->
<section class="section">
  <div class="wave-tag">03 — Flip entry</div>
  <div class="grid wc">
    <div class="card">
      <div class="icon" style="background:#FFF8F1">🚀</div>
      <div class="name">Launch Ops</div>
      <div class="desc">Ship faster with automated deployment pipelines, rollback controls, and real-time observability.</div>
      <div class="foot"><span class="badge" style="background:#FFF8F1;color:#D97706">DevOps</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#F0FFF4">🌐</div>
      <div class="name">Nexus CDN</div>
      <div class="desc">Global edge delivery with sub-20ms latency. Smart caching, compression, and DDoS protection.</div>
      <div class="foot"><span class="badge" style="background:#F0FFF4;color:#059669">Network</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#FAF0FE">📊</div>
      <div class="name">Prism Reports</div>
      <div class="desc">Scheduled and live reporting for finance, ops, and executive teams. Export-ready outputs.</div>
      <div class="foot"><span class="badge" style="background:#FAF0FE;color:#7C3AED">Analytics</span><span class="arr">→</span></div>
    </div>
  </div>
</section>

<!-- Wave D -->
<section class="section">
  <div class="wave-tag">04 — Z-depth burst</div>
  <div class="grid wd">
    <div class="card">
      <div class="icon" style="background:#FFF9F0">🤖</div>
      <div class="name">Aria AI</div>
      <div class="desc">Embedded AI assistant for any workflow. Train on your data, deploy in hours, iterate endlessly.</div>
      <div class="foot"><span class="badge" style="background:#FFF9F0;color:#B45309">AI</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#F0F7FF">🔗</div>
      <div class="name">Bridge APIs</div>
      <div class="desc">Unified API gateway with rate limiting, auth, versioning, and auto-generated documentation.</div>
      <div class="foot"><span class="badge" style="background:#F0F7FF;color:#1D4ED8">APIs</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#FFF0F3">🛡️</div>
      <div class="name">Shield IAM</div>
      <div class="desc">Identity and access management for multi-cloud environments. RBAC, SSO, and audit trails built-in.</div>
      <div class="foot"><span class="badge" style="background:#FFF0F3;color:#BE123C">IAM</span><span class="arr">→</span></div>
    </div>
  </div>
</section>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#F2F0EB;overflow-x:hidden;font-family:'Outfit',sans-serif}

.section{padding:5rem 4vw;position:relative}
.section + .section{border-top:1px solid rgba(0,0,0,0.06)}

/* perspective context on section */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;perspective:1200px;
}

/* card base */
.card{
  background:#fff;border-radius:22px;padding:2.25rem 1.75rem;
  border:1px solid rgba(0,0,0,0.07);
  opacity:0;
  transition:opacity 0.85s ease,transform 0.95s cubic-bezier(0.16,1,0.3,1);
  transform-style:preserve-3d;
  cursor:default;
  will-change:transform;
}
.card.in{opacity:1;transform:none !important}

/* Wave A: rotate in from left/right/top */
.wa .card:nth-child(1){transform:perspective(900px) rotateY(-42deg) translateX(-25px);transition-delay:0s}
.wa .card:nth-child(2){transform:perspective(900px) rotateX(45deg) translateY(35px);transition-delay:0.1s}
.wa .card:nth-child(3){transform:perspective(900px) rotateY(42deg) translateX(25px);transition-delay:0.2s}

/* Wave B: compound diagonal */
.wb .card:nth-child(1){transform:perspective(900px) rotateX(-38deg) rotateZ(-5deg) translateY(-30px);transition-delay:0.05s}
.wb .card:nth-child(2){transform:perspective(900px) rotateY(-20deg) rotateX(30deg) scale(0.82);transition-delay:0.18s}
.wb .card:nth-child(3){transform:perspective(900px) rotateX(-38deg) rotateZ(5deg) translateY(-30px);transition-delay:0.05s}

/* Wave C: flip in */
.wc .card:nth-child(1){transform:perspective(900px) rotateY(90deg) translateX(-40px);transition-delay:0s}
.wc .card:nth-child(2){transform:perspective(900px) rotateY(-90deg);transition-delay:0.15s}
.wc .card:nth-child(3){transform:perspective(900px) rotateX(-90deg) translateY(-30px);transition-delay:0.05s}

/* Wave D: z-depth burst */
.wd .card:nth-child(1){transform:perspective(900px) translateZ(-200px) rotate(-8deg);transition-delay:0.1s}
.wd .card:nth-child(2){transform:perspective(900px) translateZ(-300px) scale(0.7);transition-delay:0s}
.wd .card:nth-child(3){transform:perspective(900px) translateZ(-200px) rotate(8deg);transition-delay:0.1s}

/* card internals */
.icon{
  width:46px;height:46px;border-radius:12px;
  margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.name{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:17px;color:#111;margin-bottom:0.5rem;
}
.desc{font-size:13px;line-height:1.65;color:#9CA3AF}
.foot{
  margin-top:1.75rem;padding-top:1.1rem;
  border-top:1px solid rgba(0,0,0,0.06);
  display:flex;align-items:center;justify-content:space-between;
}
.badge{
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;
}
.arr{font-size:16px;color:#D1D5DB;transition:color 0.2s,transform 0.2s}
.card:hover .arr{color:#111;transform:translateX(5px)}

/* subtle shine on hover */
.card::after{
  content:'';
  position:absolute;inset:0;border-radius:22px;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.12),transparent 60%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.card:hover::after{opacity:1}

/* alternating section backgrounds */
.section:nth-child(even){background:#F8F7F2}
.section:nth-child(odd){background:#EEECE6}

/* wave labels */
.wave-tag{
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(0,0,0,0.2);margin-bottom:2rem;
}
```

**JS:**
```js
// scroll reveal
const io = new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
  });
},{threshold:0.18});
document.querySelectorAll('.card').forEach(el=>io.observe(el));

// mouse tilt per card (runs after .in is set)
document.querySelectorAll('.card').forEach(card=>{
  card.addEventListener('mousemove',e=>{
    if(!card.classList.contains('in'))return;
    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);
    const tilt=10;
    card.style.transform=`perspective(900px) rotateY(${dx*tilt}deg) rotateX(${-dy*tilt}deg) scale(1.025)`;
    card.style.setProperty('--mx',(((e.clientX-rect.left)/rect.width)*100)+'%');
    card.style.setProperty('--my',(((e.clientY-rect.top)/rect.height)*100)+'%');
    card.style.transition='transform 0.1s ease,opacity 0.85s ease';
  });
  card.addEventListener('mouseleave',()=>{
    if(!card.classList.contains('in'))return;
    card.style.transform='perspective(900px) rotateY(0deg) rotateX(0deg) scale(1)';
    card.style.transition='transform 0.6s cubic-bezier(0.16,1,0.3,1),opacity 0.85s ease';
  });
});
```

### 07. Scroll Reveal Suite

**Type:** CSS + JS
**Description:** An architecture-studio portfolio showcasing six reveal techniques: mask-slide, lift, scale-curtain, clip, wipe, and blur dissolve.

**HTML:**
```html
<!-- HERO: mask slide reveal -->
<section class="hero">
  <div class="hero-eyebrow" data-r="lift">Architectural Practice · Est. 2009</div>
  <div class="hero-wordmark">
    <div class="m-wrap"><div class="m-inner">MURANO</div></div>
    <div class="m-wrap"><div class="m-inner" style="transition-delay:0.08s">STUDIO</div></div>
  </div>
  <div class="hero-sub">
    <p class="hero-desc" data-r="lift" data-d="2">We design spaces that endure — buildings that carry their own silence, interiors that remember why they were made.</p>
    <div class="hero-year" data-r="dissolve" data-d="3">2024</div>
  </div>
</section>

<hr class="rule">

<!-- APPROACH: line-by-line mask reveal -->
<section>
  <div class="approach-label" data-r="lift">Our philosophy</div>
  <p class="approach-text">
    <span class="line"><span class="m-wrap"><span class="m-inner">Architecture is not about buildings.</span></span></span>
    <span class="line"><span class="m-wrap"><span class="m-inner">It is about <em>what buildings make possible</em> —</span></span></span>
    <span class="line"><span class="m-wrap"><span class="m-inner" style="transition-delay:0.1s">the meetings, the silences, the accidental</span></span></span>
    <span class="line"><span class="m-wrap"><span class="m-inner" style="transition-delay:0.18s">encounters that shape a life.</span></span></span>
  </p>
</section>

<hr class="rule">

<!-- PROJECTS: curtain + wipe reveals -->
<section>
  <div class="projects-head">
    <h2 class="m-wrap"><span class="m-inner">Selected Work</span></h2>
    <span data-r="lift">2019 — 2024</span>
  </div>
  <div class="project-grid">
    <div class="project-card">
      <div class="proj-num" data-r="lift">01</div>
      <div class="proj-panel" data-r="curtain"><div class="proj-img pi1"></div></div>
      <div class="proj-name" data-r="lift" data-d="1">Meridian House</div>
      <div class="proj-meta" data-r="lift" data-d="2">Residential · Copenhagen, 2022</div>
    </div>
    <div class="project-card">
      <div class="proj-num" data-r="lift" data-d="1">02</div>
      <div class="proj-panel" data-r="curtain" data-d="1"><div class="proj-img pi2"></div></div>
      <div class="proj-name" data-r="lift" data-d="2">Tidal Pavilion</div>
      <div class="proj-meta" data-r="lift" data-d="3">Cultural · Oslo, 2023</div>
    </div>
    <div class="project-card">
      <div class="proj-num" data-r="lift" data-d="2">03</div>
      <div class="proj-panel" data-r="curtain" data-d="2"><div class="proj-img pi3"></div></div>
      <div class="proj-name" data-r="lift" data-d="3">Thermal Baths</div>
      <div class="proj-meta" data-r="lift" data-d="4">Public · Reykjavik, 2021</div>
    </div>
    <div class="project-card">
      <div class="proj-num" data-r="lift" data-d="3">04</div>
      <div class="proj-panel" data-r="curtain" data-d="3"><div class="proj-img pi4"></div></div>
      <div class="proj-name" data-r="lift" data-d="4">Canopy Hall</div>
      <div class="proj-meta" data-r="lift" data-d="5">Education · Amsterdam, 2024</div>
    </div>
  </div>
</section>

<!-- NUMBERS: scale reveal -->
<section class="numbers">
  <div class="numbers-grid">
    <div class="num-cell"><div class="num-val" data-r="scale">48</div><div class="num-lbl">Projects built</div></div>
    <div class="num-cell" data-d="1"><div class="num-val" data-r="scale" data-d="1">14</div><div class="num-lbl">Countries</div></div>
    <div class="num-cell" data-d="2"><div class="num-val" data-r="scale" data-d="2">9</div><div class="num-lbl">Awards won</div></div>
    <div class="num-cell" data-d="3"><div class="num-val" data-r="scale" data-d="3">15yr</div><div class="num-lbl">In practice</div></div>
  </div>
</section>

<!-- QUOTE: wipe reveal -->
<section class="quote-section">
  <div class="quote-rule" data-r="wipe"></div>
  <blockquote class="quote-text" data-r="curtain"><span>"Good architecture makes you forget the building. You only remember what happened inside it."</span></blockquote>
  <p class="quote-attr" data-r="lift" data-d="2">— Founder, Murano Studio</p>
</section>

<!-- CLOSE: dissolve reveal -->
<section class="close-section">
  <div class="cta-label" data-r="lift">Begin a project</div>
  <div class="cta-text">
    <div class="m-wrap"><div class="m-inner">LET'S BUILD</div></div>
    <div class="m-wrap"><div class="m-inner" style="transition-delay:0.08s"><em style="font-family:'DM Serif Display',serif;font-style:italic;color:var(--gold)">something</em></div></div>
    <div class="m-wrap"><div class="m-inner" style="transition-delay:0.16s">LASTING</div></div>
  </div>
  <a href="#" class="cta-link" data-r="lift" data-d="3">hello@murano.studio &nbsp;→</a>
</section>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#0A0806;--paper:#F4F0E8;--gold:#C8A252;--smoke:rgba(200,162,82,0.12)}
body{background:var(--ink);color:var(--paper);font-family:'Outfit',sans-serif;overflow-x:hidden}

/* REVEAL PRIMITIVES */

/* 1: mask slide — text rises from below a hidden overflow */
.m-wrap{overflow:hidden;display:block}
.m-inner{
  display:block;
  transform:translateY(108%);
  transition:transform 1.05s cubic-bezier(0.16,1,0.3,1);
}
.m-inner.in{transform:translateY(0)}

/* 2: fade + lift — classic, refined */
[data-r="lift"]{
  opacity:0;transform:translateY(36px);
  transition:opacity 0.9s ease,transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
[data-r="lift"].in{opacity:1;transform:translateY(0)}

/* 3: scale reveal — panel expands from compressed */
[data-r="scale"]{
  opacity:0;transform:scaleY(0.6) translateY(20px);transform-origin:top center;
  transition:opacity 0.85s ease,transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
[data-r="scale"].in{opacity:1;transform:scaleY(1) translateY(0)}

/* 4: clip from bottom — curtain rises.
   The clip lives on the INNER child, not the [data-r] element itself:
   a fully clip-path-clipped element has zero visible area, so an
   IntersectionObserver watching it would report ratio 0 forever and
   the reveal could never fire (chicken-and-egg). The observed
   [data-r="curtain"] element stays unclipped (just overflow:hidden);
   its child carries the curtain. */
[data-r="curtain"]{overflow:hidden}
[data-r="curtain"]>*{
  display:block;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s cubic-bezier(0.16,1,0.3,1);
}
[data-r="curtain"].in>*{clip-path:inset(0 0 0% 0)}

/* 5: horizontal wipe */
[data-r="wipe"]{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s cubic-bezier(0.16,1,0.3,1);
}
[data-r="wipe"].in{clip-path:inset(0 0% 0 0)}

/* 6: blur dissolve */
[data-r="dissolve"]{
  opacity:0;filter:blur(18px);transform:scale(1.04);
  transition:opacity 1.1s ease,filter 1s ease,transform 1.1s ease;
}
[data-r="dissolve"].in{opacity:1;filter:blur(0);transform:scale(1)}

/* stagger helpers */
[data-d="1"]{transition-delay:0.08s}
[data-d="2"]{transition-delay:0.16s}
[data-d="3"]{transition-delay:0.24s}
[data-d="4"]{transition-delay:0.32s}
[data-d="5"]{transition-delay:0.4s}
[data-d="6"]{transition-delay:0.48s}

/* LAYOUT */
section{padding:8rem 6vw;position:relative}
hr.rule{border:none;border-top:1px solid rgba(244,240,232,0.1);margin:0 6vw}

/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:6rem;
  border-bottom:1px solid rgba(244,240,232,0.08);
}
.hero-eyebrow{
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:3rem;
  display:flex;align-items:center;gap:1rem;
}
.hero-eyebrow::before{content:'';width:40px;height:1px;background:var(--gold)}
.hero-wordmark{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(80px,14vw,200px);
  line-height:0.88;letter-spacing:-0.01em;
  color:var(--paper);
}
.hero-sub{
  margin-top:3rem;display:flex;justify-content:space-between;align-items:flex-end;
}
.hero-desc{
  font-size:clamp(14px,1.4vw,18px);font-weight:300;
  color:rgba(244,240,232,0.5);max-width:400px;line-height:1.7;
}
.hero-year{
  font-family:'DM Serif Display',serif;font-style:italic;
  font-size:clamp(60px,8vw,120px);color:transparent;
  -webkit-text-stroke:1px rgba(244,240,232,0.12);
}

/* APPROACH */
.approach-label{
  font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5rem;
}
.approach-text{
  font-family:'DM Serif Display',serif;
  font-size:clamp(28px,3.8vw,60px);line-height:1.25;
  max-width:860px;
}
.approach-text em{font-style:italic;color:var(--gold)}
.approach-text .line{overflow:hidden;display:block;padding-bottom:0.05em}

/* PROJECTS */
.projects-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:4rem;
}
.projects-head h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,5vw,72px);letter-spacing:0.02em;
}
.projects-head span{
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(244,240,232,0.3);
}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(244,240,232,0.08)}
.project-card{
  background:var(--ink);padding:3rem 2.5rem;
  border:none;position:relative;overflow:hidden;
}
.project-card::after{
  content:'';position:absolute;inset:0;
  background:var(--smoke);opacity:0;
  transition:opacity 0.4s ease;pointer-events:none;
}
.project-card:hover::after{opacity:1}
.proj-num{
  font-family:'DM Serif Display',serif;font-size:11px;
  color:var(--gold);letter-spacing:0.1em;margin-bottom:2rem;
}
.proj-panel{
  height:240px;margin-bottom:2rem;border-radius:4px;overflow:hidden;
  position:relative;
}
.proj-img{width:100%;height:100%;position:relative}
.pi1{background:linear-gradient(145deg,#1A1408 0%,#2E240E 40%,#3D320F 100%)}
.pi2{background:linear-gradient(145deg,#0A0E14 0%,#141E2A 40%,#1E2E40 100%)}
.pi3{background:linear-gradient(145deg,#100A0A 0%,#201010 40%,#2A1212 100%)}
.pi4{background:linear-gradient(145deg,#0A100A 0%,#121C10 40%,#1A2A14 100%)}
.proj-name{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,3vw,44px);
  letter-spacing:0.02em;margin-bottom:0.5rem;
}
.proj-meta{font-size:12px;color:rgba(244,240,232,0.3);letter-spacing:0.06em}

/* NUMBERS */
.numbers{background:#0E0C09;border-top:1px solid rgba(244,240,232,0.06)}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(244,240,232,0.06)}
.num-cell{padding:3rem 2rem;border-right:1px solid rgba(244,240,232,0.06)}
.num-cell:last-child{border-right:none}
.num-val{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,5vw,80px);line-height:1;
  color:var(--gold);margin-bottom:0.5rem;
}
.num-lbl{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(244,240,232,0.3)}

/* MANIFESTO QUOTE */
.quote-section{background:#0A0906}
.quote-rule{width:60px;height:1px;background:var(--gold);margin-bottom:4rem}
.quote-text{
  font-family:'DM Serif Display',serif;font-style:italic;
  font-size:clamp(28px,4vw,64px);line-height:1.2;max-width:900px;
}
.quote-attr{
  margin-top:3rem;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(244,240,232,0.3);
}

/* CLOSE */
.close-section{
  min-height:60vh;display:flex;flex-direction:column;
  justify-content:center;border-top:1px solid rgba(244,240,232,0.08);
}
.cta-label{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem}
.cta-text{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,8vw,120px);
  line-height:0.9;letter-spacing:0.01em;
}
.cta-link{
  margin-top:4rem;display:inline-flex;align-items:center;gap:1rem;
  font-size:13px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold);
  padding-bottom:4px;width:fit-content;
  transition:gap 0.3s ease;
}
.cta-link:hover{gap:2rem}
```

**JS:**
```js
const io = new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    if(e.target.classList.contains('m-inner')){e.target.classList.add('in');return}
    if(e.target.dataset.r){e.target.classList.add('in');return}
  });
},{threshold:0.15,rootMargin:'0px 0px -40px 0px'});

document.querySelectorAll('.m-inner,[data-r]').forEach(el=>io.observe(el));
```

### 08. Triple Scroll Progress

**Type:** CSS + JS
**Description:** A long-form essay reader with three synced progress indicators — a top gradient bar, a chapter rail, and a circular reading-time orb.

**HTML:**
```html
<div class="bar" id="bar"></div>

<nav class="rail" id="rail">
  <button class="dot" data-target="c1"><span class="ring"></span><span class="lbl">I — Attention</span></button>
  <button class="dot" data-target="c2"><span class="ring"></span><span class="lbl">II — Friction</span></button>
  <button class="dot" data-target="c3"><span class="ring"></span><span class="lbl">III — Depth</span></button>
  <button class="dot" data-target="c4"><span class="ring"></span><span class="lbl">IV — Rhythm</span></button>
  <button class="dot" data-target="c5"><span class="ring"></span><span class="lbl">V — Closure</span></button>
</nav>

<div class="orb">
  <svg width="62" height="62" viewBox="0 0 62 62">
    <circle class="track" cx="31" cy="31" r="26"/>
    <circle class="prog" id="orbProg" cx="31" cy="31" r="26"/>
  </svg>
  <div class="pct" id="orbPct">0%</div>
</div>

<article>
  <div class="eyebrow">Essay · Reading Experience</div>
  <h1>The Quiet Architecture of Long-Form Attention</h1>
  <p class="standfirst">Three progress signals — a bar, a rail, an orb — each answering a different question the reader never asks aloud.</p>

  <section class="chapter" id="c1">
    <h2>I — Attention</h2>
    <p>Reading on a screen is an act of sustained negotiation. The text wants forward motion; the eye wants reassurance. A good interface offers both without demanding either, and the simplest gift it can give is a sense of place.</p>
    <p>The top bar is the most literal of these signals. It maps the scroll to a single horizontal line, and that line says only one thing: this much remains.</p>
    <div class="pull">A progress bar is a promise the page makes — small, honest, and easy to keep.</div>
  </section>

  <section class="chapter" id="c2">
    <h2>II — Friction</h2>
    <p>Friction is not the enemy of reading. The right kind of friction — a heading, a pause, a turn of phrase — slows the eye on purpose, and a chapter rail formalises those pauses into navigable anchors.</p>
    <p>Click a dot and the page travels. Scroll naturally and the active dot keeps pace. The reader is never told where they are; they simply notice.</p>
  </section>

  <section class="chapter" id="c3">
    <h2>III — Depth</h2>
    <p>Depth is the feeling that a piece has more underneath it than the surface admits. Typography carries most of that weight — the drop cap, the measured line length, the italic standfirst that sets a tone before the argument begins.</p>
    <p>None of it is decoration. Each choice is a quiet instruction about how fast to move and how much to trust.</p>
    <div class="pull">The page that respects its reader rarely raises its voice.</div>
  </section>

  <section class="chapter" id="c4">
    <h2>IV — Rhythm</h2>
    <p>Rhythm is the cadence of revelation. Paragraphs of even weight lull; paragraphs that vary — short, long, short — keep the eye awake. The orb in the corner tracks this rhythm as a percentage, a number that climbs while the reader forgets it exists.</p>
    <p>That forgetting is the point. The best progress indicator is the one you only consult when you wonder, not the one that nags.</p>
  </section>

  <section class="chapter" id="c5">
    <h2>V — Closure</h2>
    <p>Closure is the reward. The bar reaches full width, the final dot lights, the orb completes its circle — three small confirmations that the journey had a shape and the shape has ended.</p>
    <p>Long-form reading survives not because screens improved but because a few quiet signals learned to respect the time a reader gives.</p>
  </section>
</article>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#FBFAF7;font-family:'Inter',sans-serif;color:#1A1A1A}

/* top gradient progress bar */
.bar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,#6D28D9,#DB2777,#F59E0B);
  z-index:50;transition:width 0.1s linear;
}

/* left chapter rail */
.rail{
  position:fixed;left:2.5vw;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:1.1rem;z-index:40;
}
.dot{
  display:flex;align-items:center;gap:0.65rem;
  cursor:pointer;border:none;background:none;text-align:left;
}
.dot .ring{
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid rgba(0,0,0,0.25);
  transition:background 0.3s,border-color 0.3s,transform 0.3s;
}
.dot.active .ring{background:#6D28D9;border-color:#6D28D9;transform:scale(1.35)}
.dot .lbl{
  font-size:11px;letter-spacing:0.04em;color:rgba(0,0,0,0.35);
  opacity:0;transform:translateX(-6px);
  transition:opacity 0.3s,transform 0.3s,color 0.3s;
}
.dot:hover .lbl,.dot.active .lbl{opacity:1;transform:translateX(0)}
.dot.active .lbl{color:#1A1A1A}

/* circular reading-time orb */
.orb{
  position:fixed;right:2.5vw;bottom:2.5vw;width:62px;height:62px;z-index:40;
}
.orb svg{transform:rotate(-90deg)}
.orb .track{fill:none;stroke:rgba(0,0,0,0.08);stroke-width:4}
.orb .prog{fill:none;stroke:#6D28D9;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:163;stroke-dashoffset:163;transition:stroke-dashoffset 0.1s linear}
.orb .pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;font-family:'Fraunces',serif;
}

/* article */
article{max-width:660px;margin:0 auto;padding:9rem 1.5rem 12rem}
.eyebrow{
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:#DB2777;margin-bottom:1.25rem;
}
h1{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(34px,5vw,56px);line-height:1.08;
  margin-bottom:1.5rem;letter-spacing:-0.02em;
}
.standfirst{
  font-size:19px;line-height:1.6;color:#555;
  margin-bottom:3.5rem;font-style:italic;
}
.chapter{padding-top:5rem;scroll-margin-top:5rem}
.chapter h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:28px;
  margin-bottom:1.5rem;letter-spacing:-0.01em;
}
.chapter p{font-size:17px;line-height:1.78;color:#333;margin-bottom:1.4rem}

/* drop cap */
.chapter:first-of-type p:first-of-type::first-letter{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:64px;float:left;line-height:0.82;
  margin:6px 12px 0 0;color:#6D28D9;
}

/* pull quote */
.pull{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:25px;line-height:1.4;color:#1A1A1A;
  border-left:3px solid #DB2777;padding:0.4rem 0 0.4rem 1.6rem;
  margin:2.75rem 0;
}
```

**JS:**
```js
const bar=document.getElementById('bar');
const orbProg=document.getElementById('orbProg');
const orbPct=document.getElementById('orbPct');
const dots=[...document.querySelectorAll('.dot')];
const chapters=dots.map(d=>document.getElementById(d.dataset.target));
const CIRC=2*Math.PI*26; // 2πr

function update(){
  const doc=document.documentElement;
  const max=doc.scrollHeight-doc.clientHeight;
  const p=max>0?Math.min(window.scrollY/max,1):0;
  bar.style.width=(p*100)+'%';
  orbProg.style.strokeDashoffset=CIRC*(1-p);
  orbPct.textContent=Math.round(p*100)+'%';

  const mid=window.scrollY+window.innerHeight*0.35;
  let active=0;
  chapters.forEach((c,i)=>{if(c.offsetTop<=mid)active=i});
  dots.forEach((d,i)=>d.classList.toggle('active',i===active));
}
window.addEventListener('scroll',update,{passive:true});
window.addEventListener('resize',update);
update();

dots.forEach(d=>{
  d.addEventListener('click',()=>{
    document.getElementById(d.dataset.target)
      .scrollIntoView({behavior:'smooth',block:'start'});
  });
});
```

### 09. Staggered Portfolio List

**Type:** CSS + JS
**Description:** A work index whose rows arrive one at a time with a staggered slide-up, plus a hover sweep and arrow nudge.

**HTML:**
```html
<header>
  <div class="kicker">Selected Work — 2019 / 2026</div>
  <h1>A list that arrives one row at a time.</h1>
</header>

<div class="list" id="list">
  <div class="item">
    <span class="idx">01</span>
    <div class="mid"><span class="title">Halcyon Identity System</span><span class="meta">Branding · Art Direction</span></div>
    <div class="right"><span class="year">2026</span><span class="arrow">↗</span></div>
  </div>
  <div class="item">
    <span class="idx">02</span>
    <div class="mid"><span class="title">Northwind Commerce Platform</span><span class="meta">Product Design · Engineering</span></div>
    <div class="right"><span class="year">2025</span><span class="arrow">↗</span></div>
  </div>
  <div class="item">
    <span class="idx">03</span>
    <div class="mid"><span class="title">Atlas Editorial Redesign</span><span class="meta">Web · Typography</span></div>
    <div class="right"><span class="year">2025</span><span class="arrow">↗</span></div>
  </div>
  <div class="item">
    <span class="idx">04</span>
    <div class="mid"><span class="title">Lumen Motion Library</span><span class="meta">Animation · Systems</span></div>
    <div class="right"><span class="year">2024</span><span class="arrow">↗</span></div>
  </div>
  <div class="item">
    <span class="idx">05</span>
    <div class="mid"><span class="title">Verdant Sustainability Report</span><span class="meta">Data Viz · Layout</span></div>
    <div class="right"><span class="year">2023</span><span class="arrow">↗</span></div>
  </div>
  <div class="item">
    <span class="idx">06</span>
    <div class="mid"><span class="title">Strata Mobile Banking</span><span class="meta">UX · Prototyping</span></div>
    <div class="right"><span class="year">2022</span><span class="arrow">↗</span></div>
  </div>
  <div class="item">
    <span class="idx">07</span>
    <div class="mid"><span class="title">Cinder Festival Campaign</span><span class="meta">Brand · Print</span></div>
    <div class="right"><span class="year">2021</span><span class="arrow">↗</span></div>
  </div>
  <div class="item">
    <span class="idx">08</span>
    <div class="mid"><span class="title">Orbit Developer Portal</span><span class="meta">Docs · Information Design</span></div>
    <div class="right"><span class="year">2019</span><span class="arrow">↗</span></div>
  </div>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0B0B0C;color:#EDEDED;font-family:'Bricolage Grotesque',sans-serif;overflow-x:hidden}

header{
  padding:8rem 6vw 4rem;
}
.kicker{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;
  color:#7C7C82;margin-bottom:1.5rem;
}
header h1{
  font-size:clamp(38px,6vw,76px);font-weight:800;
  line-height:1;letter-spacing:-0.03em;max-width:14ch;
}

/* list */
.list{padding:2rem 6vw 10rem}
.item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  align-items:center;gap:2rem;
  padding:2.4rem 0;
  border-top:1px solid rgba(255,255,255,0.1);
  position:relative;cursor:pointer;
  opacity:0;transform:translateY(46px);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),
             transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.item.in{opacity:1;transform:none}
.item:last-child{border-bottom:1px solid rgba(255,255,255,0.1)}

.idx{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  color:#5A5A60;
}
.mid .title{
  font-size:clamp(22px,3vw,38px);font-weight:600;
  letter-spacing:-0.02em;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mid .meta{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  color:#7C7C82;margin-top:0.5rem;
}
.year{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  color:#7C7C82;
}

/* hover sweep */
.item::before{
  content:'';position:absolute;left:-6vw;right:-6vw;top:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,0.12),transparent);
  opacity:0;transition:opacity 0.35s;pointer-events:none;
}
.item:hover::before{opacity:1}
.item:hover .title{transform:translateX(14px)}
.item:hover .arrow{transform:translate(6px,-6px);color:#A78BFA}
.arrow{
  font-size:22px;color:#5A5A60;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),color 0.35s;
}

.mid{display:flex;flex-direction:column}
.right{display:flex;align-items:center;gap:1.6rem}
```

**JS:**
```js
const io=new IntersectionObserver((entries)=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    // stagger by index within the list
    const items=[...document.querySelectorAll('.item')];
    const i=items.indexOf(e.target);
    e.target.style.transitionDelay=(Math.min(i,7)*0.07)+'s';
    e.target.classList.add('in');
    io.unobserve(e.target);
  });
},{threshold:0.2});
document.querySelectorAll('.item').forEach(el=>io.observe(el));
```

### 10. Mountain Parallax Layers

**Type:** CSS + JS
**Description:** A sticky 340vh landscape where five mountain ridges, clouds, and a rising sun move at independent parallax speeds.

**HTML:**
```html
<div class="scroll-space">
  <div class="scene">
    <div class="sun" id="sun"></div>
    <div class="cloud c1" id="cl1"></div>
    <div class="cloud c2" id="cl2"></div>

    <div class="title" id="title">
      <div class="sub">A Parallax Ascent</div>
      <h1>Higher<br>Ground</h1>
    </div>

    <div class="layer l1" id="L1"><svg viewBox="0 0 1200 220" preserveAspectRatio="none"><path d="M0,220 L0,90 L180,30 L360,110 L560,20 L780,120 L980,50 L1200,100 L1200,220 Z"/></svg></div>
    <div class="layer l2" id="L2"><svg viewBox="0 0 1200 200" preserveAspectRatio="none"><path d="M0,200 L0,110 L220,50 L420,130 L640,60 L860,140 L1080,70 L1200,120 L1200,200 Z"/></svg></div>
    <div class="layer l3" id="L3"><svg viewBox="0 0 1200 180" preserveAspectRatio="none"><path d="M0,180 L0,130 L260,80 L500,150 L720,90 L960,160 L1200,100 L1200,180 Z"/></svg></div>
    <div class="layer l4" id="L4"><svg viewBox="0 0 1200 150" preserveAspectRatio="none"><path d="M0,150 L0,120 L300,90 L600,130 L900,95 L1200,125 L1200,150 Z"/></svg></div>
    <div class="layer l5" id="L5"><svg viewBox="0 0 1200 110" preserveAspectRatio="none"><path d="M0,110 L0,95 L360,70 L720,100 L1080,72 L1200,90 L1200,110 Z"/></svg></div>
  </div>
</div>

<div class="outro">
  <p>The summit was never the point — only the layers you crossed to find it.</p>
</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#10131C;font-family:'Space Grotesk',sans-serif;overflow-x:hidden}

/* sticky scene */
.scene{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:linear-gradient(180deg,#1B2238 0%,#33324A 45%,#7A5C66 78%,#D89A6E 100%);
}
.scroll-space{height:340vh;position:relative}

/* sun */
.sun{
  position:absolute;left:50%;top:60%;
  width:160px;height:160px;border-radius:50%;
  margin-left:-80px;
  background:radial-gradient(circle,#FFE7B8,#FBBF6E 55%,rgba(251,191,110,0) 72%);
  will-change:transform;
}

/* mountain layers */
.layer{
  position:absolute;left:0;right:0;bottom:0;
  will-change:transform;
}
.layer svg{display:block;width:100%}

.l1 path{fill:#2A3252}
.l2 path{fill:#3D3F5C}
.l3 path{fill:#5A5063}
.l4 path{fill:#7E5F62}
.l5 path{fill:#A06E5C}

/* drifting cloud band */
.cloud{
  position:absolute;width:280px;height:60px;border-radius:60px;
  background:rgba(255,255,255,0.08);filter:blur(8px);
  will-change:transform;
}
.c1{top:18%;left:10%}
.c2{top:30%;left:55%;width:200px}

/* foreground title */
.title{
  position:absolute;left:0;right:0;top:18%;
  text-align:center;will-change:transform,opacity;
}
.title .sub{
  font-family:'Space Grotesk',sans-serif;font-size:12px;
  letter-spacing:0.32em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin-bottom:0.9rem;
}
.title h1{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(46px,9vw,128px);line-height:0.95;
  color:#F4ECE0;letter-spacing:-0.01em;
}

/* after-scene content */
.outro{
  background:#D89A6E;padding:7rem 6vw 10rem;text-align:center;
}
.outro p{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(22px,3.4vw,40px);line-height:1.4;
  color:#3A2418;max-width:20ch;margin:0 auto;
}
```

**JS:**
```js
const sun=document.getElementById('sun');
const cl1=document.getElementById('cl1');
const cl2=document.getElementById('cl2');
const title=document.getElementById('title');
const L=[1,2,3,4,5].map(i=>document.getElementById('L'+i));
const space=document.querySelector('.scroll-space');

function frame(){
  const rect=space.getBoundingClientRect();
  const total=space.offsetHeight-window.innerHeight;
  const p=Math.min(Math.max(-rect.top/total,0),1); // 0..1

  // sun rises
  sun.style.transform=`translateY(${ -p*420 }px)`;
  // clouds drift sideways
  cl1.style.transform=`translateX(${ p*260 }px)`;
  cl2.style.transform=`translateX(${ -p*320 }px)`;
  // title floats up + fades
  title.style.transform=`translateY(${ -p*200 }px)`;
  title.style.opacity=String(Math.max(1-p*1.6,0));
  // layers rise at different speeds (far slower, near faster)
  const speeds=[40,90,150,220,300];
  L.forEach((el,i)=>{
    el.style.transform=`translateY(${ -p*speeds[i] }px)`;
  });
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
```

### 11. Cinematic Image Wipe

**Type:** CSS + JS
**Description:** Full-viewport frames revealed by a directional clip-path wipe that alternates side to side, captions riding in a beat behind.

**HTML:**
```html
<div class="intro">
  <div class="tag">A Cinematic Sequence</div>
  <h1>Frames<br>That Wipe In</h1>
</div>

<section class="frame">
  <div class="media m1"></div>
  <div class="cap">
    <div class="no">Reel 01</div>
    <h2>Dusk Over the Ridge</h2>
    <p>The first frame slides in from the left, edge sweeping across the image like a curtain pulled fast.</p>
  </div>
</section>

<section class="frame">
  <div class="media m2"></div>
  <div class="cap">
    <div class="no">Reel 02</div>
    <h2>Cold Harbour Light</h2>
    <p>The wipe reverses — entering from the right, the direction alternating frame to frame.</p>
  </div>
</section>

<section class="frame">
  <div class="media m3"></div>
  <div class="cap">
    <div class="no">Reel 03</div>
    <h2>Violet Hour Interior</h2>
    <p>A long easing curve gives the reveal weight, the way a film cut lands rather than snaps.</p>
  </div>
</section>

<section class="frame">
  <div class="media m4"></div>
  <div class="cap">
    <div class="no">Reel 04</div>
    <h2>Embers, After</h2>
    <p>The caption rides in a beat behind the wipe — image first, words second.</p>
  </div>
</section>

<div class="end">— End of Sequence —</div>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#070707;font-family:'Archivo',sans-serif;color:#fff;overflow-x:hidden}

.intro{
  height:60vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1rem;
}
.intro .tag{
  font-size:11px;letter-spacing:0.3em;text-transform:uppercase;
  color:#666;
}
.intro h1{
  font-family:'Anton',sans-serif;font-size:clamp(40px,8vw,110px);
  line-height:0.95;letter-spacing:0.01em;text-transform:uppercase;
}

/* each frame is full-viewport, image revealed by a wipe */
.frame{
  position:relative;height:118vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.media{
  position:absolute;inset:0;
  /* clip starts collapsed; widens on .in */
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.35s cubic-bezier(0.76,0,0.24,1);
}
.frame.in .media{clip-path:inset(0 0 0 0)}
.frame:nth-child(even) .media{clip-path:inset(0 0 0 100%)}
.frame:nth-child(even).in .media{clip-path:inset(0 0 0 0)}

/* atmospheric "photographs" */
.m1{background:linear-gradient(135deg,#3A1C71,#D76D77 55%,#FFAF7B)}
.m2{background:linear-gradient(135deg,#0F2027,#203A43 55%,#2C5364)}
.m3{background:linear-gradient(135deg,#42275A,#734B6D)}
.m4{background:linear-gradient(135deg,#1F1C18,#8E0E00 60%,#1F1C18)}
.media::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,0.55))
}

/* caption rides in behind the wipe */
.cap{
  position:relative;z-index:2;text-align:center;
  opacity:0;transform:translateY(28px);
  transition:opacity 0.8s ease 0.6s,transform 0.8s ease 0.6s;
}
.frame.in .cap{opacity:1;transform:none}
.cap .no{
  font-family:'Anton',sans-serif;font-size:14px;
  letter-spacing:0.2em;color:rgba(255,255,255,0.55);margin-bottom:0.6rem;
}
.cap h2{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(34px,6vw,84px);line-height:1;letter-spacing:0.01em;
}
.cap p{
  margin-top:1rem;font-size:14px;color:rgba(255,255,255,0.7);
  max-width:34ch;margin-left:auto;margin-right:auto;line-height:1.6;
}

.end{
  height:50vh;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:clamp(24px,4vw,52px);
  text-transform:uppercase;color:#1F1F1F;
}
```

**JS:**
```js
const io=new IntersectionObserver((entries)=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
    io.unobserve(e.target);
  });
},{threshold:0.35});
document.querySelectorAll('.frame').forEach(el=>io.observe(el));
```

### 12. Sticky Product Tour

**Type:** CSS + JS
**Description:** Classic scrollytelling — a sticky device on the left swaps its screen to match each step as the copy scrolls past on the right.

**HTML:**
```html
<div class="lead">
  <span class="badge">Product Tour</span>
  <h1>Watch the interface change as you read.</h1>
  <p>A sticky device on the left holds its place while the steps on the right scroll past — each step swaps the screen to match.</p>
</div>

<section class="tour">
  <div class="stage">
    <div class="sticky">
      <div class="device">
        <div class="screen">
          <div class="panel pA on" data-i="0">
            <div class="glyph">🔍</div>
            <div class="pt">Capture</div>
            <div class="pd">Drop in any source — the workspace ingests it instantly.</div>
          </div>
          <div class="panel pB" data-i="1">
            <div class="glyph">🧩</div>
            <div class="pt">Organise</div>
            <div class="pd">Auto-grouped into boards you can rearrange by hand.</div>
          </div>
          <div class="panel pC" data-i="2">
            <div class="glyph">⚡</div>
            <div class="pt">Automate</div>
            <div class="pd">Rules fire on change — no manual upkeep.</div>
          </div>
          <div class="panel pD" data-i="3">
            <div class="glyph">📤</div>
            <div class="pt">Ship</div>
            <div class="pd">Publish anywhere with one reviewed export.</div>
          </div>
          <div class="pips">
            <span class="pip on"></span><span class="pip"></span>
            <span class="pip"></span><span class="pip"></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="steps">
    <div class="step" data-step="0">
      <div class="n">Step 01</div>
      <h2>Capture everything in one inbox</h2>
      <p>Links, files, notes, screenshots — anything you feed the workspace lands in a single capture stream, parsed and tagged the moment it arrives.</p>
    </div>
    <div class="step" data-step="1">
      <div class="n">Step 02</div>
      <h2>Organise without the busywork</h2>
      <p>Captured items group themselves into boards. You stay in control — drag, merge, or split — but you never start from an empty canvas.</p>
    </div>
    <div class="step" data-step="2">
      <div class="n">Step 03</div>
      <h2>Automate the parts you repeat</h2>
      <p>Set a rule once and it runs forever. When something changes upstream, the workspace reacts before you'd think to.</p>
    </div>
    <div class="step" data-step="3">
      <div class="n">Step 04</div>
      <h2>Ship to anywhere, reviewed</h2>
      <p>A single export pipeline pushes to every destination — with a review gate so nothing leaves before you say so.</p>
    </div>
  </div>
</section>
```

**CSS:**
```css
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0A0A0F;font-family:'Sora',sans-serif;color:#E8E8EC}

.lead{
  padding:8rem 6vw 5rem;max-width:760px;
}
.lead .badge{
  display:inline-block;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:#34D399;border:1px solid rgba(52,211,153,0.3);
  padding:5px 12px;border-radius:20px;margin-bottom:1.5rem;
}
.lead h1{
  font-size:clamp(34px,5.5vw,62px);font-weight:700;
  line-height:1.05;letter-spacing:-0.025em;
}
.lead p{margin-top:1.25rem;font-size:17px;color:#9A9AA5;line-height:1.7;max-width:54ch}

/* scrollytelling section: sticky visual + scrolling steps */
.tour{
  display:grid;grid-template-columns:1fr 1fr;gap:4vw;
  padding:0 6vw 8rem;
}

/* left: sticky device */
.stage{position:relative}
.sticky{
  position:sticky;top:14vh;height:72vh;
  display:flex;align-items:center;justify-content:center;
}
.device{
  width:300px;height:430px;border-radius:34px;
  background:#16161E;border:1px solid rgba(255,255,255,0.08);
  padding:14px;position:relative;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.8);
}
.screen{
  width:100%;height:100%;border-radius:22px;overflow:hidden;
  position:relative;background:#0A0A0F;
}
/* each panel stacked, cross-faded */
.panel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;
  opacity:0;transform:scale(1.05);
  transition:opacity 0.6s ease,transform 0.6s ease;
  padding:2rem;text-align:center;
}
.panel.on{opacity:1;transform:scale(1)}
.panel .glyph{font-size:54px}
.panel .pt{font-weight:600;font-size:18px}
.panel .pd{font-size:12px;color:#9A9AA5;line-height:1.6}
.pA{background:linear-gradient(160deg,#1E1B4B,#0A0A0F)}
.pB{background:linear-gradient(160deg,#064E3B,#0A0A0F)}
.pC{background:linear-gradient(160deg,#7C2D12,#0A0A0F)}
.pD{background:linear-gradient(160deg,#4C1D95,#0A0A0F)}

/* step progress pips on device frame */
.pips{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;
}
.pip{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.18);
  transition:background 0.4s,width 0.4s}
.pip.on{background:#34D399;width:18px;border-radius:4px}

/* right: scrolling steps */
.steps{display:flex;flex-direction:column}
.step{
  min-height:78vh;display:flex;flex-direction:column;justify-content:center;
}
.step .n{
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  color:#34D399;margin-bottom:0.9rem;
}
.step h2{
  font-size:clamp(24px,3vw,38px);font-weight:600;
  letter-spacing:-0.015em;line-height:1.15;margin-bottom:1rem;
}
.step p{font-size:15px;color:#9A9AA5;line-height:1.75;max-width:42ch}

@media(max-width:760px){
  .tour{grid-template-columns:1fr}
  .sticky{height:auto;position:relative;top:0;margin-bottom:2rem}
}
```

**JS:**
```js
const panels=[...document.querySelectorAll('.panel')];
const pips=[...document.querySelectorAll('.pip')];
const steps=[...document.querySelectorAll('.step')];

function setActive(i){
  panels.forEach(p=>p.classList.toggle('on',+p.dataset.i===i));
  pips.forEach((p,j)=>p.classList.toggle('on',j===i));
}

const io=new IntersectionObserver((entries)=>{
  entries.forEach(e=>{
    if(e.isIntersecting) setActive(+e.target.dataset.step);
  });
},{rootMargin:'-45% 0px -45% 0px'});
steps.forEach(s=>io.observe(s));
```

---
## 32 CSS Search Box & Search Bar Designs

URL: https://codefronts.com/components/css-search-boxes/
Description: 32 hand-coded CSS search boxes and search bars — minimal underline, voice, autocomplete dropdown, recent searches, ⌘K command palette and more. Semantic forms, drop-in ready.
Demo count: 32

### 01. Minimal Underline

**Type:** Pure CSS
**Description:** Borderless input with a thin bottom rule that animates outward from the centre on focus — the cleanest pattern that still signals interactivity.

**HTML:**
```html
<form class="csb-min" role="search">
  <label class="csb-sr" for="csb-min-i">Search</label>
  <input id="csb-min-i" type="search" name="q" placeholder="Search anything..." />
</form>
```

**CSS:**
```css
.csb-min { position: relative; display: inline-block; }
.csb-min input {
  width: 240px; padding: 8px 0;
  border: 0; outline: none;
  background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  border-bottom: 1px solid #2a2a3e;
}
.csb-min input::placeholder { color: #b8b6d4; }
.csb-min::after {
  content: ''; position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: #7c6cff;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.csb-min:focus-within::after { width: 100%; }

.csb-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;
}

```

### 02. Pill with Submit

**Type:** Pure CSS
**Description:** Rounded pill shell with an inline submit button — the de facto pattern for site search and product search.

**HTML:**
```html
<form class="csb-pill" role="search">
  <label class="csb-sr" for="csb-pill-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-pill-i" type="search" name="q" placeholder="Search products..." />
  <button type="submit">Search</button>
</form>
```

**CSS:**
```css
.csb-pill {
  display: inline-flex; align-items: center;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  transition: border-color 0.2s, background 0.2s;
}
.csb-pill:focus-within { border-color: #7c6cff; background: #1f1f28; }
.csb-pill svg { width: 16px; height: 16px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-pill input {
  flex: 1; min-width: 180px; padding: 8px 12px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-pill input::placeholder { color: #b8b6d4; }
.csb-pill button {
  padding: 8px 18px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff; font: 600 12px/1 system-ui, sans-serif;
  border-radius: 999px;
}

.csb-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;
}

```

### 03. Glass Search

**Type:** Pure CSS
**Description:** Frosted-glass shell with backdrop blur — sits beautifully over hero images and gradient backgrounds.

**HTML:**
```html
<form class="csb-glass" role="search">
  <label class="csb-sr" for="csb-glass-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-glass-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-glass {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.25s, border-color 0.25s;
}
.csb-glass:focus-within { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
.csb-glass svg { width: 16px; height: 16px; fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 2; stroke-linecap: round; }
.csb-glass input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #fff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-glass input::placeholder { color: rgba(255,255,255,0.55); }

.csb-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;
}

```

### 04. Neon Outline

**Type:** Pure CSS
**Description:** Synthwave neon ring with a soft glow that intensifies on focus — built for dark dashboards and game UIs.

**HTML:**
```html
<form class="csb-neon" role="search">
  <label class="csb-sr" for="csb-neon-i">Search</label>
  <input id="csb-neon-i" type="search" name="q" placeholder="$ search_" />
</form>
```

**CSS:**
```css
.csb-neon {
  position: relative; display: inline-block;
}
.csb-neon input {
  width: 260px;
  padding: 12px 16px;
  background: #0a0014;
  border: 1.5px solid #6cffff;
  border-radius: 4px;
  color: #6cffff;
  font: 500 13px/1 'Courier New', monospace;
  letter-spacing: 0.06em;
  outline: none;
  box-shadow: 0 0 8px rgba(108,255,255,0.25), inset 0 0 6px rgba(108,255,255,0.1);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.csb-neon input::placeholder { color: rgba(108,255,255,0.5); }
.csb-neon input:focus {
  border-color: #ff6cff;
  box-shadow: 0 0 18px rgba(255,108,255,0.6), 0 0 36px rgba(255,108,255,0.2), inset 0 0 10px rgba(255,108,255,0.15);
  color: #ff6cff;
}

.csb-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;
}

```

### 05. Floating Label

**Type:** Pure CSS
**Description:** Material-style floating label that snaps up when the input is focused or filled — uses :placeholder-shown for a JS-free implementation.

**HTML:**
```html
<form class="csb-float" role="search">
  <input id="csb-float-i" type="search" name="q" placeholder=" " />
  <label for="csb-float-i">Search anything</label>
</form>
```

**CSS:**
```css
.csb-float {
  position: relative; display: inline-block;
}
.csb-float input {
  width: 240px; padding: 18px 14px 8px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.csb-float input:focus { border-color: #7c6cff; }
.csb-float label {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #7a7899; font: 500 14px/1 system-ui, sans-serif;
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s, color 0.2s;
}
.csb-float input:focus + label,
.csb-float input:not(:placeholder-shown) + label {
  top: 12px;
  font-size: 10.5px;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
```

### 06. Caret Highlight

**Type:** Pure CSS
**Description:** On focus, a single accent line sweeps left-to-right across the bottom of the input — a one-shot reveal that signals "this field is active" without any perpetual motion.

**HTML:**
```html
<form class="csb-caret" role="search">
  <label class="csb-sr" for="csb-caret-i">Search</label>
  <input id="csb-caret-i" type="search" name="q" placeholder="Search collections..." />
</form>
```

**CSS:**
```css
.csb-caret {
  position: relative; display: inline-block;
  overflow: hidden;
  border-radius: 10px;
}
.csb-caret input {
  display: block; width: 240px;
  padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.csb-caret input::placeholder { color: #b8b6d4; }
.csb-caret:focus-within input { border-color: #7c6cff; }
.csb-caret::after {
  content: ''; position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, #7c6cff 40%, #ff6c8a 60%, transparent);
  transform: translateX(-100%);
  pointer-events: none;
}
.csb-caret:focus-within::after {
  animation: csb-caret-sweep 0.7s cubic-bezier(0.65,0,0.35,1) forwards;
}
@keyframes csb-caret-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.csb-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;
}

@media (prefers-reduced-motion: reduce) {
  .csb-caret,
  .csb-caret * {
    animation: none !important;
  }
}

```

### 07. Voice Search

**Type:** CSS + JS
**Description:** Microphone button that pulses while "listening" — toggles a recording state that demonstrates the visual feedback pattern (not real audio).

**HTML:**
```html
<form class="csb-voice" role="search">
  <label class="csb-sr" for="csb-voice-i">Search by voice</label>
  <input id="csb-voice-i" type="search" name="q" placeholder="Speak to search..." />
  <button type="button" class="csb-voice-mic" aria-label="Start voice input" aria-pressed="false">
    <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>
</form>
```

**CSS:**
```css
.csb-voice {
  display: inline-flex; align-items: center;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 4px;
}
.csb-voice:focus-within { border-color: #7c6cff; }
.csb-voice input {
  flex: 1; min-width: 180px; padding: 8px 12px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-voice input::placeholder { color: #b8b6d4; }
.csb-voice-mic {
  width: 34px; height: 34px;
  border: 0; cursor: pointer;
  background: transparent;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.2s;
}
.csb-voice-mic:hover { background: rgba(124,108,255,0.08); }
.csb-voice-mic svg { width: 16px; height: 16px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-voice-mic[aria-pressed="true"] svg { stroke: #ff6c8a; }
.csb-voice-mic[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: 4px;
  border-radius: 6px; border: 1.5px solid #ff6c8a;
  animation: csb-voice-pulse 1.2s ease-out infinite;
}
@keyframes csb-voice-pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.csb-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;
}

@media (prefers-reduced-motion: reduce) {
  .csb-voice,
  .csb-voice * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.csb-voice-mic').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var on = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', on ? 'false' : 'true');
  });
});
```

### 08. Loading Spinner

**Type:** CSS + JS
**Description:** Magnifying glass icon morphs into a spinner while the form is "searching" — paired with a class that simulates the loading state.

**HTML:**
```html
<form class="csb-load" role="search">
  <label class="csb-sr" for="csb-load-i">Search</label>
  <span class="csb-load-icon">
    <svg class="csb-load-glass" viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
    <span class="csb-load-spin"></span>
  </span>
  <input id="csb-load-i" type="search" name="q" placeholder="Press Enter to search..." />
</form>
```

**CSS:**
```css
.csb-load {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-load:focus-within { border-color: #7c6cff; }
.csb-load-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.csb-load-glass, .csb-load-spin {
  position: absolute; inset: 0;
  transition: opacity 0.2s;
}
.csb-load-glass { fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-load-spin {
  border: 2px solid rgba(124,108,255,0.2);
  border-top-color: #7c6cff;
  border-radius: 50%;
  opacity: 0;
  animation: csb-load-rot 0.7s linear infinite;
}
.csb-load.is-loading .csb-load-glass { opacity: 0; }
.csb-load.is-loading .csb-load-spin  { opacity: 1; }
.csb-load input {
  flex: 1; min-width: 200px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-load input::placeholder { color: #b8b6d4; }
@keyframes csb-load-rot { to { transform: rotate(360deg); } }

.csb-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;
}

@media (prefers-reduced-motion: reduce) {
  .csb-load,
  .csb-load * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.csb-load').forEach(function(form) {
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    form.classList.add('is-loading');
    setTimeout(function() { form.classList.remove('is-loading'); }, 1500);
  });
});
```

### 09. Clear-on-Type

**Type:** Pure CSS
**Description:** An × clear button appears as soon as the user types — pure CSS via :placeholder-shown, no JS state needed.

**HTML:**
```html
<form class="csb-clear" role="search">
  <label class="csb-sr" for="csb-clear-i">Search</label>
  <input id="csb-clear-i" type="search" name="q" placeholder="Type something..." />
  <button type="reset" class="csb-clear-x" aria-label="Clear search"></button>
</form>
```

**CSS:**
```css
.csb-clear {
  display: inline-flex; align-items: center;
  padding: 4px 6px 4px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-clear:focus-within { border-color: #7c6cff; }
.csb-clear input {
  width: 220px; padding: 8px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  -webkit-appearance: none; appearance: none;
}
.csb-clear input::-webkit-search-decoration,
.csb-clear input::-webkit-search-cancel-button { display: none; }
.csb-clear input::placeholder { color: #b8b6d4; }
.csb-clear-x {
  width: 24px; height: 24px;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  position: relative;
  margin-left: 6px;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
}
.csb-clear input:not(:placeholder-shown) ~ .csb-clear-x {
  opacity: 1; transform: scale(1);
}
.csb-clear-x::before, .csb-clear-x::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1.5px;
  background: #f0eeff; border-radius: 1px;
}
.csb-clear-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.csb-clear-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.csb-clear-x:hover { background: rgba(255,108,138,0.2); }

.csb-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;
}

```

### 10. Expanding Input

**Type:** CSS + JS
**Description:** Compact icon-only at rest; click expands it into a full-width input. Collapses back when blurred and empty.

**HTML:**
```html
<form class="csb-expand" role="search">
  <label class="csb-sr" for="csb-expand-i">Search</label>
  <button type="button" class="csb-expand-toggle" aria-label="Open search">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  </button>
  <input id="csb-expand-i" type="search" name="q" placeholder="Type to search..." />
</form>
```

**CSS:**
```css
.csb-expand {
  display: inline-flex; align-items: center;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px;
  transition: border-color 0.2s;
}
.csb-expand:focus-within, .csb-expand.is-open { border-color: #7c6cff; }
.csb-expand-toggle {
  width: 36px; height: 36px;
  border: 0; cursor: pointer; background: transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.csb-expand-toggle svg { width: 16px; height: 16px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-expand input {
  width: 0; padding: 0; border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  transition: width 0.35s cubic-bezier(0.65,0,0.35,1), padding 0.35s;
}
.csb-expand input::placeholder { color: #b8b6d4; }
.csb-expand.is-open input { width: 200px; padding: 0 14px; }

.csb-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;
}

```

**JS:**
```js
document.querySelectorAll('.csb-expand').forEach(function(form) {
  var toggle = form.querySelector('.csb-expand-toggle');
  var input  = form.querySelector('input');
  toggle.addEventListener('click', function() {
    form.classList.add('is-open');
    setTimeout(function() { input.focus(); }, 200);
  });
  input.addEventListener('blur', function() {
    if (!input.value) form.classList.remove('is-open');
  });
});
```

### 11. Inline Suggestions

**Type:** CSS + JS
**Description:** Real autocomplete dropdown — keyboard-navigable (↑ ↓ Enter Esc) with five live results that filter as you type.

**HTML:**
```html
<form class="csb-sug" role="search" autocomplete="off">
  <label class="csb-sr" for="csb-sug-i">Search</label>
  <input
    id="csb-sug-i"
    type="search"
    name="q"
    placeholder="Try 'flex' or 'grid'"
    aria-controls="csb-sug-list"
    aria-expanded="false"
    aria-autocomplete="list"
  />
  <ul id="csb-sug-list" class="csb-sug-list" role="listbox" hidden>
    <li role="option">Flex container</li>
    <li role="option">Flex item</li>
    <li role="option">Grid container</li>
    <li role="option">Grid template</li>
    <li role="option">Grid auto-flow</li>
  </ul>
</form>
```

**CSS:**
```css
.csb-sug { position: relative; display: inline-block; }
.csb-sug input {
  width: 240px; padding: 10px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s, border-radius 0.15s;
}
.csb-sug input::placeholder { color: #b8b6d4; }
.csb-sug input:focus { border-color: #7c6cff; }
.csb-sug input[aria-expanded="true"] { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.csb-sug-list {
  position: absolute; top: 100%; left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: #1a1a28;
  border: 1px solid #7c6cff; border-top: 0;
  border-radius: 0 0 10px 10px;
  z-index: 10;
  max-height: 220px; overflow-y: auto;
}
.csb-sug-list li {
  padding: 8px 10px;
  font: 500 13px/1.2 system-ui, sans-serif;
  color: #cbd5e1; cursor: pointer;
  border-radius: 6px;
}
.csb-sug-list li[aria-selected="true"], .csb-sug-list li:hover {
  background: rgba(124,108,255,0.12); color: #fff;
}

.csb-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;
}

```

**JS:**
```js
document.querySelectorAll('.csb-sug').forEach(function(form) {
  var input = form.querySelector('input');
  var list  = form.querySelector('.csb-sug-list');
  var items = Array.from(list.querySelectorAll('li'));
  var idx = -1;
  function open()  { list.hidden = false; input.setAttribute('aria-expanded', 'true'); }
  function close() { list.hidden = true;  input.setAttribute('aria-expanded', 'false'); idx = -1; items.forEach(function(li){ li.removeAttribute('aria-selected'); }); }
  function filter(q) {
    var any = false;
    items.forEach(function(li) {
      var match = !q || li.textContent.toLowerCase().includes(q.toLowerCase());
      li.style.display = match ? '' : 'none';
      if (match) any = true;
    });
    return any;
  }
  function select(n) {
    items.forEach(function(li){ li.removeAttribute('aria-selected'); });
    var visible = items.filter(function(li){ return li.style.display !== 'none'; });
    if (visible.length === 0) return;
    idx = (n + visible.length) % visible.length;
    visible[idx].setAttribute('aria-selected', 'true');
  }
  input.addEventListener('focus',  function() { if (filter(input.value)) open(); });
  input.addEventListener('input',  function() { if (filter(input.value)) open(); else close(); });
  input.addEventListener('blur',   function() { setTimeout(close, 150); });
  input.addEventListener('keydown', function(e) {
    if (list.hidden) return;
    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(); input.blur(); }
    else if (e.key === 'Enter')   {
      var visible = items.filter(function(li){ return li.style.display !== 'none'; });
      if (idx >= 0 && visible[idx]) { e.preventDefault(); input.value = visible[idx].textContent; close(); }
    }
  });
  list.addEventListener('mousedown', function(e) {
    var li = e.target.closest('li[role="option"]');
    if (li) { input.value = li.textContent; close(); }
  });
});
```

### 12. Keyboard Hint

**Type:** Pure CSS
**Description:** A subtle ⌘K kbd badge sits inside the input as a hint to power users — fades when the field is focused.

**HTML:**
```html
<form class="csb-kbd" role="search">
  <label class="csb-sr" for="csb-kbd-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-kbd-i" type="search" name="q" placeholder="Search the docs..." />
  <kbd class="csb-kbd-key">⌘ K</kbd>
</form>
```

**CSS:**
```css
.csb-kbd {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 8px 9px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-kbd:focus-within { border-color: #7c6cff; }
.csb-kbd svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-kbd input {
  width: 200px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-kbd input::placeholder { color: #b8b6d4; }
.csb-kbd-key {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 3px 7px;
  color: #b8b6d4;
  background: #0c0c12;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  transition: opacity 0.2s;
}
.csb-kbd:focus-within .csb-kbd-key { opacity: 0.3; }

.csb-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;
}

```

### 13. Tagged Filter

**Type:** CSS + JS
**Description:** Active filter chips live inside the search bar — click × on a chip to remove it. Real interaction, not a mock.

**HTML:**
```html
<form class="csb-tag" role="search">
  <label class="csb-sr" for="csb-tag-i">Search with filters</label>
  <span class="csb-tag-chip"
    >CSS<button type="button" aria-label="Remove CSS filter">×</button></span
  >
  <span class="csb-tag-chip"
    >React<button type="button" aria-label="Remove React filter">×</button></span
  >
  <input id="csb-tag-i" type="search" name="q" placeholder="Add filters..." />
</form>
```

**CSS:**
```css
.csb-tag {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  max-width: 320px;
}
.csb-tag:focus-within { border-color: #7c6cff; }
.csb-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px;
  background: rgba(124,108,255,0.15);
  color: #a78bfa;
  border-radius: 999px;
  font: 600 11px/1 system-ui, sans-serif;
}
.csb-tag-chip button {
  width: 16px; height: 16px;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
  border-radius: 50%;
  font: 400 14px/1 system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.csb-tag-chip button:hover { background: rgba(255,108,138,0.3); color: #fff; }
.csb-tag input {
  flex: 1; min-width: 90px; padding: 4px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-tag input::placeholder { color: #b8b6d4; }

.csb-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;
}

```

**JS:**
```js
document.querySelectorAll('.csb-tag-chip button').forEach(function(btn) {
  btn.addEventListener('click', function() { btn.closest('.csb-tag-chip').remove(); });
});
```

### 14. Recent Searches

**Type:** CSS + JS
**Description:** Dropdown of recent queries on focus, with a "Clear all" action — production-grade pattern for site search and command palettes.

**HTML:**
```html
<form class="csb-recent" role="search" autocomplete="off">
  <label class="csb-sr" for="csb-recent-i">Search</label>
  <input
    id="csb-recent-i"
    type="search"
    name="q"
    placeholder="Search history..."
    aria-controls="csb-recent-list"
    aria-expanded="false"
  />
  <div id="csb-recent-list" class="csb-recent-list" role="listbox" hidden>
    <div class="csb-recent-head">
      <span>Recent</span>
      <button type="button" class="csb-recent-clear">Clear all</button>
    </div>
    <button type="button" role="option">flexbox layouts</button>
    <button type="button" role="option">aurora gradient</button>
    <button type="button" role="option">accessible modal</button>
  </div>
</form>
```

**CSS:**
```css
.csb-recent { position: relative; display: inline-block; }
.csb-recent input {
  width: 260px; padding: 10px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
}
.csb-recent input::placeholder { color: #b8b6d4; }
.csb-recent input:focus { border-color: #7c6cff; }
.csb-recent input[aria-expanded="true"] { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.csb-recent-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #1a1a28;
  border: 1px solid #7c6cff; border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 6px;
  z-index: 10;
}
.csb-recent-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px;
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #b8b6d4;
}
.csb-recent-clear {
  border: 0; background: transparent;
  color: #ff6c8a; cursor: pointer;
  font: 600 10px/1 'JetBrains Mono', monospace;
}
.csb-recent-list [role="option"] {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px;
  border: 0; cursor: pointer;
  background: transparent;
  color: #cbd5e1; font: 500 13px/1 system-ui, sans-serif;
  border-radius: 6px;
}
.csb-recent-list [role="option"]:hover { background: rgba(124,108,255,0.12); color: #fff; }

.csb-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;
}

```

**JS:**
```js
document.querySelectorAll('.csb-recent').forEach(function(form) {
  var input = form.querySelector('input');
  var list  = form.querySelector('.csb-recent-list');
  function open()  { list.hidden = false; input.setAttribute('aria-expanded', 'true'); }
  function close() { list.hidden = true;  input.setAttribute('aria-expanded', 'false'); }
  input.addEventListener('focus', open);
  input.addEventListener('blur', function() { setTimeout(close, 150); });
  list.addEventListener('mousedown', function(e) {
    var btn = e.target.closest('[role="option"]');
    if (btn) { input.value = btn.textContent; close(); }
  });
  var clear = form.querySelector('.csb-recent-clear');
  if (clear) clear.addEventListener('click', function() {
    form.querySelectorAll('[role="option"]').forEach(function(b){ b.remove(); });
  });
});
```

### 15. Animated Placeholder

**Type:** Pure CSS
**Description:** Placeholder text cycles through example queries on a typewriter loop — pure CSS using steps() animation on a marquee track.

**HTML:**
```html
<form class="csb-anim" role="search">
  <label class="csb-sr" for="csb-anim-i">Search</label>
  <span class="csb-anim-placeholder" aria-hidden="true">
    <span>Search "flexbox"...</span>
    <span>Search "modals"...</span>
    <span>Search "animations"...</span>
    <span>Search "flexbox"...</span>
  </span>
  <input id="csb-anim-i" type="search" name="q" />
</form>
```

**CSS:**
```css
.csb-anim { position: relative; display: inline-block; }
.csb-anim input {
  width: 240px; padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none; position: relative; z-index: 1;
}
.csb-anim input:focus { border-color: #7c6cff; }
.csb-anim-placeholder {
  position: absolute;
  left: 14px; right: 14px; top: 0; bottom: 0;
  overflow: hidden; pointer-events: none;
  display: flex; align-items: center;
}
.csb-anim-placeholder span {
  flex-shrink: 0; width: 100%;
  font: 500 14px/1 system-ui, sans-serif; color: #b8b6d4;
  white-space: nowrap;
}
.csb-anim:not(:focus-within) .csb-anim-placeholder span:first-child {
  animation: csb-anim-cycle 9s steps(1) infinite;
}
.csb-anim input:not(:placeholder-shown) ~ .csb-anim-placeholder,
.csb-anim:focus-within .csb-anim-placeholder { display: none; }
@keyframes csb-anim-cycle {
  0%, 33%   { margin-left: 0; }
  33.5%, 66% { margin-left: -100%; }
  66.5%, 99% { margin-left: -200%; }
  100%       { margin-left: 0; }
}

.csb-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;
}

@media (prefers-reduced-motion: reduce) {
  .csb-anim,
  .csb-anim * {
    animation: none !important;
  }
}

```

### 16. Avatar Search

**Type:** Pure CSS
**Description:** Search bar with the logged-in user avatar at the right edge — common in dashboards. Subtle but communicates "this search is yours".

**HTML:**
```html
<form class="csb-avatar" role="search">
  <label class="csb-sr" for="csb-avatar-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-avatar-i" type="search" name="q" placeholder="Search your workspace..." />
  <span class="csb-avatar-pic" aria-hidden="true">VC</span>
</form>
```

**CSS:**
```css
.csb-avatar {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 5px 5px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  min-width: 280px;
}
.csb-avatar:focus-within { border-color: #7c6cff; }
.csb-avatar svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-avatar input {
  flex: 1; padding: 8px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-avatar input::placeholder { color: #b8b6d4; }
.csb-avatar-pic {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff; font: 700 11px/1 system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.csb-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;
}

```

### 17. Brutalist Stamp

**Type:** Pure CSS
**Description:** Hard offset shadow, zero radius, bold mono — a search bar that doesn't apologize for itself.

**HTML:**
```html
<form class="csb-brut" role="search">
  <label class="csb-sr" for="csb-brut-i">Search</label>
  <input id="csb-brut-i" type="search" name="q" placeholder="SEARCH..." />
  <button type="submit">GO</button>
</form>
```

**CSS:**
```css
.csb-brut {
  display: inline-flex; align-items: stretch;
  background: #f0eeff;
  border: 2.5px solid #1a1a2e;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.csb-brut:focus-within { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #ff6c8a; }
.csb-brut input {
  width: 220px; padding: 11px 14px;
  border: 0; outline: none; background: transparent;
  color: #1a1a2e; font: 700 13px/1 'Courier New', monospace;
  letter-spacing: 0.08em;
}
.csb-brut input::placeholder { color: rgba(26,26,46,0.5); }
.csb-brut button {
  padding: 0 20px;
  border: 0; border-left: 2.5px solid #1a1a2e;
  cursor: pointer;
  background: #1a1a2e; color: #fff;
  font: 800 12px/1 'Courier New', monospace;
  letter-spacing: 0.12em;
}

.csb-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;
}

```

### 18. Compact Toolbar

**Type:** Pure CSS
**Description:** Search slotted between filter chips and an action button — the toolbar pattern most apps actually need.

**HTML:**
```html
<form class="csb-tool" role="search">
  <span class="csb-tool-chip" role="button" tabindex="0">All</span>
  <label class="csb-sr" for="csb-tool-i">Search</label>
  <input id="csb-tool-i" type="search" name="q" placeholder="Search..." />
  <button type="button" class="csb-tool-action" aria-label="Filters">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M7 12h10M11 18h2" /></svg>
  </button>
</form>
```

**CSS:**
```css
.csb-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-tool:focus-within { border-color: #7c6cff; }
.csb-tool-chip {
  padding: 5px 10px;
  background: rgba(124,108,255,0.15);
  color: #a78bfa;
  border-radius: 6px;
  font: 600 11px/1 system-ui, sans-serif;
  cursor: pointer;
}
.csb-tool input {
  flex: 1; min-width: 160px; padding: 5px 6px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-tool input::placeholder { color: #b8b6d4; }
.csb-tool-action {
  width: 28px; height: 28px;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.csb-tool-action:hover { background: rgba(255,255,255,0.1); }
.csb-tool-action svg { width: 14px; height: 14px; fill: none; stroke: #cbd5e1; stroke-width: 2; stroke-linecap: round; }

.csb-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;
}

```

### 19. Hero Search

**Type:** Pure CSS
**Description:** Big landing-page search with a subtle gradient halo behind it — the kind you put front-and-centre on a marketing site.

**HTML:**
```html
<form class="csb-hero" role="search">
  <label class="csb-sr" for="csb-hero-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-hero-i" type="search" name="q" placeholder="What are you looking for?" />
  <button type="submit">Search</button>
</form>
```

**CSS:**
```css
.csb-hero {
  position: relative; display: inline-flex; align-items: center;
  padding: 5px 5px 5px 14px; gap: 10px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  isolation: isolate;
  max-width: 100%;
}
.csb-hero::before {
  content: ''; position: absolute; inset: -20px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(124,108,255,0.4), transparent 70%);
  filter: blur(20px); opacity: 0.5;
  transition: opacity 0.3s;
}
.csb-hero:focus-within::before { opacity: 1; }
.csb-hero svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-hero input {
  width: 180px; padding: 10px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 15px/1 system-ui, sans-serif;
  min-width: 0;
}
.csb-hero input::placeholder { color: #b8b6d4; }
.csb-hero button {
  padding: 9px 16px; flex-shrink: 0;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff; font: 600 13px/1 system-ui, sans-serif;
  border-radius: 10px;
}

.csb-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;
}

```

### 20. Side Indicator

**Type:** Pure CSS
**Description:** A 3px coloured rail on the left edge of the input shifts colour on focus — minimal but unmistakable signal.

**HTML:**
```html
<form class="csb-side" role="search">
  <label class="csb-sr" for="csb-side-i">Search</label>
  <input id="csb-side-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-side {
  position: relative; display: inline-block;
}
.csb-side input {
  width: 240px; padding: 11px 14px 11px 18px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 8px 8px 0;
  border-left: 3px solid #2a2a3e;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-left-color 0.25s;
}
.csb-side input::placeholder { color: #b8b6d4; }
.csb-side input:focus { border-left-color: #2ecc8a; }

.csb-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;
}

```

### 21. Drop Shadow Float

**Type:** Pure CSS
**Description:** Subtle elevation lift on focus — a soft transform + larger drop-shadow makes the input feel like it raised toward the user.

**HTML:**
```html
<form class="csb-float-s" role="search">
  <label class="csb-sr" for="csb-float-s-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-float-s-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-float-s {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.csb-float-s:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,108,255,0.25), 0 2px 4px rgba(0,0,0,0.3);
  border-color: rgba(124,108,255,0.5);
}
.csb-float-s svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-float-s input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-float-s input::placeholder { color: #b8b6d4; }

.csb-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;
}

```

### 22. Search + Filter

**Type:** Pure CSS
**Description:** Two-column shell: input on the left, scope dropdown on the right, divided by a vertical hairline. The pattern of choice for ecommerce.

**HTML:**
```html
<form class="csb-filter" role="search">
  <label class="csb-sr" for="csb-filter-i">Search</label>
  <input id="csb-filter-i" type="search" name="q" placeholder="Search products..." />
  <label class="csb-sr" for="csb-filter-s">Category</label>
  <select id="csb-filter-s" name="cat">
    <option>All</option>
    <option>Components</option>
    <option>Tools</option>
    <option>Generators</option>
  </select>
</form>
```

**CSS:**
```css
.csb-filter {
  display: inline-flex; align-items: stretch;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-filter:focus-within { border-color: #7c6cff; }
.csb-filter input {
  flex: 1; padding: 11px 14px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  min-width: 200px;
}
.csb-filter input::placeholder { color: #b8b6d4; }
.csb-filter select {
  padding: 11px 14px;
  border: 0; border-left: 1px solid rgba(255,255,255,0.08);
  outline: none; cursor: pointer;
  background: transparent;
  color: #a78bfa; font: 600 12px/1 system-ui, sans-serif;
  appearance: none; -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23a78bfa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

.csb-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;
}

```

### 23. Inline Loading Bar

**Type:** CSS + JS
**Description:** A thin progress bar slides across the bottom of the input while results are loading — gentler than a full spinner for live-search UX.

**HTML:**
```html
<form class="csb-bar" role="search">
  <label class="csb-sr" for="csb-bar-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-bar-i" type="search" name="q" placeholder="Type to search..." />
  <span class="csb-bar-progress" aria-hidden="true"></span>
</form>
```

**CSS:**
```css
.csb-bar {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.csb-bar:focus-within { border-color: #7c6cff; }
.csb-bar svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-bar input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-bar input::placeholder { color: #b8b6d4; }
.csb-bar-progress {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 30%;
  background: linear-gradient(90deg, transparent, #7c6cff, transparent);
  transform: translateX(-100%);
  transition: opacity 0.2s;
  opacity: 0;
}
.csb-bar.is-loading .csb-bar-progress {
  opacity: 1;
  animation: csb-bar-slide 1.2s linear infinite;
}
@keyframes csb-bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.csb-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;
}

@media (prefers-reduced-motion: reduce) {
  .csb-bar,
  .csb-bar * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.csb-bar').forEach(function(form) {
  var input = form.querySelector('input');
  var t;
  input.addEventListener('input', function() {
    form.classList.add('is-loading');
    clearTimeout(t);
    t = setTimeout(function() { form.classList.remove('is-loading'); }, 900);
  });
});
```

### 24. Dual Tone Outline

**Type:** Pure CSS
**Description:** The border is split into two halves — left edge stays neutral while the right half lights up violet on focus. A subtle "active half" cue.

**HTML:**
```html
<form class="csb-dual" role="search">
  <label class="csb-sr" for="csb-dual-i">Search</label>
  <input id="csb-dual-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-dual {
  position: relative; display: inline-block;
  padding: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 50%, #7c6cff 50%, #7c6cff 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  border-radius: 10px;
  transition: background-position 0.4s ease;
}
.csb-dual:focus-within { background-position: 100% 0%; }
.csb-dual input {
  display: block;
  width: 240px; padding: 11px 14px;
  border: 0; outline: none;
  background: #1a1a28;
  border-radius: 9px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-dual input::placeholder { color: #b8b6d4; }

.csb-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;
}

```

### 25. Glitch Search

**Type:** Pure CSS
**Description:** RGB-split glitch shudders across the placeholder when focused — leans into a hacker / dev-tool aesthetic.

**HTML:**
```html
<form class="csb-glitch" role="search">
  <label class="csb-sr" for="csb-glitch-i">Search</label>
  <input id="csb-glitch-i" type="search" name="q" placeholder="$ search //" />
</form>
```

**CSS:**
```css
.csb-glitch {
  position: relative; display: inline-block;
}
.csb-glitch input {
  width: 240px; padding: 11px 14px;
  background: #0c0c12;
  border: 1px solid rgba(46,204,138,0.4);
  border-radius: 4px;
  color: #2ecc8a; font: 500 13px/1 'Courier New', monospace;
  letter-spacing: 0.06em;
  outline: none;
  transition: border-color 0.2s;
}
.csb-glitch input::placeholder { color: rgba(46,204,138,0.6); }
.csb-glitch input:focus {
  border-color: #ff6c8a;
  animation: csb-glitch-shake 0.4s steps(2);
}
@keyframes csb-glitch-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-2px); text-shadow: 2px 0 #ff6c8a, -2px 0 #06b6d4; }
  40%      { transform: translateX(2px);  text-shadow: -2px 0 #ff6c8a, 2px 0 #06b6d4; }
  60%      { transform: translateX(-1px); text-shadow: 1px 0 #ff6c8a, -1px 0 #06b6d4; }
  80%      { transform: translateX(1px);  text-shadow: 0 0 transparent; }
}

.csb-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;
}

@media (prefers-reduced-motion: reduce) {
  .csb-glitch,
  .csb-glitch * {
    animation: none !important;
  }
}

```

### 26. Compact Mobile

**Type:** Pure CSS
**Description:** Mobile-first compact pattern — generous tap target, soft rounded chrome, single-line visual rhythm. Ideal for thumb-reach.

**HTML:**
```html
<form class="csb-mob" role="search">
  <label class="csb-sr" for="csb-mob-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-mob-i" type="search" name="q" inputmode="search" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-mob {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #2a2a3e;
  border-radius: 14px;
  min-height: 44px;
  min-width: 280px;
}
.csb-mob:focus-within { background: #1f1f28; box-shadow: 0 0 0 2px rgba(124,108,255,0.4); }
.csb-mob svg { width: 18px; height: 18px; fill: none; stroke: #b8b6d4; stroke-width: 2; stroke-linecap: round; }
.csb-mob input {
  flex: 1; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 16px/1 system-ui, sans-serif;
}
.csb-mob input::placeholder { color: #b8b6d4; }

.csb-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;
}

```

### 27. Focus Ring Bloom

**Type:** Pure CSS
**Description:** A soft expanding violet halo blooms outward when the input gains focus — disappears smoothly on blur.

**HTML:**
```html
<form class="csb-bloom" role="search">
  <label class="csb-sr" for="csb-bloom-i">Search</label>
  <input id="csb-bloom-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-bloom {
  position: relative; display: inline-block;
}
.csb-bloom input {
  width: 240px; padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.csb-bloom input::placeholder { color: #b8b6d4; }
.csb-bloom::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(124,108,255,0.6);
}
.csb-bloom:focus-within input { border-color: #7c6cff; }
.csb-bloom:focus-within::after {
  animation: csb-bloom-pulse 1.6s ease-out infinite;
}
@keyframes csb-bloom-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,108,255,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(124,108,255,0); }
}

.csb-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;
}

@media (prefers-reduced-motion: reduce) {
  .csb-bloom,
  .csb-bloom * {
    animation: none !important;
  }
}

```

### 28. Combo with Scope

**Type:** CSS + JS
**Description:** Scope dropdown ("All / People / Posts / Files") inline with the input — the pattern Slack, Linear, and GitHub all converged on.

**HTML:**
```html
<form class="csb-scope" role="search">
  <button type="button" class="csb-scope-btn" aria-haspopup="listbox" aria-expanded="false">
    <span>All</span>
    <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
  </button>
  <ul class="csb-scope-list" role="listbox" hidden>
    <li role="option" aria-selected="true">All</li>
    <li role="option">People</li>
    <li role="option">Posts</li>
    <li role="option">Files</li>
  </ul>
  <label class="csb-sr" for="csb-scope-i">Search</label>
  <input id="csb-scope-i" type="search" name="q" placeholder="Search workspace..." />
</form>
```

**CSS:**
```css
.csb-scope {
  position: relative; display: inline-flex; align-items: stretch;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-scope:focus-within { border-color: #7c6cff; }
.csb-scope-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px;
  border: 0; border-right: 1px solid rgba(255,255,255,0.08);
  background: transparent; cursor: pointer;
  color: #a78bfa; font: 600 12px/1 system-ui, sans-serif;
}
.csb-scope-btn svg { width: 10px; height: 10px; fill: none; stroke: #a78bfa; stroke-width: 1.5; }
.csb-scope-list {
  position: absolute; top: calc(100% + 4px); left: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  z-index: 10;
  min-width: 120px;
}
.csb-scope-list li {
  padding: 7px 10px;
  font: 500 13px/1 system-ui, sans-serif;
  color: #cbd5e1; cursor: pointer;
  border-radius: 5px;
}
.csb-scope-list li[aria-selected="true"] { color: #a78bfa; }
.csb-scope-list li:hover { background: rgba(124,108,255,0.12); }
.csb-scope input {
  flex: 1; padding: 11px 14px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  min-width: 200px;
}
.csb-scope input::placeholder { color: #b8b6d4; }

.csb-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;
}

```

**JS:**
```js
document.querySelectorAll('.csb-scope').forEach(function(form) {
  var btn  = form.querySelector('.csb-scope-btn');
  var list = form.querySelector('.csb-scope-list');
  var label = btn.querySelector('span');
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    var open = list.hidden;
    list.hidden = !open;
    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
  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');
    label.textContent = li.textContent;
    list.hidden = true;
    btn.setAttribute('aria-expanded', 'false');
  });
  document.addEventListener('click', function() {
    list.hidden = true;
    btn.setAttribute('aria-expanded', 'false');
  });
});
```

### 29. Inset Pressed

**Type:** Pure CSS
**Description:** Skeuomorphic inset shadow makes the input look pressed into the surface — a return to depth without the kitsch.

**HTML:**
```html
<form class="csb-inset" role="search">
  <label class="csb-sr" for="csb-inset-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-inset-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-inset {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: #15151d;
  border: 1px solid #0c0c12;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04);
  transition: box-shadow 0.2s;
}
.csb-inset:focus-within {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 2px rgba(124,108,255,0.3);
}
.csb-inset svg { width: 15px; height: 15px; fill: none; stroke: #6b6987; stroke-width: 2; stroke-linecap: round; }
.csb-inset input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-inset input::placeholder { color: #b8b6d4; }

.csb-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;
}

```

### 30. Border Trace

**Type:** Pure CSS
**Description:** On focus, two halves of a border trace simultaneously around the input — a clean line-drawing reveal. No box-shadow, no gradients.

**HTML:**
```html
<form class="csb-trace" role="search">
  <label class="csb-sr" for="csb-trace-i">Search</label>
  <input id="csb-trace-i" type="search" name="q" placeholder="Search..." />
  <span class="csb-trace-tl"></span>
  <span class="csb-trace-br"></span>
</form>
```

**CSS:**
```css
.csb-trace {
  position: relative; display: inline-block;
  padding: 0;
}
.csb-trace input {
  width: 240px; padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.15s;
}
.csb-trace:focus-within input { border-color: transparent; }
.csb-trace input::placeholder { color: #b8b6d4; }
.csb-trace-tl, .csb-trace-br {
  position: absolute; pointer-events: none;
  border-color: #7c6cff;
  border-radius: 8px;
}
.csb-trace-tl {
  top: 0; left: 0;
  width: 0; height: 0;
  border-top: 1.5px solid transparent;
  border-left: 1.5px solid transparent;
}
.csb-trace-br {
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-bottom: 1.5px solid transparent;
  border-right: 1.5px solid transparent;
}
.csb-trace:focus-within .csb-trace-tl {
  width: 100%; height: 100%;
  border-top-color: #7c6cff;
  border-left-color: #7c6cff;
  transition: width 0.25s ease, height 0.25s ease 0.25s;
}
.csb-trace:focus-within .csb-trace-br {
  width: 100%; height: 100%;
  border-bottom-color: #7c6cff;
  border-right-color: #7c6cff;
  transition: width 0.25s ease 0.5s, height 0.25s ease 0.25s;
}

.csb-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;
}

```

### 31. Floating Card

**Type:** Pure CSS
**Description:** The whole search bar lifts off the page on focus with a soft shadow and a tiny scale-up — a tactile "pick me up" feel.

**HTML:**
```html
<form class="csb-card" role="search">
  <label class="csb-sr" for="csb-card-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-card-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #1f1f28;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transform: scale(1) translateY(0);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
.csb-card:focus-within {
  transform: scale(1.02) translateY(-3px);
  box-shadow: 0 12px 32px rgba(124,108,255,0.3), 0 4px 8px rgba(0,0,0,0.4);
}
.csb-card svg { width: 16px; height: 16px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-card input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-card input::placeholder { color: #b8b6d4; }

.csb-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;
}

```

### 32. Aurora Drift

**Type:** Pure CSS
**Description:** A soft aurora-style gradient blob drifts gently behind the input on a slow, subtle loop — the premium-feel signal without spinning chrome aberration.

**HTML:**
```html
<form class="csb-aurora" role="search">
  <label class="csb-sr" for="csb-aurora-i">Search</label>
  <input id="csb-aurora-i" type="search" name="q" placeholder="Search premium..." />
</form>
```

**CSS:**
```css
.csb-aurora {
  position: relative; display: inline-block;
  padding: 4px;
  border-radius: 14px;
  background: #15151d;
  overflow: hidden;
  isolation: isolate;
}
.csb-aurora::before {
  content: ''; position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 220%;
  background:
    radial-gradient(ellipse 240px 120px at 20% 50%, rgba(124,108,255,0.55), transparent 60%),
    radial-gradient(ellipse 200px 100px at 60% 50%, rgba(255,108,138,0.45), transparent 60%),
    radial-gradient(ellipse 220px 120px at 100% 50%, rgba(46,204,138,0.35), transparent 60%);
  filter: blur(18px);
  z-index: -1;
  animation: csb-aurora-drift 14s ease-in-out infinite;
  opacity: 0.85;
}
.csb-aurora input {
  display: block;
  width: 240px; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.06);
  outline: none;
  background: rgba(21,21,29,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  transition: border-color 0.25s;
}
.csb-aurora:focus-within input { border-color: rgba(167,139,250,0.5); }
.csb-aurora input::placeholder { color: #b8b6d4; }
@keyframes csb-aurora-drift {
  0%, 100% { transform: translateX(0)    translateY(0); }
  50%       { transform: translateX(-8%) translateY(2%); }
}

.csb-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;
}

@media (prefers-reduced-motion: reduce) {
  .csb-aurora,
  .csb-aurora * {
    animation: none !important;
  }
}

```

---
## 16 CSS Side Menu Designs

URL: https://codefronts.com/navigation/css-side-menu/
Description: 16 hand-coded CSS side menu designs with live demos — slide-in checkbox-hack drawer, smooth-overlay panel, off-canvas push sidebar, expandable icon-only rail, responsive hidden-to-visible menu, sticky fixed vertical nav, multi-level accordion, full-height flexbox, neumorphic inset, glassmorphism blurred, dark-mode cyberpunk neon, brutalist left-hand border, hamburger checkbox-hack, hover-triggered drawer, collapsible width-transition, and CSS-only accordion side navigation. 100% Pure CSS — no JavaScript, no framework. WCAG 2.2 friendly with prefers-reduced-motion on every animation, MIT licensed, copy-paste ready.
Demo count: 16

### 01. Pure CSS Slide-In Side Menu

**Type:** Pure CSS
**Description:** A navigation drawer that slides in from off-screen left when a burger icon is clicked, driven entirely by a hidden checkbox and CSS sibling selectors.

**HTML:**
```html
<div class="sm-01">
  <input type="checkbox" class="sm-01__toggle" id="sm-01-toggle">
  <label class="sm-01__burger" for="sm-01-toggle" aria-label="Toggle menu">
    <span></span><span></span><span></span>
  </label>
  <nav class="sm-01__nav">
    <div class="sm-01__brand">
      <div class="sm-01__logo">V</div>
      <div><div class="sm-01__brand-name">Velocity</div><div class="sm-01__brand-sub">Design System</div></div>
    </div>
    <div class="sm-01__links">
      <a class="sm-01__link sm-01__link--active" href="#">
        <span class="sm-01__link-icon">⬡</span> Dashboard
      </a>
      <a class="sm-01__link" href="#">
        <span class="sm-01__link-icon">◈</span> Analytics
      </a>
      <a class="sm-01__link" href="#">
        <span class="sm-01__link-icon">⬟</span> Projects
      </a>
      <a class="sm-01__link" href="#">
        <span class="sm-01__link-icon">◇</span> Messages
      </a>
      <a class="sm-01__link" href="#">
        <span class="sm-01__link-icon">⬙</span> Settings
      </a>
    </div>
    <div class="sm-01__nav-footer">
      <div class="sm-01__avatar">
        <div class="sm-01__avatar-img">JD</div>
        <div>
          <div class="sm-01__avatar-name">Jane Doe</div>
          <div class="sm-01__avatar-role">Pro Plan</div>
        </div>
      </div>
    </div>
  </nav>
  <div class="sm-01__content">
    <div class="sm-01__heading">Welcome back, Jane 👋</div>
    <div class="sm-01__subhead">Click the button above to slide open the menu — pure CSS only.</div>
    <div class="sm-01__cards">
      <div class="sm-01__card"><div class="sm-01__card-val">2,847</div><div class="sm-01__card-lbl">Page Views</div></div>
      <div class="sm-01__card"><div class="sm-01__card-val">94%</div><div class="sm-01__card-lbl">Uptime</div></div>
      <div class="sm-01__card"><div class="sm-01__card-val">$12.4k</div><div class="sm-01__card-lbl">Revenue</div></div>
      <div class="sm-01__card"><div class="sm-01__card-val">483</div><div class="sm-01__card-lbl">Users</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-01, .sm-01 *, .sm-01 *::before, .sm-01 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-01 ::selection { background: #7c3aed; color: #fff; }
.sm-01 {
  --bg: #0f172a;
  --surface: #1e293b;
  --menu-bg: #1a1033;
  --accent: #7c3aed;
  --accent2: #a78bfa;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: rgba(124,58,237,0.2);
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --menu-w: 280px;
  --duration: 0.4s;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
/* Hidden checkbox toggle */
.sm-01__toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Burger label */
.sm-01__burger {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 50;
  width: 42px;
  height: 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.2s, border-color 0.2s;
}
.sm-01__burger:hover { background: var(--accent); border-color: var(--accent); }
.sm-01__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--duration), opacity var(--duration);
  transform-origin: center;
}
/* Burger → X animation */
.sm-01__toggle:checked ~ .sm-01__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sm-01__toggle:checked ~ .sm-01__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sm-01__toggle:checked ~ .sm-01__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Slide-in panel */
.sm-01__nav {
  position: absolute;
  top: 0; left: 0;
  width: var(--menu-w);
  height: 100%;
  background: var(--menu-bg);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform var(--duration) cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 80px 0 24px;
  box-shadow: 4px 0 32px rgba(0,0,0,0.4);
}
.sm-01__toggle:checked ~ .sm-01__nav { transform: translateX(0); }
/* Brand */
.sm-01__brand {
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sm-01__logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.sm-01__brand-name { font-weight: 700; font-size: 16px; }
.sm-01__brand-sub { font-size: 11px; color: var(--muted); }
/* Nav links */
.sm-01__links { flex: 1; padding: 0 12px; }
.sm-01__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  margin-bottom: 4px;
  cursor: pointer;
}
.sm-01__link:hover { color: var(--text); background: rgba(124,58,237,0.15); }
.sm-01__link--active { color: var(--text); background: rgba(124,58,237,0.2); }
.sm-01__link-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.sm-01__link:hover .sm-01__link-icon,
.sm-01__link--active .sm-01__link-icon {
  background: var(--accent);
}
/* Footer */
.sm-01__nav-footer {
  padding: 16px 24px 0;
  border-top: 1px solid var(--border);
}
.sm-01__avatar {
  display: flex; align-items: center; gap: 12px;
}
.sm-01__avatar-img {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.sm-01__avatar-name { font-size: 13px; font-weight: 600; }
.sm-01__avatar-role { font-size: 11px; color: var(--muted); }
/* Main content */
.sm-01__content {
  padding: 80px 24px 24px 24px;
  transition: transform var(--duration) cubic-bezier(0.4, 0, 0.2, 1);
}
.sm-01__heading { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.sm-01__subhead { font-size: 14px; color: var(--muted); margin-bottom: 24px; line-height: 1.6; }
.sm-01__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.sm-01__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.sm-01__card-val { font-size: 22px; font-weight: 700; color: var(--accent2); }
.sm-01__card-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sm-01__nav, .sm-01__burger span { transition: none; }
}
```

### 02. CSS Side Menu with Smooth Overlay

**Type:** Pure CSS
**Description:** A sliding drawer that reveals a frosted-glass backdrop blur overlay over the main content area, using backdrop-filter and a second label element as the click-to-close target.

**HTML:**
```html
<div class="sm-02">
  <input type="checkbox" class="sm-02__toggle" id="sm-02-toggle">
  <label class="sm-02__burger" for="sm-02-toggle" aria-label="Toggle menu">
    <span></span><span></span><span></span>
  </label>
  <label class="sm-02__backdrop" for="sm-02-toggle"></label>
  <nav class="sm-02__nav">
    <div class="sm-02__section-label">Navigation</div>
    <div class="sm-02__links">
      <a class="sm-02__link sm-02__link--active" href="#">
        <span class="sm-02__link-dot"></span> Overview
      </a>
      <a class="sm-02__link" href="#">
        <span class="sm-02__link-dot"></span> Deployments
        <span class="sm-02__badge">12</span>
      </a>
      <a class="sm-02__link" href="#">
        <span class="sm-02__link-dot"></span> Integrations
      </a>
      <a class="sm-02__link" href="#">
        <span class="sm-02__link-dot"></span> Logs
        <span class="sm-02__badge">3</span>
      </a>
      <a class="sm-02__link" href="#">
        <span class="sm-02__link-dot"></span> Settings
      </a>
    </div>
    <div class="sm-02__footer">
      <div class="sm-02__avatar">AK</div>
      <div>
        <div class="sm-02__uname">Alex Kim</div>
        <div class="sm-02__urole">Admin</div>
      </div>
    </div>
  </nav>
  <div class="sm-02__content">
    <div class="sm-02__page-title">Overview</div>
    <div class="sm-02__body">
      <p>Open the drawer to see a frosted backdrop blur overlay appear behind the menu. Clicking the backdrop also closes it.</p>
      <div class="sm-02__grid">
        <div class="sm-02__tile"><div class="sm-02__tile-num">99.9%</div><div class="sm-02__tile-lbl">Uptime SLA</div></div>
        <div class="sm-02__tile"><div class="sm-02__tile-num">4.2ms</div><div class="sm-02__tile-lbl">Avg Latency</div></div>
        <div class="sm-02__tile"><div class="sm-02__tile-num">18k</div><div class="sm-02__tile-lbl">Requests / hr</div></div>
        <div class="sm-02__tile"><div class="sm-02__tile-num">0</div><div class="sm-02__tile-lbl">Open Incidents</div></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-02, .sm-02 *, .sm-02 *::before, .sm-02 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-02 ::selection { background: #0ea5e9; color: #000; }
.sm-02 {
  --bg: #030712;
  --surface: #111827;
  --drawer-bg: #060e1e;
  --accent: #0ea5e9;
  --accent2: #38bdf8;
  --text: #f1f5f9;
  --muted: #64748b;
  --border: rgba(14,165,233,0.15);
  --font: 'Syne', system-ui, sans-serif;
  --w: 300px;
  --ease: cubic-bezier(0.25, 0, 0.1, 1);
  --dur: 0.45s;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.sm-02__toggle { position: absolute; opacity: 0; width: 0; height: 0; }
/* Overlay backdrop */
.sm-02__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
  z-index: 30;
  pointer-events: none;
}
.sm-02__toggle:checked ~ .sm-02__backdrop {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: all;
}
/* Burger */
.sm-02__burger {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 40px; height: 40px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: rgba(14,165,233,0.1);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.2s;
}
.sm-02__burger:hover { background: rgba(14,165,233,0.25); }
.sm-02__burger span {
  width: 18px; height: 2px;
  background: var(--accent2);
  border-radius: 2px;
  transition: transform var(--dur), opacity var(--dur);
  transform-origin: center;
}
.sm-02__toggle:checked ~ .sm-02__burger { z-index: 50; }
.sm-02__toggle:checked ~ .sm-02__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sm-02__toggle:checked ~ .sm-02__burger span:nth-child(2) { opacity: 0; }
.sm-02__toggle:checked ~ .sm-02__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Drawer */
.sm-02__nav {
  position: absolute;
  top: 0; left: 0;
  width: var(--w);
  height: 100%;
  background: var(--drawer-bg);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 72px 0 20px;
}
.sm-02__toggle:checked ~ .sm-02__nav {
  transform: translateX(0);
  box-shadow: 0 0 60px rgba(14,165,233,0.12), 8px 0 40px rgba(0,0,0,0.6);
}
/* Top glow strip */
.sm-02__nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}
.sm-02__section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 20px 8px;
  margin-top: 4px;
}
.sm-02__links { padding: 0 12px; flex: 1; }
.sm-02__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  margin-bottom: 2px;
}
.sm-02__link::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: height 0.2s;
}
.sm-02__link:hover, .sm-02__link--active {
  color: var(--text);
  background: rgba(14,165,233,0.1);
}
.sm-02__link--active::before, .sm-02__link:hover::before { height: 70%; }
.sm-02__link-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.sm-02__link--active .sm-02__link-dot,
.sm-02__link:hover .sm-02__link-dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.sm-02__badge {
  margin-left: auto;
  background: rgba(14,165,233,0.2);
  color: var(--accent2);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}
/* User footer */
.sm-02__footer {
  padding: 16px 20px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sm-02__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.sm-02__uname { font-size: 13px; font-weight: 700; }
.sm-02__urole { font-size: 11px; color: var(--muted); }
/* Main content */
.sm-02__content {
  padding: 20px;
}
.sm-02__topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-top: 6px;
}
.sm-02__page-title { font-size: 20px; font-weight: 800; margin-left: 50px; }
.sm-02__body p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.sm-02__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sm-02__tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.sm-02__tile-num { font-size: 26px; font-weight: 800; color: var(--accent2); }
.sm-02__tile-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sm-02__nav, .sm-02__backdrop, .sm-02__burger span, .sm-02__link::before { transition: none; }
}
```

### 03. Off-Canvas Push Sidebar

**Type:** Pure CSS
**Description:** A side navigation that physically shifts the entire main content area horizontally when it opens rather than overlapping it, creating a genuine off-canvas push effect.

**HTML:**
```html
<div class="sm-03">
  <input type="checkbox" class="sm-03__toggle" id="sm-03-toggle">
  <nav class="sm-03__nav">
    <div class="sm-03__nav-header">
      <div class="sm-03__logo">G</div>
      <div class="sm-03__brand">Grove App</div>
    </div>
    <div class="sm-03__links">
      <a class="sm-03__link sm-03__link--active" href="#"><span class="sm-03__link-icon">▦</span> Home</a>
      <a class="sm-03__link" href="#"><span class="sm-03__link-icon">◉</span> Analytics</a>
      <a class="sm-03__link" href="#"><span class="sm-03__link-icon">◈</span> Reports</a>
      <a class="sm-03__link" href="#"><span class="sm-03__link-icon">◬</span> Team</a>
      <a class="sm-03__link" href="#"><span class="sm-03__link-icon">⬡</span> Settings</a>
    </div>
  </nav>
  <div class="sm-03__shell">
    <div class="sm-03__main">
      <div class="sm-03__topbar">
        <label class="sm-03__burger" for="sm-03-toggle">
          <span></span><span></span><span></span>
        </label>
        <div class="sm-03__page-title">Dashboard</div>
      </div>
      <div class="sm-03__body">
        <p class="sm-03__desc">The entire content area physically slides right when the menu opens — true off-canvas push behaviour with zero JS.</p>
        <div class="sm-03__stats">
          <div class="sm-03__stat"><div class="sm-03__stat-val">7,291</div><div class="sm-03__stat-lbl">Visitors</div></div>
          <div class="sm-03__stat"><div class="sm-03__stat-val">89%</div><div class="sm-03__stat-lbl">Retention</div></div>
          <div class="sm-03__stat"><div class="sm-03__stat-val">$9.1k</div><div class="sm-03__stat-lbl">Revenue</div></div>
          <div class="sm-03__stat"><div class="sm-03__stat-val">312</div><div class="sm-03__stat-lbl">Signups</div></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-03, .sm-03 *, .sm-03 *::before, .sm-03 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-03 ::selection { background: #10b981; color: #000; }
.sm-03 {
  --bg: #0a0f0d;
  --surface: #131a16;
  --nav-bg: #0d1a13;
  --accent: #10b981;
  --accent2: #34d399;
  --text: #ecfdf5;
  --muted: #6b7280;
  --border: rgba(16,185,129,0.15);
  --w: 260px;
  --dur: 0.4s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.sm-03__toggle { position: absolute; opacity: 0; width: 0; height: 0; }
/* Layout shell: nav + main side by side */
.sm-03__shell {
  display: flex;
  height: 100%;
  min-height: 440px;
  transform: translateX(0);
  transition: transform var(--dur) var(--ease);
}
.sm-03__toggle:checked ~ .sm-03__shell {
  transform: translateX(var(--w));
}
/* Fixed nav (off-canvas) */
.sm-03__nav {
  position: absolute;
  left: 0; top: 0;
  width: var(--w);
  height: 100%;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  transform: translateX(calc(-1 * var(--w)));
  transition: transform var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  z-index: 20;
}
.sm-03__toggle:checked ~ .sm-03__nav {
  transform: translateX(0);
}
.sm-03__nav-header {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.sm-03__logo {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #000;
}
.sm-03__brand { font-weight: 700; font-size: 15px; }
.sm-03__links { flex: 1; padding: 0 10px; }
.sm-03__link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 3px;
  text-decoration: none;
}
.sm-03__link:hover { color: var(--text); background: rgba(16,185,129,0.1); }
.sm-03__link--active { color: var(--accent2); background: rgba(16,185,129,0.12); font-weight: 600; }
.sm-03__link-icon { font-size: 16px; }
/* Main content area */
.sm-03__main {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  position: relative;
  z-index: 10;
}
.sm-03__topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.sm-03__burger {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.sm-03__burger:hover { background: rgba(16,185,129,0.2); }
.sm-03__burger span {
  width: 16px; height: 2px;
  background: var(--accent2);
  border-radius: 2px;
  transition: transform var(--dur), opacity var(--dur);
}
.sm-03__toggle:checked ~ .sm-03__shell .sm-03__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sm-03__toggle:checked ~ .sm-03__shell .sm-03__burger span:nth-child(2) { opacity: 0; }
.sm-03__toggle:checked ~ .sm-03__shell .sm-03__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sm-03__page-title { font-size: 17px; font-weight: 700; }
.sm-03__body { padding: 20px; }
.sm-03__desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.sm-03__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sm-03__stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.sm-03__stat-val { font-size: 22px; font-weight: 700; color: var(--accent2); }
.sm-03__stat-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sm-03__shell, .sm-03__nav, .sm-03__burger span { transition: none; }
}
```

### 04. Expandable Icon-Only Sidebar

**Type:** Pure CSS
**Description:** A persistent narrow icon rail that smoothly expands on hover to reveal full text labels and notification badges, using a CSS width transition with no toggle required.

**HTML:**
```html
<div class="sm-04">
  <nav class="sm-04__rail">
    <div class="sm-04__logo">Z</div>
    <div class="sm-04__links">
      <a class="sm-04__link sm-04__link--active" href="#">
        <span class="sm-04__link-icon">⬡</span>
        <span class="sm-04__link-text">Dashboard</span>
      </a>
      <a class="sm-04__link" href="#">
        <span class="sm-04__link-icon">◈</span>
        <span class="sm-04__link-text">Analytics</span>
        <span class="sm-04__link-badge">5</span>
      </a>
      <a class="sm-04__link" href="#">
        <span class="sm-04__link-icon">▦</span>
        <span class="sm-04__link-text">Projects</span>
      </a>
      <a class="sm-04__link" href="#">
        <span class="sm-04__link-icon">◉</span>
        <span class="sm-04__link-text">Messages</span>
        <span class="sm-04__link-badge">9</span>
      </a>
      <div class="sm-04__divider"></div>
      <a class="sm-04__link" href="#">
        <span class="sm-04__link-icon">◬</span>
        <span class="sm-04__link-text">Help</span>
      </a>
      <a class="sm-04__link" href="#">
        <span class="sm-04__link-icon">⬙</span>
        <span class="sm-04__link-text">Settings</span>
      </a>
    </div>
    <div class="sm-04__user">
      <div class="sm-04__user-icon"><div class="sm-04__user-avatar">MK</div></div>
      <div class="sm-04__user-info">
        <div class="sm-04__user-name">M. Kowalski</div>
        <div class="sm-04__user-role">Admin</div>
      </div>
    </div>
  </nav>
  <div class="sm-04__main">
    <div class="sm-04__heading">Dashboard</div>
    <div class="sm-04__sub">Hover the icon rail on the left to expand. Labels and badges appear without any JavaScript.</div>
    <div class="sm-04__cards">
      <div class="sm-04__card"><div class="sm-04__card-val">41</div><div class="sm-04__card-lbl">Active Projects</div></div>
      <div class="sm-04__card"><div class="sm-04__card-val">98%</div><div class="sm-04__card-lbl">Health Score</div></div>
      <div class="sm-04__card"><div class="sm-04__card-val">$74k</div><div class="sm-04__card-lbl">Monthly Revenue</div></div>
      <div class="sm-04__card"><div class="sm-04__card-val">1.2k</div><div class="sm-04__card-lbl">Team Members</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-04, .sm-04 *, .sm-04 *::before, .sm-04 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-04 ::selection { background: #f59e0b; color: #000; }
.sm-04 {
  --bg: #09090b;
  --surface: #18181b;
  --rail-bg: #0f0f12;
  --accent: #f59e0b;
  --accent2: #fbbf24;
  --text: #fafafa;
  --muted: #71717a;
  --border: rgba(245,158,11,0.15);
  --collapsed: 60px;
  --expanded: 230px;
  --dur: 0.35s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
/* Sidebar rail */
.sm-04__rail {
  width: var(--collapsed);
  min-height: 440px;
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  overflow: hidden;
  transition: width var(--dur) var(--ease);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
.sm-04__rail:hover { width: var(--expanded); }
/* Logo */
.sm-04__logo {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #000;
  flex-shrink: 0;
  margin-bottom: 24px;
  transition: border-radius 0.3s;
}
.sm-04__rail:hover .sm-04__logo { border-radius: 50%; }
/* Nav items */
.sm-04__links { width: 100%; flex: 1; }
.sm-04__link {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  height: 48px;
}
.sm-04__link:hover, .sm-04__link--active { color: var(--text); background: rgba(245,158,11,0.08); }
.sm-04__link--active::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--accent);
  border-radius: 3px 0 0 3px;
  transition: opacity 0.2s;
}
.sm-04__link-icon {
  width: var(--collapsed);
  height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.sm-04__link:hover .sm-04__link-icon { color: var(--accent); }
.sm-04__link--active .sm-04__link-icon { color: var(--accent2); }
.sm-04__link-text {
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s 0.05s;
  pointer-events: none;
  flex: 1;
}
.sm-04__rail:hover .sm-04__link-text { opacity: 1; }
.sm-04__link-badge {
  margin-right: 12px;
  background: rgba(245,158,11,0.2);
  color: var(--accent2);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  opacity: 0;
  transition: opacity 0.2s 0.05s;
}
.sm-04__rail:hover .sm-04__link-badge { opacity: 1; }
/* Divider */
.sm-04__divider {
  width: 80%;
  height: 1px;
  background: var(--border);
  margin: 8px auto;
  flex-shrink: 0;
}
/* Bottom user */
.sm-04__user {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
}
.sm-04__user-icon {
  width: var(--collapsed);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sm-04__user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #000;
}
.sm-04__user-info {
  opacity: 0;
  transition: opacity 0.2s 0.05s;
  white-space: nowrap;
}
.sm-04__rail:hover .sm-04__user-info { opacity: 1; }
.sm-04__user-name { font-size: 12px; font-weight: 600; }
.sm-04__user-role { font-size: 10px; color: var(--muted); }
/* Main */
.sm-04__main { flex: 1; padding: 24px; min-width: 0; }
.sm-04__heading { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.sm-04__sub { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
.sm-04__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-04__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.sm-04__card-val { font-size: 20px; font-weight: 700; color: var(--accent2); }
.sm-04__card-lbl { font-size: 11px; color: var(--muted); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sm-04__rail, .sm-04__link-text, .sm-04__link-badge, .sm-04__user-info { transition: none; }
}
```

### 05. Responsive Sidebar Menu (Hidden-to-Visible)

**Type:** Pure CSS
**Description:** A sidebar permanently visible as a fixed column on desktop that hides off-screen on mobile and is revealed by a burger toggle, all handled by CSS media queries alone.

**HTML:**
```html
<div class="sm-05">
  <input type="checkbox" class="sm-05__toggle" id="sm-05-toggle">
  <nav class="sm-05__nav">
    <div class="sm-05__brand">
      <div class="sm-05__logo">P</div>
      <div class="sm-05__brand-name">Prism UI</div>
    </div>
    <div class="sm-05__section-title">Main Menu</div>
    <div class="sm-05__links">
      <a class="sm-05__link sm-05__link--active" href="#"><span class="sm-05__link-icon">⬡</span> Home</a>
      <a class="sm-05__link" href="#"><span class="sm-05__link-icon">◈</span> Reports <span class="sm-05__badge">4</span></a>
      <a class="sm-05__link" href="#"><span class="sm-05__link-icon">▦</span> Campaigns</a>
      <a class="sm-05__link" href="#"><span class="sm-05__link-icon">◬</span> Audience</a>
    </div>
    <div class="sm-05__divider"></div>
    <div class="sm-05__section-title">Account</div>
    <div class="sm-05__links">
      <a class="sm-05__link" href="#"><span class="sm-05__link-icon">◉</span> Profile</a>
      <a class="sm-05__link" href="#"><span class="sm-05__link-icon">⬙</span> Settings</a>
    </div>
    <div class="sm-05__footer">
      <div class="sm-05__avatar">SR</div>
      <div>
        <div class="sm-05__uname">Sam R.</div>
        <div class="sm-05__urole">Editor</div>
      </div>
    </div>
  </nav>
  <div class="sm-05__main">
    <div class="sm-05__topbar">
      <label class="sm-05__burger" for="sm-05-toggle">
        <span></span><span></span><span></span>
      </label>
      <div class="sm-05__topbar-title">Home</div>
      <div class="sm-05__topbar-breadcrumb">Prism / Home</div>
    </div>
    <div class="sm-05__content">
      <div class="sm-05__welcome">Good morning, Sam 🌤</div>
      <div class="sm-05__sub">Sidebar is always visible on wide screens. Resize to mobile to see it hide off-screen with a burger toggle — no JS.</div>
      <div class="sm-05__grid">
        <div class="sm-05__card"><div class="sm-05__card-val">5,382</div><div class="sm-05__card-lbl">Sessions</div></div>
        <div class="sm-05__card"><div class="sm-05__card-val">63%</div><div class="sm-05__card-lbl">Conversion</div></div>
        <div class="sm-05__card"><div class="sm-05__card-val">228</div><div class="sm-05__card-lbl">Subscribers</div></div>
        <div class="sm-05__card"><div class="sm-05__card-val">$4.8k</div><div class="sm-05__card-lbl">Revenue</div></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-05, .sm-05 *, .sm-05 *::before, .sm-05 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-05 ::selection { background: #6366f1; color: #fff; }
.sm-05 {
  --bg: #f8fafc;
  --surface: #fff;
  --nav-bg: #fff;
  --accent: #6366f1;
  --accent2: #818cf8;
  --text: #1e293b;
  --muted: #94a3b8;
  --border: #e2e8f0;
  --font: 'Nunito', system-ui, sans-serif;
  --w: 240px;
  --dur: 0.35s;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
/* Mobile toggle */
.sm-05__toggle { position: absolute; opacity: 0; width: 0; height: 0; }
/* Nav */
.sm-05__nav {
  width: var(--w);
  min-height: 460px;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  flex-shrink: 0;
  position: relative;
  box-shadow: 2px 0 12px rgba(99,102,241,0.06);
}
/* Desktop: always visible — simulated here by having the wrapper at full width */
/* On mobile the sidebar is off-canvas */
@media (max-width: 600px) {
  .sm-05__nav {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    transform: translateX(-100%);
    transition: transform var(--dur) cubic-bezier(0.4,0,0.2,1);
    z-index: 20;
  }
  .sm-05__toggle:checked ~ .sm-05__nav { transform: translateX(0); }
}
.sm-05__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.sm-05__logo {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
}
.sm-05__brand-name { font-size: 15px; font-weight: 800; }
.sm-05__section-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 20px 4px;
}
.sm-05__links { flex: 1; padding: 0 10px; }
.sm-05__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  color: #64748b;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s;
  margin-bottom: 2px;
}
.sm-05__link:hover { color: var(--accent); background: rgba(99,102,241,0.07); }
.sm-05__link--active { color: var(--accent); background: rgba(99,102,241,0.1); }
.sm-05__link-icon { font-size: 16px; }
.sm-05__badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}
.sm-05__divider { height: 1px; background: var(--border); margin: 10px 20px; }
/* User bottom */
.sm-05__footer {
  padding: 14px 16px 0;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.sm-05__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.sm-05__uname { font-size: 13px; font-weight: 700; }
.sm-05__urole { font-size: 11px; color: var(--muted); }
/* Main */
.sm-05__main { flex: 1; min-width: 0; }
.sm-05__topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.sm-05__burger {
  display: none;
  width: 36px; height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
@media (max-width: 600px) { .sm-05__burger { display: flex; } }
.sm-05__burger span { width: 14px; height: 2px; background: #64748b; border-radius: 2px; }
.sm-05__topbar-title { font-size: 16px; font-weight: 800; }
.sm-05__topbar-breadcrumb { font-size: 12px; color: var(--muted); margin-left: auto; }
.sm-05__content { padding: 22px 20px; }
.sm-05__welcome { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.sm-05__sub { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.sm-05__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-05__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.sm-05__card-val { font-size: 22px; font-weight: 800; color: var(--accent); }
.sm-05__card-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sm-05__nav { transition: none; }
}
```

### 06. Sticky Fixed Vertical Navigation Sidebar

**Type:** Pure CSS
**Description:** A full-height sidebar that remains anchored to the viewport top while long-form main content scrolls independently alongside it using position:sticky.

**HTML:**
```html
<div class="sm-06">
  <nav class="sm-06__nav">
    <div class="sm-06__brand">
      <div class="sm-06__logo">N</div>
      <div>
        <span class="sm-06__brand-name">Nova</span>
        <span class="sm-06__brand-plan">Pro</span>
      </div>
    </div>
    <div class="sm-06__section">
      <div class="sm-06__section-lbl">Content</div>
      <a class="sm-06__link sm-06__link--active" href="#">
        <span class="sm-06__link-pip"></span> Articles
        <span class="sm-06__badge">24</span>
      </a>
      <a class="sm-06__link" href="#">
        <span class="sm-06__link-pip"></span> Drafts
        <span class="sm-06__badge">3</span>
      </a>
      <a class="sm-06__link" href="#"><span class="sm-06__link-pip"></span> Media</a>
      <a class="sm-06__link" href="#"><span class="sm-06__link-pip"></span> Comments</a>
      <div class="sm-06__divider"></div>
      <div class="sm-06__section-lbl">Manage</div>
      <a class="sm-06__link" href="#"><span class="sm-06__link-pip"></span> Users</a>
      <a class="sm-06__link" href="#"><span class="sm-06__link-pip"></span> Settings</a>
      <a class="sm-06__link" href="#"><span class="sm-06__link-pip"></span> Plugins</a>
    </div>
    <div class="sm-06__upgrade">
      <div class="sm-06__upgrade-title">Upgrade to Team</div>
      <div class="sm-06__upgrade-sub">Collaborate with up to 20 members and unlock analytics.</div>
      <div class="sm-06__upgrade-btn">View Plans →</div>
    </div>
  </nav>
  <div class="sm-06__main">
    <div class="sm-06__page-title">Articles</div>
    <div class="sm-06__page-sub">The sidebar stays fixed while this content area scrolls. Scroll down to verify.</div>
    <div class="sm-06__article">
      <div class="sm-06__article-title">Getting Started with CSS Grid Layout</div>
      <div class="sm-06__article-body">A comprehensive guide to modern CSS Grid including template areas, named lines, and implicit grids for professional web layouts.</div>
      <div class="sm-06__article-meta">Published · 4 min read</div>
    </div>
    <div class="sm-06__article">
      <div class="sm-06__article-title">Mastering the CSS Cascade & Specificity</div>
      <div class="sm-06__article-body">Deep dive into how browsers resolve style conflicts, the cascade algorithm, and why understanding layers beats specificity hacks.</div>
      <div class="sm-06__article-meta">Draft · 7 min read</div>
    </div>
    <div class="sm-06__article">
      <div class="sm-06__article-title">Container Queries: A New Era of Responsive UI</div>
      <div class="sm-06__article-body">Explore how container queries enable truly component-level responsiveness without relying on the viewport width at all.</div>
      <div class="sm-06__article-meta">Published · 5 min read</div>
    </div>
    <div class="sm-06__article">
      <div class="sm-06__article-title">Advanced CSS Custom Properties Techniques</div>
      <div class="sm-06__article-body">Beyond basic theming: learn how to use custom properties as data channels, calculation bridges, and runtime animation drivers.</div>
      <div class="sm-06__article-meta">Published · 6 min read</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-06, .sm-06 *, .sm-06 *::before, .sm-06 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-06 ::selection { background: #db2777; color: #fff; }
.sm-06 {
  --bg: #0c0c14;
  --surface: #15151f;
  --nav-bg: #0e0e19;
  --accent: #db2777;
  --accent2: #f472b6;
  --text: #f8fafc;
  --muted: #6b7280;
  --border: rgba(219,39,119,0.15);
  --font: 'Manrope', system-ui, sans-serif;
  --nav-w: 240px;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
/* Sticky sidebar */
.sm-06__nav {
  width: var(--nav-w);
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  flex-shrink: 0;
  overflow: hidden;
}
/* Top glow */
.sm-06__nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(219,39,119,0.15), transparent 70%);
  pointer-events: none;
}
.sm-06__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.sm-06__logo {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
}
.sm-06__brand-name { font-size: 15px; font-weight: 800; }
.sm-06__brand-plan {
  font-size: 10px;
  color: var(--accent2);
  font-weight: 700;
  background: rgba(219,39,119,0.12);
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 4px;
}
.sm-06__section { padding: 0 18px; flex: 1; }
.sm-06__section-lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  margin-top: 4px;
}
.sm-06__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s;
  margin-bottom: 1px;
  position: relative;
}
.sm-06__link:hover { color: var(--text); background: rgba(219,39,119,0.1); }
.sm-06__link--active {
  color: var(--text);
  background: rgba(219,39,119,0.15);
}
.sm-06__link--active .sm-06__link-pip {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.sm-06__link-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}
.sm-06__link:hover .sm-06__link-pip { background: var(--accent2); }
.sm-06__badge {
  margin-left: auto;
  background: rgba(219,39,119,0.2);
  color: var(--accent2);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
}
.sm-06__divider { height: 1px; background: var(--border); margin: 10px 0; }
.sm-06__upgrade {
  margin: 0 10px 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(219,39,119,0.15), rgba(244,114,182,0.08));
  border: 1px solid rgba(219,39,119,0.25);
  border-radius: 10px;
}
.sm-06__upgrade-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.sm-06__upgrade-sub { font-size: 11px; color: var(--muted); line-height: 1.5; }
.sm-06__upgrade-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  font-size: 12px; font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
}
/* Main content — scrollable */
.sm-06__main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px;
}
.sm-06__main::-webkit-scrollbar { width: 4px; }
.sm-06__main::-webkit-scrollbar-track { background: transparent; }
.sm-06__main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sm-06__page-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.sm-06__page-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.6; }
.sm-06__article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.sm-06__article-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.sm-06__article-body { font-size: 13px; color: var(--muted); line-height: 1.7; }
.sm-06__article-meta { font-size: 11px; color: rgba(219,39,119,0.7); margin-top: 8px; font-weight: 600; }
@container (max-width: 720px), (max-width: 720px) {
  .sm-06 { --nav-w: 64px; }
  .sm-06__brand { padding: 0 12px 14px; justify-content: center; }
  .sm-06__brand > div:last-child { display: none; }
  .sm-06__section { padding: 0 8px; }
  .sm-06__link { padding: 10px 8px; justify-content: center; gap: 0; font-size: 0; }
  .sm-06__link-pip { width: 8px; height: 8px; }
  .sm-06__badge, .sm-06__section-lbl { display: none; }
  .sm-06__upgrade { display: none; }
  .sm-06__main { padding: 16px; min-width: 0; }
  .sm-06__article { padding: 14px; }
  .sm-06__article-title, .sm-06__article-body { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-06__link, .sm-06__link-pip { transition: none; }
}
```

### 07. Multi-Level Accordion Side Menu

**Type:** Pure CSS
**Description:** A hierarchical documentation sidebar where each top-level section expands independently using hidden checkboxes and max-height transitions, supporting deep nested navigation trees.

**HTML:**
```html
<div class="sm-07">
  <nav class="sm-07__nav">
    <div class="sm-07__brand">
      <div class="sm-07__logo">D</div>
      <div class="sm-07__brand-name">DevDocs</div>
    </div>
    <a class="sm-07__flat sm-07__flat--active" href="#"><span class="sm-07__flat-icon">⬡</span> Overview</a>
    <!-- Accordion 1 -->
    <div class="sm-07__group">
      <input type="checkbox" class="sm-07__acc-toggle" id="sm-07-acc1" checked>
      <label class="sm-07__group-label" for="sm-07-acc1">
        <span class="sm-07__flat-icon">◈</span> Components
      </label>
      <div class="sm-07__sub">
        <a class="sm-07__sub-link sm-07__sub-link--active" href="#">Buttons</a>
        <a class="sm-07__sub-link" href="#">Modals</a>
        <a class="sm-07__sub-link" href="#">Forms</a>
        <a class="sm-07__sub-link" href="#">Tables</a>
        <a class="sm-07__sub-link" href="#">Toasts</a>
      </div>
    </div>
    <!-- Accordion 2 -->
    <div class="sm-07__group">
      <input type="checkbox" class="sm-07__acc-toggle" id="sm-07-acc2">
      <label class="sm-07__group-label" for="sm-07-acc2">
        <span class="sm-07__flat-icon">▦</span> Foundations
      </label>
      <div class="sm-07__sub">
        <a class="sm-07__sub-link" href="#">Typography</a>
        <a class="sm-07__sub-link" href="#">Color System</a>
        <a class="sm-07__sub-link" href="#">Spacing Scale</a>
        <a class="sm-07__sub-link" href="#">Iconography</a>
      </div>
    </div>
    <!-- Accordion 3 -->
    <div class="sm-07__group">
      <input type="checkbox" class="sm-07__acc-toggle" id="sm-07-acc3">
      <label class="sm-07__group-label" for="sm-07-acc3">
        <span class="sm-07__flat-icon">◉</span> Patterns
      </label>
      <div class="sm-07__sub">
        <a class="sm-07__sub-link" href="#">Navigation</a>
        <a class="sm-07__sub-link" href="#">Data Display</a>
        <a class="sm-07__sub-link" href="#">Authentication</a>
      </div>
    </div>
    <a class="sm-07__flat" href="#"><span class="sm-07__flat-icon">⬙</span> Settings</a>
  </nav>
  <div class="sm-07__main">
    <div class="sm-07__page-title">Components</div>
    <div class="sm-07__page-sub">Multi-level accordion sidebar using only <code>:checked</code> state on hidden inputs and <code>max-height</code> transitions. No JavaScript.</div>
    <div class="sm-07__panel">
      <div class="sm-07__panel-title">Buttons</div>
      <div class="sm-07__panel-body">Primary, secondary, ghost, destructive, and icon-only button variants with loading states and accessible focus rings.</div>
    </div>
    <div class="sm-07__panel">
      <div class="sm-07__panel-title">Modals</div>
      <div class="sm-07__panel-body">Layered dialog system with focus trap, ARIA role management, and backdrop dismiss behaviour.</div>
    </div>
    <div class="sm-07__panel">
      <div class="sm-07__panel-title">Forms</div>
      <div class="sm-07__panel-body">Input, select, textarea, checkbox, radio, and date picker components with unified error state styling.</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-07, .sm-07 *, .sm-07 *::before, .sm-07 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-07 ::selection { background: #0891b2; color: #fff; }
.sm-07 {
  --bg: #0a1628;
  --surface: #102040;
  --nav-bg: #0c1e38;
  --accent: #0891b2;
  --accent2: #22d3ee;
  --text: #e2e8f0;
  --muted: #64748b;
  --border: rgba(8,145,178,0.18);
  --font: 'IBM Plex Sans', system-ui, sans-serif;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  border-radius: 12px;
  overflow: hidden;
}
/* Accordion uses :checked on hidden inputs */
.sm-07__acc-toggle { display: none; }
.sm-07__nav {
  width: 240px;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.sm-07__nav::-webkit-scrollbar { width: 3px; }
.sm-07__nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sm-07__brand {
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.sm-07__logo {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
}
.sm-07__brand-name { font-weight: 700; font-size: 14px; }
/* Flat link */
.sm-07__flat {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  color: var(--muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: all 0.18s;
  border-left: 2px solid transparent;
}
.sm-07__flat:hover, .sm-07__flat--active {
  color: var(--text);
  background: rgba(8,145,178,0.1);
  border-left-color: var(--accent);
}
.sm-07__flat-icon { font-size: 14px; }
/* Accordion group */
.sm-07__group { border-bottom: 1px solid var(--border); }
.sm-07__group-label {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  user-select: none;
  position: relative;
}
.sm-07__group-label:hover { color: var(--text); background: rgba(8,145,178,0.07); }
.sm-07__group-label::after {
  content: '›';
  position: absolute;
  right: 14px;
  font-size: 16px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  color: var(--muted);
}
.sm-07__acc-toggle:checked + .sm-07__group-label {
  color: var(--accent2);
}
.sm-07__acc-toggle:checked + .sm-07__group-label::after { transform: rotate(90deg); color: var(--accent2); }
/* Sub-links expand */
.sm-07__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.sm-07__acc-toggle:checked + .sm-07__group-label + .sm-07__sub {
  max-height: 300px;
}
.sm-07__sub-link {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 38px;
  color: var(--muted);
  font-size: 12px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: all 0.18s;
  position: relative;
}
.sm-07__sub-link::before {
  content: '';
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.18s;
}
.sm-07__sub-link:hover { color: var(--text); background: rgba(8,145,178,0.1); }
.sm-07__sub-link:hover::before { background: var(--accent2); }
.sm-07__sub-link--active { color: var(--accent2); }
.sm-07__sub-link--active::before { background: var(--accent2); box-shadow: 0 0 6px var(--accent); }
/* Main */
.sm-07__main { flex: 1; padding: 24px; }
.sm-07__page-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.sm-07__page-sub { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.sm-07__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 12px;
}
.sm-07__panel-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.sm-07__panel-body { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .sm-07__sub, .sm-07__group-label::after { transition: none; }
}
```

### 08. Full-Height Flexbox Sidebar

**Type:** Pure CSS
**Description:** A sidebar that uses CSS Flexbox column direction to perfectly space a brand header, navigation links, an informational card, and a pinned user footer without absolute positioning.

**HTML:**
```html
<div class="sm-08">
  <nav class="sm-08__nav">
    <div class="sm-08__brand">
      <div class="sm-08__logo">A</div>
      <div class="sm-08__brand-name">Apex</div>
    </div>
    <div class="sm-08__links">
      <div class="sm-08__section-lbl">Workspace</div>
      <a class="sm-08__link sm-08__link--active" href="#"><span class="sm-08__link-icon">⬡</span> Dashboard</a>
      <a class="sm-08__link" href="#"><span class="sm-08__link-icon">◈</span> Projects</a>
      <a class="sm-08__link" href="#"><span class="sm-08__link-icon">▦</span> Tasks <span class="sm-08__badge">14</span></a>
      <a class="sm-08__link" href="#"><span class="sm-08__link-icon">◉</span> Inbox <span class="sm-08__badge">6</span></a>
      <div class="sm-08__section-lbl">Team</div>
      <a class="sm-08__link" href="#"><span class="sm-08__link-icon">◬</span> Members</a>
      <a class="sm-08__link" href="#"><span class="sm-08__link-icon">⬟</span> Roles</a>
    </div>
    <div class="sm-08__nav-card">
      <div class="sm-08__nav-card-title">Storage 68% full</div>
      <div class="sm-08__nav-card-sub">6.8 GB of 10 GB used. Upgrade for unlimited storage.</div>
    </div>
    <div class="sm-08__user">
      <div class="sm-08__user-avatar">TN</div>
      <div>
        <div class="sm-08__user-name">Tom N.</div>
        <div class="sm-08__user-plan">Pro Plan</div>
      </div>
      <div class="sm-08__logout">↗</div>
    </div>
  </nav>
  <div class="sm-08__main">
    <div class="sm-08__topbar">
      <div class="sm-08__page-title">Dashboard</div>
      <div class="sm-08__topbar-actions">
        <button class="sm-08__btn sm-08__btn--ghost">Export</button>
        <button class="sm-08__btn sm-08__btn--primary">+ New</button>
      </div>
    </div>
    <div class="sm-08__content">
      <p class="sm-08__desc">Sidebar uses <code>display:flex; flex-direction:column</code>. The links region has <code>flex:1</code> to grow and pin header/footer to top and bottom without <code>position:absolute</code>.</p>
      <div class="sm-08__grid">
        <div class="sm-08__card"><div class="sm-08__card-val">28</div><div class="sm-08__card-lbl">Active Projects</div></div>
        <div class="sm-08__card"><div class="sm-08__card-val">142</div><div class="sm-08__card-lbl">Open Tasks</div></div>
        <div class="sm-08__card"><div class="sm-08__card-val">7</div><div class="sm-08__card-lbl">Team Members</div></div>
        <div class="sm-08__card"><div class="sm-08__card-val">99%</div><div class="sm-08__card-lbl">SLA</div></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-08, .sm-08 *, .sm-08 *::before, .sm-08 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-08 ::selection { background: #7c3aed; color: #fff; }
.sm-08 {
  --bg: #fafaf9;
  --surface: #fff;
  --nav-bg: #1c1917;
  --accent: #7c3aed;
  --accent2: #a78bfa;
  --text: #fafaf9;
  --muted: #78716c;
  --text-dark: #1c1917;
  --border-nav: rgba(255,255,255,0.08);
  --border-main: #e7e5e4;
  --font: 'Outfit', system-ui, sans-serif;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-dark);
  display: flex;
  min-height: 100vh;
  border-radius: 12px;
  overflow: hidden;
}
/* Sidebar nav using flexbox for perfect spacing */
.sm-08__nav {
  width: 240px;
  background: var(--nav-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 0;
}
/* Top: brand */
.sm-08__brand {
  padding: 22px 18px;
  border-bottom: 1px solid var(--border-nav);
  display: flex; align-items: center; gap: 11px;
}
.sm-08__logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff;
}
.sm-08__brand-name { font-size: 16px; font-weight: 700; color: var(--text); }
/* Middle: links — flex: 1 stretches this to fill available space */
.sm-08__links {
  flex: 1;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sm-08__section-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #57534e;
  padding: 8px 10px 4px;
}
.sm-08__link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #a8a29e;
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s;
}
.sm-08__link:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.sm-08__link--active { color: var(--text); background: rgba(124,58,237,0.25); }
.sm-08__link-icon { font-size: 15px; }
.sm-08__badge {
  margin-left: auto;
  background: rgba(167,139,250,0.2);
  color: var(--accent2);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}
/* Spacer pushes bottom content down */
.sm-08__spacer { flex: 1; }
/* Notification card in nav */
.sm-08__nav-card {
  margin: 0 10px 14px;
  padding: 14px;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 10px;
}
.sm-08__nav-card-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sm-08__nav-card-sub { font-size: 11px; color: #a8a29e; line-height: 1.5; }
/* Bottom: user profile pinned to base */
.sm-08__user {
  padding: 16px 18px;
  border-top: 1px solid var(--border-nav);
  display: flex; align-items: center; gap: 10px;
}
.sm-08__user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sm-08__user-name { font-size: 13px; font-weight: 700; color: var(--text); }
.sm-08__user-plan { font-size: 10px; color: #a78bfa; }
.sm-08__logout {
  margin-left: auto;
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.07);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.sm-08__logout:hover { background: rgba(255,255,255,0.15); }
/* Main */
.sm-08__main { flex: 1; display: flex; flex-direction: column; }
.sm-08__topbar {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-main);
  display: flex; align-items: center; justify-content: space-between;
}
.sm-08__page-title { font-size: 18px; font-weight: 800; }
.sm-08__topbar-actions { display: flex; gap: 8px; }
.sm-08__btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
}
.sm-08__btn--ghost { background: transparent; border: 1px solid var(--border-main); color: var(--text-dark); }
.sm-08__btn--primary { background: var(--accent); border: none; color: #fff; }
.sm-08__content { flex: 1; padding: 22px; }
.sm-08__desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.sm-08__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sm-08__card {
  background: var(--surface);
  border: 1px solid var(--border-main);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sm-08__card-val { font-size: 24px; font-weight: 800; color: var(--accent); }
.sm-08__card-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sm-08__link, .sm-08__logout { transition: none; }
}
```

### 09. Neumorphic Inset Side Menu

**Type:** Pure CSS
**Description:** A dark-mode dashboard sidebar using soft extruded box-shadows and recessed inset-shadow interactive states to simulate a tactile raised and pressed surface aesthetic.

**HTML:**
```html
<div class="sm-09">
  <nav class="sm-09__nav">
    <div class="sm-09__brand">
      <div class="sm-09__logo">N</div>
      <div class="sm-09__brand-name">Neura</div>
    </div>
    <div class="sm-09__links">
      <a class="sm-09__link sm-09__link--active" href="#"><span class="sm-09__link-icon">⬡</span><span class="sm-09__link-text">Dashboard</span><span class="sm-09__dot"></span></a>
      <a class="sm-09__link" href="#"><span class="sm-09__link-icon">◈</span><span class="sm-09__link-text">Analytics</span><span class="sm-09__dot"></span></a>
      <a class="sm-09__link" href="#"><span class="sm-09__link-icon">▦</span><span class="sm-09__link-text">Calendar</span><span class="sm-09__dot"></span></a>
      <a class="sm-09__link" href="#"><span class="sm-09__link-icon">◉</span><span class="sm-09__link-text">Messages</span><span class="sm-09__dot"></span></a>
      <div class="sm-09__divider"></div>
      <a class="sm-09__link" href="#"><span class="sm-09__link-icon">⬙</span><span class="sm-09__link-text">Settings</span><span class="sm-09__dot"></span></a>
    </div>
    <div class="sm-09__user-card">
      <div class="sm-09__avatar">PB</div>
      <div>
        <div class="sm-09__uname">P. Blake</div>
        <div class="sm-09__urole">Designer</div>
      </div>
    </div>
  </nav>
  <div class="sm-09__main">
    <div class="sm-09__heading">Dashboard</div>
    <div class="sm-09__sub">Neumorphic UI using layered <code>box-shadow</code> — extruded hover, inset active state, all driven by CSS transitions alone.</div>
    <div class="sm-09__cards">
      <div class="sm-09__card"><div class="sm-09__card-val">3,091</div><div class="sm-09__card-lbl">Sessions</div></div>
      <div class="sm-09__card"><div class="sm-09__card-val">71%</div><div class="sm-09__card-lbl">Engagement</div></div>
      <div class="sm-09__card"><div class="sm-09__card-val">$6.3k</div><div class="sm-09__card-lbl">Revenue</div></div>
      <div class="sm-09__card"><div class="sm-09__card-val">521</div><div class="sm-09__card-lbl">Sign-ups</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-09, .sm-09 *, .sm-09 *::before, .sm-09 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-09 ::selection { background: #6366f1; color: #fff; }
.sm-09 {
  --bg: #1a1a2e;
  --bg-neu: #1e1e35;
  --bg-dark: #16162a;
  --accent: #818cf8;
  --accent2: #c084fc;
  --text: #e2e8f0;
  --muted: #64748b;
  --font: 'Poppins', system-ui, sans-serif;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  border-radius: 12px;
  overflow: hidden;
}
/* Neumorphic sidebar */
.sm-09__nav {
  width: 220px;
  background: var(--bg-neu);
  /* Neu shadow — extruded outward */
  box-shadow: inset 2px 2px 6px rgba(255,255,255,0.04), inset -2px -2px 8px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  padding: 22px 0;
  flex-shrink: 0;
}
.sm-09__brand {
  padding: 0 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
/* Neumorphic logo */
.sm-09__logo {
  width: 38px; height: 38px;
  background: var(--bg-neu);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  background: linear-gradient(145deg, #24243e, #181828);
  box-shadow: 4px 4px 10px rgba(0,0,0,0.5), -2px -2px 8px rgba(255,255,255,0.05);
  color: var(--accent);
}
.sm-09__brand-name { font-size: 14px; font-weight: 700; }
.sm-09__links { flex: 1; padding: 0 10px; }
.sm-09__link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  margin-bottom: 6px;
  transition: color 0.2s, box-shadow 0.2s, background 0.2s;
  background: transparent;
  /* resting state — flat */
  box-shadow: none;
}
/* Hover: extruded */
.sm-09__link:hover {
  color: var(--text);
  background: var(--bg-neu);
  box-shadow: 3px 3px 8px rgba(0,0,0,0.5), -2px -2px 6px rgba(255,255,255,0.04);
}
/* Active: pressed/inset */
.sm-09__link--active {
  color: var(--accent);
  background: var(--bg-dark);
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.6), inset -2px -2px 6px rgba(255,255,255,0.04);
}
.sm-09__link-icon { font-size: 16px; }
.sm-09__link-text { flex: 1; }
.sm-09__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}
.sm-09__link--active .sm-09__dot { opacity: 1; }
/* Neu divider */
.sm-09__divider {
  height: 1px;
  margin: 8px 10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
/* User card at bottom — neu inset card */
.sm-09__user-card {
  margin: 8px 10px 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-dark);
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.5), inset -2px -2px 6px rgba(255,255,255,0.04);
  display: flex; align-items: center; gap: 10px;
}
.sm-09__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.sm-09__uname { font-size: 12px; font-weight: 700; }
.sm-09__urole { font-size: 10px; color: var(--muted); }
/* Main */
.sm-09__main { flex: 1; padding: 22px; }
.sm-09__heading { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.sm-09__sub { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
/* Neu stat cards */
.sm-09__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sm-09__card {
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-neu);
  box-shadow: 4px 4px 12px rgba(0,0,0,0.5), -2px -2px 8px rgba(255,255,255,0.04);
}
.sm-09__card-val { font-size: 22px; font-weight: 700; color: var(--accent); }
.sm-09__card-lbl { font-size: 11px; color: var(--muted); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sm-09__link { transition: none; }
}
```

### 10. Glassmorphism Blurred Sidebar

**Type:** Pure CSS
**Description:** A frosted-glass sidebar panel using backdrop-filter blur over animated gradient colour blobs, with a semi-transparent border and layered glass card components.

**HTML:**
```html
<div class="sm-10">
  <div class="sm-10__bg">
    <div class="sm-10__blob sm-10__blob--a"></div>
    <div class="sm-10__blob sm-10__blob--b"></div>
    <div class="sm-10__blob sm-10__blob--c"></div>
  </div>
  <nav class="sm-10__nav">
    <div class="sm-10__brand">
      <div class="sm-10__logo">◇</div>
      <div class="sm-10__brand-name">Crystal</div>
    </div>
    <div class="sm-10__links">
      <a class="sm-10__link sm-10__link--active" href="#"><span class="sm-10__link-icon">⬡</span> Home</a>
      <a class="sm-10__link" href="#"><span class="sm-10__link-icon">◈</span> Explore</a>
      <a class="sm-10__link" href="#"><span class="sm-10__link-icon">▦</span> Library <span class="sm-10__badge">7</span></a>
      <a class="sm-10__link" href="#"><span class="sm-10__link-icon">◉</span> Messages <span class="sm-10__badge">3</span></a>
      <div class="sm-10__divider"></div>
      <a class="sm-10__link" href="#"><span class="sm-10__link-icon">◬</span> Account</a>
      <a class="sm-10__link" href="#"><span class="sm-10__link-icon">⬙</span> Settings</a>
    </div>
    <div class="sm-10__user">
      <div class="sm-10__avatar">LM</div>
      <div>
        <div class="sm-10__uname">Lena M.</div>
        <div class="sm-10__urole">Creator</div>
      </div>
    </div>
  </nav>
  <div class="sm-10__main">
    <div class="sm-10__heading">Home Feed</div>
    <div class="sm-10__sub">Frosted glass sidebar using <code>backdrop-filter:blur(20px)</code> over animated gradient blobs. The glass blurs whatever colour passes behind it.</div>
    <div class="sm-10__cards">
      <div class="sm-10__card"><div class="sm-10__card-val">12.4k</div><div class="sm-10__card-lbl">Followers</div></div>
      <div class="sm-10__card"><div class="sm-10__card-val">892</div><div class="sm-10__card-lbl">Likes today</div></div>
      <div class="sm-10__card"><div class="sm-10__card-val">47</div><div class="sm-10__card-lbl">Published</div></div>
      <div class="sm-10__card"><div class="sm-10__card-val">3.2k</div><div class="sm-10__card-lbl">Views</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-10, .sm-10 *, .sm-10 *::before, .sm-10 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-10 ::selection { background: rgba(255,255,255,0.3); color: #fff; }
.sm-10 {
  --font: 'Space Grotesk', system-ui, sans-serif;
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
/* Vivid gradient background blobs (what passes THROUGH the glass) */
.sm-10__bg {
  position: absolute; inset: 0;
  background: #0d0d1a;
  z-index: 0;
  overflow: hidden;
}
.sm-10__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
}
.sm-10__blob--a { width: 280px; height: 280px; background: #7c3aed; top: -60px; left: 20px; animation: sm-10-drift1 12s ease-in-out infinite alternate; }
.sm-10__blob--b { width: 220px; height: 220px; background: #0ea5e9; bottom: -40px; left: 100px; animation: sm-10-drift2 14s ease-in-out infinite alternate; }
.sm-10__blob--c { width: 200px; height: 200px; background: #10b981; top: 40%; right: 5%; animation: sm-10-drift3 10s ease-in-out infinite alternate; }
@keyframes sm-10-drift1 { to { transform: translate(30px, 40px) scale(1.1); } }
@keyframes sm-10-drift2 { to { transform: translate(-20px, -30px) scale(0.9); } }
@keyframes sm-10-drift3 { to { transform: translate(10px, 20px) scale(1.05); } }
/* Glass sidebar */
.sm-10__nav {
  position: relative;
  z-index: 10;
  width: 230px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  padding: 22px 0;
  flex-shrink: 0;
  box-shadow: 4px 0 40px rgba(0,0,0,0.3);
}
.sm-10__brand {
  padding: 0 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 11px;
}
.sm-10__logo {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
  backdrop-filter: blur(10px);
}
.sm-10__brand-name { font-size: 15px; font-weight: 700; color: #fff; }
.sm-10__links { flex: 1; padding: 0 10px; }
.sm-10__link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.25s;
  margin-bottom: 3px;
  border: 1px solid transparent;
}
.sm-10__link:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.12);
}
.sm-10__link--active {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 20px rgba(255,255,255,0.05);
}
.sm-10__link-icon { font-size: 16px; }
.sm-10__badge {
  margin-left: auto;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}
.sm-10__divider { height: 1px; background: rgba(255,255,255,0.07); margin: 8px 10px; }
/* Glass user footer */
.sm-10__user {
  margin: 8px 10px 0;
  padding: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(8px);
}
.sm-10__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sm-10__uname { font-size: 12px; font-weight: 700; color: #fff; }
.sm-10__urole { font-size: 10px; color: rgba(255,255,255,0.5); }
/* Main content */
.sm-10__main {
  flex: 1;
  position: relative; z-index: 10;
  padding: 24px;
  color: #fff;
}
.sm-10__heading { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.sm-10__sub { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 22px; }
/* Glass cards */
.sm-10__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sm-10__card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}
.sm-10__card-val { font-size: 22px; font-weight: 700; color: #fff; }
.sm-10__card-lbl { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sm-10__blob { animation: none; }
  .sm-10__link { transition: none; }
}
```

### 11. Dark Mode Cyberpunk Neon Sidebar

**Type:** Pure CSS
**Description:** A futuristic dark-themed navigation sidebar with pulsing neon text-shadow glows, CSS scanline overlays, sharp geometric accents, and a subtle logo flicker animation.

**HTML:**
```html
<div class="sm-11">
  <nav class="sm-11__nav">
    <div class="sm-11__brand">
      <div class="sm-11__brand-label">// SYSTEM ACTIVE</div>
      <div class="sm-11__brand-name">CYBERX</div>
    </div>
    <div class="sm-11__links">
      <a class="sm-11__link sm-11__link--active" href="#"><span class="sm-11__link-bullet"></span> Matrix</a>
      <a class="sm-11__link" href="#"><span class="sm-11__link-bullet"></span> Network</a>
      <a class="sm-11__link" href="#"><span class="sm-11__link-bullet"></span> Console</a>
      <a class="sm-11__link" href="#"><span class="sm-11__link-bullet"></span> Threats</a>
      <a class="sm-11__link" href="#"><span class="sm-11__link-bullet"></span> Logs</a>
      <a class="sm-11__link" href="#"><span class="sm-11__link-bullet"></span> Config</a>
    </div>
    <div class="sm-11__status-bar">
      <div class="sm-11__status-row"><span>CPU</span><span>73%</span></div>
      <div class="sm-11__status-row"><span>MEM</span><span>4.1 GB</span></div>
      <div class="sm-11__progress"><div class="sm-11__progress-fill"></div></div>
    </div>
  </nav>
  <div class="sm-11__main">
    <div class="sm-11__heading">// THREAT MATRIX</div>
    <div class="sm-11__sub">Dark cyberpunk sidebar with neon text-shadow glows, scanline overlays, and a CSS flicker animation — all without a single image or external asset.</div>
    <div class="sm-11__cards">
      <div class="sm-11__card"><div class="sm-11__card-val">0</div><div class="sm-11__card-lbl">Critical</div></div>
      <div class="sm-11__card"><div class="sm-11__card-val">3</div><div class="sm-11__card-lbl">Warnings</div></div>
      <div class="sm-11__card"><div class="sm-11__card-val">99.9%</div><div class="sm-11__card-lbl">Uptime</div></div>
      <div class="sm-11__card"><div class="sm-11__card-val">14ms</div><div class="sm-11__card-lbl">Latency</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-11, .sm-11 *, .sm-11 *::before, .sm-11 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-11 ::selection { background: #ff2d78; color: #000; }
.sm-11 {
  --bg: #020409;
  --surface: #07080f;
  --nav-bg: #040610;
  --neon-pink: #ff2d78;
  --neon-cyan: #00e5ff;
  --neon-purple: #a855f7;
  --text: #e2e8f0;
  --muted: #374151;
  --font-head: 'Orbitron', monospace;
  --font-body: 'Rajdhani', system-ui, sans-serif;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  border-radius: 12px;
  overflow: hidden;
}
.sm-11__nav {
  width: 220px;
  background: var(--nav-bg);
  border-right: 1px solid var(--neon-pink);
  box-shadow: 2px 0 20px rgba(255,45,120,0.1);
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* Scanlines overlay */
.sm-11__nav::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,229,255,0.015) 2px, rgba(0,229,255,0.015) 4px);
  pointer-events: none;
  z-index: 0;
}
/* Neon corner accent */
.sm-11__nav::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 60px;
  background: linear-gradient(180deg, var(--neon-cyan), transparent);
  box-shadow: 0 0 8px var(--neon-cyan);
}
.sm-11__brand {
  position: relative; z-index: 1;
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255,45,120,0.3);
}
.sm-11__brand-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--neon-cyan);
  margin-bottom: 4px;
  text-shadow: 0 0 8px var(--neon-cyan);
}
.sm-11__brand-name {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 12px var(--neon-pink), 0 0 30px rgba(255,45,120,0.4);
  letter-spacing: 0.05em;
}
.sm-11__links {
  flex: 1;
  padding: 12px 0;
  position: relative; z-index: 1;
}
.sm-11__link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  color: #4b5563;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s;
  border-left: 2px solid transparent;
  position: relative;
  text-transform: uppercase;
}
.sm-11__link:hover {
  color: var(--neon-cyan);
  border-left-color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan);
  background: rgba(0,229,255,0.04);
}
.sm-11__link--active {
  color: var(--neon-pink);
  border-left-color: var(--neon-pink);
  text-shadow: 0 0 10px var(--neon-pink);
  background: rgba(255,45,120,0.06);
}
/* Glowing bullet */
.sm-11__link-bullet {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}
.sm-11__status-bar {
  position: relative; z-index: 1;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,45,120,0.2);
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.sm-11__status-row {
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
  color: #374151;
}
.sm-11__status-row span:last-child { color: var(--neon-cyan); }
.sm-11__progress {
  height: 2px;
  background: rgba(0,229,255,0.15);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.sm-11__progress-fill {
  height: 100%;
  width: 73%;
  background: var(--neon-cyan);
  box-shadow: 0 0 6px var(--neon-cyan);
  border-radius: 2px;
}
/* Main */
.sm-11__main { flex: 1; padding: 22px; position: relative; overflow: hidden; }
.sm-11__main::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,229,255,0.008) 3px, rgba(0,229,255,0.008) 6px);
  pointer-events: none;
}
.sm-11__heading {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 900;
  color: var(--neon-pink);
  text-shadow: 0 0 12px var(--neon-pink);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.sm-11__sub {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 22px;
  font-weight: 600;
}
.sm-11__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-11__card {
  background: var(--surface);
  border: 1px solid rgba(0,229,255,0.15);
  border-radius: 6px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
/* Corner glow */
.sm-11__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 1px;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}
.sm-11__card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 30px;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}
.sm-11__card-val {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan);
}
.sm-11__card-lbl {
  font-size: 10px;
  color: #374151;
  margin-top: 4px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@keyframes sm-11-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.7; }
  98% { opacity: 0.9; }
}
.sm-11__brand-name { animation: sm-11-flicker 6s step-end infinite; }
@media (prefers-reduced-motion: reduce) {
  .sm-11__brand-name { animation: none; }
  .sm-11__link { transition: none; }
}
```

### 12. Brutalist Left-Hand Border Navigation

**Type:** Pure CSS
**Description:** A high-contrast brutalist sidebar using only thick black borders, a bold red accent rule, raw condensed typography, and zero gradients or rounded corners.

**HTML:**
```html
<div class="sm-12">
  <nav class="sm-12__nav">
    <div class="sm-12__brand">
      <div class="sm-12__brand-eyebrow">EST. 2024</div>
      <div class="sm-12__brand-name">Brutal</div>
      <div class="sm-12__brand-tag">Studio</div>
    </div>
    <div class="sm-12__links">
      <a class="sm-12__link sm-12__link--active" href="#">Home</a>
      <a class="sm-12__link" href="#">Work <span class="sm-12__count">12</span></a>
      <a class="sm-12__link" href="#">Studio</a>
      <a class="sm-12__link" href="#">Journal <span class="sm-12__count">05</span></a>
      <a class="sm-12__link" href="#">Contact</a>
    </div>
    <div class="sm-12__footer">
      <div class="sm-12__footer-label">// USER</div>
      <div class="sm-12__footer-user">J. Haas</div>
    </div>
  </nav>
  <div class="sm-12__main">
    <div class="sm-12__topbar">
      <span class="sm-12__topbar-num">[01]</span>
      <div class="sm-12__page-title">Homepage</div>
    </div>
    <div class="sm-12__content">
      <p class="sm-12__intro">Brutalist sidebar using raw black borders, zero gradients, high-contrast type, and a thick red rule as the only decorative element.</p>
      <div class="sm-12__grid">
        <div class="sm-12__cell"><div class="sm-12__cell-val">24</div><div class="sm-12__cell-lbl">Projects</div></div>
        <div class="sm-12__cell"><div class="sm-12__cell-val">08</div><div class="sm-12__cell-lbl">Clients</div></div>
        <div class="sm-12__cell"><div class="sm-12__cell-val">6yr</div><div class="sm-12__cell-lbl">Experience</div></div>
        <div class="sm-12__cell"><div class="sm-12__cell-val">100%</div><div class="sm-12__cell-lbl">Remote</div></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-12, .sm-12 *, .sm-12 *::before, .sm-12 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-12 ::selection { background: #000; color: #fff; }
.sm-12 {
  --bg: #f5f0e8;
  --text: #0a0a0a;
  --accent: #e63329;
  --yellow: #f7e733;
  --nav-bg: #0a0a0a;
  --nav-text: #f5f0e8;
  --font-head: 'Barlow Condensed', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;
  font-family: var(--font-head);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  border-radius: 0;
  overflow: hidden;
  border: 3px solid var(--text);
  border-radius: 2px;
}
.sm-12__nav {
  width: 200px;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-right: 4px solid var(--accent);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sm-12__brand {
  padding: 18px 16px;
  border-bottom: 3px solid var(--accent);
}
.sm-12__brand-eyebrow {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: #666;
  margin-bottom: 4px;
}
.sm-12__brand-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--nav-text);
}
.sm-12__brand-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  margin-top: 6px;
  text-transform: uppercase;
}
.sm-12__links { flex: 1; }
.sm-12__link {
  display: block;
  padding: 13px 16px;
  color: #666;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer; text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
  transition: color 0.1s, background 0.1s;
  position: relative;
}
.sm-12__link::before {
  content: '//';
  color: #333;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.sm-12__link:hover {
  color: var(--yellow);
  background: #111;
}
.sm-12__link--active {
  color: var(--nav-text);
  background: var(--accent);
  border-bottom-color: var(--accent);
}
.sm-12__link--active::before { color: rgba(255,255,255,0.5); }
.sm-12__link--active::after {
  content: '→';
  position: absolute;
  right: 12px;
  top: 50%; transform: translateY(-50%);
  font-size: 16px;
  font-family: var(--font-mono);
}
.sm-12__count {
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--yellow);
}
.sm-12__link--active .sm-12__count { color: rgba(255,255,255,0.7); right: 36px; }
.sm-12__footer {
  border-top: 3px solid var(--accent);
  padding: 12px 16px;
}
.sm-12__footer-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: #444;
  margin-bottom: 4px;
  letter-spacing: 0.15em;
}
.sm-12__footer-user {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Main */
.sm-12__main { flex: 1; border-left: none; }
.sm-12__topbar {
  padding: 16px 22px;
  border-bottom: 3px solid var(--text);
  display: flex; align-items: baseline; gap: 12px;
}
.sm-12__topbar-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}
.sm-12__page-title {
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.sm-12__content { padding: 22px; }
.sm-12__intro {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 22px;
  font-weight: 600;
  max-width: 380px;
}
.sm-12__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 3px solid var(--text); }
.sm-12__cell {
  padding: 14px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
}
.sm-12__cell:nth-child(even) { border-right: none; }
.sm-12__cell:nth-child(n+3) { border-bottom: none; }
.sm-12__cell-val {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.sm-12__cell-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #888;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
  .sm-12__link { transition: none; }
}
```

### 13. Hamburger Checkbox-Hack Side Menu

**Type:** Pure CSS
**Description:** A classic pure-CSS interaction using a hidden checkbox input and the :checked general sibling combinator to toggle menu visibility and animate the burger icon into an X.

**HTML:**
```html
<div class="sm-13">
  <input type="checkbox" id="sm-13-chk">
  <label class="sm-13__burger" for="sm-13-chk" aria-label="Toggle menu">
    <span></span><span></span><span></span>
  </label>
  <!-- Clicking overlay also closes the menu -->
  <label class="sm-13__overlay" for="sm-13-chk"></label>
  <nav class="sm-13__nav">
    <div class="sm-13__links">
      <a class="sm-13__link sm-13__link--active" href="#"><span class="sm-13__link-chip"></span> Dashboard</a>
      <a class="sm-13__link" href="#"><span class="sm-13__link-chip"></span> Analytics</a>
      <a class="sm-13__link" href="#"><span class="sm-13__link-chip"></span> Content</a>
      <a class="sm-13__link" href="#"><span class="sm-13__link-chip"></span> Audience</a>
      <div class="sm-13__divider"></div>
      <a class="sm-13__link" href="#"><span class="sm-13__link-chip"></span> Help</a>
      <a class="sm-13__link" href="#"><span class="sm-13__link-chip"></span> Settings</a>
    </div>
    <div class="sm-13__user">
      <div class="sm-13__avatar">CK</div>
      <div>
        <div class="sm-13__uname">C. Kim</div>
        <div class="sm-13__urole">Publisher</div>
      </div>
    </div>
  </nav>
  <div class="sm-13__content">
    <div class="sm-13__heading">Checkbox Hack Menu</div>
    <div class="sm-13__sub">Uses a hidden <code>&lt;input type="checkbox"&gt;</code> and the CSS sibling combinator. No JavaScript at all.</div>
    <div class="sm-13__code-card">
      <span class="sel">#chk:checked ~ .nav</span> {<br>
      &nbsp;&nbsp;<span class="kw">transform</span>: translateX(0);<br>
      }<br>
      <span class="sel">#chk:checked ~ .burger span:nth-child(1)</span> {<br>
      &nbsp;&nbsp;<span class="kw">transform</span>: translateY(8px) rotate(45deg);<br>
      }
    </div>
    <div class="sm-13__grid">
      <div class="sm-13__card"><div class="sm-13__card-val">0 JS</div><div class="sm-13__card-lbl">Lines of JS</div></div>
      <div class="sm-13__card"><div class="sm-13__card-val">100%</div><div class="sm-13__card-lbl">Pure CSS</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-13, .sm-13 *, .sm-13 *::before, .sm-13 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-13 ::selection { background: #f97316; color: #fff; }
.sm-13 {
  --bg: #111113;
  --surface: #1c1c1f;
  --nav-bg: #18181b;
  --accent: #f97316;
  --accent2: #fb923c;
  --text: #f4f4f5;
  --muted: #71717a;
  --border: rgba(249,115,22,0.15);
  --font: 'Rubik', system-ui, sans-serif;
  --w: 270px;
  --dur: 0.38s;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
/* Hidden checkbox — the :checked hack engine */
#sm-13-chk { display: none; }
/* ======== BURGER LABEL ======== */
.sm-13__burger {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 100;
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background 0.2s;
}
.sm-13__burger:hover { background: rgba(249,115,22,0.15); }
/* Three bars — animated via :checked ~ sibling combinator */
.sm-13__burger span {
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur) cubic-bezier(0.4,0,0.2,1), opacity var(--dur), width var(--dur);
  transform-origin: center;
  display: block;
}
/* :checked ~ .burger targets the burger because both are children of .sm-13 */
#sm-13-chk:checked ~ .sm-13__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#sm-13-chk:checked ~ .sm-13__burger span:nth-child(2) { opacity: 0; width: 0; }
#sm-13-chk:checked ~ .sm-13__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ======== OVERLAY (backdrop close area) ======== */
.sm-13__overlay {
  position: absolute; inset: 0;
  z-index: 40;
  pointer-events: none;
  transition: background var(--dur);
}
#sm-13-chk:checked ~ .sm-13__overlay {
  background: rgba(0,0,0,0.5);
  pointer-events: all;
}
/* ======== DRAWER ======== */
.sm-13__nav {
  position: absolute;
  top: 0; left: 0;
  width: var(--w);
  height: 100%;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  z-index: 50;
  transform: translateX(calc(-1 * var(--w)));
  transition: transform var(--dur) cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  padding: 74px 0 20px;
}
#sm-13-chk:checked ~ .sm-13__nav {
  transform: translateX(0);
  box-shadow: 8px 0 32px rgba(0,0,0,0.5);
}
/* Orange top accent line */
.sm-13__nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), transparent);
}
.sm-13__links { flex: 1; padding: 0 10px; }
.sm-13__link {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.18s;
  margin-bottom: 4px;
}
.sm-13__link:hover { color: var(--text); background: rgba(249,115,22,0.1); }
.sm-13__link--active { color: var(--accent2); background: rgba(249,115,22,0.12); }
.sm-13__link-chip {
  width: 8px; height: 8px;
  background: var(--muted);
  border-radius: 2px;
  transition: background 0.18s;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.sm-13__link:hover .sm-13__link-chip { background: var(--accent2); }
.sm-13__link--active .sm-13__link-chip { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.sm-13__divider { height: 1px; background: var(--border); margin: 8px 14px; }
.sm-13__user {
  padding: 16px 18px 0;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.sm-13__avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #ef4444);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.sm-13__uname { font-size: 13px; font-weight: 700; }
.sm-13__urole { font-size: 10px; color: var(--muted); }
/* ======== MAIN CONTENT ======== */
.sm-13__content {
  padding: 80px 22px 22px;
}
.sm-13__heading { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.sm-13__sub {
  font-size: 13px; color: var(--muted);
  line-height: 1.7; margin-bottom: 22px;
}
/* Explain the checkbox hack technique */
.sm-13__code-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  font-family: monospace;
  color: #a1a1aa;
  line-height: 1.8;
  margin-bottom: 14px;
}
.sm-13__code-card .kw { color: var(--accent); }
.sm-13__code-card .sel { color: #60a5fa; }
.sm-13__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-13__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px;
}
.sm-13__card-val { font-size: 20px; font-weight: 700; color: var(--accent2); }
.sm-13__card-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sm-13__nav, .sm-13__overlay, .sm-13__burger span { transition: none; }
}
```

### 14. CSS Hover-Triggered Sidebar Drawer

**Type:** Pure CSS
**Description:** A side navigation for wide viewports that slides open when the user hovers over a persistent thin edge trigger strip, using only CSS parent :hover to expand the drawer.

**HTML:**
```html
<div class="sm-14">
  <!-- Hover-trigger wrapper -->
  <div class="sm-14__drawer-wrap">
    <div class="sm-14__trigger">
      <div class="sm-14__trigger-inner"></div>
    </div>
    <nav class="sm-14__nav">
      <div class="sm-14__brand">
        <div class="sm-14__logo">T</div>
        <div class="sm-14__brand-name">Tidal</div>
      </div>
      <div class="sm-14__links">
        <a class="sm-14__link sm-14__link--active" href="#"><span class="sm-14__link-icon">⬡</span> Overview</a>
        <a class="sm-14__link" href="#"><span class="sm-14__link-icon">◈</span> Streams</a>
        <a class="sm-14__link" href="#"><span class="sm-14__link-icon">▦</span> Channels <span class="sm-14__badge">8</span></a>
        <a class="sm-14__link" href="#"><span class="sm-14__link-icon">◉</span> Alerts <span class="sm-14__badge">2</span></a>
        <a class="sm-14__link" href="#"><span class="sm-14__link-icon">⬙</span> Settings</a>
      </div>
      <div class="sm-14__user">
        <div class="sm-14__avatar">RJ</div>
        <div>
          <div class="sm-14__uname">R. Jensen</div>
          <div class="sm-14__urole">Operator</div>
        </div>
      </div>
    </nav>
  </div>
  <div class="sm-14__main">
    <div class="sm-14__heading">Hover Drawer</div>
    <div class="sm-14__sub">Slide-out sidebar triggered purely by hovering the thin edge rail — no checkbox, no JS. Uses CSS <code>:hover</code> on a parent wrapper.</div>
    <div class="sm-14__hint">
      ← Hover the teal edge strip to open the menu
    </div>
    <div class="sm-14__grid">
      <div class="sm-14__card"><div class="sm-14__card-val">4.1k</div><div class="sm-14__card-lbl">Events / sec</div></div>
      <div class="sm-14__card"><div class="sm-14__card-val">8</div><div class="sm-14__card-lbl">Active Streams</div></div>
      <div class="sm-14__card"><div class="sm-14__card-val">0</div><div class="sm-14__card-lbl">Alerts</div></div>
      <div class="sm-14__card"><div class="sm-14__card-val">99.8%</div><div class="sm-14__card-lbl">Uptime</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-14, .sm-14 *, .sm-14 *::before, .sm-14 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-14 ::selection { background: #0f766e; color: #fff; }
.sm-14 {
  --bg: #0a1628;
  --surface: #0f1f35;
  --trigger-bg: #071020;
  --accent: #14b8a6;
  --accent2: #2dd4bf;
  --text: #e2e8f0;
  --muted: #475569;
  --border: rgba(20,184,166,0.15);
  --font: 'Mulish', system-ui, sans-serif;
  --w: 240px;
  --trigger-w: 32px;
  --dur: 0.4s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
/* Hot-zone trigger */
.sm-14__trigger {
  width: var(--trigger-w);
  min-height: 100vh;
  background: var(--trigger-bg);
  border-right: 1px solid rgba(20,184,166,0.35);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -1px 0 0 rgba(20,184,166,0.15), 1px 0 12px rgba(20,184,166,0.08);
}
/* Hover indicator arrow */
.sm-14__trigger::before {
  content: '›';
  color: var(--accent2);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  padding-left: 2px;
  text-shadow: 0 0 8px rgba(20,184,166,0.4);
  transition: color 0.2s, transform 0.2s, text-shadow 0.2s;
}
/* When trigger is hovered, expand the drawer */
.sm-14__trigger:hover::before { color: var(--accent); transform: scale(1.3); }
/* Hover zone + nav — use :has or a sibling approach */
/* Use a wrapper around trigger+nav for :hover on parent */
.sm-14__drawer-wrap {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--trigger-w);
  z-index: 20;
  transition: width var(--dur) var(--ease);
}
.sm-14__drawer-wrap:hover {
  width: calc(var(--trigger-w) + var(--w));
}
.sm-14__drawer-wrap:hover .sm-14__trigger::before {
  content: '‹';
  transform: scale(1.15);
  color: var(--accent2);
}
.sm-14__drawer-wrap:hover .sm-14__nav {
  transform: translateX(0);
  box-shadow: 8px 0 40px rgba(0,0,0,0.5);
}
.sm-14__trigger-inner {
  width: var(--trigger-w);
  height: 100%;
}
.sm-14__nav {
  position: absolute;
  top: 0;
  left: var(--trigger-w);
  width: var(--w);
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(calc(-1 * var(--w)));
  transition: transform var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
}
.sm-14__nav::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}
.sm-14__brand {
  padding: 0 18px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.sm-14__logo {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #000; font-size: 14px;
}
.sm-14__brand-name { font-size: 15px; font-weight: 800; }
.sm-14__links { flex: 1; padding: 0 10px; }
.sm-14__link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s;
  margin-bottom: 3px;
  white-space: nowrap;
}
.sm-14__link:hover { color: var(--text); background: rgba(20,184,166,0.1); }
.sm-14__link--active { color: var(--accent2); background: rgba(20,184,166,0.12); }
.sm-14__link-icon { font-size: 15px; flex-shrink: 0; }
.sm-14__badge {
  margin-left: auto;
  background: rgba(20,184,166,0.2);
  color: var(--accent2);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
}
.sm-14__user {
  padding: 14px 18px 0;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.sm-14__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.sm-14__uname { font-size: 12px; font-weight: 800; }
.sm-14__urole { font-size: 10px; color: var(--muted); }
/* Main */
.sm-14__main { flex: 1; padding: 24px 22px 22px 50px; }
.sm-14__heading { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.sm-14__sub { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
/* Tooltip hint */
.sm-14__hint {
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,184,166,0.08);
  border: 1px solid rgba(20,184,166,0.2);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--accent2);
  font-weight: 600;
  margin-bottom: 20px;
}
.sm-14__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-14__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px;
}
.sm-14__card-val { font-size: 20px; font-weight: 800; color: var(--accent2); }
.sm-14__card-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sm-14__nav, .sm-14__trigger::before { transition: none; }
}
```

### 15. Collapsible Sidebar Menu with CSS Transitions

**Type:** Pure CSS
**Description:** A sidebar that fluidly animates between full expanded width and icon-only collapsed state using transition:width, with text labels and badges fading out in sync.

**HTML:**
```html
<div class="sm-15">
  <input type="checkbox" class="sm-15__toggle" id="sm-15-toggle">
  <div class="sm-15__layout">
    <nav class="sm-15__nav">
      <div class="sm-15__brand">
        <div class="sm-15__logo">R</div>
        <span class="sm-15__brand-name">Recto</span>
      </div>
      <div class="sm-15__links">
        <a class="sm-15__link sm-15__link--active" href="#">
          <span class="sm-15__link-icon">⬡</span>
          <span class="sm-15__link-text">Dashboard</span>
        </a>
        <a class="sm-15__link" href="#">
          <span class="sm-15__link-icon">◈</span>
          <span class="sm-15__link-text">Analytics</span>
          <span class="sm-15__badge">9</span>
        </a>
        <a class="sm-15__link" href="#">
          <span class="sm-15__link-icon">▦</span>
          <span class="sm-15__link-text">Products</span>
        </a>
        <a class="sm-15__link" href="#">
          <span class="sm-15__link-icon">◉</span>
          <span class="sm-15__link-text">Orders</span>
          <span class="sm-15__badge">3</span>
        </a>
        <a class="sm-15__link" href="#">
          <span class="sm-15__link-icon">◬</span>
          <span class="sm-15__link-text">Customers</span>
        </a>
        <a class="sm-15__link" href="#">
          <span class="sm-15__link-icon">⬙</span>
          <span class="sm-15__link-text">Settings</span>
        </a>
      </div>
      <label class="sm-15__collapse-btn" for="sm-15-toggle" title="Collapse sidebar">‹</label>
      <div class="sm-15__user">
        <div class="sm-15__user-avatar">WP</div>
        <div class="sm-15__user-info">
          <div class="sm-15__user-name">W. Park</div>
          <div class="sm-15__user-role">Admin</div>
        </div>
      </div>
    </nav>
    <div class="sm-15__main">
      <div class="sm-15__heading">Dashboard</div>
      <div class="sm-15__sub">Click ‹ to collapse the sidebar from full width to icon-only. Driven by <code>transition: width</code> — zero JS.</div>
      <div class="sm-15__grid">
        <div class="sm-15__card"><div class="sm-15__card-val">$82k</div><div class="sm-15__card-lbl">Revenue</div></div>
        <div class="sm-15__card"><div class="sm-15__card-val">1,247</div><div class="sm-15__card-lbl">Orders</div></div>
        <div class="sm-15__card"><div class="sm-15__card-val">98%</div><div class="sm-15__card-lbl">Uptime</div></div>
        <div class="sm-15__card"><div class="sm-15__card-val">4.9★</div><div class="sm-15__card-lbl">Rating</div></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-15, .sm-15 *, .sm-15 *::before, .sm-15 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-15 ::selection { background: #e11d48; color: #fff; }
.sm-15 {
  --bg: #09090b;
  --surface: #141418;
  --nav-bg: #0f0f12;
  --accent: #e11d48;
  --accent2: #fb7185;
  --text: #f1f5f9;
  --muted: #52525b;
  --border: rgba(225,29,72,0.12);
  --font: 'Sora', system-ui, sans-serif;
  --full-w: 240px;
  --collapsed-w: 64px;
  --dur: 0.35s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  border-radius: 12px;
  overflow: hidden;
}
/* Toggle */
.sm-15__toggle { display: none; }
/* Sidebar */
.sm-15__nav {
  width: var(--full-w);
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition: width var(--dur) var(--ease);
  position: relative;
}
.sm-15__toggle:checked ~ .sm-15__layout .sm-15__nav {
  width: var(--collapsed-w);
}
/* Shell wrapper to allow :checked targeting */
.sm-15__layout {
  display: flex;
  flex: 1;
  min-width: 0;
}
/* Brand */
.sm-15__brand {
  display: flex; align-items: center;
  padding: 20px 10px 18px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  overflow: hidden;
  white-space: nowrap;
  gap: 0;
  min-width: 0;
}
.sm-15__logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff;
  flex-shrink: 0;
}
.sm-15__brand-name {
  font-size: 15px; font-weight: 800;
  margin-left: 10px;
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--dur) var(--ease), max-width var(--dur) var(--ease);
  max-width: 160px;
}
.sm-15__toggle:checked ~ .sm-15__layout .sm-15__brand-name {
  opacity: 0;
  max-width: 0;
}
/* Collapse toggle button */
.sm-15__collapse-btn {
  align-self: flex-end;
  margin: 8px 12px;
  width: 28px; height: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease), align-self var(--dur) var(--ease), margin var(--dur) var(--ease), background 0.2s, color 0.2s;
}
.sm-15__toggle:checked ~ .sm-15__layout .sm-15__collapse-btn {
  align-self: center;
  margin: 8px 0;
  transform: rotate(180deg);
}
.sm-15__collapse-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Links */
.sm-15__links { flex: 1; padding: 0 6px; }
.sm-15__link {
  display: flex; align-items: center;
  padding: 11px 7px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  gap: 0;
}
.sm-15__link:hover { color: var(--text); background: rgba(225,29,72,0.08); }
.sm-15__link--active { color: var(--accent2); background: rgba(225,29,72,0.1); }
.sm-15__link-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  border-radius: 8px;
  transition: background 0.2s;
}
.sm-15__link:hover .sm-15__link-icon { background: rgba(225,29,72,0.15); }
.sm-15__link--active .sm-15__link-icon { background: rgba(225,29,72,0.18); }
.sm-15__link-text {
  margin-left: 6px;
  opacity: 1;
  transition: opacity var(--dur) var(--ease), max-width var(--dur) var(--ease);
  max-width: 160px;
  overflow: hidden;
}
.sm-15__toggle:checked ~ .sm-15__layout .sm-15__link-text {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
}
.sm-15__badge {
  margin-left: auto;
  background: rgba(225,29,72,0.2);
  color: var(--accent2);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  transition: opacity var(--dur);
}
.sm-15__toggle:checked ~ .sm-15__layout .sm-15__badge { opacity: 0; }
/* Footer user */
.sm-15__user {
  padding: 14px 8px 18px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; overflow: hidden;
  transition: justify-content var(--dur) var(--ease);
}
.sm-15__toggle:checked ~ .sm-15__layout .sm-15__user { justify-content: center; padding: 14px 0 18px; }
.sm-15__user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sm-15__user-info {
  margin-left: 10px;
  opacity: 1;
  transition: opacity var(--dur), max-width var(--dur) var(--ease);
  max-width: 160px; white-space: nowrap; overflow: hidden;
}
.sm-15__toggle:checked ~ .sm-15__layout .sm-15__user-info { opacity: 0; max-width: 0; margin-left: 0; }
.sm-15__user-name { font-size: 12px; font-weight: 700; }
.sm-15__user-role { font-size: 10px; color: var(--muted); }
/* Main */
.sm-15__main { flex: 1; padding: 24px; min-width: 0; }
.sm-15__heading { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.sm-15__sub { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
.sm-15__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-15__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px;
}
.sm-15__card-val { font-size: 22px; font-weight: 800; color: var(--accent2); }
.sm-15__card-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sm-15__nav, .sm-15__brand-name, .sm-15__link-text,
  .sm-15__badge, .sm-15__user-info, .sm-15__collapse-btn { transition: none; }
}
```

### 16. CSS-Only Accordion Side Navigation

**Type:** Pure CSS
**Description:** A documentation-style sidebar where multiple independent accordion sections can be expanded or collapsed simultaneously using hidden checkboxes and max-height transitions.

**HTML:**
```html
<div class="sm-16">
  <nav class="sm-16__nav">
    <div class="sm-16__brand">
      <div class="sm-16__logo">D</div>
      <div>
        <span class="sm-16__brand-name">DocBase</span>
        <span class="sm-16__brand-version">v3.2</span>
      </div>
    </div>
    <div class="sm-16__search">
      <input type="text" class="sm-16__search-input" placeholder="Search docs…">
    </div>
    <a class="sm-16__flat" href="#"><span class="sm-16__flat-icon">⬡</span> Overview</a>
    <!-- Accordion 1 -->
    <div class="sm-16__section">
      <input type="checkbox" class="sm-16__acc-toggle" id="sm-16-a1" checked>
      <label class="sm-16__section-header" for="sm-16-a1">
        <span><span class="sm-16__section-header-icon">◈</span> Getting Started</span>
        <span class="sm-16__chevron">›</span>
      </label>
      <div class="sm-16__items">
        <a class="sm-16__item sm-16__item--active" href="#">Installation</a>
        <a class="sm-16__item" href="#">Configuration</a>
        <a class="sm-16__item" href="#">Quick Start</a>
        <a class="sm-16__item" href="#">Examples</a>
      </div>
    </div>
    <!-- Accordion 2 -->
    <div class="sm-16__section">
      <input type="checkbox" class="sm-16__acc-toggle" id="sm-16-a2">
      <label class="sm-16__section-header" for="sm-16-a2">
        <span><span class="sm-16__section-header-icon">▦</span> Core Concepts</span>
        <span class="sm-16__chevron">›</span>
      </label>
      <div class="sm-16__items">
        <a class="sm-16__item" href="#">Architecture</a>
        <a class="sm-16__item" href="#">Data Flow</a>
        <a class="sm-16__item" href="#">State Management</a>
        <a class="sm-16__item" href="#">Routing</a>
      </div>
    </div>
    <!-- Accordion 3 -->
    <div class="sm-16__section">
      <input type="checkbox" class="sm-16__acc-toggle" id="sm-16-a3">
      <label class="sm-16__section-header" for="sm-16-a3">
        <span><span class="sm-16__section-header-icon">◉</span> API Reference</span>
        <span class="sm-16__chevron">›</span>
      </label>
      <div class="sm-16__items">
        <a class="sm-16__item" href="#">Endpoints <span class="sm-16__item-badge">48</span></a>
        <a class="sm-16__item" href="#">Authentication</a>
        <a class="sm-16__item" href="#">Webhooks</a>
        <a class="sm-16__item" href="#">Rate Limits</a>
      </div>
    </div>
    <!-- Accordion 4 -->
    <div class="sm-16__section">
      <input type="checkbox" class="sm-16__acc-toggle" id="sm-16-a4">
      <label class="sm-16__section-header" for="sm-16-a4">
        <span><span class="sm-16__section-header-icon">◬</span> Guides</span>
        <span class="sm-16__chevron">›</span>
      </label>
      <div class="sm-16__items">
        <a class="sm-16__item" href="#">Deployment</a>
        <a class="sm-16__item" href="#">Performance</a>
        <a class="sm-16__item" href="#">Security</a>
      </div>
    </div>
    <a class="sm-16__flat" href="#"><span class="sm-16__flat-icon">⬙</span> Changelog</a>
  </nav>
  <div class="sm-16__main">
    <div class="sm-16__heading">Documentation</div>
    <div class="sm-16__sub">CSS-only accordion sidebar: each section uses a hidden <code>checkbox</code> and <code>max-height</code> transition. Clicking a header expands/collapses its items independently.</div>
    <div class="sm-16__docs">
      <div class="sm-16__doc-card">
        <div class="sm-16__doc-icon">📦</div>
        <div>
          <div class="sm-16__doc-title">Installation Guide</div>
          <div class="sm-16__doc-sub">Set up your environment in under 5 minutes</div>
        </div>
      </div>
      <div class="sm-16__doc-card">
        <div class="sm-16__doc-icon">⚙️</div>
        <div>
          <div class="sm-16__doc-title">Configuration Reference</div>
          <div class="sm-16__doc-sub">All available options with examples</div>
        </div>
      </div>
      <div class="sm-16__doc-card">
        <div class="sm-16__doc-icon">🚀</div>
        <div>
          <div class="sm-16__doc-title">Quick Start Tutorial</div>
          <div class="sm-16__doc-sub">Build your first integration in 10 steps</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sm-16, .sm-16 *, .sm-16 *::before, .sm-16 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.sm-16 ::selection { background: #2563eb; color: #fff; }
.sm-16 {
  --bg: #f0f4ff;
  --surface: #fff;
  --nav-bg: #fff;
  --accent: #2563eb;
  --accent2: #60a5fa;
  --text: #0f172a;
  --muted: #94a3b8;
  --muted2: #64748b;
  --border: #e2e8f0;
  --border-active: rgba(37,99,235,0.15);
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  border-radius: 12px;
  overflow: hidden;
}
/* Accordion hidden radio/checkboxes */
.sm-16__acc-toggle { display: none; }
/* Sidebar */
.sm-16__nav {
  width: 240px;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.sm-16__nav::-webkit-scrollbar { width: 3px; }
.sm-16__nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sm-16__brand {
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.sm-16__logo {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 14px;
}
.sm-16__brand-name { font-size: 14px; font-weight: 800; }
.sm-16__brand-version {
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
  font-weight: 500;
}
/* Search bar */
.sm-16__search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sm-16__search-input {
  width: 100%;
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
}
.sm-16__search-input:focus { border-color: var(--accent2); }
/* Accordion section */
.sm-16__section { border-bottom: 1px solid var(--border); }
/* Section header — label acts as click target */
.sm-16__section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted2);
}
.sm-16__section-header:hover { background: rgba(37,99,235,0.04); }
.sm-16__section-header-icon { font-size: 14px; }
/* Chevron */
.sm-16__chevron {
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display: inline-block;
}
.sm-16__acc-toggle:checked + .sm-16__section-header .sm-16__chevron { transform: rotate(90deg); }
.sm-16__acc-toggle:checked + .sm-16__section-header { color: var(--accent); }
/* Collapsible sub-items */
.sm-16__items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
}
.sm-16__acc-toggle:checked + .sm-16__section-header + .sm-16__items {
  max-height: 400px;
}
/* Individual link items */
.sm-16__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 36px;
  color: var(--muted2);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.15s;
  position: relative;
}
.sm-16__item::before {
  content: '';
  position: absolute;
  left: 20px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.15s, transform 0.15s;
}
.sm-16__item:hover {
  color: var(--accent);
  background: rgba(37,99,235,0.05);
}
.sm-16__item:hover::before { background: var(--accent); transform: translateY(-50%) scale(1.4); }
.sm-16__item--active {
  color: var(--accent);
  background: rgba(37,99,235,0.07);
}
.sm-16__item--active::before { background: var(--accent); }
.sm-16__item-badge {
  margin-left: auto;
  background: rgba(37,99,235,0.12);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}
/* Flat link */
.sm-16__flat {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  color: var(--muted2);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.15s;
  border-bottom: 1px solid var(--border);
}
.sm-16__flat:hover { color: var(--accent); background: rgba(37,99,235,0.04); }
.sm-16__flat-icon { font-size: 14px; }
/* Main */
.sm-16__main { flex: 1; padding: 24px; }
.sm-16__heading { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.sm-16__sub { font-size: 13px; color: var(--muted2); line-height: 1.7; margin-bottom: 22px; }
.sm-16__docs { display: flex; flex-direction: column; gap: 10px; }
.sm-16__doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sm-16__doc-card:hover {
  border-color: var(--accent2);
  box-shadow: 0 2px 12px rgba(37,99,235,0.08);
}
.sm-16__doc-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(37,99,235,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.sm-16__doc-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.sm-16__doc-sub { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .sm-16__items, .sm-16__chevron { transition: none; }
}
```

---
## 23 CSS Sidebar Layouts

URL: https://codefronts.com/layouts/css-sidebar-layouts/
Description: 23 hand-coded CSS sidebar layouts — fixed, collapsible, off-canvas, dual, mini icon rail, two-pane mail, three-pane workspace and more. Accessible, copy-paste ready.
Demo count: 23

### 01. Fixed Sidebar

**Type:** Pure CSS
**Description:** Apple-Pro premium — brushed-aluminium sidebar on a near-black slate, system-blue accents and SF-style typography. The classic admin shell with a luxe finish. Sidebar is sticky via `position: sticky`; main content scrolls.

**HTML:**
```html
<div class="sb-fix">
  <aside class="sb-fix-side" aria-label="Primary">
    <div class="sb-fix-brand">
      <span class="sb-fix-mark" aria-hidden="true"></span>
      <div>
        <strong>Atelier</strong>
        <em>Workspace</em>
      </div>
    </div>
    <div class="sb-fix-divider"></div>
    <nav aria-label="Primary">
      <span class="sb-fix-section">General</span>
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-fix-i" aria-hidden="true">●</span>Overview</a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-fix-i" aria-hidden="true">◔</span>Projects<span class="sb-fix-badge"
              >8</span
            ></a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-fix-i" aria-hidden="true">◇</span>People</a>
        </li>
      </ul>
      <span class="sb-fix-section">Workspace</span>
      <ul>
        <li>
          <a href="#!"><span class="sb-fix-i" aria-hidden="true">◐</span>Reports</a>
        </li>
        <li>
          <a href="#!"><span class="sb-fix-i" aria-hidden="true">◈</span>Integrations</a>
        </li>
        <li>
          <a href="#!"><span class="sb-fix-i" aria-hidden="true">◉</span>Settings</a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="sb-fix-main">
    <header class="sb-fix-head">
      <div>
        <span class="sb-fix-crumb">Workspace · Q4 review</span>
        <h2>Overview</h2>
      </div>
      <div class="sb-fix-actions">
        <button type="button" class="sb-fix-btn">Export</button>
        <button type="button" class="sb-fix-btn sb-fix-btn-pri">+ New</button>
      </div>
    </header>
    <div class="sb-fix-cards">
      <article class="sb-fix-card">
        <span class="sb-fix-card-label">Active users</span>
        <strong>24,812</strong>
        <span class="sb-fix-card-delta">↑ 12.4%</span>
      </article>
      <article class="sb-fix-card">
        <span class="sb-fix-card-label">Revenue · MTD</span>
        <strong>$148.2k</strong>
        <span class="sb-fix-card-delta">↑ 7.1%</span>
      </article>
      <article class="sb-fix-card">
        <span class="sb-fix-card-label">Uptime · 30d</span>
        <strong>99.97%</strong>
        <span class="sb-fix-card-delta sb-fix-card-flat">— stable</span>
      </article>
    </div>
    <section class="sb-fix-chart">
      <header>
        <strong>Engagement</strong>
        <span>Last 30 days</span>
      </header>
      <svg viewBox="0 0 320 70" preserveAspectRatio="none" aria-hidden="true">
        <defs>
          <linearGradient id="sb-fix-fill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="#0a84ff" stop-opacity="0.32" />
            <stop offset="100%" stop-color="#0a84ff" stop-opacity="0" />
          </linearGradient>
        </defs>
        <path
          d="M0,55 L24,48 L48,52 L72,40 L96,44 L120,30 L144,36 L168,22 L192,28 L216,18 L240,24 L264,12 L288,18 L320,8 L320,70 L0,70 Z"
          fill="url(#sb-fix-fill)"
        />
        <path
          d="M0,55 L24,48 L48,52 L72,40 L96,44 L120,30 L144,36 L168,22 L192,28 L216,18 L240,24 L264,12 L288,18 L320,8"
          fill="none"
          stroke="#0a84ff"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </section>
  </main>
</div>
```

**CSS:**
```css
.sb-fix {
  display: grid; grid-template-columns: 248px 1fr;
  min-height: 480px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  background: #1c1c1e; color: #f5f5f7;
  border-radius: 14px; overflow: hidden;
  letter-spacing: -0.01em;
}
.sb-fix-side {
  position: sticky; top: 0; align-self: start;
  height: 100%; min-height: 480px;
  padding: 18px 14px;
  background: linear-gradient(180deg, #2c2c2e 0%, #232325 100%);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
  display: flex; flex-direction: column; gap: 12px;
}
.sb-fix-brand { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px; }
.sb-fix-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #0a84ff 0%, #5ac8fa 100%);
  position: relative; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(10,132,255,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.sb-fix-mark::after {
  content: ''; position: absolute; inset: 6px;
  border: 2px solid rgba(255,255,255,0.85); border-radius: 4px;
  border-bottom-color: transparent; border-right-color: transparent;
  transform: rotate(-45deg);
}
.sb-fix-brand strong { display: block; font-size: 14px; font-weight: 600; color: #f5f5f7; }
.sb-fix-brand em { display: block; font-size: 11px; font-style: normal; color: #98989f; margin-top: -1px; }
.sb-fix-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0 2px; }
.sb-fix-section { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #98989f; padding: 0 6px; margin-top: 6px; }
.sb-fix-side ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-fix-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: #d6d6d8; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sb-fix-side a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sb-fix-side a[aria-current="page"] {
  background: rgba(10,132,255,0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(10,132,255,0.4);
}
.sb-fix-i { font-size: 11px; width: 14px; text-align: center; flex-shrink: 0; color: #5ac8fa; }
.sb-fix-side a[aria-current="page"] .sb-fix-i { color: #0a84ff; }
.sb-fix-badge { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: rgba(255,69,58,0.85); color: #fff; }
.sb-fix-main { padding: 26px 28px; overflow-y: auto; background: #1c1c1e; }
.sb-fix-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.sb-fix-crumb { font-size: 11px; color: #98989f; letter-spacing: 0.02em; }
.sb-fix-main h2 { margin: 4px 0 0; font-size: 26px; font-weight: 700; color: #f5f5f7; letter-spacing: -0.02em; }
.sb-fix-actions { display: flex; gap: 8px; }
.sb-fix-btn { padding: 6px 13px; border-radius: 7px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, transform 0.1s; background: rgba(255,255,255,0.08); color: #f5f5f7; border: 1px solid rgba(255,255,255,0.1); }
.sb-fix-btn:hover { background: rgba(255,255,255,0.14); }
.sb-fix-btn:active { transform: translateY(0.5px); }
.sb-fix-btn-pri { background: linear-gradient(180deg, #0a84ff 0%, #0866cc 100%); color: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 6px rgba(10,132,255,0.4); }
.sb-fix-btn-pri:hover { background: linear-gradient(180deg, #1c8eff 0%, #0a73e0 100%); }
.sb-fix-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.sb-fix-card { padding: 14px 14px 12px; background: #2c2c2e; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.sb-fix-card-label { font-size: 11px; color: #98989f; font-weight: 500; }
.sb-fix-card strong { font-size: 22px; font-weight: 700; color: #f5f5f7; letter-spacing: -0.02em; }
.sb-fix-card-delta { font-size: 10.5px; color: #30d158; font-weight: 600; }
.sb-fix-card-flat { color: #98989f; }
.sb-fix-chart { padding: 14px 14px 8px; background: #2c2c2e; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
.sb-fix-chart header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sb-fix-chart strong { font-size: 12.5px; font-weight: 600; color: #f5f5f7; }
.sb-fix-chart header span { font-size: 10.5px; color: #98989f; }
.sb-fix-chart svg { width: 100%; height: 70px; display: block; }
@media (max-width: 720px) {
  .sb-fix { grid-template-columns: 1fr; }
  .sb-fix-side { position: static; min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .sb-fix-cards { grid-template-columns: 1fr; }
  .sb-fix-head { flex-direction: column; align-items: flex-start; }
}
```

### 02. Collapsible Sidebar

**Type:** Pure CSS
**Description:** Sunset palette — coral fading into magenta and ember orange, with a soft cream content area. Click the toggle to collapse from 240px to 64px. Pure CSS via <code>:has(:checked)</code> on the grid template; labels fade, icons stay glowing.

**HTML:**
```html
<div class="sb-col">
  <input id="sb-col-t" class="sb-col-cb" type="checkbox" aria-label="Toggle sidebar" />
  <aside class="sb-col-side" aria-label="Primary">
    <label class="sb-col-toggle" for="sb-col-t" aria-controls="sb-col-nav">
      <span class="sb-col-burger" aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sb-col-tlabel">Collapse</span>
    </label>
    <a class="sb-col-brand" href="#!">
      <span class="sb-col-mark" aria-hidden="true"></span>
      <span class="sb-col-name">Ember<small>Studios</small></span>
    </a>
    <nav id="sb-col-nav" aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-col-ico" aria-hidden="true">◉</span
            ><span class="sb-col-lbl">Dashboard</span></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-col-ico" aria-hidden="true">▣</span
            ><span class="sb-col-lbl">Projects</span></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-col-ico" aria-hidden="true">◌</span
            ><span class="sb-col-lbl">Crew</span></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-col-ico" aria-hidden="true">▤</span
            ><span class="sb-col-lbl">Library</span></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-col-ico" aria-hidden="true">⚙</span
            ><span class="sb-col-lbl">Settings</span></a
          >
        </li>
      </ul>
    </nav>
  </aside>
  <main class="sb-col-main">
    <span class="sb-col-eye">▸ Workspace</span>
    <h2>Slow burn,<br />bright ideas.</h2>
    <p>
      Toggle the burger to collapse the sidebar. No JavaScript — <code>:has(:checked)</code> on the
      grid template animates the columns; labels fade and the burger morphs into a chevron.
    </p>
    <div class="sb-col-cards">
      <div class="sb-col-c"><strong>184</strong><span>Ideas this week</span></div>
      <div class="sb-col-c"><strong>4.2k</strong><span>Followers</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-col {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #fff5ee; color: #2a0e2c;
  border-radius: 16px; overflow: hidden;
  transition: grid-template-columns 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.sb-col:has(.sb-col-cb:checked) { grid-template-columns: 64px 1fr; }
.sb-col-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-col:has(.sb-col-cb:focus-visible) .sb-col-toggle { outline: 2px solid #fff; outline-offset: 2px; }
.sb-col-side {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(160deg, #ff7a4d 0%, #ec1d8c 55%, #6a0a8c 100%);
  color: #fff;
  padding: 16px 12px; display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.18);
  position: relative;
}
.sb-col-side::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 110%, rgba(255,213,128,0.55), transparent 60%);
  pointer-events: none;
}
.sb-col-toggle {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; cursor: pointer; user-select: none;
  backdrop-filter: blur(8px);
  transition: background 0.15s;
}
.sb-col-toggle:hover { background: rgba(255,255,255,0.28); }
.sb-col-burger { display: inline-flex; flex-direction: column; gap: 3px; width: 14px; flex-shrink: 0; }
.sb-col-burger i { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.22s, opacity 0.22s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(2) { opacity: 0; }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.sb-col-tlabel { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; transition: opacity 0.18s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-tlabel { opacity: 0; pointer-events: none; }
.sb-col-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; text-decoration: none; }
.sb-col-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #ffd580 0%, #ff7a4d 50%, #ec1d8c 100%); box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 4px 14px rgba(236,29,140,0.45); }
.sb-col-name { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; transition: opacity 0.18s; white-space: nowrap; }
.sb-col-name small { display: block; font-size: 9.5px; color: #ffd580; font-weight: 700; letter-spacing: 0.16em; margin-top: 3px; text-transform: uppercase; }
.sb-col:has(.sb-col-cb:checked) .sb-col-name { opacity: 0; pointer-events: none; }
.sb-col-side ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-col-side a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.86); text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.sb-col-side a:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.22); }
.sb-col-side a[aria-current="page"] {
  background: rgba(255,255,255,0.95); color: #6a0a8c;
  box-shadow: 0 6px 18px rgba(106,10,140,0.3);
}
.sb-col-ico { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.sb-col-side a[aria-current="page"] .sb-col-ico { color: #ec1d8c; }
.sb-col-lbl { white-space: nowrap; overflow: hidden; transition: opacity 0.18s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-lbl { opacity: 0; pointer-events: none; }
.sb-col-main {
  padding: 32px 36px; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  background:
    radial-gradient(60% 80% at 100% 0%, #ffe4d6 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, #fff1d6 0%, transparent 60%),
    #fff5ee;
}
.sb-col-eye { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; color: #ec1d8c; text-transform: uppercase; }
.sb-col-main h2 {
  margin: 0; font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 0.96;
  background: linear-gradient(135deg, #ff7a4d 0%, #ec1d8c 60%, #6a0a8c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.03em;
}
.sb-col-main p { margin: 0; font-size: 13.5px; color: #5a3a52; line-height: 1.6; max-width: 460px; }
.sb-col-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6a0a8c; background: rgba(236,29,140,0.12); padding: 1px 6px; border-radius: 4px; }
.sb-col-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px; margin-top: 6px; }
.sb-col-c { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(236,29,140,0.18); box-shadow: 0 6px 18px rgba(236,29,140,0.08); display: flex; flex-direction: column; gap: 4px; }
.sb-col-c strong { font-size: 24px; font-weight: 800; color: #2a0e2c; letter-spacing: -0.02em; line-height: 1; }
.sb-col-c span { font-size: 11px; color: #8c5a78; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .sb-col, .sb-col-tlabel, .sb-col-lbl, .sb-col-burger i, .sb-col-name { transition: none; }
}
@media (max-width: 720px) {
  .sb-col, .sb-col:has(.sb-col-cb:checked) { grid-template-columns: 64px 1fr; }
  .sb-col-cards { grid-template-columns: 1fr; }
}
```

### 03. Off-canvas Drawer

**Type:** Pure CSS
**Description:** Cyberpunk 2099 — pitch black with electric cyan and hot pink, glitching scanlines, monospace HUD type. Tap the burger to slide the drawer in; the backdrop blurs and dims the page. <code>:has(:checked)</code> drives the transform; clicking the backdrop closes.

**HTML:**
```html
<div class="sb-off">
  <input id="sb-off-t" class="sb-off-cb" type="checkbox" aria-label="Toggle menu" />
  <header class="sb-off-bar">
    <label class="sb-off-burger" for="sb-off-t" aria-controls="sb-off-drawer">
      <span class="sb-off-burger-i" aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sr-only">Open menu</span>
    </label>
    <span class="sb-off-title">SYS_OS<small>v2099</small></span>
    <span class="sb-off-status" aria-hidden="true">
      <span class="sb-off-blink"></span>
      ONLINE
    </span>
  </header>
  <main class="sb-off-main">
    <span class="sb-off-eye">▸ TERMINAL · USER 0x7F</span>
    <h2>Tap to<br />jack in.</h2>
    <p>
      Tap the burger to slide the drawer in over the page. The backdrop blurs everything; tap it or
      the × to dismiss. <code>:has(:checked)</code> drives the slide.
    </p>
    <div class="sb-off-stat">
      <span><em>CPU</em><b>87%</b></span>
      <span><em>NET</em><b>1.2g</b></span>
      <span><em>MEM</em><b>4.7G</b></span>
    </div>
  </main>
  <label class="sb-off-backdrop" for="sb-off-t" aria-hidden="true"></label>
  <aside id="sb-off-drawer" class="sb-off-drawer" aria-label="Primary">
    <header>
      <strong>// MAIN_MENU</strong>
      <label class="sb-off-close" for="sb-off-t" aria-label="Close menu">[ × ]</label>
    </header>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page" data-key="01"><em>01</em>Home</a>
        </li>
        <li>
          <a href="#!" data-key="02"><em>02</em>Projects</a>
        </li>
        <li>
          <a href="#!" data-key="03"><em>03</em>Library</a>
        </li>
        <li>
          <a href="#!" data-key="04"><em>04</em>Settings</a>
        </li>
        <li>
          <a href="#!" data-key="05"><em>05</em>Sign out</a>
        </li>
      </ul>
    </nav>
    <footer>↩ ESC to close</footer>
  </aside>
</div>
```

**CSS:**
```css
.sb-off {
  position: relative; min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, sans-serif;
  background: #050008; color: #d6f7ff;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.sb-off::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(50% 40% at 80% 20%, rgba(0,229,255,0.18), transparent 70%),
    radial-gradient(50% 50% at 20% 90%, rgba(255,0,140,0.18), transparent 70%);
}
.sb-off::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,229,255,0.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.sb-off-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-off:has(.sb-off-cb:focus-visible) .sb-off-burger { outline: 2px solid #00e5ff; outline-offset: 2px; }
.sb-off-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(0,229,255,0.4);
  box-shadow: 0 0 24px rgba(0,229,255,0.15);
}
.sb-off-burger {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.5);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0,229,255,0.2), 0 0 12px rgba(0,229,255,0.25);
  transition: background 0.15s, box-shadow 0.15s;
}
.sb-off-burger:hover { background: rgba(0,229,255,0.1); box-shadow: inset 0 0 18px rgba(0,229,255,0.3), 0 0 18px rgba(0,229,255,0.45); }
.sb-off-burger-i { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.sb-off-burger-i i { display: block; height: 2px; background: #00e5ff; box-shadow: 0 0 6px #00e5ff; }
.sb-off-title { font-family: 'Courier New', monospace; font-weight: 800; font-size: 14px; letter-spacing: 0.16em; color: #fff; }
.sb-off-title small { font-size: 9.5px; color: #ff0090; letter-spacing: 0.2em; margin-left: 4px; text-shadow: 0 0 8px rgba(255,0,144,0.7); }
.sb-off-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: 'Courier New', monospace; font-size: 10.5px; letter-spacing: 0.16em; color: #00ff9c; padding: 4px 10px; border: 1px solid rgba(0,255,156,0.4); border-radius: 12px; }
.sb-off-blink { width: 6px; height: 6px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 8px #00ff9c; animation: sb-off-blink 1.4s ease-in-out infinite; }
@keyframes sb-off-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .sb-off-blink { animation: none; } }
.sb-off-main { position: relative; z-index: 2; flex: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; }
.sb-off-eye { font-family: 'Courier New', monospace; font-size: 11.5px; letter-spacing: 0.2em; color: #00e5ff; text-shadow: 0 0 8px rgba(0,229,255,0.6); }
.sb-off-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92;
  color: #fff; letter-spacing: -0.03em;
  text-shadow: -2px 0 0 rgba(255,0,144,0.7), 2px 0 0 rgba(0,229,255,0.7), 0 0 30px rgba(255,255,255,0.4);
}
.sb-off-main p { margin: 0; font-size: 13.5px; color: rgba(214,247,255,0.85); line-height: 1.6; max-width: 460px; }
.sb-off-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #ff0090; background: rgba(255,0,144,0.1); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255,0,144,0.4); }
.sb-off-stat { display: flex; gap: 14px; margin-top: auto; font-family: 'Courier New', monospace; }
.sb-off-stat span { padding: 8px 14px; border: 1px solid rgba(0,229,255,0.4); border-radius: 4px; background: rgba(0,229,255,0.06); display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.sb-off-stat em { font-style: normal; font-size: 9.5px; color: #00e5ff; letter-spacing: 0.18em; }
.sb-off-stat b { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.04em; }
.sb-off-backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(5,0,8,0.7);
  backdrop-filter: blur(8px) saturate(0.6);
  -webkit-backdrop-filter: blur(8px) saturate(0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
  z-index: 3;
}
.sb-off:has(.sb-off-cb:checked) .sb-off-backdrop { opacity: 1; pointer-events: auto; }
.sb-off-drawer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 280px;
  background: linear-gradient(180deg, rgba(8,0,16,0.95) 0%, rgba(20,0,32,0.95) 100%);
  border-right: 2px solid #00e5ff;
  box-shadow: 4px 0 32px rgba(0,229,255,0.4), inset -1px 0 0 rgba(255,0,144,0.5);
  transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 4;
  padding: 18px 14px; display: flex; flex-direction: column; gap: 12px;
}
.sb-off:has(.sb-off-cb:checked) .sb-off-drawer { transform: translateX(0); }
.sb-off-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; border-bottom: 1px dashed rgba(0,229,255,0.4); font-family: 'Courier New', monospace; }
.sb-off-drawer header strong { font-size: 12px; color: #00e5ff; font-weight: 800; letter-spacing: 0.16em; text-shadow: 0 0 8px rgba(0,229,255,0.6); }
.sb-off-close { font-family: 'Courier New', monospace; font-size: 12px; font-weight: 800; color: #ff0090; cursor: pointer; padding: 2px 8px; user-select: none; letter-spacing: 0.1em; transition: text-shadow 0.15s; }
.sb-off-close:hover { text-shadow: 0 0 8px #ff0090; }
.sb-off-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-off-drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: #d6f7ff; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.16s, color 0.16s, border-color 0.16s, text-shadow 0.16s;
}
.sb-off-drawer a:hover { background: rgba(0,229,255,0.08); border-left-color: #00e5ff; color: #fff; text-shadow: 0 0 8px rgba(0,229,255,0.7); }
.sb-off-drawer a[aria-current="page"] { background: rgba(255,0,144,0.12); border-left-color: #ff0090; color: #fff; text-shadow: 0 0 10px rgba(255,0,144,0.7); }
.sb-off-drawer a em { font-style: normal; font-size: 11px; color: #ff0090; font-weight: 800; opacity: 0.7; }
.sb-off-drawer a[aria-current="page"] em { color: #ffd700; opacity: 1; text-shadow: 0 0 8px #ffd700; }
.sb-off-drawer footer { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(0,229,255,0.3); font-family: 'Courier New', monospace; font-size: 10.5px; color: rgba(0,229,255,0.7); letter-spacing: 0.16em; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .sb-off-drawer, .sb-off-backdrop { transition: none; }
}
```

### 04. Right-aligned Sidebar

**Type:** Pure CSS
**Description:** Bauhaus poster — cream canvas, cobalt-blue right rail, primary-red and lemon shapes composing into a designer's inspector pane. Sidebar on the right via <code>1fr 260px</code>. Real <code>&lt;dl&gt;</code> with <code>&lt;dt&gt;</code>/<code>&lt;dd&gt;</code> for the property pairs.

**HTML:**
```html
<div class="sb-rt">
  <main class="sb-rt-main">
    <span class="sb-rt-eye">No. 47 · 1923</span>
    <h2>Form follows<br /><em>function.</em></h2>
    <p>
      The sidebar sits on the right — design-tool convention (Figma, Sketch). Layout is just
      <code>1fr 260px</code>; native <code>&lt;dl&gt;</code> exposes property pairs to assistive
      tech.
    </p>
    <div class="sb-rt-canvas" aria-label="Composition">
      <span class="sb-rt-circ" aria-hidden="true"></span>
      <span class="sb-rt-sq" aria-hidden="true"></span>
      <span class="sb-rt-tri" aria-hidden="true"></span>
    </div>
  </main>
  <aside class="sb-rt-side" aria-label="Properties">
    <span class="sb-rt-rule" aria-hidden="true"></span>
    <h3>Properties</h3>
    <dl>
      <dt>Width</dt>
      <dd>320 px</dd>
      <dt>Height</dt>
      <dd>180 px</dd>
      <dt>Fill</dt>
      <dd><span class="sb-rt-sw" aria-hidden="true"></span>#1840d2</dd>
      <dt>Stroke</dt>
      <dd>2 px solid</dd>
      <dt>Radius</dt>
      <dd>0 px</dd>
      <dt>Opacity</dt>
      <dd>100 %</dd>
    </dl>
    <button type="button" class="sb-rt-cta">Apply →</button>
  </aside>
</div>
```

**CSS:**
```css
.sb-rt {
  display: grid; grid-template-columns: 1fr 260px;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f4ecdb;
  color: #1a1a1a;
  border-radius: 0;
  overflow: hidden;
  border: 4px solid #1a1a1a;
}
.sb-rt-main { position: relative; padding: 36px 40px; display: flex; flex-direction: column; gap: 18px; }
.sb-rt-main::before {
  content: ''; position: absolute; top: 24px; right: 24px;
  width: 14px; height: 14px; border-radius: 50%; background: #c43a2c;
}
.sb-rt-eye { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; color: #c43a2c; text-transform: uppercase; }
.sb-rt-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92;
  color: #1a1a1a; letter-spacing: -0.03em;
}
.sb-rt-main h2 em { font-style: italic; color: #1840d2; font-weight: 800; }
.sb-rt-main p { margin: 0; font-size: 13.5px; color: #3d3d3d; line-height: 1.65; max-width: 460px; font-weight: 500; }
.sb-rt-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #1840d2; background: rgba(24,64,210,0.1); padding: 1px 6px; border-radius: 0; font-weight: 700; }
.sb-rt-canvas {
  position: relative;
  flex: 1; min-height: 200px;
  border: 3px solid #1a1a1a;
  background: #fdf5e2;
  margin-top: 4px;
  overflow: hidden;
}
.sb-rt-circ {
  position: absolute; top: 22%; left: 12%;
  width: 90px; height: 90px; border-radius: 50%;
  background: #c43a2c;
  border: 3px solid #1a1a1a;
}
.sb-rt-sq {
  position: absolute; bottom: 14%; left: 32%;
  width: 80px; height: 80px;
  background: #1840d2;
  border: 3px solid #1a1a1a;
}
.sb-rt-tri {
  position: absolute; top: 18%; right: 14%;
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid #ffd400;
  filter: drop-shadow(0 0 0 #1a1a1a);
}
.sb-rt-tri::after {
  content: ''; position: absolute; left: -50px; top: 0;
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid #1a1a1a;
  z-index: -1;
  transform: scale(1.06);
  transform-origin: bottom;
}
.sb-rt-side {
  position: relative;
  background: #1840d2; color: #f4ecdb;
  border-left: 4px solid #1a1a1a;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.sb-rt-rule { display: block; height: 4px; width: 60%; background: #ffd400; margin-bottom: 4px; }
.sb-rt-side h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
.sb-rt-side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 12.5px; padding-top: 8px; border-top: 2px solid rgba(244,236,219,0.4); }
.sb-rt-side dt { color: #ffd400; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; align-self: center; }
.sb-rt-side dd { margin: 0; color: #f4ecdb; display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.sb-rt-sw { width: 14px; height: 14px; background: #1840d2; border: 2px solid #f4ecdb; flex-shrink: 0; }
.sb-rt-cta {
  margin-top: auto;
  padding: 12px 16px;
  background: #ffd400; color: #1a1a1a;
  border: 3px solid #1a1a1a;
  font: inherit; font-size: 13px; font-weight: 900; letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 4px 4px 0 #1a1a1a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-rt-cta:hover { background: #ffe44a; }
.sb-rt-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1a1a1a; }
@media (max-width: 720px) {
  .sb-rt { grid-template-columns: 1fr; }
  .sb-rt-side { border-left: 0; border-top: 4px solid #1a1a1a; }
}
```

### 05. Two-pane Mail

**Type:** Pure CSS
**Description:** Editorial newspaper — off-white paper, ink-black serif headlines, spot-red active state. Three-column shell — folder sidebar, message list, reading pane. CSS grid with three columns, each scrolling independently. The mail client a print designer would lay out.

**HTML:**
```html
<div class="sb-mail">
  <aside class="sb-mail-folders" aria-label="Folders">
    <header>
      <strong>The Inbox</strong>
      <small>Vol. XII · No. 47</small>
    </header>
    <nav aria-label="Folders">
      <ul>
        <li>
          <a href="#!" aria-current="page">Inbox<span>12</span></a>
        </li>
        <li><a href="#!">Starred</a></li>
        <li>
          <a href="#!">Drafts<span class="sb-mail-muted">3</span></a>
        </li>
        <li><a href="#!">Sent</a></li>
        <li><a href="#!">Archive</a></li>
        <li><a href="#!">Trash</a></li>
      </ul>
    </nav>
    <footer>
      <span class="sb-mail-bullet" aria-hidden="true">•</span>
      Editorial since 1923
    </footer>
  </aside>
  <section class="sb-mail-list" aria-label="Message list">
    <header class="sb-mail-list-head">
      <h3>This morning</h3>
      <span>4 unread</span>
    </header>
    <article class="sb-mail-item">
      <strong>Anya Petrova</strong>
      <em>Re: Q3 launch deck</em>
      <span>Looks great — one tweak on slide 14.</span>
      <time>9:14</time>
    </article>
    <article class="sb-mail-item active">
      <strong>Daichi Sato</strong>
      <em>Friday demo recap</em>
      <span>Here's the recording + the action items we…</span>
      <time>11:42</time>
    </article>
    <article class="sb-mail-item">
      <strong>Lena Müller</strong>
      <em>Invoice #2143</em>
      <span>Attached, due in 30 days.</span>
      <time>13:08</time>
    </article>
    <article class="sb-mail-item">
      <strong>Carlos Reyes</strong>
      <em>Coffee Thursday?</em>
      <span>I'll be near the office around 11.</span>
      <time>14:30</time>
    </article>
  </section>
  <article class="sb-mail-read">
    <header>
      <span class="sb-mail-rule" aria-hidden="true"></span>
      <span class="sb-mail-cat">DAILY DIGEST · OPS</span>
      <h2>Friday demo recap.</h2>
      <p>From <strong>Daichi Sato</strong> &middot; <time>11:42 AM</time> &middot; 4 min read</p>
    </header>
    <p class="sb-mail-body sb-mail-lead">
      <span class="sb-mail-drop">H</span>ey team — here's the recording from today plus the four
      action items we landed on. I'll send a separate Loom for the dashboard rewrite tomorrow.
    </p>
    <p class="sb-mail-body">
      A short follow-up on Anya's slide-14 tweak: I think we can land that before the demo on
      Tuesday.
    </p>
  </article>
</div>
```

**CSS:**
```css
.sb-mail {
  display: grid; grid-template-columns: 200px 260px 1fr;
  min-height: 480px;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #f4f0e6; color: #1a1a1a;
  border-radius: 4px; overflow: hidden;
  border: 1px solid #1a1a1a;
}
.sb-mail-folders {
  padding: 18px 14px;
  background: #efe9da;
  border-right: 1px solid #1a1a1a;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-mail-folders header { padding-bottom: 12px; border-bottom: 2px solid #1a1a1a; }
.sb-mail-folders strong { display: block; font-family: 'Playfair Display', 'Georgia', serif; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; color: #1a1a1a; line-height: 1; }
.sb-mail-folders small { display: block; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; color: #c43a2c; text-transform: uppercase; margin-top: 4px; }
.sb-mail-folders ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-mail-folders a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px; border-bottom: 1px dotted #c0b6a0;
  font-family: 'Georgia', serif;
  font-size: 13.5px; color: #1a1a1a; text-decoration: none;
  transition: color 0.12s, padding-left 0.12s;
}
.sb-mail-folders a:hover { padding-left: 8px; color: #c43a2c; }
.sb-mail-folders a[aria-current="page"] { color: #c43a2c; font-weight: 700; padding-left: 8px; border-bottom-color: #c43a2c; }
.sb-mail-folders a span { font-family: 'Inter', sans-serif; font-size: 10.5px; padding: 1px 7px; border-radius: 0; background: #c43a2c; color: #fff; font-weight: 700; letter-spacing: 0.04em; }
.sb-mail-folders a span.sb-mail-muted { background: transparent; color: #6a6055; border: 1px solid #6a6055; }
.sb-mail-folders footer { margin-top: auto; padding-top: 10px; border-top: 1px solid #1a1a1a; font-family: 'Inter', sans-serif; font-size: 10.5px; color: #6a6055; letter-spacing: 0.06em; text-align: center; font-style: italic; }
.sb-mail-bullet { color: #c43a2c; }
.sb-mail-list { background: #fdf9ec; border-right: 1px solid #1a1a1a; display: flex; flex-direction: column; overflow-y: auto; }
.sb-mail-list-head { padding: 14px 16px 10px; border-bottom: 1px solid #c0b6a0; display: flex; align-items: baseline; justify-content: space-between; }
.sb-mail-list-head h3 { margin: 0; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #6a6055; }
.sb-mail-list-head span { font-family: 'Inter', sans-serif; font-size: 10px; color: #c43a2c; font-weight: 700; }
.sb-mail-item { position: relative; padding: 14px 18px 14px 16px; border-bottom: 1px solid #e0d8c4; cursor: pointer; transition: background 0.12s; }
.sb-mail-item:hover { background: rgba(196,58,44,0.04); }
.sb-mail-item.active { background: #fff; padding-left: 22px; }
.sb-mail-item.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: #c43a2c; }
.sb-mail-item strong { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: #1a1a1a; text-transform: uppercase; }
.sb-mail-item em { display: block; font-family: 'Playfair Display', 'Georgia', serif; font-size: 15px; font-style: italic; color: #1a1a1a; margin-top: 2px; line-height: 1.2; }
.sb-mail-item span { display: block; font-family: 'Georgia', serif; font-size: 12.5px; color: #4a4035; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.sb-mail-item time { position: absolute; top: 14px; right: 18px; font-family: 'Inter', sans-serif; font-size: 10.5px; color: #6a6055; font-weight: 600; }
.sb-mail-read { padding: 28px 32px; overflow-y: auto; background: #fdf9ec; }
.sb-mail-read header { padding-bottom: 14px; border-bottom: 2px solid #1a1a1a; margin-bottom: 18px; }
.sb-mail-rule { display: inline-block; width: 32px; height: 3px; background: #c43a2c; margin-bottom: 10px; }
.sb-mail-cat { display: block; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; color: #c43a2c; margin-bottom: 6px; }
.sb-mail-read h2 { margin: 0 0 8px; font-family: 'Playfair Display', 'Georgia', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #1a1a1a; line-height: 0.96; letter-spacing: -0.02em; }
.sb-mail-read header p { margin: 0; font-family: 'Inter', sans-serif; font-size: 11.5px; color: #6a6055; letter-spacing: 0.04em; }
.sb-mail-read header p strong { color: #1a1a1a; font-weight: 700; }
.sb-mail-body { margin: 0 0 12px; font-size: 14.5px; color: #2a241c; line-height: 1.7; max-width: 540px; }
.sb-mail-lead { font-size: 16px; }
.sb-mail-drop { float: left; font-family: 'Playfair Display', 'Georgia', serif; font-size: 56px; font-weight: 900; line-height: 0.85; padding: 4px 8px 0 0; color: #c43a2c; }
@media (max-width: 720px) {
  .sb-mail { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .sb-mail-folders, .sb-mail-list { border-right: 0; border-bottom: 1px solid #1a1a1a; }
}
```

### 06. Dual Sidebar

**Type:** Pure CSS
**Description:** Scandinavian docs — warm beige paper, forest-green section nav, clay-red "active" pill, soft greys for the TOC. Three-column shell (left section nav, centre article, right rail of in-page anchors). Both sidebars sticky; centre flows. Like reading a Hay catalogue.

**HTML:**
```html
<div class="sb-dual">
  <aside class="sb-dual-nav" aria-label="Section navigation">
    <header>
      <span class="sb-dual-mark" aria-hidden="true"></span>
      <span class="sb-dual-name">Birch<small>docs</small></span>
    </header>
    <h3>Getting started</h3>
    <nav aria-label="Section navigation">
      <ul>
        <li><a href="#!">Installation</a></li>
        <li><a href="#!" aria-current="page">Quick start</a></li>
        <li><a href="#!">Configuration</a></li>
        <li><a href="#!">Examples</a></li>
      </ul>
    </nav>
    <h3>Concepts</h3>
    <nav aria-label="Concepts">
      <ul>
        <li><a href="#!">Routing</a></li>
        <li><a href="#!">Layouts</a></li>
        <li><a href="#!">Data fetching</a></li>
      </ul>
    </nav>
    <h3>Recipes</h3>
    <nav aria-label="Recipes">
      <ul>
        <li><a href="#!">Auth</a></li>
        <li><a href="#!">Forms</a></li>
      </ul>
    </nav>
  </aside>
  <main class="sb-dual-main">
    <span class="sb-dual-eye">v3.4 · Feb 2026</span>
    <h2>Quick start.</h2>
    <p class="sb-dual-lead">
      Install the package and ship your first page in under five minutes. The CLI scaffolds a new
      project; the dev server starts on port 4321.
    </p>
    <h2>Installation</h2>
    <p>
      Run <code>npm create birch@latest</code>. The interactive CLI asks for your project name and
      template choice.
    </p>
    <h2>Run the dev server</h2>
    <p>
      Start the dev server with <code>npm run dev</code>. Hot-reload is enabled by default — edits
      to any file refresh the browser instantly.
    </p>
    <p>
      Build for production with <code>npm run build</code>; the output is a static
      <code>dist/</code> ready for any host.
    </p>
  </main>
  <aside class="sb-dual-toc" aria-label="On this page">
    <h3>On this page</h3>
    <nav aria-label="On this page">
      <ul>
        <li><a href="#!" aria-current="true">Installation</a></li>
        <li><a href="#!">Run the dev server</a></li>
        <li><a href="#!">Build for prod</a></li>
        <li><a href="#!">Deploy</a></li>
      </ul>
    </nav>
    <p class="sb-dual-edit">Edit on GitHub →</p>
  </aside>
</div>
```

**CSS:**
```css
.sb-dual {
  display: grid; grid-template-columns: 220px 1fr 200px;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f4ede0;
  color: #1f3327;
  border-radius: 6px; overflow: hidden;
}
.sb-dual-nav, .sb-dual-toc {
  position: sticky; top: 0; align-self: start;
  min-height: 480px; padding: 22px 18px;
  background: #ece2cf;
  border-right: 1px solid #c8b896;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-dual-nav header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid #c8b896; margin-bottom: 4px; }
.sb-dual-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #2f5d40; box-shadow: inset 0 0 0 3px #ece2cf, 0 0 0 1px #2f5d40; }
.sb-dual-name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #1f3327; line-height: 1; }
.sb-dual-name small { display: block; font-size: 9.5px; color: #8a6f4a; font-weight: 700; letter-spacing: 0.18em; margin-top: 4px; text-transform: uppercase; }
.sb-dual-toc { border-right: 0; border-left: 1px solid #c8b896; background: #f4ede0; }
.sb-dual-nav h3, .sb-dual-toc h3 {
  margin: 12px 0 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: #8a6f4a;
}
.sb-dual-nav h3:first-of-type, .sb-dual-toc h3:first-of-type { margin-top: 0; }
.sb-dual-nav ul, .sb-dual-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sb-dual-nav a, .sb-dual-toc a {
  display: block;
  padding: 7px 10px;
  font-size: 13px; color: #4a5d52; text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.sb-dual-nav a:hover, .sb-dual-toc a:hover { color: #1f3327; border-left-color: #c8b896; background: rgba(0,0,0,0.03); }
.sb-dual-nav a[aria-current="page"] {
  color: #fff; font-weight: 700;
  background: #c45a3e;
  border-radius: 4px;
  border-left-color: transparent;
  padding-left: 10px;
}
.sb-dual-toc a[aria-current="true"] { color: #2f5d40; font-weight: 700; border-left-color: #2f5d40; }
.sb-dual-edit { margin: auto 0 0; padding-top: 12px; border-top: 1px solid #c8b896; font-size: 11px; color: #8a6f4a; font-style: italic; }
.sb-dual-main { padding: 32px 36px; max-width: 100%; overflow-x: hidden; background: #faf5ea; }
.sb-dual-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: #c45a3e; text-transform: uppercase; }
.sb-dual-main h2 { margin: 6px 0 10px; font-size: clamp(32px, 4.5vw, 52px); font-weight: 900; color: #1f3327; letter-spacing: -0.03em; line-height: 1; }
.sb-dual-main h2 { margin: 22px 0 8px; font-size: 18px; font-weight: 800; color: #2f5d40; letter-spacing: -0.01em; }
.sb-dual-lead { font-size: 16px; line-height: 1.6; color: #2a3d31; max-width: 540px; margin-bottom: 4px; }
.sb-dual-main p { margin: 0 0 10px; font-size: 13.5px; color: #2a3d31; line-height: 1.7; max-width: 560px; }
.sb-dual-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #c45a3e; background: rgba(196,90,62,0.08); padding: 1px 6px; border-radius: 3px; font-weight: 600; }
@media (max-width: 720px) {
  .sb-dual { grid-template-columns: 1fr; }
  .sb-dual-nav, .sb-dual-toc { position: static; min-height: auto; border: 0; border-bottom: 1px solid #c8b896; }
}
```

### 07. Mini Icon Rail

**Type:** Pure CSS
**Description:** Tokyo neon arcade — deep midnight rail with electric-yellow + magenta glows that pulse on hover. Hover or focus a link to expand the rail from 64px to 240px and reveal the labels. Pure CSS via width transition; <code>aria-label</code> carries meaning when collapsed.

**HTML:**
```html
<div class="sb-mini">
  <div class="sb-mini-grid" aria-hidden="true"></div>
  <aside class="sb-mini-rail" aria-label="Primary">
    <a class="sb-mini-brand" href="#!" aria-label="Neon home">
      <span class="sb-mini-mark" aria-hidden="true">N</span>
      <span class="sb-mini-brand-name">NEON<small>1989</small></span>
    </a>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-label="Arcade" aria-current="page" data-key="01"
            ><span class="sb-mini-ico" aria-hidden="true">◆</span
            ><span class="sb-mini-lbl">Arcade</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Library" data-key="02"
            ><span class="sb-mini-ico" aria-hidden="true">▤</span
            ><span class="sb-mini-lbl">Library</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Squad" data-key="03"
            ><span class="sb-mini-ico" aria-hidden="true">◑</span
            ><span class="sb-mini-lbl">Squad</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Trophies" data-key="04"
            ><span class="sb-mini-ico" aria-hidden="true">★</span
            ><span class="sb-mini-lbl">Trophies</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Store" data-key="05"
            ><span class="sb-mini-ico" aria-hidden="true">◊</span
            ><span class="sb-mini-lbl">Store</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Settings" data-key="06"
            ><span class="sb-mini-ico" aria-hidden="true">⚙</span
            ><span class="sb-mini-lbl">Settings</span></a
          >
        </li>
      </ul>
    </nav>
    <footer class="sb-mini-foot">
      <span class="sb-mini-pulse" aria-hidden="true"></span>
      <span class="sb-mini-foot-lbl">Online · 24,891</span>
    </footer>
  </aside>
  <main class="sb-mini-main">
    <span class="sb-mini-eye">▸ NOW PLAYING · LEVEL 47</span>
    <h2>Hover<br />the rail →</h2>
    <p>
      Hover or focus to expand the rail. Each icon glows in its own neon colour — magenta, yellow,
      cyan, lime — like a Shibuya arcade marquee at midnight.
    </p>
    <div class="sb-mini-tags">
      <span>#tokyo</span><span>#midnight</span><span>#arcade</span><span>#neon</span>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-mini {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  background: #0a0014; color: #f7f4ff;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
}
.sb-mini-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,0,228,0.12) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(0,229,255,0.1) 1px, transparent 1px) 0 0 / 28px 100%,
    radial-gradient(60% 40% at 80% 20%, rgba(255,0,228,0.22), transparent 70%),
    radial-gradient(60% 40% at 20% 80%, rgba(0,229,255,0.22), transparent 70%),
    #0a0014;
  z-index: 0;
}
.sb-mini-rail {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(20,5,40,0.92) 0%, rgba(8,0,20,0.96) 100%);
  border-right: 1px solid rgba(255,0,228,0.4);
  box-shadow: 1px 0 24px rgba(255,0,228,0.25), inset -1px 0 0 rgba(255,0,228,0.5);
  padding: 14px 0; display: flex; flex-direction: column; gap: 12px;
  width: 64px; overflow: hidden;
  transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.sb-mini-rail:hover, .sb-mini-rail:focus-within { width: 240px; }
.sb-mini-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px; height: 40px;
  text-decoration: none; flex-shrink: 0;
  white-space: nowrap;
}
.sb-mini-mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff00e4 0%, #ffd400 100%);
  color: #0a0014; font-family: 'Courier New', monospace; font-size: 18px; font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255,212,0,0.5), 0 0 20px rgba(255,0,228,0.6);
}
.sb-mini-brand-name { font-family: 'Courier New', monospace; font-size: 16px; font-weight: 800; letter-spacing: 0.08em; color: #ffd400; text-shadow: 0 0 8px rgba(255,212,0,0.6); }
.sb-mini-brand-name small { display: block; font-size: 9px; letter-spacing: 0.4em; color: #ff00e4; margin-top: -2px; font-weight: 600; }
.sb-mini-rail ul { list-style: none; margin: 0; padding: 4px 8px; display: flex; flex-direction: column; gap: 4px; }
.sb-mini-rail a {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 8px;
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; color: #d4c5e8; text-decoration: none;
  white-space: nowrap; overflow: hidden;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.sb-mini-rail a:hover, .sb-mini-rail a:focus-visible {
  background: rgba(255,0,228,0.1);
  border-color: rgba(255,0,228,0.45);
  color: #fff;
  box-shadow: 0 0 16px rgba(255,0,228,0.35), inset 0 0 16px rgba(255,0,228,0.1);
}
.sb-mini-rail a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255,212,0,0.18), rgba(255,0,228,0.18));
  border-color: #ffd400;
  color: #fff;
  box-shadow: 0 0 24px rgba(255,212,0,0.45), inset 0 0 12px rgba(255,212,0,0.15);
}
.sb-mini-rail a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: #ffd400; border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px #ffd400, 0 0 24px rgba(255,212,0,0.6);
}
.sb-mini-ico { width: 20px; flex-shrink: 0; text-align: center; font-size: 14px; }
.sb-mini-rail li:nth-child(1) .sb-mini-ico { color: #ffd400; text-shadow: 0 0 8px #ffd400; }
.sb-mini-rail li:nth-child(2) .sb-mini-ico { color: #00e5ff; text-shadow: 0 0 8px #00e5ff; }
.sb-mini-rail li:nth-child(3) .sb-mini-ico { color: #ff00e4; text-shadow: 0 0 8px #ff00e4; }
.sb-mini-rail li:nth-child(4) .sb-mini-ico { color: #c2ff00; text-shadow: 0 0 8px #c2ff00; }
.sb-mini-rail li:nth-child(5) .sb-mini-ico { color: #ff8a00; text-shadow: 0 0 8px #ff8a00; }
.sb-mini-rail li:nth-child(6) .sb-mini-ico { color: #00ffa3; text-shadow: 0 0 8px #00ffa3; }
.sb-mini-lbl { opacity: 0; transition: opacity 0.22s ease; }
.sb-mini-rail:hover .sb-mini-lbl, .sb-mini-rail:focus-within .sb-mini-lbl { opacity: 1; }
.sb-mini-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid rgba(255,0,228,0.25); white-space: nowrap; overflow: hidden; }
.sb-mini-pulse { width: 8px; height: 8px; border-radius: 50%; background: #c2ff00; flex-shrink: 0; box-shadow: 0 0 10px #c2ff00, 0 0 20px rgba(194,255,0,0.5); animation: sb-mini-pulse 1.4s ease-in-out infinite; }
@keyframes sb-mini-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }
.sb-mini-foot-lbl { font-family: 'Courier New', monospace; font-size: 11px; color: #c2ff00; letter-spacing: 0.06em; opacity: 0; transition: opacity 0.22s ease; }
.sb-mini-rail:hover .sb-mini-foot-lbl, .sb-mini-rail:focus-within .sb-mini-foot-lbl { opacity: 1; }
.sb-mini-main { position: relative; z-index: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.sb-mini-eye { font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 0.18em; color: #c2ff00; text-shadow: 0 0 8px rgba(194,255,0,0.5); }
.sb-mini-main h2 {
  margin: 0; font-size: clamp(28px, 5vw, 56px); font-weight: 900; line-height: 0.95;
  background: linear-gradient(135deg, #ffd400 0%, #ff00e4 50%, #00e5ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
  filter: drop-shadow(0 0 20px rgba(255,0,228,0.4));
}
.sb-mini-main p { margin: 0; font-size: 13px; color: #d4c5e8; line-height: 1.6; max-width: 440px; }
.sb-mini-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #ffd400; background: rgba(255,212,0,0.1); padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(255,212,0,0.25); }
.sb-mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sb-mini-tags span { font-family: 'Courier New', monospace; font-size: 10.5px; padding: 4px 10px; border-radius: 11px; border: 1px solid rgba(0,229,255,0.4); color: #00e5ff; background: rgba(0,229,255,0.06); letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) {
  .sb-mini-rail, .sb-mini-lbl, .sb-mini-foot-lbl, .sb-mini-pulse { transition: none; animation: none; }
}
```

### 08. Sticky Filter Sidebar

**Type:** Pure CSS
**Description:** Luxury e-commerce — cream paper, brass-gold accents, chocolate copy. The kind of filter rail you'd find at Aesop or Hermès. Native <code>&lt;details&gt;</code> for collapsible groups gives keyboard support and <code>aria-expanded</code> for free; <code>accent-color</code> tints the checkboxes.

**HTML:**
```html
<div class="sb-stk">
  <aside class="sb-stk-side" aria-label="Filters">
    <header>
      <span class="sb-stk-tag">Refine</span>
      <h3>Filters</h3>
      <span class="sb-stk-clear">Clear all</span>
    </header>
    <details open>
      <summary>Category <em>4</em></summary>
      <ul>
        <li>
          <label><input type="checkbox" name="cat" /> <span>Tops</span><b>148</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="cat" checked /> <span>Knitwear</span><b>62</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="cat" /> <span>Outerwear</span><b>94</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="cat" /> <span>Trousers</span><b>76</b></label>
        </li>
      </ul>
    </details>
    <details open>
      <summary>Size <em>5</em></summary>
      <div class="sb-stk-chips">
        <label><input type="radio" name="sz" /><span>XS</span></label>
        <label><input type="radio" name="sz" /><span>S</span></label>
        <label><input type="radio" name="sz" checked /><span>M</span></label>
        <label><input type="radio" name="sz" /><span>L</span></label>
        <label><input type="radio" name="sz" /><span>XL</span></label>
      </div>
    </details>
    <details>
      <summary>Material</summary>
      <ul>
        <li>
          <label><input type="checkbox" name="mt" /> <span>Cashmere</span><b>18</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="mt" /> <span>Merino wool</span><b>34</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="mt" /> <span>Cotton</span><b>52</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="mt" /> <span>Linen</span><b>21</b></label>
        </li>
      </ul>
    </details>
    <details>
      <summary>Price</summary>
      <ul>
        <li>
          <label><input type="checkbox" name="pr" /> <span>Under $200</span></label>
        </li>
        <li>
          <label><input type="checkbox" name="pr" /> <span>$200 – $400</span></label>
        </li>
        <li>
          <label><input type="checkbox" name="pr" /> <span>$400 – $800</span></label>
        </li>
        <li>
          <label><input type="checkbox" name="pr" /> <span>$800+</span></label>
        </li>
      </ul>
    </details>
  </aside>
  <main class="sb-stk-main">
    <header class="sb-stk-mhead">
      <span class="sb-stk-eye">FW · 26 Collection</span>
      <h2>Knitwear.</h2>
      <p><strong>238</strong> pieces · Sorted by <em>Newest</em></p>
    </header>
    <div class="sb-stk-grid" aria-label="Product grid">
      <article class="sb-stk-tile"><span class="sb-stk-num">01</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">02</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">03</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">04</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">05</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">06</span></article>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-stk {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f6efe1;
  color: #3c2818;
  border-radius: 0;
  overflow: hidden;
  accent-color: #b8924a;
  border: 1px solid #b8924a;
}
.sb-stk-side {
  position: sticky; top: 0; align-self: start;
  min-height: 480px; padding: 22px 18px;
  background: #ede2cb;
  border-right: 1px solid #b8924a;
  font-size: 13px;
}
.sb-stk-side header { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #b8924a; margin-bottom: 12px; }
.sb-stk-tag { font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: 0.22em; color: #b8924a; text-transform: uppercase; align-self: end; }
.sb-stk-side h3 { grid-column: 1 / -1; margin: 0; font-size: 26px; font-weight: 500; font-style: italic; color: #3c2818; letter-spacing: -0.01em; line-height: 1; }
.sb-stk-clear { font-family: 'Inter', sans-serif; font-size: 10.5px; font-style: italic; color: #b8924a; cursor: pointer; align-self: end; text-decoration: underline; text-underline-offset: 3px; }
.sb-stk-side details { padding: 12px 0; border-bottom: 1px solid #d4c39c; }
.sb-stk-side details:last-of-type { border-bottom: 0; }
.sb-stk-side summary { cursor: pointer; padding: 4px 0; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #3c2818; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.sb-stk-side summary::-webkit-details-marker { display: none; }
.sb-stk-side summary em { font-family: 'Cormorant Garamond', serif; font-size: 12px; font-style: italic; font-weight: 500; color: #b8924a; letter-spacing: 0; text-transform: none; }
.sb-stk-side summary::after { content: '+'; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400; color: #b8924a; margin-left: 8px; transition: transform 0.2s; }
.sb-stk-side details[open] summary::after { content: '−'; }
.sb-stk-side ul { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-stk-side label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: #5a4030; cursor: pointer; font-family: 'Cormorant Garamond', serif; font-size: 14.5px; font-weight: 500; }
.sb-stk-side label b { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; color: #b8924a; letter-spacing: 0.04em; }
.sb-stk-side input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid #b8924a; background: transparent; cursor: pointer; flex-shrink: 0; transition: background 0.14s; position: relative; }
.sb-stk-side input[type="checkbox"]:checked { background: #b8924a; }
.sb-stk-side input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #f6efe1; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sb-stk-side input[type="checkbox"]:focus-visible { outline: 2px solid #b8924a; outline-offset: 2px; }
.sb-stk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.sb-stk-chips label { position: relative; cursor: pointer; display: inline-flex; }
.sb-stk-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-stk-chips input:focus-visible + span { outline: 2px solid #b8924a; outline-offset: 2px; }
.sb-stk-chips span {
  display: inline-block; padding: 6px 12px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  background: transparent; color: #3c2818;
  border: 1px solid #b8924a;
  transition: background 0.14s, color 0.14s;
}
.sb-stk-chips input:checked + span { background: #3c2818; color: #f6efe1; border-color: #3c2818; }
.sb-stk-main { padding: 32px 36px; background: #faf3e3; }
.sb-stk-mhead { padding-bottom: 16px; border-bottom: 1px solid #d4c39c; margin-bottom: 22px; }
.sb-stk-eye { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; color: #b8924a; text-transform: uppercase; }
.sb-stk-main h2 { margin: 4px 0 6px; font-size: clamp(36px, 5vw, 56px); font-weight: 500; color: #3c2818; letter-spacing: -0.02em; line-height: 1; font-style: italic; }
.sb-stk-main p { margin: 0; font-family: 'Inter', sans-serif; font-size: 11.5px; color: #6a4d35; letter-spacing: 0.04em; }
.sb-stk-main p strong { color: #3c2818; font-weight: 700; }
.sb-stk-main p em { color: #b8924a; font-style: italic; font-weight: 600; }
.sb-stk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sb-stk-tile { position: relative; aspect-ratio: 3/4; background: linear-gradient(160deg, #ede2cb 0%, #d8c8a8 100%); border: 1px solid #d4c39c; }
.sb-stk-tile::after { content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(184,146,74,0.4); }
.sb-stk-num { position: absolute; bottom: 14px; right: 14px; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; color: #b8924a; }
@media (max-width: 720px) {
  .sb-stk { grid-template-columns: 1fr; }
  .sb-stk-side { position: static; min-height: auto; border-right: 0; border-bottom: 1px solid #b8924a; }
  .sb-stk-grid { grid-template-columns: repeat(2, 1fr); }
}
```

### 09. Floating Sidebar

**Type:** Pure CSS
**Description:** Art gallery white-cube — pure ivory canvas, hairline rules, oversized serif numerals. The sidebar floats as a museum placard with margin on all four sides; an oversized chocolate-on-ivory accent number frames the active item. The sidebar as printed material.

**HTML:**
```html
<div class="sb-flt">
  <aside class="sb-flt-side" aria-label="Primary">
    <header class="sb-flt-brand">
      <span class="sb-flt-mark" aria-hidden="true"></span>
      <div>
        <strong>Galerie</strong>
        <em>Salon No. 12</em>
      </div>
    </header>
    <nav aria-label="Primary">
      <ol>
        <li><a href="#!" aria-current="page">Overview</a></li>
        <li><a href="#!">Catalogue</a></li>
        <li><a href="#!">Artists</a></li>
        <li><a href="#!">Acquisitions</a></li>
        <li><a href="#!">Visit</a></li>
      </ol>
    </nav>
    <footer>
      <span>Open Tue—Sun · 10—18</span>
    </footer>
  </aside>
  <main class="sb-flt-main">
    <span class="sb-flt-eye">— Currently exhibiting</span>
    <h2><em>Light, &amp;</em><br />the Quiet Room.</h2>
    <p>
      The sidebar floats inside the canvas with margin on all four sides — light visual weight, lots
      of negative space, generous serif type. The effect is gallery placard, not control panel.
    </p>
    <figure class="sb-flt-figure">
      <div class="sb-flt-frame" aria-hidden="true">
        <span class="sb-flt-circ"></span>
      </div>
      <figcaption>
        <strong>Untitled (Cream / Black)</strong>
        <span>Iva Ström, 2024 · oil on linen</span>
      </figcaption>
    </figure>
  </main>
</div>
```

**CSS:**
```css
.sb-flt {
  display: grid; grid-template-columns: auto 1fr;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fbf9f4; color: #1a1a1a;
  border-radius: 0; overflow: hidden;
  border: 1px solid #1a1a1a;
}
.sb-flt-side {
  margin: 22px 0 22px 22px; padding: 22px 18px; width: 220px;
  background: #fff;
  border: 1px solid #1a1a1a;
  display: flex; flex-direction: column; gap: 18px;
  align-self: start; position: sticky; top: 22px;
}
.sb-flt-brand { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid #1a1a1a; }
.sb-flt-mark { width: 14px; height: 14px; background: #1a1a1a; flex-shrink: 0; transform: rotate(45deg); }
.sb-flt-brand strong { display: block; font-size: 22px; font-weight: 500; font-style: italic; color: #1a1a1a; line-height: 1; letter-spacing: -0.01em; }
.sb-flt-brand em { display: block; font-family: 'Inter', sans-serif; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: 0.22em; color: #6a4d35; margin-top: 4px; text-transform: uppercase; }
.sb-flt-side ol { list-style: none; margin: 0; padding: 0; counter-reset: flt; display: flex; flex-direction: column; gap: 0; }
.sb-flt-side li { counter-increment: flt; }
.sb-flt-side a {
  display: grid; grid-template-columns: 32px 1fr;
  align-items: baseline; gap: 12px;
  padding: 11px 0;
  font-size: 16px; color: #1a1a1a; text-decoration: none;
  border-bottom: 1px dotted #d4cabc;
  transition: padding-left 0.16s, color 0.16s;
}
.sb-flt-side a::before {
  content: counter(flt, decimal-leading-zero);
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #b8924a;
  align-self: center;
}
.sb-flt-side a:hover { padding-left: 4px; color: #6a4d35; }
.sb-flt-side a[aria-current="page"] { font-style: italic; padding-left: 4px; }
.sb-flt-side a[aria-current="page"]::before { color: #1a1a1a; }
.sb-flt-side a[aria-current="page"]::after {
  content: '·'; font-family: serif; font-size: 22px; line-height: 0; margin-left: 6px; color: #c45a3e;
}
.sb-flt-side footer { margin-top: auto; padding-top: 12px; border-top: 1px solid #1a1a1a; font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.12em; color: #6a4d35; text-align: center; text-transform: uppercase; }
.sb-flt-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; }
.sb-flt-eye { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: #c45a3e; text-transform: uppercase; }
.sb-flt-main h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); font-weight: 500; color: #1a1a1a; letter-spacing: -0.03em; line-height: 0.95; }
.sb-flt-main h2 em { font-style: italic; font-weight: 500; color: #6a4d35; }
.sb-flt-main p { margin: 0; font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: 17px; color: #3c2818; line-height: 1.55; max-width: 540px; }
.sb-flt-figure { margin: 12px 0 0; display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
.sb-flt-frame { aspect-ratio: 1; background: #f4ede0; border: 1px solid #1a1a1a; position: relative; box-shadow: 8px 8px 0 #1a1a1a; }
.sb-flt-circ { position: absolute; left: 28%; top: 22%; width: 56px; height: 56px; border-radius: 50%; background: #1a1a1a; }
.sb-flt-figure figcaption strong { display: block; font-style: italic; font-size: 18px; font-weight: 500; color: #1a1a1a; }
.sb-flt-figure figcaption span { display: block; font-family: 'Inter', sans-serif; font-size: 11px; color: #6a4d35; letter-spacing: 0.04em; margin-top: 4px; }
@media (max-width: 720px) {
  .sb-flt { grid-template-columns: 1fr; }
  .sb-flt-side { width: auto; margin: 18px 18px 0; position: static; }
  .sb-flt-figure { grid-template-columns: 1fr; }
}
```

### 10. Footer-pinned Sidebar

**Type:** Pure CSS
**Description:** Gaming console — onyx black with carbon-fibre texture, plasma-green accents, monospace HUD type. Nav at the top, a player-profile block pinned to the bottom of the sidebar. Pure CSS via flex column + <code>margin-top: auto</code> on the footer.

**HTML:**
```html
<div class="sb-ftr">
  <aside class="sb-ftr-side" aria-label="Primary">
    <header class="sb-ftr-brand">
      <span class="sb-ftr-mark" aria-hidden="true"></span>
      <div>
        <strong>QUANTUM<small>OS</small></strong>
      </div>
    </header>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-ftr-i" aria-hidden="true">▶</span>Play<em>P</em></a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-ftr-i" aria-hidden="true">▤</span>Library<em>L</em></a>
        </li>
        <li>
          <a href="#!"><span class="sb-ftr-i" aria-hidden="true">◇</span>Friends<em>F</em></a>
        </li>
        <li>
          <a href="#!"><span class="sb-ftr-i" aria-hidden="true">★</span>Trophies<em>T</em></a>
        </li>
        <li>
          <a href="#!"><span class="sb-ftr-i" aria-hidden="true">⚙</span>Settings<em>S</em></a>
        </li>
      </ul>
    </nav>
    <footer class="sb-ftr-foot">
      <div class="sb-ftr-avatar" aria-hidden="true">VR</div>
      <div class="sb-ftr-user">
        <strong>vimal_raj_</strong>
        <span><i></i>Online · LVL 47</span>
      </div>
    </footer>
  </aside>
  <main class="sb-ftr-main">
    <span class="sb-ftr-eye">▸ NOW LOADING · ARENA_47</span>
    <h2>Ready<br />Player One.</h2>
    <p>
      The user block at the bottom is pinned with <code>margin-top: auto</code> — it stays put no
      matter how many nav items appear above. Plasma green for "online" because nothing else has the
      right intensity.
    </p>
    <div class="sb-ftr-stats">
      <div class="sb-ftr-stat"><b>2,481</b><span>XP</span></div>
      <div class="sb-ftr-stat"><b>87</b><span>Wins</span></div>
      <div class="sb-ftr-stat"><b>4.9</b><span>Rank</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-ftr {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0a0a0c;
  color: #d8e6dc;
  border-radius: 4px; overflow: hidden;
  border: 1px solid #00ff88;
  box-shadow: 0 0 32px rgba(0,255,136,0.15);
}
.sb-ftr-side {
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,0.015) 8px 9px),
    linear-gradient(180deg, #14181a 0%, #0a0c0d 100%);
  border-right: 1px solid rgba(0,255,136,0.3);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.sb-ftr-side::before {
  content: ''; position: absolute; right: -1px; top: 30%; bottom: 30%; width: 2px;
  background: #00ff88; box-shadow: 0 0 12px #00ff88;
}
.sb-ftr-brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid rgba(0,255,136,0.25); }
.sb-ftr-mark { width: 28px; height: 28px; flex-shrink: 0; background: linear-gradient(135deg, #00ff88 0%, #00b870 100%); transform: rotate(45deg); box-shadow: 0 0 16px rgba(0,255,136,0.6), inset 0 0 8px rgba(0,0,0,0.4); }
.sb-ftr-brand strong { font-family: 'Courier New', monospace; font-size: 14px; font-weight: 800; letter-spacing: 0.18em; color: #fff; line-height: 1; }
.sb-ftr-brand strong small { display: block; font-size: 9.5px; color: #00ff88; font-weight: 700; letter-spacing: 0.4em; margin-top: 4px; text-shadow: 0 0 8px rgba(0,255,136,0.5); }
.sb-ftr-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sb-ftr-side a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; color: #8aa094;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.sb-ftr-side a:hover { background: rgba(0,255,136,0.08); color: #fff; border-left-color: rgba(0,255,136,0.5); }
.sb-ftr-side a[aria-current="page"] {
  background: rgba(0,255,136,0.14); color: #00ff88;
  border-left-color: #00ff88;
  text-shadow: 0 0 8px rgba(0,255,136,0.5);
  box-shadow: inset 0 0 16px rgba(0,255,136,0.08);
}
.sb-ftr-i { font-size: 11px; width: 14px; text-align: center; flex-shrink: 0; }
.sb-ftr-side a em { margin-left: auto; font-size: 9.5px; font-style: normal; padding: 1px 5px; border: 1px solid rgba(138,160,148,0.35); border-radius: 2px; color: #8aa094; }
.sb-ftr-side a[aria-current="page"] em { border-color: rgba(0,255,136,0.5); color: #00ff88; }
.sb-ftr-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(0,255,136,0.06);
  border: 1px solid rgba(0,255,136,0.25);
  border-radius: 4px;
}
.sb-ftr-avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  background: linear-gradient(135deg,#00ff88,#00b870);
  color: #0a0a0c;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 900;
  letter-spacing: 0.04em;
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
}
.sb-ftr-user { min-width: 0; flex: 1; }
.sb-ftr-user strong { display: block; font-family: 'Courier New', monospace; font-size: 12px; font-weight: 800; color: #fff; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ftr-user span { display: flex; align-items: center; gap: 6px; font-family: 'Courier New', monospace; font-size: 10px; color: #8aa094; letter-spacing: 0.08em; margin-top: 3px; }
.sb-ftr-user span i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #00ff88; box-shadow: 0 0 8px #00ff88; animation: sb-ftr-blink 1.5s ease-in-out infinite; }
@keyframes sb-ftr-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .sb-ftr-user span i { animation: none; } }
.sb-ftr-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; background: linear-gradient(180deg, #0e1212 0%, #0a0a0c 100%); }
.sb-ftr-main::before { content: ''; position: absolute; }
.sb-ftr-eye { font-family: 'Courier New', monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; color: #00ff88; text-shadow: 0 0 8px rgba(0,255,136,0.5); }
.sb-ftr-main h2 { margin: 0; font-family: 'Inter', sans-serif; font-size: clamp(36px, 5vw, 64px); font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 30px rgba(0,255,136,0.2); }
.sb-ftr-main p { margin: 0; font-size: 13.5px; color: #b8c4be; line-height: 1.6; max-width: 460px; }
.sb-ftr-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #00ff88; background: rgba(0,255,136,0.1); padding: 1px 6px; border-radius: 2px; border: 1px solid rgba(0,255,136,0.3); }
.sb-ftr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 460px; margin-top: auto; }
.sb-ftr-stat { padding: 14px 16px; background: rgba(0,255,136,0.06); border: 1px solid rgba(0,255,136,0.25); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.sb-ftr-stats b { display: block; font-family: 'Courier New', monospace; font-size: 24px; font-weight: 900; color: #00ff88; letter-spacing: 0.04em; line-height: 1; text-shadow: 0 0 8px rgba(0,255,136,0.4); }
.sb-ftr-stats span { display: block; font-family: 'Courier New', monospace; font-size: 10px; color: #8aa094; letter-spacing: 0.18em; margin-top: 6px; text-transform: uppercase; }
@media (max-width: 720px) {
  .sb-ftr { grid-template-columns: 1fr; }
  .sb-ftr-side { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .sb-ftr-foot { margin-top: 8px; }
}
```

### 11. Push-content Sidebar

**Type:** Pure CSS
**Description:** Mid-century modern — mustard sidebar, walnut content area, teal active pill. Eames-era graphic palette. Toggling the burger pushes the content right instead of overlaying it. Pure CSS via <code>:has(:checked)</code> on the grid template columns.

**HTML:**
```html
<div class="sb-psh">
  <input id="sb-psh-t" class="sb-psh-cb" type="checkbox" aria-label="Toggle navigation" />
  <aside class="sb-psh-side" aria-label="Primary">
    <header>
      <span class="sb-psh-mark" aria-hidden="true"></span>
      <strong>EAMES &amp; CO.</strong>
    </header>
    <h3>Workspaces</h3>
    <nav aria-label="Workspaces">
      <ul>
        <li><a href="#!" aria-current="page">Engineering</a></li>
        <li><a href="#!">Design</a></li>
        <li><a href="#!">Product</a></li>
        <li><a href="#!">Marketing</a></li>
        <li><a href="#!">Operations</a></li>
      </ul>
    </nav>
    <p class="sb-psh-quote">
      <em>"Details are not the details. They make the design."</em><br /><span
        >— Charles Eames</span
      >
    </p>
  </aside>
  <main class="sb-psh-main">
    <header class="sb-psh-bar">
      <label class="sb-psh-burger" for="sb-psh-t" aria-controls="sb-psh-side">
        <span aria-hidden="true"><i></i><i></i><i></i></span>
        <span class="sr-only">Toggle nav</span>
      </label>
      <strong>Engineering</strong>
      <span class="sb-psh-pill">Sprint 47</span>
    </header>
    <div class="sb-psh-body">
      <span class="sb-psh-eye">★ Established 1956</span>
      <h2>Form,<br />function,<br />flair.</h2>
      <p>
        Toggle the burger — content shifts right rather than being overlaid. Pure CSS on the grid
        template; works on desktop where both panes should remain visible.
      </p>
      <div class="sb-psh-cards">
        <article class="sb-psh-card">
          <span class="sb-psh-card-num">01</span>
          <strong>Lounge Chair</strong>
          <em>Walnut · Tan leather</em>
        </article>
        <article class="sb-psh-card">
          <span class="sb-psh-card-num">02</span>
          <strong>Wire Stool</strong>
          <em>Powder-coated steel</em>
        </article>
      </div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-psh {
  display: grid; grid-template-columns: 0 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f5e6c8;
  color: #2a1a10;
  border-radius: 0; overflow: hidden;
  transition: grid-template-columns 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  border: 2px solid #2a1a10;
}
.sb-psh:has(.sb-psh-cb:checked) { grid-template-columns: 240px 1fr; }
.sb-psh-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-psh:has(.sb-psh-cb:focus-visible) .sb-psh-burger { outline: 2px solid #2a1a10; outline-offset: 2px; }
.sb-psh-side {
  background: #e8b04a;
  border-right: 2px solid #2a1a10;
  padding: 22px 18px; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.sb-psh-side header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid #2a1a10; white-space: nowrap; }
.sb-psh-mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: #1c5e6e; box-shadow: 0 0 0 3px #e8b04a, 0 0 0 5px #2a1a10; }
.sb-psh-side header strong { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: #2a1a10; }
.sb-psh-side h3 { margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #6b3d1c; white-space: nowrap; }
.sb-psh-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-psh-side a { display: block; padding: 9px 12px; font-size: 14px; font-weight: 600; color: #2a1a10; text-decoration: none; white-space: nowrap; border-radius: 18px; transition: background 0.14s, color 0.14s; }
.sb-psh-side a:hover { background: rgba(42,26,16,0.1); }
.sb-psh-side a[aria-current="page"] { background: #1c5e6e; color: #f5e6c8; }
.sb-psh-quote { margin: auto 0 0; padding: 12px; background: rgba(28,94,110,0.12); border-left: 3px solid #1c5e6e; font-size: 12px; line-height: 1.5; color: #2a1a10; }
.sb-psh-quote em { font-style: italic; color: #1c5e6e; }
.sb-psh-quote span { display: block; font-size: 10.5px; color: #6b3d1c; font-weight: 700; letter-spacing: 0.04em; margin-top: 6px; font-style: normal; }
.sb-psh-main { display: flex; flex-direction: column; background: #4a3122; color: #f5e6c8; }
.sb-psh-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: #3a2418;
  border-bottom: 2px solid #2a1a10;
}
.sb-psh-burger {
  width: 38px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8b04a; color: #2a1a10;
  border: 2px solid #2a1a10;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #2a1a10;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sb-psh-burger:hover { background: #f0c266; }
.sb-psh-burger:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #2a1a10; }
.sb-psh-burger span { display: inline-flex; flex-direction: column; gap: 3px; }
.sb-psh-burger i { display: block; width: 16px; height: 2px; background: #2a1a10; transition: transform 0.22s, opacity 0.22s; }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(2) { opacity: 0; }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.sb-psh-bar strong { font-size: 16px; font-weight: 700; color: #f5e6c8; letter-spacing: -0.01em; }
.sb-psh-pill { margin-left: auto; padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #2a1a10; background: #e8b04a; border-radius: 12px; text-transform: uppercase; }
.sb-psh-body { padding: 32px 36px; display: flex; flex-direction: column; gap: 18px; }
.sb-psh-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: #e8b04a; text-transform: uppercase; }
.sb-psh-main h2 { margin: 0; font-size: clamp(36px, 5.5vw, 64px); font-weight: 900; line-height: 0.92; color: #f5e6c8; letter-spacing: -0.03em; }
.sb-psh-main p  { margin: 0; font-size: 13.5px; color: rgba(245,230,200,0.85); line-height: 1.65; max-width: 460px; }
.sb-psh-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #e8b04a; background: rgba(232,176,74,0.14); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(232,176,74,0.4); }
.sb-psh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; margin-top: 6px; }
.sb-psh-card { padding: 16px 16px 14px; background: #5a4a3a; border-left: 4px solid #1c5e6e; display: flex; flex-direction: column; gap: 4px; }
.sb-psh-card-num { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; color: #e8b04a; }
.sb-psh-card strong { font-size: 16px; font-weight: 700; color: #f5e6c8; letter-spacing: -0.01em; }
.sb-psh-card em { font-size: 11.5px; font-style: italic; color: rgba(245,230,200,0.7); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .sb-psh, .sb-psh-burger i { transition: none; } }
```

### 12. Overlay with Backdrop

**Type:** Pure CSS
**Description:** Aurora glassmorphism — deep indigo night sky with drifting aurora-pink and cyan ribbons, frosted glass drawer with chromatic edge. Drawer slides in over the page; the backdrop blurs behind it. Pure CSS via <code>backdrop-filter</code> + <code>:has(:checked)</code>.

**HTML:**
```html
<div class="sb-ovl">
  <span class="sb-ovl-aurora-1" aria-hidden="true"></span>
  <span class="sb-ovl-aurora-2" aria-hidden="true"></span>
  <span class="sb-ovl-stars" aria-hidden="true"></span>
  <input id="sb-ovl-t" class="sb-ovl-cb" type="checkbox" aria-label="Toggle navigation" />
  <header class="sb-ovl-bar">
    <label class="sb-ovl-burger" for="sb-ovl-t" aria-controls="sb-ovl-drawer">
      <span aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sr-only">Open menu</span>
    </label>
    <strong class="sb-ovl-brand">
      <span class="sb-ovl-mark" aria-hidden="true"></span>
      Polaris
    </strong>
    <span class="sb-ovl-time">63°N · 02:47</span>
  </header>
  <main class="sb-ovl-main">
    <span class="sb-ovl-eye">— Tonight, the sky moves slowly</span>
    <h2>The aurora<br /><em>opens</em> the menu.</h2>
    <p>
      Tap the burger — the drawer slides in over the page, the backdrop blurs the night sky behind.
      Tap the dim area or × to dismiss. Pure CSS, no JavaScript required.
    </p>
  </main>
  <label class="sb-ovl-backdrop" for="sb-ovl-t" aria-hidden="true"></label>
  <aside id="sb-ovl-drawer" class="sb-ovl-drawer" aria-label="Primary">
    <header>
      <strong>Menu</strong>
      <label class="sb-ovl-close" for="sb-ovl-t" aria-label="Close menu">×</label>
    </header>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#!" aria-current="page">Home</a></li>
        <li><a href="#!">Library</a></li>
        <li><a href="#!">Saved</a></li>
        <li><a href="#!">Activity</a></li>
        <li><a href="#!">Settings</a></li>
      </ul>
    </nav>
    <footer class="sb-ovl-foot">
      <span class="sb-ovl-dot" aria-hidden="true"></span>
      Aurora · KP 5.4
    </footer>
  </aside>
</div>
```

**CSS:**
```css
.sb-ovl {
  position: relative; min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: radial-gradient(ellipse at top, #1a1947 0%, #060321 60%, #02010d 100%);
  color: #e8e6ff;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.sb-ovl-aurora-1, .sb-ovl-aurora-2 { position: absolute; pointer-events: none; z-index: 0; mix-blend-mode: screen; filter: blur(48px); }
.sb-ovl-aurora-1 {
  top: -10%; left: -10%; width: 80%; height: 70%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,82,170,0.55), transparent 60%);
  animation: sb-ovl-drift1 14s ease-in-out infinite alternate;
}
.sb-ovl-aurora-2 {
  bottom: -20%; right: -10%; width: 80%; height: 80%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.45), transparent 60%);
  animation: sb-ovl-drift2 18s ease-in-out infinite alternate;
}
.sb-ovl-stars {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(1px 1px at 14% 22%, #fff, transparent),
    radial-gradient(1px 1px at 38% 14%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 52% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 73% 18%, #fff, transparent),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 64% 60%, #fff, transparent),
    radial-gradient(1px 1px at 12% 76%, rgba(255,255,255,0.5), transparent);
}
@keyframes sb-ovl-drift1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(8%, 4%); }
}
@keyframes sb-ovl-drift2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-6%, -3%); }
}
@media (prefers-reduced-motion: reduce) { .sb-ovl-aurora-1, .sb-ovl-aurora-2 { animation: none; } }
.sb-ovl-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-ovl:has(.sb-ovl-cb:focus-visible) .sb-ovl-burger { outline: 2px solid #ff52aa; outline-offset: 2px; }
.sb-ovl-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(8,4,32,0.45);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sb-ovl-burger {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.14s;
}
.sb-ovl-burger:hover { background: rgba(255,255,255,0.16); }
.sb-ovl-burger span { display: inline-flex; flex-direction: column; gap: 3px; }
.sb-ovl-burger i { display: block; width: 16px; height: 2px; background: linear-gradient(90deg, #ff52aa, #00e5ff); border-radius: 2px; }
.sb-ovl-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.sb-ovl-mark { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ff52aa 0%, #00e5ff 100%); box-shadow: 0 0 16px rgba(255,82,170,0.6); }
.sb-ovl-time { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #b8b6ff; letter-spacing: 0.06em; }
.sb-ovl-main { position: relative; z-index: 2; flex: 1; padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; }
.sb-ovl-eye { font-size: 12px; color: #00e5ff; letter-spacing: 0.04em; font-style: italic; text-shadow: 0 0 12px rgba(0,229,255,0.5); }
.sb-ovl-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 800; line-height: 0.95;
  color: #fff; letter-spacing: -0.03em;
  text-shadow: 0 0 30px rgba(255,82,170,0.3);
}
.sb-ovl-main h2 em { font-style: italic; background: linear-gradient(135deg, #ff52aa, #00e5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-ovl-main p  { margin: 0; font-size: 13.5px; color: rgba(232,230,255,0.85); line-height: 1.6; max-width: 460px; }
.sb-ovl-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #ff52aa; background: rgba(255,82,170,0.12); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255,82,170,0.3); }
.sb-ovl-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,1,13,0.4);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.26s ease;
  z-index: 3;
}
.sb-ovl:has(.sb-ovl-cb:checked) .sb-ovl-backdrop { opacity: 1; pointer-events: auto; }
.sb-ovl-drawer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 280px;
  background: rgba(20,16,46,0.55);
  backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border-right: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    8px 0 32px rgba(0,0,0,0.4),
    inset -1px 0 0 rgba(255,82,170,0.5),
    inset 1px 1px 0 rgba(255,255,255,0.18);
  transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 4;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 14px;
}
.sb-ovl:has(.sb-ovl-cb:checked) .sb-ovl-drawer { transform: translateX(0); }
.sb-ovl-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.sb-ovl-drawer header strong { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.sb-ovl-close { font-size: 22px; line-height: 1; color: rgba(255,255,255,0.7); cursor: pointer; padding: 0 8px; user-select: none; transition: color 0.14s; }
.sb-ovl-close:hover { color: #ff52aa; }
.sb-ovl-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-ovl-drawer a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: none; border: 1px solid transparent; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.sb-ovl-drawer a:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
.sb-ovl-drawer a[aria-current="page"] { background: linear-gradient(90deg, rgba(255,82,170,0.22), rgba(0,229,255,0.22)); color: #fff; border-color: rgba(255,255,255,0.3); box-shadow: 0 0 16px rgba(255,82,170,0.3); }
.sb-ovl-foot { margin-top: auto; padding: 10px 6px 0; border-top: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; }
.sb-ovl-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 12px #00ff9c; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .sb-ovl-drawer, .sb-ovl-backdrop { transition: none; }
}
```

### 13. Persistent Collapsible

**Type:** Light JS
**Description:** Pure white canvas, ink-black type, one single red dot for the active item. Swiss-poster minimalism. Click the toggle to collapse; state persists across page reloads via <code>localStorage</code>. An inline IIFE applies the stored state before paint to avoid a flash.

**HTML:**
```html
<div class="sb-prs" data-collapsed="false">
  <aside class="sb-prs-side" aria-label="Primary">
    <button
      class="sb-prs-toggle"
      type="button"
      aria-expanded="true"
      aria-controls="sb-prs-nav"
      aria-label="Collapse sidebar"
    >
      <span class="sb-prs-burger" aria-hidden="true"><i></i><i></i></span>
      <span class="sb-prs-tlabel">Collapse</span>
    </button>
    <header class="sb-prs-brand">
      <span class="sb-prs-mark" aria-hidden="true"></span>
      <span class="sb-prs-name">Atlas</span>
    </header>
    <nav id="sb-prs-nav" aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page"><em>01</em><span class="sb-prs-lbl">Index</span></a>
        </li>
        <li>
          <a href="#!"><em>02</em><span class="sb-prs-lbl">Projects</span></a>
        </li>
        <li>
          <a href="#!"><em>03</em><span class="sb-prs-lbl">Studio</span></a>
        </li>
        <li>
          <a href="#!"><em>04</em><span class="sb-prs-lbl">Press</span></a>
        </li>
        <li>
          <a href="#!"><em>05</em><span class="sb-prs-lbl">Contact</span></a>
        </li>
      </ul>
    </nav>
    <footer class="sb-prs-foot">
      <span class="sb-prs-foot-lbl">© Atlas, MMXXVI</span>
    </footer>
  </aside>
  <main class="sb-prs-main">
    <span class="sb-prs-eye">— Persistent state · localStorage</span>
    <h2>Less,<br />but better.</h2>
    <p>
      Click the toggle — the sidebar collapses to icons only. The state is written to
      <code>localStorage</code>, so a refresh keeps your choice. An inline IIFE applies the stored
      state before the page paints, preventing any flash.
    </p>
  </main>
</div>
```

**CSS:**
```css
.sb-prs {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', 'Inter', system-ui, sans-serif;
  background: #fafafa; color: #0a0a0a;
  border-radius: 0; overflow: hidden;
  transition: grid-template-columns 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  border: 1px solid #0a0a0a;
}
.sb-prs[data-collapsed="true"] { grid-template-columns: 64px 1fr; }
.sb-prs-side {
  background: #fff;
  border-right: 1px solid #0a0a0a;
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
}
.sb-prs-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid #0a0a0a; border-radius: 0;
  background: #fafafa; color: #0a0a0a;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: background 0.14s;
}
.sb-prs-toggle:hover { background: #0a0a0a; color: #fff; }
.sb-prs-toggle:hover .sb-prs-burger i { background: #fff; }
.sb-prs-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.sb-prs-burger i { display: block; width: 14px; height: 1.5px; background: #0a0a0a; transition: transform 0.22s; }
.sb-prs[data-collapsed="true"] .sb-prs-burger i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.sb-prs[data-collapsed="true"] .sb-prs-burger i:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }
.sb-prs-tlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; transition: opacity 0.18s; }
.sb-prs[data-collapsed="true"] .sb-prs-tlabel { opacity: 0; pointer-events: none; }
.sb-prs-brand { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid #0a0a0a; padding-bottom: 18px; white-space: nowrap; }
.sb-prs-mark { width: 12px; height: 12px; border-radius: 50%; background: #e63946; flex-shrink: 0; }
.sb-prs-name { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: #0a0a0a; line-height: 1; transition: opacity 0.18s; }
.sb-prs[data-collapsed="true"] .sb-prs-name { opacity: 0; pointer-events: none; }
.sb-prs-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-prs-side a {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr;
  align-items: center; gap: 14px;
  padding: 12px 6px;
  font-size: 14px; font-weight: 600; color: #0a0a0a; text-decoration: none;
  border-bottom: 1px solid rgba(10,10,10,0.12);
  transition: padding-left 0.16s, color 0.16s;
}
.sb-prs-side a em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(10,10,10,0.5); letter-spacing: 0.06em; font-weight: 600; }
.sb-prs-side a:hover { padding-left: 12px; color: #e63946; }
.sb-prs-side a:hover em { color: #e63946; }
.sb-prs-side a[aria-current="page"] { padding-left: 12px; }
.sb-prs-side a[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #e63946; box-shadow: 0 0 0 0 rgba(230,57,70,0.5); animation: sb-prs-dot 2s ease-in-out infinite; }
@keyframes sb-prs-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.5); } 50% { box-shadow: 0 0 0 6px rgba(230,57,70,0); } }
@media (prefers-reduced-motion: reduce) { .sb-prs-side a[aria-current="page"]::before { animation: none; } }
.sb-prs-lbl { white-space: nowrap; transition: opacity 0.18s; }
.sb-prs[data-collapsed="true"] .sb-prs-lbl { opacity: 0; pointer-events: none; }
.sb-prs-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #0a0a0a; }
.sb-prs-foot-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(10,10,10,0.5); letter-spacing: 0.16em; transition: opacity 0.18s; }
.sb-prs[data-collapsed="true"] .sb-prs-foot-lbl { opacity: 0; }
.sb-prs-main { padding: 36px 40px; overflow: hidden; display: flex; flex-direction: column; gap: 18px; background: #fafafa; }
.sb-prs-eye { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #e63946; letter-spacing: 0.04em; }
.sb-prs-main h2 { margin: 0; font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; line-height: 0.92; color: #0a0a0a; letter-spacing: -0.04em; }
.sb-prs-main p { margin: 0; font-size: 14.5px; color: #3a3a3a; line-height: 1.65; max-width: 480px; font-weight: 500; }
.sb-prs-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #0a0a0a; background: rgba(10,10,10,0.06); padding: 2px 6px; border-radius: 0; font-weight: 600; border-bottom: 1px solid #e63946; }
@media (prefers-reduced-motion: reduce) { .sb-prs, .sb-prs-tlabel, .sb-prs-lbl, .sb-prs-name, .sb-prs-foot-lbl, .sb-prs-burger i { transition: none; } }
```

**JS:**
```js
/* Persistent collapsible sidebar — restores state on load + toggles on click. */
(function () {
  var KEY = 'sb-prs-collapsed';
  var wrap = document.querySelector('.sb-prs');
  if (!wrap) return;

  var stored = localStorage.getItem(KEY) === 'true';
  wrap.dataset.collapsed = stored ? 'true' : 'false';

  var btn = wrap.querySelector('.sb-prs-toggle');
  if (!btn) return;
  btn.setAttribute('aria-expanded', String(!stored));

  btn.addEventListener('click', function () {
    var nowCollapsed = wrap.dataset.collapsed !== 'true';
    wrap.dataset.collapsed = nowCollapsed ? 'true' : 'false';
    btn.setAttribute('aria-expanded', String(!nowCollapsed));
    btn.setAttribute('aria-label', nowCollapsed ? 'Expand sidebar' : 'Collapse sidebar');
    localStorage.setItem(KEY, String(nowCollapsed));
  });
})();
```

### 14. Search-top Sidebar

**Type:** Pure CSS
**Description:** Frosted macOS Big-Sur — translucent grey sidebar with vibrancy blur over a pastel sunrise wallpaper, system-blue active state. A sticky <code>&lt;form role="search"&gt;</code> at the top stays visible as the nav scrolls. Native <code>&lt;input type="search"&gt;</code> for the clear button.

**HTML:**
```html
<div class="sb-srh">
  <span class="sb-srh-wall" aria-hidden="true"></span>
  <aside class="sb-srh-side" aria-label="Primary">
    <header class="sb-srh-traffic" aria-hidden="true"><i></i><i></i><i></i></header>
    <form class="sb-srh-form" role="search">
      <label class="sr-only" for="sb-srh-q">Search docs</label>
      <span class="sb-srh-icon" aria-hidden="true">⌕</span>
      <input id="sb-srh-q" type="search" name="q" placeholder="Search…" autocomplete="off" />
      <kbd>⌘K</kbd>
    </form>
    <nav aria-label="Primary">
      <h3>Favourites</h3>
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-srh-i" style="background: #34c759">●</span>Inbox<em>12</em></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-srh-i" style="background: #ff9500">●</span>Drafts<em>3</em></a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" style="background: #5ac8fa">●</span>Sent</a>
        </li>
      </ul>
      <h3>iCloud</h3>
      <ul>
        <li>
          <a href="#!"><span class="sb-srh-i" aria-hidden="true">▤</span>Documents</a>
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" aria-hidden="true">◇</span>Desktop</a>
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" aria-hidden="true">⇩</span>Downloads</a>
        </li>
      </ul>
      <h3>Tags</h3>
      <ul>
        <li>
          <a href="#!"><span class="sb-srh-i" style="background: #ff3b30">●</span>Important</a>
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" style="background: #af52de">●</span>Personal</a>
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" style="background: #ffcc00">●</span>Travel</a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="sb-srh-main">
    <header class="sb-srh-mhead">
      <h2>Inbox</h2>
      <span class="sb-srh-meta">Updated just now · 12 unread</span>
    </header>
    <p>
      The search bar at the top stays sticky as the nav scrolls. Real
      <code>&lt;input type="search"&gt;</code> gives a native clear button. Vibrancy blur is pure
      CSS via <code>backdrop-filter</code>.
    </p>
    <div class="sb-srh-cards">
      <article class="sb-srh-card">
        <span class="sb-srh-card-dot" style="background: #34c759"></span>
        <strong>Anya Petrova</strong>
        <em>Re: Q3 launch deck</em>
      </article>
      <article class="sb-srh-card">
        <span class="sb-srh-card-dot" style="background: #5ac8fa"></span>
        <strong>Daichi Sato</strong>
        <em>Friday demo recap</em>
      </article>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-srh {
  position: relative;
  display: grid; grid-template-columns: 250px 1fr;
  min-height: 480px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  color: #1a1a1f;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
  letter-spacing: -0.01em;
}
.sb-srh-wall {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 30% 20%, #ffd1a8 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 70%, #ffb6d4 0%, transparent 60%),
    linear-gradient(180deg, #fff5e8 0%, #ffe8f0 50%, #d8e9ff 100%);
}
.sb-srh-side {
  position: relative; z-index: 1;
  background: rgba(245,245,250,0.72);
  backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border-right: 1px solid rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
  max-height: 480px; overflow-y: auto;
}
.sb-srh-traffic { display: flex; gap: 7px; padding: 12px 14px 0; }
.sb-srh-traffic i { display: block; width: 11px; height: 11px; border-radius: 50%; }
.sb-srh-traffic i:nth-child(1) { background: #ff5f57; }
.sb-srh-traffic i:nth-child(2) { background: #febc2e; }
.sb-srh-traffic i:nth-child(3) { background: #28c840; }
.sb-srh-form {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: rgba(245,245,250,0.85);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sb-srh-icon { color: #6e6e73; font-size: 13px; }
.sb-srh-form input {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 7px;
  color: #1a1a1f; font-size: 13px;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.sb-srh-form input:focus { outline: 3px solid rgba(0,122,255,0.4); outline-offset: -1px; border-color: rgba(0,122,255,0.6); }
.sb-srh-form kbd {
  font-family: -apple-system, sans-serif; font-size: 10.5px; font-weight: 600;
  padding: 2px 6px;
  background: rgba(255,255,255,0.7);
  color: #6e6e73;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
}
.sb-srh-side nav { padding: 14px 10px 18px; }
.sb-srh-side h3 { margin: 14px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #6e6e73; }
.sb-srh-side h3:first-of-type { margin-top: 4px; }
.sb-srh-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-srh-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: #1a1a1f;
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}
.sb-srh-side a:hover { background: rgba(0,0,0,0.05); }
.sb-srh-side a[aria-current="page"] { background: #007aff; color: #fff; font-weight: 600; }
.sb-srh-side a[aria-current="page"] em { color: rgba(255,255,255,0.85); }
.sb-srh-i { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; font-size: 7.5px; color: transparent; line-height: 0; }
.sb-srh-side a em { margin-left: auto; font-style: normal; font-size: 11px; color: #6e6e73; font-weight: 600; }
.sb-srh-main { position: relative; z-index: 1; padding: 32px 36px; background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 16px; }
.sb-srh-mhead { display: flex; align-items: baseline; justify-content: space-between; }
.sb-srh-main h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #1a1a1f; letter-spacing: -0.03em; }
.sb-srh-meta { font-size: 12px; color: #6e6e73; }
.sb-srh-main p { margin: 0; font-size: 13.5px; color: #3a3a3f; line-height: 1.6; max-width: 480px; }
.sb-srh-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #007aff; background: rgba(0,122,255,0.1); padding: 1px 6px; border-radius: 4px; }
.sb-srh-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sb-srh-card {
  display: grid; grid-template-columns: 10px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.14s, box-shadow 0.14s;
}
.sb-srh-card:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px rgba(0,0,0,0.08); }
.sb-srh-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sb-srh-card strong { font-size: 13.5px; font-weight: 700; color: #1a1a1f; }
.sb-srh-card em { font-style: normal; font-size: 12.5px; color: #6e6e73; grid-column: 2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .sb-srh { grid-template-columns: 1fr; }
  .sb-srh-side { max-height: none; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
}
```

### 15. Section-grouped Nav

**Type:** Pure CSS
**Description:** Memphis design — pastel-pink sidebar with mint and lemon accents, black squiggle backgrounds, hard-shadow chunky pills. Each section is its own <code>&lt;nav aria-label&gt;</code> so screen readers jump cleanly. The 80s/90s graphic style reborn for an admin shell.

**HTML:**
```html
<div class="sb-grp">
  <aside class="sb-grp-side" aria-label="Primary">
    <a class="sb-grp-brand" href="#!">
      <span class="sb-grp-dot" aria-hidden="true"></span>
      <span class="sb-grp-name">Sundae<small>by Atelier</small></span>
    </a>
    <nav aria-label="Workspace">
      <h3>Workspace</h3>
      <ul>
        <li><a href="#!" aria-current="page">Dashboard</a></li>
        <li><a href="#!">Projects</a></li>
        <li><a href="#!">Team</a></li>
      </ul>
    </nav>
    <nav aria-label="Account">
      <h3>Account</h3>
      <ul>
        <li><a href="#!">Profile</a></li>
        <li><a href="#!">Billing</a></li>
        <li><a href="#!">API keys</a></li>
      </ul>
    </nav>
    <nav aria-label="Help">
      <h3>Help</h3>
      <ul>
        <li><a href="#!">Documentation</a></li>
        <li><a href="#!">Support</a></li>
      </ul>
    </nav>
  </aside>
  <main class="sb-grp-main">
    <span class="sb-grp-eye">★ HELLO, FRIEND</span>
    <h2>Welcome<br />back!</h2>
    <p>
      Each section is a separate <code>&lt;nav&gt;</code> — screen readers skip cleanly between
      Workspace / Account / Help. The squiggle background is pure CSS (<code>radial-gradient</code>
      + <code>repeating</code>).
    </p>
    <div class="sb-grp-cards">
      <div class="sb-grp-c sb-grp-c-mint"><strong>284</strong><span>Active</span></div>
      <div class="sb-grp-c sb-grp-c-lemon"><strong>47</strong><span>Pending</span></div>
      <div class="sb-grp-c sb-grp-c-coral"><strong>12</strong><span>Closed</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-grp {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 80% 20%, #ffe4ec 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, #d4f6e8 0%, transparent 40%),
    #fff7e8;
  color: #1a1a1a;
  border-radius: 16px; overflow: hidden;
  border: 3px solid #1a1a1a;
}
.sb-grp-side {
  background:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(26,26,26,0.04) 20px 21px),
    #ffd4e5;
  border-right: 3px solid #1a1a1a;
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; max-height: 480px;
}
.sb-grp-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; text-decoration: none; border-bottom: 2px dashed #1a1a1a; }
.sb-grp-dot { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #ffd400; border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-name { font-family: 'Helvetica Neue', system-ui, sans-serif; font-size: 16px; font-weight: 900; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1; }
.sb-grp-name small { display: block; font-size: 9.5px; font-weight: 600; color: #c54b8c; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 2px; }
.sb-grp-side h3 { margin: 0 0 6px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #c54b8c; }
.sb-grp-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sb-grp-side a {
  display: block;
  padding: 8px 12px;
  border-radius: 22px;
  font-size: 13px; font-weight: 700;
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #1a1a1a;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.sb-grp-side a:hover { background: #fff7e8; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-side a[aria-current="page"] { background: #6dd5b3; color: #1a1a1a; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-main {
  position: relative;
  padding: 30px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.sb-grp-main::before {
  content: ''; position: absolute; top: 24px; right: 28px;
  width: 56px; height: 56px;
  background: #ffd400; border: 3px solid #1a1a1a;
  transform: rotate(15deg);
  box-shadow: 4px 4px 0 #1a1a1a;
  z-index: 0;
}
.sb-grp-main::after {
  content: ''; position: absolute; bottom: 80px; right: 60px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #c54b8c; border: 3px solid #1a1a1a;
  box-shadow: 3px 3px 0 #1a1a1a;
  z-index: 0;
}
.sb-grp-eye { position: relative; z-index: 1; font-family: 'Helvetica Neue', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; color: #c54b8c; }
.sb-grp-main h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92; color: #1a1a1a; letter-spacing: -0.03em; }
.sb-grp-main h2::after { content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 6px; background: #c54b8c; border: 2px solid #1a1a1a; border-radius: 50%; vertical-align: middle; box-shadow: 2px 2px 0 #1a1a1a; }
.sb-grp-main p { position: relative; z-index: 1; margin: 0; font-size: 13.5px; color: #4a4a4a; line-height: 1.6; max-width: 460px; }
.sb-grp-main code { font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700; color: #1a1a1a; background: #ffd400; padding: 1px 6px; border-radius: 3px; border: 1.5px solid #1a1a1a; }
.sb-grp-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; max-width: 480px; }
.sb-grp-c { padding: 14px 14px; border: 2.5px solid #1a1a1a; border-radius: 14px; box-shadow: 4px 4px 0 #1a1a1a; display: flex; flex-direction: column; gap: 2px; }
.sb-grp-c strong { font-size: 22px; font-weight: 900; color: #1a1a1a; line-height: 1; letter-spacing: -0.02em; }
.sb-grp-c span { font-size: 11px; font-weight: 700; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.08em; }
.sb-grp-c-mint  { background: #6dd5b3; }
.sb-grp-c-lemon { background: #ffd400; }
.sb-grp-c-coral { background: #ff8b7a; }
@media (max-width: 720px) {
  .sb-grp { grid-template-columns: 1fr; }
  .sb-grp-side { border-right: 0; border-bottom: 3px solid #1a1a1a; max-height: none; }
  .sb-grp-cards { grid-template-columns: 1fr; }
}
```

### 16. Target-active Highlight

**Type:** Light JS
**Description:** Retro magazine TOC — cream paper, sepia rules, bordeaux-red active marker. The contents page of a 1970s journal. Active-link state via URL hash + <code>:target</code> pseudo-class; sibling selectors highlight the corresponding nav link. A 4-line script uses <code>history.pushState</code> so the URL hash updates without scrolling the host page.

**HTML:**
```html
<div class="sb-act" id="sb-act-root">
  <aside class="sb-act-side" aria-label="Primary">
    <header>
      <span class="sb-act-issue">Issue No. 47</span>
      <h3>Contents</h3>
    </header>
    <nav aria-label="Primary">
      <ol>
        <li>
          <a href="#sb-act-overview" data-tgt="overview"><span>Overview</span><em>p. 04</em></a>
        </li>
        <li>
          <a href="#sb-act-features" data-tgt="features"><span>Features</span><em>p. 12</em></a>
        </li>
        <li>
          <a href="#sb-act-pricing" data-tgt="pricing"><span>Pricing</span><em>p. 28</em></a>
        </li>
        <li>
          <a href="#sb-act-changelog" data-tgt="changelog"><span>Changelog</span><em>p. 36</em></a>
        </li>
      </ol>
    </nav>
    <footer>Spring · MMXXVI</footer>
  </aside>
  <main class="sb-act-main">
    <section id="sb-act-overview" class="sb-act-sec">
      <span class="sb-act-page">— Page 04</span>
      <h2>Overview.</h2>
      <p>
        Click a link to the left — the <code>:target</code> pseudo-class highlights it
        automatically. Sibling selectors do the work; <code>history.pushState</code> keeps the host
        page from jumping.
      </p>
    </section>
    <section id="sb-act-features" class="sb-act-sec">
      <span class="sb-act-page">— Page 12</span>
      <h2>Features.</h2>
      <p>
        The CSS pattern is <code>:has(#section:target) a[href="#section"]</code>. No JavaScript
        needed for the highlighting itself.
      </p>
    </section>
    <section id="sb-act-pricing" class="sb-act-sec">
      <span class="sb-act-page">— Page 28</span>
      <h2>Pricing.</h2>
      <p>
        Hash-based routing works in any browser. No router library, no framework dependency, no
        virtual DOM.
      </p>
    </section>
    <section id="sb-act-changelog" class="sb-act-sec">
      <span class="sb-act-page">— Page 36</span>
      <h2>Changelog.</h2>
      <p>
        Each section is a real <code>&lt;section&gt;</code> with an id — semantic, bookmarkable, and
        shareable.
      </p>
    </section>
  </main>
</div>
```

**CSS:**
```css
.sb-act {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #f4ecdb;
  color: #2a1a10;
  border-radius: 0; overflow: hidden;
  border: 1px solid #2a1a10;
}
.sb-act-side {
  background: #ede0c4;
  border-right: 1px solid #2a1a10;
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-act-side header { padding-bottom: 14px; border-bottom: 2px solid #2a1a10; }
.sb-act-issue { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; color: #8a4a2c; text-transform: uppercase; }
.sb-act-side h3 { margin: 4px 0 0; font-size: 30px; font-weight: 500; font-style: italic; color: #2a1a10; letter-spacing: -0.02em; line-height: 1; }
.sb-act-side ol { list-style: none; margin: 0; padding: 0; counter-reset: act; display: flex; flex-direction: column; gap: 0; }
.sb-act-side li { counter-increment: act; }
.sb-act-side a {
  position: relative;
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: baseline; gap: 12px;
  padding: 10px 4px;
  font-size: 16px; color: #2a1a10; text-decoration: none;
  border-bottom: 1px dotted #b89668;
  transition: padding-left 0.16s, color 0.16s;
}
.sb-act-side a::before {
  content: counter(act, decimal-leading-zero);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #8a4a2c;
  align-self: center;
}
.sb-act-side a span { font-style: italic; }
.sb-act-side a em { font-family: 'Inter', sans-serif; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #8a4a2c; }
.sb-act-side a:hover { padding-left: 4px; color: #8a1f2c; }
.sb-act-side footer { margin-top: auto; padding-top: 14px; border-top: 1px solid #2a1a10; font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.18em; color: #8a4a2c; text-align: center; text-transform: uppercase; }
.sb-act-main { padding: 28px 32px; overflow-y: auto; max-height: 480px; background: #fbf5e6; }
.sb-act-sec { padding: 18px 0; border-bottom: 1px solid #d8c598; }
.sb-act-sec:last-child { border-bottom: 0; }
.sb-act-page { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; color: #8a1f2c; text-transform: uppercase; }
.sb-act-sec h2 { margin: 4px 0 8px; font-family: 'Playfair Display', 'Georgia', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #2a1a10; line-height: 0.96; letter-spacing: -0.02em; }
.sb-act-sec p  { margin: 0; font-size: 14.5px; color: #3c2818; line-height: 1.7; max-width: 540px; }
.sb-act-sec code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #8a1f2c; background: rgba(138,31,44,0.08); padding: 1px 5px; border-radius: 0; font-weight: 600; }
/* Default first-link active when no :target yet */
.sb-act-side a[href="#sb-act-overview"] { padding-left: 4px; color: #8a1f2c; font-weight: 700; }
.sb-act-side a[href="#sb-act-overview"]::after { content: '·'; font-family: serif; font-size: 22px; line-height: 0; color: #8a1f2c; margin-left: 4px; }
/* Override default when any section is targeted */
.sb-act:has(:target) .sb-act-side a[href="#sb-act-overview"] { padding-left: 0; color: #2a1a10; font-weight: 400; }
.sb-act:has(:target) .sb-act-side a[href="#sb-act-overview"]::after { content: ''; }
/* Highlight the link matching the targeted section */
.sb-act:has(#sb-act-overview:target)   .sb-act-side a[href="#sb-act-overview"],
.sb-act:has(#sb-act-features:target)   .sb-act-side a[href="#sb-act-features"],
.sb-act:has(#sb-act-pricing:target)    .sb-act-side a[href="#sb-act-pricing"],
.sb-act:has(#sb-act-changelog:target)  .sb-act-side a[href="#sb-act-changelog"]   { padding-left: 4px; color: #8a1f2c; font-weight: 700; }
.sb-act:has(#sb-act-overview:target)   .sb-act-side a[href="#sb-act-overview"]::after,
.sb-act:has(#sb-act-features:target)   .sb-act-side a[href="#sb-act-features"]::after,
.sb-act:has(#sb-act-pricing:target)    .sb-act-side a[href="#sb-act-pricing"]::after,
.sb-act:has(#sb-act-changelog:target)  .sb-act-side a[href="#sb-act-changelog"]::after { content: '·'; font-family: serif; font-size: 22px; line-height: 0; color: #8a1f2c; margin-left: 4px; }
```

**JS:**
```js
/* :target stays the engine — JS only updates the hash without scrolling. */
document.querySelectorAll('.sb-act-side a').forEach(function (a) {
  a.addEventListener('click', function (e) {
    e.preventDefault();
    var hash = a.getAttribute('href');
    if (hash && hash.charAt(0) === '#') history.pushState(null, '', hash);
  });
});
```

### 17. Nested Expandable Nav

**Type:** Pure CSS
**Description:** Notebook paper — off-white sheet with hand-drawn ruled lines, graphite pencil marks, dog-eared corner. Two-level nav built with native <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code>: free keyboard support, free <code>aria-expanded</code>, free Enter/Space toggling. The browser does the work.

**HTML:**
```html
<div class="sb-nst">
  <aside class="sb-nst-side" aria-label="Primary">
    <header>
      <span class="sb-nst-tab" aria-hidden="true"></span>
      <h3>Field Notes</h3>
      <span class="sb-nst-date">07 / Mar / 26</span>
    </header>
    <nav aria-label="Primary">
      <details open>
        <summary>Authentication</summary>
        <ul>
          <li><a href="#!" aria-current="page">API keys</a></li>
          <li><a href="#!">OAuth tokens</a></li>
          <li><a href="#!">Webhooks</a></li>
        </ul>
      </details>
      <details>
        <summary>Resources</summary>
        <ul>
          <li><a href="#!">Customers</a></li>
          <li><a href="#!">Subscriptions</a></li>
          <li><a href="#!">Invoices</a></li>
          <li><a href="#!">Charges</a></li>
        </ul>
      </details>
      <details>
        <summary>Errors</summary>
        <ul>
          <li><a href="#!">Status codes</a></li>
          <li><a href="#!">Error responses</a></li>
        </ul>
      </details>
    </nav>
    <footer>— No. 47 —</footer>
  </aside>
  <main class="sb-nst-main">
    <span class="sb-nst-eye">— On Authentication</span>
    <h2>Native HTML<br />does the work.</h2>
    <p>
      Each top-level section is a real <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> —
      the browser handles keyboard navigation, <code>aria-expanded</code> state, and Enter/Space
      toggling. No script, no library, no boilerplate.
    </p>
    <blockquote>
      <span class="sb-nst-quote-mark" aria-hidden="true">"</span>
      Build with the platform. The platform has been thinking about your problem for thirty years.
      <cite>— margin note, 2026</cite>
    </blockquote>
  </main>
</div>
```

**CSS:**
```css
.sb-nst {
  position: relative;
  display: grid; grid-template-columns: 260px 1fr;
  min-height: 480px;
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  background: #fbf6e8;
  color: #2a2418;
  border-radius: 6px; overflow: hidden;
  border: 1px solid #2a2418;
  background-image:
    repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.18) 27px 28px),
    radial-gradient(circle at 100% 100%, transparent 18px, #fbf6e8 18px);
  background-position: 0 14px, 0 0;
}
.sb-nst-side {
  position: relative;
  background:
    repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.18) 27px 28px),
    rgba(248,242,224,0.6);
  background-position: 0 14px, 0 0;
  border-right: 1px dashed rgba(42,36,24,0.35);
  padding: 18px 16px;
  overflow-y: auto; max-height: 480px;
}
.sb-nst-side::after { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(225deg, #fbf6e8 50%, rgba(42,36,24,0.12) 50%); }
.sb-nst-side header { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1.5px dashed #2a2418; position: relative; }
.sb-nst-tab { width: 18px; height: 18px; flex-shrink: 0; background: #d4533a; border: 1.5px solid #2a2418; transform: rotate(-12deg); }
.sb-nst-side h3 { margin: 0; font-family: 'Caveat', cursive; font-size: 28px; font-weight: 700; color: #2a2418; line-height: 1; flex: 1; }
.sb-nst-date { font-family: 'Caveat', cursive; font-size: 14px; color: #6a5a3c; transform: rotate(-3deg); }
.sb-nst-side details { padding: 4px 0; }
.sb-nst-side summary {
  cursor: pointer; padding: 6px 4px;
  font-family: 'Caveat', cursive;
  font-size: 22px; font-weight: 700; color: #2a2418;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  transition: color 0.14s;
}
.sb-nst-side summary::-webkit-details-marker { display: none; }
.sb-nst-side summary:hover { color: #d4533a; }
.sb-nst-side summary::after {
  content: '+';
  font-family: 'Caveat', cursive; font-size: 28px; line-height: 0.6; font-weight: 400;
  color: #d4533a;
  transition: transform 0.22s;
}
.sb-nst-side details[open] summary::after { content: '−'; }
.sb-nst-side ul { list-style: none; margin: 4px 0 12px 22px; padding: 0; display: flex; flex-direction: column; gap: 0; border-left: 1.5px dashed #d4533a; }
.sb-nst-side li { padding-left: 12px; position: relative; }
.sb-nst-side li::before { content: '·'; position: absolute; left: -4px; top: 50%; transform: translateY(-60%); color: #d4533a; font-size: 24px; line-height: 0; }
.sb-nst-side a {
  display: block;
  padding: 4px 6px;
  font-family: 'Caveat', cursive;
  font-size: 18px; color: #2a2418; text-decoration: none;
  transition: color 0.14s, padding-left 0.14s;
}
.sb-nst-side a:hover { color: #d4533a; padding-left: 10px; }
.sb-nst-side a[aria-current="page"] {
  color: #d4533a;
  font-weight: 700;
  background-image: linear-gradient(transparent 60%, rgba(255,232,99,0.7) 60%);
}
.sb-nst-side footer { margin-top: 16px; padding-top: 10px; border-top: 1.5px dashed rgba(42,36,24,0.4); text-align: center; font-family: 'Caveat', cursive; font-size: 18px; color: #6a5a3c; transform: rotate(-1deg); }
.sb-nst-main {
  position: relative;
  padding: 32px 40px 32px 70px;
  background-image:
    repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.22) 27px 28px),
    rgba(255,250,232,0.6);
  background-position: 0 14px, 0 0;
}
.sb-nst-main::before {
  content: ''; position: absolute; left: 50px; top: 0; bottom: 0; width: 1.5px; background: #d44a4a; opacity: 0.55;
}
.sb-nst-eye { font-family: 'Caveat', cursive; font-size: 16px; color: #d4533a; transform: rotate(-1deg); display: inline-block; margin-bottom: 6px; }
.sb-nst-main h2 { margin: 0 0 14px; font-family: 'Caveat', cursive; font-size: clamp(38px, 5.5vw, 64px); font-weight: 700; color: #2a2418; line-height: 1; transform: rotate(-0.5deg); }
.sb-nst-main p { margin: 0 0 18px; font-family: 'Caveat', cursive; font-size: 19px; color: #2a2418; line-height: 1.55; max-width: 460px; }
.sb-nst-main code { font-family: 'Courier New', monospace; font-size: 14px; color: #d4533a; background: transparent; padding: 1px 5px; border: 1.5px dashed rgba(212,83,58,0.45); border-radius: 0; }
.sb-nst-main blockquote {
  position: relative;
  margin: 0; padding: 12px 18px 12px 32px;
  font-family: 'Caveat', cursive; font-size: 20px; color: #4a4030;
  line-height: 1.5; max-width: 480px;
  border-left: 3px solid #d4533a;
  font-style: italic;
}
.sb-nst-quote-mark { position: absolute; left: 6px; top: -6px; font-family: 'Caveat', cursive; font-size: 64px; line-height: 1; color: #d4533a; opacity: 0.4; font-style: normal; }
.sb-nst-main blockquote cite { display: block; margin-top: 6px; font-size: 16px; color: #6a5a3c; font-style: normal; }
@media (max-width: 720px) {
  .sb-nst { grid-template-columns: 1fr; }
  .sb-nst-side { max-height: none; border-right: 0; border-bottom: 1px dashed rgba(42,36,24,0.4); }
  .sb-nst-main { padding-left: 40px; }
}
```

### 18. Tabbed Sidebar

**Type:** Pure CSS
**Description:** Dracula tribute — the editor theme reborn as a sidebar. Deep purple base with peach, cyan, lime, and pink accents; monospace IDE type. Three tabs swap the content (Files, Search, Git) via radio inputs + <code>:has()</code> + sibling selectors. Zero JavaScript.

**HTML:**
```html
<div class="sb-tab">
  <aside class="sb-tab-side" aria-label="Primary">
    <header class="sb-tab-titlebar">
      <span aria-hidden="true"><i></i><i></i><i></i></span>
      <strong>~/projects/dracula</strong>
    </header>
    <div class="sb-tab-tabs" role="tablist">
      <input id="sb-tab-1" type="radio" name="sb-tab" checked />
      <label for="sb-tab-1" role="tab"><span aria-hidden="true">▤</span>Files</label>
      <input id="sb-tab-2" type="radio" name="sb-tab" />
      <label for="sb-tab-2" role="tab"><span aria-hidden="true">⌕</span>Search</label>
      <input id="sb-tab-3" type="radio" name="sb-tab" />
      <label for="sb-tab-3" role="tab"><span aria-hidden="true">◇</span>Git<em>3</em></label>
    </div>
    <div class="sb-tab-pane" data-pane="1">
      <h3>Explorer</h3>
      <ul>
        <li class="folder">src/</li>
        <li class="file ts">app.tsx</li>
        <li class="file ts">main.tsx</li>
        <li class="file css">styles.css</li>
        <li class="folder">public/</li>
        <li class="file">favicon.svg</li>
        <li class="file json">package.json</li>
        <li class="file">README.md</li>
      </ul>
    </div>
    <div class="sb-tab-pane" data-pane="2">
      <h3>Search</h3>
      <label class="sb-tab-search-row">
        <span aria-hidden="true">⌕</span>
        <input type="search" placeholder="Search project…" />
      </label>
      <p>Use <kbd>⌘F</kbd> in file · <kbd>⌘⇧F</kbd> for project search.</p>
    </div>
    <div class="sb-tab-pane" data-pane="3">
      <h3>Source control</h3>
      <ul>
        <li><em class="git-m">M</em>app.tsx</li>
        <li><em class="git-a">A</em>README.md</li>
        <li><em class="git-m">M</em>package.json</li>
      </ul>
    </div>
    <footer class="sb-tab-status">
      <span><i style="background: #ff79c6"></i>main</span>
      <span>0 ↓ · 2 ↑</span>
    </footer>
  </aside>
  <main class="sb-tab-main">
    <header class="sb-tab-bar">
      <span class="sb-tab-pill">app.tsx</span>
      <span class="sb-tab-pill ghost">+ 47</span>
      <span class="sb-tab-pill ghost">UTF-8</span>
    </header>
    <pre class="sb-tab-code"><code><span class="c">// Three tabs, zero JavaScript.</span>
<span class="k">const</span> <span class="v">app</span> = <span class="o">() =&gt;</span> {
  <span class="k">return</span> &lt;<span class="t">Sidebar</span> theme=<span class="s">"dracula"</span> /&gt;
}</code></pre>
    <p>
      Click the tabs at the top of the sidebar to swap between Files, Search, and Git. Pattern:
      radio inputs + <code>:has(#tab-1:checked)</code> + sibling selectors. Theme is the Dracula
      palette translated into a real layout.
    </p>
  </main>
</div>
```

**CSS:**
```css
.sb-tab {
  display: grid; grid-template-columns: 280px 1fr;
  min-height: 480px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  background: #282a36; color: #f8f8f2;
  border-radius: 8px; overflow: hidden;
  font-feature-settings: 'liga' 1, 'calt' 1;
}
.sb-tab-side { background: #21222c; border-right: 1px solid #44475a; display: flex; flex-direction: column; }
.sb-tab-titlebar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #191a21; border-bottom: 1px solid #44475a; }
.sb-tab-titlebar span { display: flex; gap: 6px; }
.sb-tab-titlebar i { width: 11px; height: 11px; border-radius: 50%; }
.sb-tab-titlebar i:nth-child(1) { background: #ff5555; }
.sb-tab-titlebar i:nth-child(2) { background: #f1fa8c; }
.sb-tab-titlebar i:nth-child(3) { background: #50fa7b; }
.sb-tab-titlebar strong { font-size: 11px; font-weight: 500; color: #6272a4; letter-spacing: 0.04em; }
.sb-tab-tabs {
  display: flex; padding: 0;
  background: #21222c; border-bottom: 1px solid #44475a;
}
.sb-tab-tabs input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-tab-tabs input:focus-visible + label { outline: 2px solid #ff79c6; outline-offset: -2px; }
.sb-tab-tabs label {
  flex: 1; padding: 10px 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #6272a4;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.sb-tab-tabs label span { color: #ff79c6; font-size: 12px; }
.sb-tab-tabs label em { margin-left: 4px; font-size: 9.5px; font-style: normal; padding: 1px 5px; border-radius: 8px; background: #ff5555; color: #f8f8f2; font-weight: 700; }
.sb-tab-tabs label:hover { color: #f8f8f2; background: rgba(98,114,164,0.1); }
.sb-tab-tabs input:checked + label { color: #f8f8f2; border-bottom-color: #50fa7b; background: #282a36; }
.sb-tab-pane { display: none; padding: 14px 14px; flex: 1; overflow-y: auto; }
.sb-tab-side:has(#sb-tab-1:checked) [data-pane="1"] { display: block; }
.sb-tab-side:has(#sb-tab-2:checked) [data-pane="2"] { display: block; }
.sb-tab-side:has(#sb-tab-3:checked) [data-pane="3"] { display: block; }
.sb-tab-pane h3 { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #6272a4; }
.sb-tab-pane ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-tab-pane li { padding: 4px 6px; font-size: 12px; color: #f8f8f2; display: flex; align-items: center; gap: 8px; transition: background 0.12s; cursor: pointer; }
.sb-tab-pane li:hover { background: #44475a; }
.sb-tab-pane li::before { content: ''; flex-shrink: 0; }
.sb-tab-pane li.folder::before { content: '▸ '; color: #ff79c6; font-size: 10px; }
.sb-tab-pane li.file { padding-left: 22px; color: #bd93f9; }
.sb-tab-pane li.file::before { content: '▢ '; color: #6272a4; font-size: 10px; }
.sb-tab-pane li.file.ts { color: #8be9fd; }
.sb-tab-pane li.file.css { color: #ff79c6; }
.sb-tab-pane li.file.json { color: #f1fa8c; }
.sb-tab-pane li em { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.sb-tab-pane li em.git-m { color: #ffb86c; background: rgba(255,184,108,0.15); }
.sb-tab-pane li em.git-a { color: #50fa7b; background: rgba(80,250,123,0.15); }
.sb-tab-search-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #282a36; border: 1px solid #44475a; border-radius: 4px; }
.sb-tab-search-row span { color: #6272a4; font-size: 13px; }
.sb-tab-search-row input { flex: 1; min-width: 0; background: transparent; border: 0; color: #f8f8f2; font-family: inherit; font-size: 12px; }
.sb-tab-search-row input:focus { outline: none; }
.sb-tab-pane p { margin: 10px 0 0; font-size: 11px; color: #6272a4; line-height: 1.6; }
.sb-tab-pane kbd { font-family: inherit; padding: 1px 5px; background: #44475a; color: #f8f8f2; border-radius: 3px; font-size: 10px; font-weight: 600; }
.sb-tab-status { margin-top: auto; display: flex; justify-content: space-between; padding: 6px 12px; background: #ff79c6; color: #282a36; font-size: 10.5px; font-weight: 700; }
.sb-tab-status span { display: inline-flex; align-items: center; gap: 6px; }
.sb-tab-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.sb-tab-main { padding: 28px 32px; background: #282a36; display: flex; flex-direction: column; gap: 16px; }
.sb-tab-bar { display: flex; gap: 8px; }
.sb-tab-pill { padding: 4px 10px; font-size: 11px; font-weight: 600; background: #44475a; color: #f8f8f2; border-radius: 4px; }
.sb-tab-pill.ghost { background: transparent; border: 1px solid #44475a; color: #6272a4; }
.sb-tab-code {
  margin: 0; padding: 18px 22px;
  background: #21222c;
  border: 1px solid #44475a;
  border-radius: 6px;
  font-size: 13px; line-height: 1.7;
  color: #f8f8f2;
  white-space: pre-wrap;
}
.sb-tab-code .c { color: #6272a4; font-style: italic; }
.sb-tab-code .k { color: #ff79c6; }
.sb-tab-code .v { color: #50fa7b; }
.sb-tab-code .o { color: #ff79c6; }
.sb-tab-code .t { color: #8be9fd; }
.sb-tab-code .s { color: #f1fa8c; }
.sb-tab-main p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: #bd93f9; line-height: 1.65; max-width: 460px; }
.sb-tab-main code { color: #50fa7b; background: #21222c; padding: 1px 6px; border-radius: 3px; font-size: 12.5px; border: 1px solid #44475a; }
```

### 19. Onboarding Progress

**Type:** Pure CSS
**Description:** Duolingo-style joyful gamification — forest-green nav with canary-yellow CTAs, hard chunky shadows, oversized rounded buttons. Native <code>&lt;progress&gt;</code> announces completion to screen readers; a real <code>&lt;ol&gt;</code> tracks steps. Designed to feel like progress is fun.

**HTML:**
```html
<div class="sb-prg">
  <aside class="sb-prg-side" aria-label="Primary">
    <a class="sb-prg-brand" href="#!">
      <span class="sb-prg-mark" aria-hidden="true">🌿</span>
      <span class="sb-prg-name">Sprout<small>v2</small></span>
    </a>
    <nav class="sb-prg-nav" aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-prg-i" aria-hidden="true">🏡</span>Dashboard</a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-prg-i" aria-hidden="true">📚</span>Lessons</a>
        </li>
        <li>
          <a href="#!"><span class="sb-prg-i" aria-hidden="true">🏆</span>Trophies</a>
        </li>
        <li>
          <a href="#!"><span class="sb-prg-i" aria-hidden="true">⚙️</span>Settings</a>
        </li>
      </ul>
    </nav>
    <section class="sb-prg-card" aria-labelledby="sb-prg-h">
      <header>
        <h3 id="sb-prg-h">Daily streak</h3>
        <span class="sb-prg-streak" aria-label="7 day streak">🔥 7</span>
      </header>
      <progress value="3" max="5">3 of 5 complete</progress>
      <p><strong>3</strong> of 5 quests done</p>
      <ol>
        <li class="done">Pick your goal</li>
        <li class="done">Take placement</li>
        <li class="done">Add friends</li>
        <li>Connect calendar</li>
        <li>Earn first badge</li>
      </ol>
      <button type="button" class="sb-prg-go">Continue →</button>
    </section>
  </aside>
  <main class="sb-prg-main">
    <span class="sb-prg-eye">👋 GOOD MORNING</span>
    <h2>Let's keep<br />that streak!</h2>
    <p>
      Quests fade as you complete them and the streak counter pulses gently when you hit a
      milestone. Native <code>&lt;progress&gt;</code> + a real <code>&lt;ol&gt;</code> — assistive
      tech reads everything correctly.
    </p>
    <div class="sb-prg-stats">
      <div class="sb-prg-stat"><strong>2,481</strong><span>XP earned</span></div>
      <div class="sb-prg-stat"><strong>47</strong><span>Lessons</span></div>
      <div class="sb-prg-stat"><strong>12</strong><span>Badges</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-prg {
  display: grid; grid-template-columns: 260px 1fr;
  min-height: 480px;
  font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
  background: #fff9e6; color: #3c4043;
  border-radius: 16px; overflow: hidden;
  border: 4px solid #1a3d2c;
}
.sb-prg-side {
  background: linear-gradient(180deg, #2f7a4f 0%, #1f5837 100%);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  border-right: 4px solid #1a3d2c;
  box-shadow: 4px 0 0 #1a3d2c;
}
.sb-prg-side::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, #ffd400 0 12px, #1a3d2c 12px 14px, #ffd400 14px 26px, transparent 26px 30px);
}
.sb-prg-brand { display: flex; align-items: center; gap: 10px; padding: 14px 6px 14px; text-decoration: none; }
.sb-prg-mark { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #ffd400; border: 3px solid #1a3d2c; font-size: 18px; box-shadow: 0 4px 0 #1a3d2c; }
.sb-prg-name { color: #fff; font-size: 17px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.sb-prg-name small { display: block; font-size: 10px; color: #ffd400; font-weight: 800; letter-spacing: 0.16em; margin-top: 3px; }
.sb-prg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-prg-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 14px; font-weight: 800; color: #d4f0e0;
  text-decoration: none;
  background: rgba(0,0,0,0.16);
  border: 2px solid transparent;
  transition: transform 0.14s, background 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.sb-prg-nav a:hover { background: rgba(0,0,0,0.28); color: #fff; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a3d2c; }
.sb-prg-nav a[aria-current="page"] { background: #ffd400; color: #1a3d2c; border-color: #1a3d2c; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1a3d2c; }
.sb-prg-i { font-size: 16px; }
.sb-prg-card { margin-top: auto; padding: 14px; background: #fff; border: 3px solid #1a3d2c; border-radius: 16px; box-shadow: 5px 5px 0 #1a3d2c; }
.sb-prg-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sb-prg-card h3 { margin: 0; font-size: 13px; font-weight: 900; color: #1a3d2c; letter-spacing: -0.01em; }
.sb-prg-streak { font-size: 13px; font-weight: 900; color: #ff6b35; padding: 3px 8px; border-radius: 10px; background: #fff1e6; border: 2px solid #ff6b35; }
.sb-prg-card progress {
  width: 100%; height: 12px; appearance: none;
  background: #f0f0f0; border: 2px solid #1a3d2c; border-radius: 10px; overflow: hidden;
}
.sb-prg-card progress::-webkit-progress-bar { background: #f0f0f0; }
.sb-prg-card progress::-webkit-progress-value { background: linear-gradient(180deg,#5cd47a,#2f7a4f); border-radius: 8px 0 0 8px; }
.sb-prg-card progress::-moz-progress-bar { background: linear-gradient(180deg,#5cd47a,#2f7a4f); border-radius: 8px 0 0 8px; }
.sb-prg-card p { margin: 8px 0 12px; font-size: 12px; color: #3c4043; font-weight: 700; }
.sb-prg-card p strong { color: #2f7a4f; font-weight: 900; }
.sb-prg-card ol { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: prg; display: flex; flex-direction: column; gap: 6px; }
.sb-prg-card li { counter-increment: prg; font-size: 12px; font-weight: 700; color: #3c4043; padding-left: 26px; position: relative; line-height: 1.5; }
.sb-prg-card li::before {
  content: counter(prg);
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: #3c4043;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  border: 2px solid #3c4043;
}
.sb-prg-card li.done { color: #2f7a4f; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(47,122,79,0.4); }
.sb-prg-card li.done::before { content: '✓'; background: #2f7a4f; color: #fff; border-color: #1a3d2c; font-size: 11px; }
.sb-prg-go {
  display: block; width: 100%;
  padding: 11px 14px;
  background: #ffd400; color: #1a3d2c;
  border: 3px solid #1a3d2c; border-radius: 12px;
  font-family: inherit; font-size: 13px; font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 0 #1a3d2c;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-prg-go:hover { background: #ffe44a; }
.sb-prg-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #1a3d2c; }
.sb-prg-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; background: #fff9e6; }
.sb-prg-eye { font-size: 12px; font-weight: 900; letter-spacing: 0.16em; color: #ff6b35; }
.sb-prg-main h2 { margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.95; color: #1a3d2c; letter-spacing: -0.03em; }
.sb-prg-main p { margin: 0; font-size: 14px; color: #3c4043; line-height: 1.6; max-width: 440px; font-weight: 600; }
.sb-prg-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #1a3d2c; background: #ffd400; padding: 1px 6px; border-radius: 4px; border: 2px solid #1a3d2c; font-weight: 700; }
.sb-prg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; max-width: 440px; }
.sb-prg-stat { background: #fff; border: 3px solid #1a3d2c; border-radius: 14px; padding: 12px 14px; box-shadow: 4px 4px 0 #1a3d2c; }
.sb-prg-stats strong { display: block; font-size: 22px; font-weight: 900; color: #1a3d2c; line-height: 1; letter-spacing: -0.02em; }
.sb-prg-stats span { display: block; font-size: 11px; font-weight: 800; color: #2f7a4f; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
@media (max-width: 720px) {
  .sb-prg { grid-template-columns: 1fr; }
  .sb-prg-side { border-right: 0; border-bottom: 4px solid #1a3d2c; box-shadow: 0 4px 0 #1a3d2c; }
  .sb-prg-stats { grid-template-columns: 1fr; }
}
```

### 20. Resizable Sidebar

**Type:** Pure CSS
**Description:** Brutalist mono — pure white, ink black, zero radius, oversized monospace. The "raw HTML element with no styling" energy. Drag the right edge of the sidebar to resize. Pure CSS via <code>resize: horizontal</code> on a wrapper; the browser provides the drag handle.

**HTML:**
```html
<div class="sb-rsz">
  <aside class="sb-rsz-side" aria-label="Primary">
    <header>
      <span class="sb-rsz-bar" aria-hidden="true">[ === ]</span>
      <strong>FILE.SYS</strong>
    </header>
    <h3>// directory</h3>
    <ul class="sb-rsz-tree">
      <li class="folder">src/</li>
      <li class="indent folder">components/</li>
      <li class="indent indent2">Button.tsx</li>
      <li class="indent indent2">Card.tsx</li>
      <li class="indent indent2 active">Modal.tsx</li>
      <li class="indent folder">pages/</li>
      <li class="indent indent2">index.tsx</li>
      <li class="indent indent2">about.tsx</li>
      <li>package.json</li>
      <li>tsconfig.json</li>
    </ul>
    <p class="sb-rsz-hint">→→→ DRAG_RIGHT_EDGE →→→</p>
  </aside>
  <main class="sb-rsz-main">
    <header class="sb-rsz-bar2">
      <span>STATUS: 200_OK</span>
      <span>17:42:08 GMT</span>
    </header>
    <h2>RESIZE_ME.</h2>
    <p>
      PURE CSS · <code>resize: horizontal</code> · NO JS · NO LIBRARY · NO FRAMEWORK · ONE LINE OF
      CSS · BROWSER HANDLES THE DRAG · LAYOUT ADJUSTS NATURALLY · WORKS EVERYWHERE · 1996 ENERGY
      2026 BROWSERS.
    </p>
    <div class="sb-rsz-grid">
      <div class="sb-rsz-cell">[01]</div>
      <div class="sb-rsz-cell">[02]</div>
      <div class="sb-rsz-cell">[03]</div>
      <div class="sb-rsz-cell solid">[04]</div>
      <div class="sb-rsz-cell">[05]</div>
      <div class="sb-rsz-cell">[06]</div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-rsz {
  display: flex;
  min-height: 480px;
  font-family: 'Courier New', 'Courier', monospace;
  background: #fff;
  color: #000;
  border-radius: 0; overflow: hidden;
  border: 3px solid #000;
}
.sb-rsz-side {
  flex-shrink: 0;
  width: 240px; min-width: 180px; max-width: 380px;
  background: #fff;
  border-right: 3px solid #000;
  padding: 16px 14px;
  overflow: auto;
  resize: horizontal;
}
.sb-rsz-side header { padding-bottom: 12px; border-bottom: 2px solid #000; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sb-rsz-bar { font-size: 13px; font-weight: 700; color: #000; letter-spacing: 0.04em; }
.sb-rsz-side header strong { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; color: #000; }
.sb-rsz-side h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #000; }
.sb-rsz-tree { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; color: #000; display: flex; flex-direction: column; gap: 3px; }
.sb-rsz-tree li { padding: 3px 0; cursor: pointer; transition: background 0.1s; }
.sb-rsz-tree li:hover { background: #000; color: #fff; }
.sb-rsz-tree li.folder::before { content: '> '; }
.sb-rsz-tree li:not(.folder)::before { content: '· '; }
.sb-rsz-tree li.indent  { padding-left: 18px; }
.sb-rsz-tree li.indent2 { padding-left: 36px; }
.sb-rsz-tree li.active { background: #000; color: #fff; }
.sb-rsz-tree li.active::before { content: '* '; color: #ff0000; }
.sb-rsz-hint { margin: 0; padding: 8px 6px; font-size: 11px; font-weight: 700; color: #fff; background: #000; letter-spacing: 0.04em; text-align: center; animation: sb-rsz-flash 1.4s steps(1) infinite; }
@keyframes sb-rsz-flash {
  0%, 49% { background: #000; color: #fff; }
  50%, 100% { background: #ff0000; color: #000; }
}
@media (prefers-reduced-motion: reduce) { .sb-rsz-hint { animation: none; } }
.sb-rsz-main { flex: 1; padding: 24px 28px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sb-rsz-bar2 { display: flex; justify-content: space-between; padding: 6px 12px; background: #000; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.sb-rsz-main h2 { margin: 0; font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 0.92; color: #000; letter-spacing: -0.02em; }
.sb-rsz-main p { margin: 0; font-size: 13.5px; color: #000; line-height: 1.7; max-width: 540px; font-weight: 700; }
.sb-rsz-main code { font-family: inherit; font-size: 13px; color: #fff; background: #000; padding: 1px 6px; border-radius: 0; font-weight: 700; }
.sb-rsz-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; max-width: 480px; border: 2px solid #000; }
.sb-rsz-cell { padding: 12px; font-size: 12px; font-weight: 700; text-align: center; border-right: 2px solid #000; border-bottom: 2px solid #000; }
.sb-rsz-cell:nth-child(6n) { border-right: 0; }
.sb-rsz-cell:nth-last-child(-n+6) { border-bottom: 0; }
.sb-rsz-cell.solid { background: #000; color: #fff; }
.sb-rsz-cell.solid::after { content: ' ✦'; }
```

### 21. Three-pane Workspace

**Type:** Pure CSS
**Description:** Linear-style minimal mono — slate canvas, hairline rules, single electric-blue accent. Three-pane workspace shell (workspace nav, page list, editor); each pane scrolls independently. Heavy on semantics — real <code>&lt;aside&gt;</code> + <code>&lt;nav&gt;</code> + <code>&lt;article&gt;</code>.

**HTML:**
```html
<div class="sb-3pn">
  <aside class="sb-3pn-ws" aria-label="Workspace">
    <a class="sb-3pn-brand" href="#!">
      <span class="sb-3pn-mark" aria-hidden="true"></span>
      <span class="sb-3pn-name">Threads</span>
    </a>
    <nav aria-label="Workspace">
      <span class="sb-3pn-shead">Workspace</span>
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-3pn-i" aria-hidden="true">▤</span>Notes<em>12</em></a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-3pn-i" aria-hidden="true">◇</span>Projects</a>
        </li>
        <li>
          <a href="#!"><span class="sb-3pn-i" aria-hidden="true">◯</span>Calendar</a>
        </li>
        <li>
          <a href="#!"><span class="sb-3pn-i" aria-hidden="true">▢</span>Archive</a>
        </li>
      </ul>
      <span class="sb-3pn-shead">People</span>
      <ul>
        <li>
          <a href="#!"
            ><span class="sb-3pn-avatar" aria-hidden="true" style="background: #5b8eff">A</span
            >Anya</a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-3pn-avatar" aria-hidden="true" style="background: #ff7a4d">D</span
            >Daichi</a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-3pn-avatar" aria-hidden="true" style="background: #34c759">L</span
            >Lena</a
          >
        </li>
      </ul>
    </nav>
  </aside>
  <aside class="sb-3pn-list" aria-label="Pages">
    <header>
      <h2>Notes</h2>
      <button type="button" aria-label="New page">+</button>
    </header>
    <ul>
      <li class="active">
        <strong>Sprint 47 retro</strong>
        <span>Yesterday · 14:21</span>
      </li>
      <li>
        <strong>Hiring loop · Q3</strong>
        <span>2 days ago</span>
      </li>
      <li>
        <strong>Vendor shortlist</strong>
        <span>Last week</span>
      </li>
      <li>
        <strong>Team offsite ideas</strong>
        <span>Apr 24</span>
      </li>
      <li>
        <strong>OKR review · H1</strong>
        <span>Apr 18</span>
      </li>
    </ul>
  </aside>
  <main class="sb-3pn-edit">
    <header>
      <span class="sb-3pn-eye">CMD + K to switch · ⌘1 / ⌘2 / ⌘3</span>
      <h2>Sprint 47 retro.</h2>
      <p>Last edited yesterday at 14:21 · 4 collaborators</p>
    </header>
    <p class="sb-3pn-body">
      Three independent panes, each with its own scroll. The workspace nav (left), the page list
      (middle), and the editor (right) — the shell behind Notion, Linear, Apple Notes.
    </p>
    <h2>What went well</h2>
    <ul>
      <li>Shipped the dashboard refactor on time.</li>
      <li>Onboarding flow completion up 18%.</li>
      <li>Zero P0 incidents during launch week.</li>
    </ul>
    <h2>To improve</h2>
    <ul>
      <li>QA cycle compressed at the end — pull it earlier.</li>
      <li>Marketing copy review needs a clearer owner.</li>
    </ul>
  </main>
</div>
```

**CSS:**
```css
.sb-3pn {
  display: grid; grid-template-columns: 220px 260px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #181a1f; color: #d6d8de;
  border-radius: 8px; overflow: hidden;
  letter-spacing: -0.01em;
}
.sb-3pn-ws { background: #14161a; border-right: 1px solid rgba(255,255,255,0.05); padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.sb-3pn-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); text-decoration: none; }
.sb-3pn-mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px; background: linear-gradient(135deg, #4d7cff 0%, #1850e0 100%); box-shadow: 0 4px 14px rgba(77,124,255,0.35); position: relative; }
.sb-3pn-mark::after { content: ''; position: absolute; inset: 5px; border: 1.5px solid #fff; border-radius: 1px; }
.sb-3pn-name { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.sb-3pn-shead { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #6a6e76; padding: 0 8px; margin-top: 4px; }
.sb-3pn-ws ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-3pn-ws a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: #b6b9c1; text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.sb-3pn-ws a:hover { background: rgba(255,255,255,0.04); color: #fff; }
.sb-3pn-ws a[aria-current="page"] { background: rgba(77,124,255,0.16); color: #fff; box-shadow: inset 2px 0 0 #4d7cff; padding-left: 8px; }
.sb-3pn-i { width: 14px; text-align: center; flex-shrink: 0; font-size: 11px; color: #6a6e76; }
.sb-3pn-ws a[aria-current="page"] .sb-3pn-i { color: #4d7cff; }
.sb-3pn-ws a em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: #6a6e76; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,0.06); }
.sb-3pn-ws a[aria-current="page"] em { background: rgba(77,124,255,0.2); color: #4d7cff; }
.sb-3pn-avatar { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; }
.sb-3pn-list { background: #1a1c21; border-right: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; overflow: hidden; }
.sb-3pn-list header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sb-3pn-list h2 { margin: 0; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sb-3pn-list button { width: 24px; height: 24px; border-radius: 5px; border: 0; background: rgba(255,255,255,0.05); color: #fff; font-size: 14px; cursor: pointer; transition: background 0.14s; }
.sb-3pn-list button:hover { background: #4d7cff; }
.sb-3pn-list ul { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 0; flex: 1; overflow-y: auto; }
.sb-3pn-list li { padding: 12px 12px; border-radius: 6px; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid rgba(255,255,255,0.03); }
.sb-3pn-list li:hover { background: rgba(255,255,255,0.04); }
.sb-3pn-list li.active { background: rgba(77,124,255,0.1); border-bottom-color: transparent; box-shadow: inset 2px 0 0 #4d7cff; }
.sb-3pn-list strong { display: block; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.sb-3pn-list span { display: block; font-size: 11px; color: #6a6e76; margin-top: 4px; }
.sb-3pn-edit { padding: 32px 36px; overflow-y: auto; background: #181a1f; }
.sb-3pn-edit header { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 18px; }
.sb-3pn-eye { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #4d7cff; letter-spacing: 0.04em; }
.sb-3pn-edit h2 { margin: 4px 0 4px; font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1.05; }
.sb-3pn-edit header p { margin: 0; font-size: 12px; color: #6a6e76; }
.sb-3pn-body { margin: 0 0 18px; font-size: 14.5px; color: #d6d8de; line-height: 1.65; max-width: 540px; }
.sb-3pn-edit h2 { margin: 18px 0 8px; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sb-3pn-edit ul { margin: 0 0 16px; padding-left: 22px; font-size: 13.5px; color: #b6b9c1; line-height: 1.75; }
@media (max-width: 720px) {
  .sb-3pn { grid-template-columns: 1fr; }
  .sb-3pn-ws, .sb-3pn-list { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
}
```

### 22. Adaptive Container-query

**Type:** Pure CSS
**Description:** Sunset terminal — pitch black with green-screen phosphor type, amber prompt accents, a soft horizon glow at the bottom. The 1980s computer terminal aesthetic. Sidebar reflows into a horizontal top nav when its container drops below 600px — CSS <code>container queries</code>, not viewport media queries.

**HTML:**
```html
<div class="sb-cnt-wrap">
  <div class="sb-cnt">
    <span class="sb-cnt-glow" aria-hidden="true"></span>
    <span class="sb-cnt-scan" aria-hidden="true"></span>
    <aside class="sb-cnt-side" aria-label="Primary">
      <a class="sb-cnt-brand" href="#!">
        <span class="sb-cnt-prompt" aria-hidden="true">$</span>
        <span class="sb-cnt-name">vortex<small>.sh</small></span>
      </a>
      <nav aria-label="Primary">
        <ul>
          <li>
            <a href="#!" aria-current="page"><em>01</em>home</a>
          </li>
          <li>
            <a href="#!"><em>02</em>library</a>
          </li>
          <li>
            <a href="#!"><em>03</em>projects</a>
          </li>
          <li>
            <a href="#!"><em>04</em>archive</a>
          </li>
          <li>
            <a href="#!"><em>05</em>settings</a>
          </li>
        </ul>
      </nav>
      <footer><span class="sb-cnt-cursor" aria-hidden="true">▮</span> ready</footer>
    </aside>
    <main class="sb-cnt-main">
      <span class="sb-cnt-eye">/* container-queries.md */</span>
      <h2>Adaptive<br />by container.</h2>
      <p>
        Resize the card width — when this <em>container</em> drops below 600px, the sidebar
        collapses into a top nav. The <strong>viewport</strong> size is irrelevant; the layout
        reacts to its own parent. Drop this shell into any narrow column and it adapts on its own.
      </p>
      <pre class="sb-cnt-code">
@container (max-width: 600px) {
  .sb-cnt { grid-template-columns: 1fr; }
  .sb-cnt-side { flex-direction: row; }
}</pre
      >
    </main>
  </div>
</div>
```

**CSS:**
```css
.sb-cnt-wrap {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: #5ce064;
  container-type: inline-size;
}
.sb-cnt {
  position: relative;
  display: grid; grid-template-columns: 220px 1fr;
  min-height: 480px;
  background: #060a07;
  border-radius: 6px; overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(92,224,100,0.3);
}
.sb-cnt-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(255,140,40,0.32), transparent 70%),
    radial-gradient(40% 30% at 50% 100%, rgba(255,210,80,0.4), transparent 70%);
}
.sb-cnt-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.sb-cnt-side {
  position: relative; z-index: 1;
  background: rgba(8,14,10,0.85);
  border-right: 1px solid rgba(92,224,100,0.3);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-cnt-brand { display: flex; align-items: baseline; gap: 8px; padding: 4px 4px 14px; border-bottom: 1px dashed rgba(92,224,100,0.3); text-decoration: none; }
.sb-cnt-prompt { color: #ffaa44; font-size: 16px; font-weight: 800; text-shadow: 0 0 10px rgba(255,170,68,0.5); }
.sb-cnt-name { font-size: 16px; font-weight: 700; color: #5ce064; letter-spacing: 0.04em; text-shadow: 0 0 8px rgba(92,224,100,0.4); line-height: 1; }
.sb-cnt-name small { font-size: 12px; color: #ffaa44; font-weight: 700; }
.sb-cnt-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-cnt-side a {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px;
  font-size: 13px; color: #5ce064; text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s, text-shadow 0.14s;
}
.sb-cnt-side a em { font-style: normal; font-size: 11px; font-weight: 700; color: rgba(92,224,100,0.5); width: 18px; }
.sb-cnt-side a:hover { background: rgba(92,224,100,0.08); color: #fff; border-left-color: #5ce064; text-shadow: 0 0 8px rgba(92,224,100,0.6); }
.sb-cnt-side a[aria-current="page"] { background: rgba(255,170,68,0.12); color: #ffaa44; border-left-color: #ffaa44; text-shadow: 0 0 10px rgba(255,170,68,0.6); }
.sb-cnt-side a[aria-current="page"] em { color: #ffaa44; }
.sb-cnt-side footer { margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(92,224,100,0.3); font-size: 11px; color: #5ce064; letter-spacing: 0.06em; opacity: 0.8; }
.sb-cnt-cursor { color: #ffaa44; animation: sb-cnt-blink 1s steps(1) infinite; }
@keyframes sb-cnt-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sb-cnt-cursor { animation: none; } }
.sb-cnt-main { position: relative; z-index: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 16px; }
.sb-cnt-eye { font-size: 11.5px; color: rgba(92,224,100,0.6); letter-spacing: 0.04em; font-style: italic; }
.sb-cnt-main h2 {
  margin: 0; font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 0.95;
  color: #5ce064; letter-spacing: -0.02em;
  text-shadow: 0 0 20px rgba(92,224,100,0.4);
}
.sb-cnt-main p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: rgba(214,235,218,0.9); line-height: 1.65; max-width: 480px; }
.sb-cnt-main em { color: #ffaa44; font-style: normal; font-weight: 600; text-shadow: 0 0 8px rgba(255,170,68,0.4); }
.sb-cnt-main strong { color: #5ce064; font-weight: 700; }
.sb-cnt-code { margin: 0; padding: 16px 18px; background: rgba(8,14,10,0.85); border: 1px solid rgba(92,224,100,0.3); border-radius: 4px; font-size: 12px; line-height: 1.7; color: #5ce064; white-space: pre-wrap; box-shadow: inset 0 0 24px rgba(92,224,100,0.05); }
@container (max-width: 600px) {
  .sb-cnt { grid-template-columns: 1fr; }
  .sb-cnt-side { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px dashed rgba(92,224,100,0.3); overflow-x: auto; }
  .sb-cnt-side ul { flex-direction: row; gap: 4px; flex-shrink: 0; }
  .sb-cnt-side a { padding: 6px 10px; font-size: 12px; }
  .sb-cnt-side footer, .sb-cnt-brand { display: none; }
}
```

### 23. Glass Floating Sidebar

**Type:** Pure CSS
**Description:** Vaporwave dream — chromatic magenta-to-cyan gradient with a sun on the horizon, scanlines, and a translucent glass sidebar floating above it. <code>backdrop-filter: blur()</code> handles the frost; CSS keyframes drift the sun. Pure CSS, no images.

**HTML:**
```html
<div class="sb-glx">
  <div class="sb-glx-sky" aria-hidden="true"></div>
  <div class="sb-glx-sun" aria-hidden="true"></div>
  <div class="sb-glx-grid" aria-hidden="true"></div>
  <div class="sb-glx-scan" aria-hidden="true"></div>
  <aside class="sb-glx-side" aria-label="Primary">
    <a class="sb-glx-brand" href="#!">
      <span class="sb-glx-mark" aria-hidden="true"></span>
      <span class="sb-glx-name">Mirage<small>1995</small></span>
    </a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#!" aria-current="page">▸ Overview</a></li>
        <li><a href="#!">Projects</a></li>
        <li><a href="#!">Members</a></li>
        <li><a href="#!">Activity</a></li>
        <li><a href="#!">Settings</a></li>
      </ul>
    </nav>
    <footer>
      <span class="sb-glx-dot" aria-hidden="true"></span>
      <small>Online · 24,891</small>
    </footer>
  </aside>
  <main class="sb-glx-main">
    <span class="sb-glx-eye">◇ A E S T H E T I C ◇</span>
    <h2>Glass<br />over sunset.</h2>
    <p>
      The sidebar floats above a setting-sun horizon and a perspective grid that fades into haze.
      Backdrop-blur frosts the glass; pure CSS keyframes drift the sun.
    </p>
    <div class="sb-glx-tags">
      <span>vaporwave</span><span>aesthetic</span><span>1995</span><span>chrome</span>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-glx {
  position: relative;
  display: grid; grid-template-columns: 260px 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  color: #fff;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
  background: #1a0033;
}
.sb-glx-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #2d0066 0%, #6a0a8c 30%, #ec1d8c 65%, #ff5e9c 80%, #ffa56a 100%);
  z-index: 0;
}
.sb-glx-sun {
  position: absolute;
  bottom: 32%; left: 50%;
  width: 220px; height: 220px;
  margin-left: -110px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd700 0%, #ff5e9c 60%, #ec1d8c 100%);
  box-shadow: 0 0 80px rgba(255,215,0,0.6), 0 0 160px rgba(236,29,140,0.5);
  z-index: 1;
  animation: sb-glx-rise 12s ease-in-out infinite alternate;
}
.sb-glx-sun::before, .sb-glx-sun::after {
  content: ''; position: absolute; left: 0; right: 0; height: 5px;
  background: #1a0033;
}
.sb-glx-sun::before { bottom: 30%; box-shadow: 0 14px 0 #1a0033, 0 30px 0 #1a0033, 0 50px 0 #1a0033, 0 75px 0 #1a0033; }
.sb-glx-sun::after  { display: none; }
.sb-glx-grid {
  position: absolute; bottom: 0; left: 0; right: 0; height: 38%;
  background:
    linear-gradient(transparent 0%, rgba(0,229,255,0.4) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc((100% / 24) - 1px), rgba(0,229,255,0.5) calc((100% / 24) - 1px) calc(100% / 24));
  background-size: 100% 100%, 100% 100%;
  transform: perspective(300px) rotateX(60deg);
  transform-origin: bottom;
  z-index: 1;
  mask-image: linear-gradient(transparent 0%, #000 30%);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 30%);
}
.sb-glx-grid::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,229,255,0.45) 18px 19px);
}
.sb-glx-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
@keyframes sb-glx-rise {
  from { transform: translateY(20px); }
  to   { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .sb-glx-sun { animation: none; } }
.sb-glx-side {
  position: relative; z-index: 3;
  margin: 18px 0 18px 18px; padding: 18px 14px; width: 224px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 16px;
}
.sb-glx-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); text-decoration: none; }
.sb-glx-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #00e5ff 0%, #ec1d8c 50%, #ffd700 100%); box-shadow: 0 0 18px rgba(236,29,140,0.6), inset 0 1px 0 rgba(255,255,255,0.5); }
.sb-glx-name { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0.18em; line-height: 1; text-shadow: 0 0 8px rgba(255,94,156,0.8); }
.sb-glx-name small { display: block; font-family: 'Courier New', monospace; font-size: 9.5px; color: #00e5ff; font-weight: 700; letter-spacing: 0.4em; margin-top: 4px; text-shadow: 0 0 6px rgba(0,229,255,0.7); }
.sb-glx-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-glx-side a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85); text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, text-shadow 0.18s;
}
.sb-glx-side a:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  text-shadow: 0 0 8px rgba(0,229,255,0.6);
}
.sb-glx-side a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(0,229,255,0.25), rgba(236,29,140,0.25));
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  text-shadow: 0 0 10px rgba(0,229,255,0.7);
  box-shadow: inset 0 0 16px rgba(0,229,255,0.15);
}
.sb-glx-side footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 6px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.sb-glx-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 12px #00ff9c, 0 0 24px rgba(0,255,156,0.5); animation: sb-glx-blink 1.6s ease-in-out infinite; }
@keyframes sb-glx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .sb-glx-dot { animation: none; } }
.sb-glx-side small { font-family: 'Courier New', monospace; font-size: 10.5px; color: rgba(255,255,255,0.85); letter-spacing: 0.06em; }
.sb-glx-main { position: relative; z-index: 3; padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; }
.sb-glx-eye { font-family: 'Courier New', monospace; font-size: 11.5px; letter-spacing: 0.4em; color: #00e5ff; text-shadow: 0 0 10px rgba(0,229,255,0.7); }
.sb-glx-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 64px); font-weight: 900; line-height: 0.92;
  color: #fff; letter-spacing: -0.03em;
  text-shadow:
    -2px 0 0 rgba(236,29,140,0.7),
    2px 0 0 rgba(0,229,255,0.7),
    0 0 30px rgba(255,255,255,0.4);
}
.sb-glx-main p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.92); line-height: 1.6; max-width: 460px; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.sb-glx-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #00e5ff; background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(0,229,255,0.4); }
.sb-glx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sb-glx-tags span { font-family: 'Courier New', monospace; font-size: 10.5px; padding: 5px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 720px) {
  .sb-glx { grid-template-columns: 1fr; }
  .sb-glx-side { width: auto; margin: 14px 14px 0; }
}
```

---
## 10 CSS Sidebar Navigation

URL: https://codefronts.com/navigation/css-sidebar-navigation/
Description: Hand-coded CSS sidebar navigation patterns — collapsible rails, drawer menus with text and icons, nested vertical navigation, sidebar dropdowns, sticky full-height layouts, glassmorphic blur, mobile slide-out overlays, and bottom-pinned profile sidebars. Pure CSS, no framework, copy-paste ready.
Demo count: 10

### 01. Pure CSS Collapsible Sidebar Navigation Snippet

**Type:** Pure CSS
**Description:** Developer-documentation aesthetic in a dark GitHub-style palette with JetBrains Mono accents. The whole rail collapses to an icon-only strip via the pure-CSS checkbox hack — a CSS side menu that hides and shows on click with zero JavaScript, the canonical drawer menu with text and icons that toggle together. Smooth width transition, active-item glow bar, grouped sections, and a footer user card. Best for documentation sites, developer dashboards, API consoles, admin panels where the user toggles between focused work and full navigation.

**HTML:**
```html
<section class="sn-clp" aria-label="Pure CSS collapsible sidebar demo">
  <input type="checkbox" id="sn-clp-t" class="toggle" aria-label="Toggle sidebar">
  <aside class="sidebar">
    <div class="brand">
      <div class="logo" aria-hidden="true">&gt;_</div>
      <div class="brand-text">
        <b>Forge</b>
        <span>v3.2.0 · docs</span>
      </div>
      <label for="sn-clp-t" class="burger" title="Toggle sidebar" aria-label="Toggle sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round"/></svg>
      </label>
    </div>
    <nav class="nav" aria-label="Documentation sections">
      <div class="group-label">Getting Started</div>
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg><span>Introduction</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M13 2L3 14h9l-1 8 10-12h-9z"/></svg><span>Quickstart</span><i class="badge">new</i></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/></svg><span>Installation</span></a>
      <div class="group-label">Reference</div>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg><span>API Methods</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg><span>Guides</span><i class="badge">12</i></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg><span>Configuration</span></a>
    </nav>
    <div class="foot">
      <div class="user">
        <div class="avatar" aria-hidden="true"></div>
        <div><b>Devon Lane</b><small>pro plan</small></div>
      </div>
    </div>
  </aside>
  <main class="content">
    <h1>Pure CSS Collapsible Sidebar</h1>
    <p>A zero-JavaScript collapsible navigation rail built entirely with the checkbox-hack pattern. Click the menu icon to smoothly collapse the sidebar down to icon-only mode and back.</p>
    <div class="code">
<span class="c">// the entire toggle logic</span><br>
&lt;input type="checkbox" id="t"&gt;<br>
&lt;label for="t"&gt;☰&lt;/label&gt;<br><br>
<span class="c">/* 100% CSS, no scripts */</span>
    </div>
  </main>
</section>
```

**CSS:**
```css
/* ─── 01 Pure CSS Collapsible Sidebar — dev docs dark ──────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@400;600;700&display=swap');

.sn-clp {
  --sn-clp-bg: #0d1117;
  --sn-clp-panel: #161b22;
  --sn-clp-panel-2: #1c2230;
  --sn-clp-line: #262d3a;
  --sn-clp-txt: #c9d1d9;
  --sn-clp-muted: #6e7681;
  --sn-clp-accent: #39d353;
  --sn-clp-accent-2: #2dd4bf;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Sora', sans-serif;
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(57,211,83,.08), transparent 60%),
    var(--sn-clp-bg);
  color: var(--sn-clp-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-clp *, .sn-clp *::before, .sn-clp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-clp .toggle { display: none; }
.sn-clp .sidebar {
  width: 260px;
  background: var(--sn-clp-panel);
  border-right: 1px solid var(--sn-clp-line);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: width .32s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  flex-shrink: 0;
}
.sn-clp .brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.4rem 1.2rem;
  border-bottom: 1px solid var(--sn-clp-line);
  white-space: nowrap;
}
.sn-clp .logo {
  min-width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--sn-clp-accent), var(--sn-clp-accent-2));
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #04130a;
}
.sn-clp .brand b { font-size: 1.05rem; letter-spacing: -.02em; }
.sn-clp .brand span { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--sn-clp-muted); display: block; }
.sn-clp .burger {
  margin-left: auto; cursor: pointer; width: 30px; height: 30px;
  border-radius: 7px; display: grid; place-items: center; color: var(--sn-clp-muted);
  transition: .2s; flex-shrink: 0;
}
.sn-clp .burger:hover { background: var(--sn-clp-panel-2); color: var(--sn-clp-accent); }
.sn-clp .burger svg { width: 18px; height: 18px; }

.sn-clp .nav { padding: 1rem .8rem; flex: 1; overflow-y: auto; }
.sn-clp .group-label {
  font-family: 'JetBrains Mono', monospace; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .15em; color: var(--sn-clp-muted);
  padding: .6rem .8rem .4rem; white-space: nowrap;
}
.sn-clp .item {
  display: flex; align-items: center; gap: .85rem;
  padding: .62rem .8rem; border-radius: 9px; color: var(--sn-clp-txt);
  text-decoration: none; font-size: .9rem; white-space: nowrap;
  position: relative; transition: background .18s, color .18s;
}
.sn-clp .item svg { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 1.7; }
.sn-clp .item span { transition: opacity .2s; }
.sn-clp .item:hover { background: var(--sn-clp-panel-2); color: #fff; }
.sn-clp .item.active { background: linear-gradient(90deg, rgba(57,211,83,.14), transparent); color: var(--sn-clp-accent); }
.sn-clp .item.active::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 3px; background: var(--sn-clp-accent);
}
.sn-clp .badge {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .62rem;
  background: var(--sn-clp-panel-2); padding: .1rem .4rem; border-radius: 6px; color: var(--sn-clp-muted);
  font-style: normal;
}

.sn-clp .foot { padding: 1rem; border-top: 1px solid var(--sn-clp-line); }
.sn-clp .user { display: flex; align-items: center; gap: .7rem; white-space: nowrap; }
.sn-clp .avatar { min-width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #2dd4bf, #39d353); flex-shrink: 0; }
.sn-clp .user b { font-size: .85rem; }
.sn-clp .user small { display: block; color: var(--sn-clp-muted); font-family: 'JetBrains Mono', monospace; font-size: .66rem; }

/* collapsed state */
.sn-clp .toggle:checked ~ .sidebar { width: 74px; }
.sn-clp .toggle:checked ~ .sidebar .item span,
.sn-clp .toggle:checked ~ .sidebar .badge,
.sn-clp .toggle:checked ~ .sidebar .group-label,
.sn-clp .toggle:checked ~ .sidebar .user > div:not(.avatar) { opacity: 0; pointer-events: none; }
.sn-clp .toggle:checked ~ .sidebar .group-label { height: 8px; padding: 0; }
.sn-clp .toggle:checked ~ .sidebar .brand {
  flex-direction: column; gap: .7rem; padding: 1.1rem 0;
}
.sn-clp .toggle:checked ~ .sidebar .brand-text {
  width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none;
}
.sn-clp .toggle:checked ~ .sidebar .burger { margin-left: 0; }

.sn-clp .content { flex: 1; padding: 3rem; overflow-y: auto; min-width: 0; }
.sn-clp .content h1 { font-size: 2rem; letter-spacing: -.03em; margin-bottom: .6rem; }
.sn-clp .content p { color: var(--sn-clp-muted); max-width: 560px; line-height: 1.7; }
.sn-clp .code {
  margin-top: 2rem; background: var(--sn-clp-panel); border: 1px solid var(--sn-clp-line);
  border-radius: 14px; padding: 1.4rem 1.6rem; font-family: 'JetBrains Mono', monospace;
  font-size: .82rem; color: var(--sn-clp-accent-2); max-width: 560px;
}
.sn-clp .code .c { color: var(--sn-clp-muted); }

@media (prefers-reduced-motion: reduce) {
  .sn-clp .sidebar, .sn-clp .item span { transition: none; }
}
```

### 02. Responsive Sidebar Toggle with HTML and CSS

**Type:** Pure CSS
**Description:** Warm editorial / print magazine theme (Fraunces + Newsreader, paper texture, drop caps). On desktop it sits as a permanent reading index; below the responsive breakpoint it becomes a responsive offcanvas drawer summoned by a hamburger button and dismissed via a dimmed overlay — all CSS, no scripts. Best for editorial sites, literary magazines, long-form blogs, documentation that prizes a considered print aesthetic.

**HTML:**
```html
<section class="sn-rsp" aria-label="Responsive sidebar toggle demo">
  <input type="checkbox" id="sn-rsp-nav" class="toggle" aria-label="Toggle navigation">
  <aside class="sidebar" aria-label="Magazine sections">
    <div class="head">
      <div class="kicker">Issue No. 47</div>
      <h2>The Margin</h2>
    </div>
    <nav class="nav" aria-label="Sections">
      <a class="item active" href="#"><span class="num">01</span>Featured Essay</a>
      <a class="item" href="#"><span class="num">02</span>Culture</a>
      <a class="item" href="#"><span class="num">03</span>Long Reads</a>
      <a class="item" href="#"><span class="num">04</span>Interviews</a>
      <div class="rule" aria-hidden="true"></div>
      <a class="item" href="#"><span class="num">05</span>Fiction</a>
      <a class="item" href="#"><span class="num">06</span>Poetry</a>
      <a class="item" href="#"><span class="num">07</span>Archive</a>
    </nav>
    <div class="foot">Saved for later — 4 stories</div>
  </aside>
  <label for="sn-rsp-nav" class="overlay" aria-hidden="true"></label>

  <div class="content">
    <div class="topbar">
      <label for="sn-rsp-nav" class="menu-btn" aria-label="Open navigation">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round"/></svg>
      </label>
      <h1>Featured Essay</h1>
    </div>
    <article class="article">
      <p class="lead">On a responsive layout, the sidebar slides away on small screens and reappears with a tap of the menu — no JavaScript involved.</p>
      <p>This demonstration uses the classic checkbox toggle to drive a fully responsive off-canvas navigation. On wide screens the menu sits permanently to the left as a reading index. Resize the window below the breakpoint and the rail tucks itself off-canvas, summoned by the hamburger button and dismissed by tapping the dimmed overlay.</p>
      <p>Everything is hand-set in CSS: the transitions, the overlay, the breakpoint behaviour. The result is a warm, print-inspired interface that feels considered rather than templated.</p>
    </article>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Responsive Sidebar Toggle — editorial magazine ──────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Newsreader:ital@0;1&display=swap');

.sn-rsp {
  --sn-rsp-paper: #f4ece0;
  --sn-rsp-ink: #2b211a;
  --sn-rsp-rust: #bb4430;
  --sn-rsp-olive: #7d8471;
  --sn-rsp-line: #d9cbb6;
  --sn-rsp-panel: #fbf6ee;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Newsreader', serif;
  background: var(--sn-rsp-paper);
  background-image: repeating-linear-gradient(0deg, rgba(43,33,26,.012) 0 2px, transparent 2px 4px);
  color: var(--sn-rsp-ink);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-rsp *, .sn-rsp *::before, .sn-rsp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-rsp .toggle { display: none; }
.sn-rsp .overlay { display: none; }

.sn-rsp .sidebar {
  width: 288px;
  background: var(--sn-rsp-panel);
  border-right: 2px solid var(--sn-rsp-ink);
  height: 100%;
  display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  z-index: 30;
  flex-shrink: 0;
}
.sn-rsp .head { padding: 2rem 1.8rem 1.4rem; border-bottom: 1px solid var(--sn-rsp-line); }
.sn-rsp .kicker { font-family: 'Fraunces'; font-weight: 600; font-size: .7rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--sn-rsp-rust); }
.sn-rsp .head h2 { font-family: 'Fraunces'; font-weight: 900; font-size: 1.9rem; line-height: 1; margin-top: .4rem; font-style: italic; }

.sn-rsp .nav { padding: 1.4rem 1rem; flex: 1; overflow-y: auto; }
.sn-rsp .item {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .7rem 1rem; text-decoration: none; color: var(--sn-rsp-ink);
  font-size: 1.12rem; border-radius: 2px; position: relative; transition: .2s;
}
.sn-rsp .item .num { font-family: 'Fraunces'; font-weight: 600; font-size: .78rem; color: var(--sn-rsp-olive); min-width: 22px; }
.sn-rsp .item:hover { background: var(--sn-rsp-paper); padding-left: 1.35rem; }
.sn-rsp .item.active { color: var(--sn-rsp-rust); font-style: italic; font-weight: 600; }
.sn-rsp .item.active .num { color: var(--sn-rsp-rust); }
.sn-rsp .rule { height: 1px; background: var(--sn-rsp-line); margin: 1rem 1rem; }

.sn-rsp .foot { padding: 1.4rem 1.8rem; border-top: 2px solid var(--sn-rsp-ink); font-family: 'Fraunces'; font-size: .78rem; color: var(--sn-rsp-olive); }

.sn-rsp .content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.sn-rsp .topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 2rem; border-bottom: 1px solid var(--sn-rsp-line);
  position: sticky; top: 0; background: var(--sn-rsp-paper); z-index: 10;
}
.sn-rsp .menu-btn {
  cursor: pointer; border: 1.5px solid var(--sn-rsp-ink); border-radius: 3px;
  padding: .45rem .55rem; display: none; background: none;
}
.sn-rsp .menu-btn svg { width: 20px; height: 20px; display: block; stroke: var(--sn-rsp-ink); }
.sn-rsp .topbar h1 { font-family: 'Fraunces'; font-weight: 900; font-size: 1.3rem; }
.sn-rsp .article { padding: 3rem; max-width: 680px; }
.sn-rsp .article .lead { font-family: 'Fraunces'; font-style: italic; font-weight: 400;
  font-size: 1.7rem; line-height: 1.4; margin-bottom: 1.6rem; }
.sn-rsp .article p { font-size: 1.12rem; line-height: 1.85; margin-bottom: 1.2rem; color: #3a2e25; }
.sn-rsp .article p:first-of-type::first-letter { float: left; font-family: 'Fraunces'; font-weight: 900;
  font-size: 3.4rem; line-height: .8; padding: .1rem .5rem .1rem 0; color: var(--sn-rsp-rust); }

@media (max-width: 860px) {
  .sn-rsp .sidebar { position: absolute; transform: translateX(-100%); box-shadow: 6px 0 40px rgba(0,0,0,.15); }
  .sn-rsp .toggle:checked ~ .sidebar { transform: translateX(0); }
  .sn-rsp .toggle:checked ~ .overlay { display: block; position: absolute; inset: 0; background: rgba(43,33,26,.4); z-index: 20; }
  .sn-rsp .menu-btn { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-rsp .sidebar { transition: none; }
}
```

### 03. Light & Flexible CSS Vertical Rail Menu (Collapsible)

**Type:** Pure CSS
**Description:** Neon music-player vibe on near-black with lime / cyan / pink accents and an animated equalizer. A springy icon rail that expands to reveal labels, with hover tooltips when collapsed and a glowing active indicator. Bouncy cubic-bezier motion. Best for music apps, creative tool dashboards, vibrant SaaS landing pages, and any product that wants its sidebar to feel kinetic.

**HTML:**
```html
<section class="sn-rai" aria-label="Vertical rail menu demo">
  <input type="checkbox" id="sn-rai-x" class="toggle" aria-label="Toggle rail">
  <nav class="rail" aria-label="Player navigation">
    <div class="mark" aria-hidden="true">◊</div>
    <a class="pill active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg><span class="lbl">Home</span><span class="tip">Home</span></a>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg><span class="lbl">Discover</span><span class="tip">Discover</span></a>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg><span class="lbl">Your Library</span><span class="tip">Library</span></a>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg><span class="lbl">Saved</span><span class="tip">Saved</span></a>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M4 11a9 9 0 019 9M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg><span class="lbl">Radio</span><span class="tip">Radio</span></a>
    <div class="spacer"></div>
    <a class="pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg><span class="lbl">Settings</span><span class="tip">Settings</span></a>
    <label for="sn-rai-x" class="ctrl" title="Expand rail" aria-label="Expand rail">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke-width="2" stroke-linecap="round"/></svg>
    </label>
  </nav>
  <main class="stage">
    <div class="nowplaying">
      <div class="cover" aria-hidden="true"></div>
      <div>
        <h1>Flexible Rail Menu</h1>
        <p>An expanding icon rail — bouncy, springy, collapsible.</p>
        <div class="bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>
  </main>
</section>
```

**CSS:**
```css
/* ─── 03 Vertical Rail Menu — neon music player ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Syne:wght@600;800&display=swap');

.sn-rai {
  --sn-rai-bg: #08070d;
  --sn-rai-rail: #0f0d18;
  --sn-rai-rail-2: #17142a;
  --sn-rai-txt: #e8e6f0;
  --sn-rai-muted: #7b7790;
  --sn-rai-neon: #c4f82a;
  --sn-rai-pink: #ff4d8c;
  --sn-rai-cyan: #39e0ff;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Outfit', sans-serif;
  background:
    radial-gradient(700px 700px at 100% 100%, rgba(255,77,140,.12), transparent 60%),
    radial-gradient(700px 700px at 0% 0%, rgba(57,224,255,.1), transparent 55%),
    var(--sn-rai-bg);
  color: var(--sn-rai-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-rai *, .sn-rai *::before, .sn-rai *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-rai .toggle { display: none; }
.sn-rai .rail {
  width: 84px;
  background: linear-gradient(180deg, var(--sn-rai-rail), var(--sn-rai-rail-2));
  border-right: 1px solid rgba(255,255,255,.06);
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.3rem 0; gap: .5rem;
  transition: width .35s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
  flex-shrink: 0;
}
.sn-rai .mark {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sn-rai-neon), var(--sn-rai-cyan));
  display: grid; place-items: center; color: #08070d;
  font-family: 'Syne'; font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem;
  box-shadow: 0 0 24px rgba(196,248,42,.4);
}
.sn-rai .pill {
  width: 90%; display: flex; align-items: center; gap: 1rem;
  padding: .75rem; border-radius: 14px; text-decoration: none; color: var(--sn-rai-muted);
  position: relative; transition: .25s; white-space: nowrap;
}
.sn-rai .pill svg { width: 24px; height: 24px; min-width: 24px; stroke-width: 1.8; }
.sn-rai .pill .lbl { font-size: .95rem; font-weight: 500; opacity: 0; transition: opacity .25s; }
.sn-rai .pill:hover { color: var(--sn-rai-txt); background: rgba(255,255,255,.04); }
.sn-rai .pill.active { color: var(--sn-rai-neon); background: rgba(196,248,42,.1); }
.sn-rai .pill.active::after {
  content: ""; position: absolute; right: -.65rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 60%; border-radius: 4px; background: var(--sn-rai-neon);
  box-shadow: 0 0 12px var(--sn-rai-neon);
}
.sn-rai .tip {
  position: absolute; left: 72px; top: 50%; transform: translateY(-50%) scale(.8);
  background: #fff; color: #08070d; font-size: .78rem; font-weight: 600;
  padding: .35rem .7rem; border-radius: 8px; opacity: 0; pointer-events: none;
  transition: .2s; white-space: nowrap; z-index: 5;
}
.sn-rai .pill:hover .tip { opacity: 1; transform: translateY(-50%) scale(1); }
.sn-rai .spacer { flex: 1; }
.sn-rai .ctrl {
  margin-top: .8rem; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,.05); border: none; cursor: pointer; color: var(--sn-rai-muted);
  display: grid; place-items: center; transition: .25s;
}
.sn-rai .ctrl:hover { color: var(--sn-rai-neon); background: rgba(196,248,42,.1); }
.sn-rai .ctrl svg { width: 22px; height: 22px; transition: transform .35s; }

/* expanded */
.sn-rai .toggle:checked ~ .rail { width: 248px; align-items: stretch; padding-left: 1rem; padding-right: 1rem; }
.sn-rai .toggle:checked ~ .rail .pill .lbl { opacity: 1; }
.sn-rai .toggle:checked ~ .rail .pill:hover .tip { display: none; }
.sn-rai .toggle:checked ~ .rail .ctrl svg { transform: rotate(180deg); }
.sn-rai .toggle:checked ~ .rail .mark { margin-left: .4rem; }

.sn-rai .stage { flex: 1; padding: 3rem; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; overflow: hidden; }
.sn-rai .nowplaying { display: flex; align-items: center; gap: 1.4rem; }
.sn-rai .cover { width: 120px; height: 120px; border-radius: 20px; flex-shrink: 0;
  background: conic-gradient(from 45deg, var(--sn-rai-pink), var(--sn-rai-cyan), var(--sn-rai-neon), var(--sn-rai-pink));
  box-shadow: 0 18px 50px rgba(255,77,140,.25); }
.sn-rai .stage h1 { font-family: 'Syne'; font-weight: 800; font-size: 2.4rem; letter-spacing: -.02em; }
.sn-rai .stage p { color: var(--sn-rai-muted); margin-top: .3rem; }
.sn-rai .bars { display: flex; gap: 4px; margin-top: 1.4rem; align-items: flex-end; height: 38px; }
.sn-rai .bars i { width: 5px; background: var(--sn-rai-neon); border-radius: 3px; animation: sn-rai-b 1s ease-in-out infinite; }
.sn-rai .bars i:nth-child(2) { animation-delay: .2s; background: var(--sn-rai-cyan); }
.sn-rai .bars i:nth-child(3) { animation-delay: .4s; background: var(--sn-rai-pink); }
.sn-rai .bars i:nth-child(4) { animation-delay: .1s; }
.sn-rai .bars i:nth-child(5) { animation-delay: .5s; background: var(--sn-rai-cyan); }
@keyframes sn-rai-b { 0%, 100% { height: 10px; } 50% { height: 38px; } }

@media (prefers-reduced-motion: reduce) {
  .sn-rai .rail, .sn-rai .pill, .sn-rai .tip { transition: none; }
  .sn-rai .bars i { animation: none; height: 24px; }
}
```

### 04. Responsive Dashboard Sidebar Navigation with Submenus

**Type:** Pure CSS
**Description:** A sidebar dropdown menu in HTML and CSS for a modern SaaS analytics dashboard, dark blue / violet. Collapsible submenu groups (Analytics, Audience, Settings) driven by checkboxes with rotating chevrons, an upgrade-to-pro card, and a responsive off-canvas drawer on mobile. KPI cards in the main panel. Best for analytics dashboards, SaaS admin panels, CRMs, BI tools — any product whose nav must expose 3-4 levels of grouped functionality without sprawling.

**HTML:**
```html
<section class="sn-dsh" aria-label="Dashboard sidebar with submenus demo">
  <input type="checkbox" id="sn-dsh-d" class="toggle" aria-label="Toggle dashboard nav">
  <aside class="sidebar" aria-label="Dashboard navigation">
    <div class="brand">
      <div class="logo" aria-hidden="true">◈</div>
      <div><b>Nodal</b><small>Workspace</small></div>
    </div>
    <nav class="nav">
      <div class="cap">Overview</div>
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>Dashboard</a>

      <input type="checkbox" id="sn-dsh-s1" class="sub-toggle" checked>
      <label class="item" for="sn-dsh-s1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 16l4-6 4 3 5-8"/></svg>Analytics<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke-width="2.2"/></svg></label>
      <div class="submenu">
        <a class="dot" href="#">Traffic Sources</a>
        <a class="dot" href="#">Conversions</a>
        <a class="dot" href="#">Funnels</a>
        <a class="dot" href="#">Cohorts</a>
      </div>

      <input type="checkbox" id="sn-dsh-s2" class="sub-toggle">
      <label class="item" for="sn-dsh-s2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>Audience<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke-width="2.2"/></svg></label>
      <div class="submenu">
        <a class="dot" href="#">Segments</a>
        <a class="dot" href="#">Demographics</a>
        <a class="dot" href="#">Retention</a>
      </div>

      <div class="cap">Manage</div>
      <input type="checkbox" id="sn-dsh-s3" class="sub-toggle">
      <label class="item" for="sn-dsh-s3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M20 7h-9M14 17H5M17 17a3 3 0 100-6 3 3 0 000 6zM7 13a3 3 0 100-6 3 3 0 000 6z"/></svg>Settings<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke-width="2.2"/></svg></label>
      <div class="submenu">
        <a class="dot" href="#">General</a>
        <a class="dot" href="#">Billing</a>
        <a class="dot" href="#">API Keys</a>
      </div>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Support</a>
    </nav>
    <div class="pro">
      <b>Upgrade to Pro</b>
      <p>Unlock unlimited dashboards and real-time exports.</p>
      <button type="button">Upgrade now</button>
    </div>
  </aside>
  <label for="sn-dsh-d" class="overlay" aria-hidden="true"></label>

  <div class="mainpane">
    <div class="top">
      <label for="sn-dsh-d" class="mbtn" aria-label="Open navigation">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round"/></svg>
      </label>
      <h1>Dashboard</h1>
    </div>
    <div class="body">
      <div class="card"><div class="k">Active Users</div><div class="v">24.7k</div><div class="d">▲ 12.4%</div></div>
      <div class="card"><div class="k">Revenue</div><div class="v">$89.2k</div><div class="d">▲ 8.1%</div></div>
      <div class="card"><div class="k">Conversion</div><div class="v">3.42%</div><div class="d">▲ 0.6%</div></div>
      <div class="card"><div class="k">Sessions</div><div class="v">112k</div><div class="d">▲ 19%</div></div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Dashboard Sidebar with Submenus — SaaS dark ──────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

.sn-dsh {
  --sn-dsh-bg: #0a0e14;
  --sn-dsh-panel: #10151f;
  --sn-dsh-panel-2: #161d2b;
  --sn-dsh-line: #1e2737;
  --sn-dsh-txt: #dfe6f0;
  --sn-dsh-muted: #6b7689;
  --sn-dsh-brand: #5b8cff;
  --sn-dsh-brand-2: #8b5cf6;
  --sn-dsh-good: #34d399;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Manrope', sans-serif;
  background: var(--sn-dsh-bg);
  color: var(--sn-dsh-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-dsh *, .sn-dsh *::before, .sn-dsh *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-dsh .toggle { display: none; }
.sn-dsh .overlay { display: none; }

.sn-dsh .sidebar {
  width: 268px; background: var(--sn-dsh-panel); border-right: 1px solid var(--sn-dsh-line);
  height: 100%; display: flex; flex-direction: column; z-index: 30; flex-shrink: 0;
}
.sn-dsh .brand { display: flex; align-items: center; gap: .7rem; padding: 1.5rem 1.4rem; }
.sn-dsh .logo { width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sn-dsh-brand), var(--sn-dsh-brand-2));
  display: grid; place-items: center; font-weight: 800; color: #fff; }
.sn-dsh .brand b { font-size: 1.15rem; letter-spacing: -.02em; }
.sn-dsh .brand small { display: block; color: var(--sn-dsh-muted); font-size: .7rem; font-weight: 600; }

.sn-dsh .nav { padding: .5rem .8rem 1rem; flex: 1; overflow-y: auto; }
.sn-dsh .cap { font-size: .66rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--sn-dsh-muted); font-weight: 700; padding: 1rem .9rem .4rem; }

.sn-dsh .item {
  display: flex; align-items: center; gap: .8rem; padding: .65rem .9rem;
  border-radius: 10px; color: var(--sn-dsh-txt); text-decoration: none; font-size: .9rem;
  font-weight: 500; cursor: pointer; transition: .18s;
}
.sn-dsh .item svg { width: 19px; height: 19px; stroke-width: 1.8; flex-shrink: 0; color: var(--sn-dsh-muted); }
.sn-dsh .item:hover { background: var(--sn-dsh-panel-2); }
.sn-dsh .item:hover svg { color: var(--sn-dsh-txt); }
.sn-dsh .item.active { background: linear-gradient(90deg, rgba(91,140,255,.16), rgba(139,92,246,.1)); color: #fff; }
.sn-dsh .item.active svg { color: var(--sn-dsh-brand); }
.sn-dsh .chev { margin-left: auto; width: 15px !important; height: 15px !important; transition: transform .25s; }

.sn-dsh .sub-toggle { display: none; }
.sn-dsh .submenu { max-height: 0; overflow: hidden; transition: max-height .3s ease;
  margin-left: 1.5rem; border-left: 1.5px solid var(--sn-dsh-line); padding-left: .4rem; }
.sn-dsh .submenu a { display: block; padding: .5rem .8rem; color: var(--sn-dsh-muted); text-decoration: none;
  font-size: .85rem; border-radius: 8px; transition: .18s; }
.sn-dsh .submenu a:hover { color: var(--sn-dsh-txt); background: var(--sn-dsh-panel-2); }
.sn-dsh .submenu a.dot::before { content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--sn-dsh-muted); margin-right: .6rem; vertical-align: middle; }
.sn-dsh .sub-toggle:checked + .item .chev { transform: rotate(90deg); }
.sn-dsh .sub-toggle:checked + .item { background: var(--sn-dsh-panel-2); }
.sn-dsh .sub-toggle:checked + .item + .submenu { max-height: 240px; }

.sn-dsh .pro { margin: 1rem .8rem; padding: 1.2rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(91,140,255,.16), rgba(139,92,246,.16));
  border: 1px solid rgba(91,140,255,.25); }
.sn-dsh .pro b { font-size: .92rem; }
.sn-dsh .pro p { color: var(--sn-dsh-muted); font-size: .76rem; margin: .3rem 0 .8rem; }
.sn-dsh .pro button { width: 100%; padding: .55rem; border: none; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, var(--sn-dsh-brand), var(--sn-dsh-brand-2)); color: #fff; font-weight: 700; font-size: .82rem; font-family: inherit; }

.sn-dsh .mainpane { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.sn-dsh .top { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 2rem; border-bottom: 1px solid var(--sn-dsh-line); }
.sn-dsh .mbtn { display: none; background: none; border: 1px solid var(--sn-dsh-line); border-radius: 8px; padding: .4rem; cursor: pointer; color: var(--sn-dsh-txt); }
.sn-dsh .mbtn svg { width: 20px; height: 20px; stroke: currentColor; display: block; }
.sn-dsh .top h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.sn-dsh .body { padding: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.sn-dsh .card { background: var(--sn-dsh-panel); border: 1px solid var(--sn-dsh-line); border-radius: 16px; padding: 1.4rem; }
.sn-dsh .card .k { color: var(--sn-dsh-muted); font-size: .8rem; font-weight: 600; }
.sn-dsh .card .v { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: .4rem 0; }
.sn-dsh .card .d { color: var(--sn-dsh-good); font-size: .8rem; font-weight: 700; }

@media (max-width: 880px) {
  .sn-dsh .sidebar { position: absolute; transform: translateX(-100%); transition: transform .35s; box-shadow: 8px 0 40px rgba(0,0,0,.5); }
  .sn-dsh .toggle:checked ~ .sidebar { transform: translateX(0); }
  .sn-dsh .toggle:checked ~ .overlay { display: block; position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 20; }
  .sn-dsh .mbtn { display: grid; place-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-dsh .submenu, .sn-dsh .chev, .sn-dsh .sidebar { transition: none; }
}
```

### 05. Multi-Level Vertical Sidebar Menu Template in HTML/CSS

**Type:** Pure CSS
**Description:** Light, glassy enterprise CRM with a rounded floating panel and soft shadows (Plus Jakarta Sans). Demonstrates true nested vertical navigation in CSS — submenus that contain their own nested sub-submenus (two tiers deep) — plus search, badges, and a mobile drawer. Best for enterprise SaaS, CRMs, project management tools, design systems whose navigation has genuine three-tier information architecture.

**HTML:**
```html
<section class="sn-mul" aria-label="Multi-level sidebar template demo">
  <input type="checkbox" id="sn-mul-d" class="toggle" aria-label="Toggle CRM navigation">
  <aside class="sidebar" aria-label="CRM navigation">
    <div class="brand">
      <div class="logo" aria-hidden="true">N</div>
      <div><b>Northwind</b><small>Sales CRM</small></div>
    </div>
    <div class="search">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg>
      <input type="search" placeholder="Search…" aria-label="Search CRM">
    </div>
    <nav class="nav">
      <div class="cap">Workspace</div>
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>Overview</a>

      <input type="checkbox" id="sn-mul-m1" class="t" checked>
      <label class="item" for="sn-mul-m1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2M17 11l2 2 4-4"/></svg>Contacts<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke-width="2.2"/></svg></label>
      <div class="sub sub-l1">
        <a class="item" href="#">All People</a>
        <a class="item" href="#">Companies</a>
        <input type="checkbox" id="sn-mul-m2" class="t">
        <label class="item" for="sn-mul-m2">Lists<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke-width="2.2"/></svg></label>
        <div class="sub sub-l2">
          <a href="#">Hot Leads</a>
          <a href="#">VIP Accounts</a>
          <a href="#">Newsletter</a>
        </div>
        <a class="item" href="#">Segments</a>
      </div>

      <input type="checkbox" id="sn-mul-m3" class="t">
      <label class="item" for="sn-mul-m3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M20 12V8H6a2 2 0 01-2-2c0-1.1.9-2 2-2h12v4"/><path d="M4 6v12a2 2 0 002 2h14v-4"/></svg>Deals<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18l6-6-6-6" stroke-width="2.2"/></svg></label>
      <div class="sub sub-l1">
        <a class="item" href="#">Pipeline</a>
        <a class="item" href="#">Forecast</a>
        <a class="item" href="#">Closed Won</a>
      </div>

      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Activity<span class="tag">9</span></a>

      <div class="cap">System</div>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg>Settings</a>
    </nav>
    <div class="foot">
      <div class="av" aria-hidden="true"></div>
      <div><b>Maya Chen</b><small>Sales Lead</small></div>
    </div>
  </aside>
  <label for="sn-mul-d" class="overlay" aria-hidden="true"></label>

  <div class="mainpane">
    <div class="top">
      <label for="sn-mul-d" class="mbtn" aria-label="Open navigation">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round"/></svg>
      </label>
      <div><h1>Overview</h1><p>Multi-level expandable navigation — up to two nested tiers.</p></div>
    </div>
    <div class="grid">
      <div class="c"><div class="k">Open Deals</div><div class="v">142</div></div>
      <div class="c"><div class="k">Pipeline Value</div><div class="v">$1.8M</div></div>
      <div class="c"><div class="k">Win Rate</div><div class="v">31%</div></div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Multi-Level Sidebar Template — light CRM ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

.sn-mul {
  --sn-mul-bg: #eef1f7;
  --sn-mul-panel: #ffffff;
  --sn-mul-line: #e6e9f2;
  --sn-mul-txt: #1c2438;
  --sn-mul-muted: #8089a0;
  --sn-mul-ink: #0b1020;
  --sn-mul-accent: #3b5bdb;
  --sn-mul-accent-soft: #eaeeff;
  --sn-mul-teal: #0ca678;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(59,91,219,.06), transparent),
    var(--sn-mul-bg);
  color: var(--sn-mul-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-mul *, .sn-mul *::before, .sn-mul *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-mul .toggle { display: none; }
.sn-mul .overlay { display: none; }

.sn-mul .sidebar {
  width: 280px; margin: 14px; border-radius: 22px;
  background: var(--sn-mul-panel); border: 1px solid var(--sn-mul-line);
  height: calc(100% - 28px); display: flex; flex-direction: column;
  box-shadow: 0 18px 50px -28px rgba(28,36,56,.4); z-index: 30; flex-shrink: 0;
}
.sn-mul .brand { display: flex; align-items: center; gap: .75rem; padding: 1.4rem 1.4rem 1rem; }
.sn-mul .logo { width: 38px; height: 38px; border-radius: 12px; background: var(--sn-mul-ink);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.1rem; }
.sn-mul .brand b { font-size: 1.12rem; letter-spacing: -.02em; }
.sn-mul .brand small { display: block; color: var(--sn-mul-muted); font-size: .72rem; font-weight: 600; }

.sn-mul .search { margin: 0 1.1rem 0.6rem; display: flex; align-items: center; gap: .5rem;
  background: var(--sn-mul-bg); border-radius: 11px; padding: .55rem .8rem; }
.sn-mul .search svg { width: 16px; height: 16px; stroke: var(--sn-mul-muted); flex-shrink: 0; }
.sn-mul .search input { border: none; background: none; outline: none; font: inherit; font-size: .85rem; color: var(--sn-mul-txt); width: 100%; }

.sn-mul .nav { padding: .6rem 1rem 1rem; flex: 1; overflow-y: auto; }
.sn-mul .cap { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--sn-mul-muted); font-weight: 700; padding: .9rem .7rem .35rem; }

.sn-mul .item { display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem;
  border-radius: 11px; color: var(--sn-mul-txt); text-decoration: none; font-size: .9rem;
  font-weight: 600; cursor: pointer; transition: .16s; }
.sn-mul .item svg { width: 19px; height: 19px; stroke-width: 1.9; color: var(--sn-mul-muted); flex-shrink: 0; }
.sn-mul .item:hover { background: var(--sn-mul-bg); }
.sn-mul .item.active { background: var(--sn-mul-accent-soft); color: var(--sn-mul-accent); }
.sn-mul .item.active svg { color: var(--sn-mul-accent); }
.sn-mul .chev { margin-left: auto; width: 15px !important; height: 15px !important; transition: transform .25s; }
.sn-mul .tag { margin-left: auto; font-size: .66rem; font-weight: 700; background: var(--sn-mul-teal);
  color: #fff; padding: .12rem .42rem; border-radius: 20px; }

.sn-mul .t { display: none; }
.sn-mul .sub { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.sn-mul .sub-l1 { margin: .15rem 0 .15rem 1.6rem; border-left: 1.5px solid var(--sn-mul-line); padding-left: .5rem; }
.sn-mul .sub-l1 .item { font-weight: 500; font-size: .86rem; color: var(--sn-mul-muted); }
.sn-mul .sub-l1 .item:hover { color: var(--sn-mul-txt); }
.sn-mul .sub-l2 { margin-left: 1.4rem; border-left: 1.5px solid var(--sn-mul-line); padding-left: .5rem; }
.sn-mul .sub-l2 a { display: block; padding: .42rem .7rem; font-size: .82rem; color: var(--sn-mul-muted);
  text-decoration: none; border-radius: 8px; font-weight: 500; }
.sn-mul .sub-l2 a:hover { color: var(--sn-mul-accent); background: var(--sn-mul-bg); }

.sn-mul .t:checked + .item .chev { transform: rotate(90deg); }
.sn-mul #sn-mul-m1:checked ~ .sub-l1 { max-height: 360px; }
.sn-mul #sn-mul-m2:checked ~ .sub-l2 { max-height: 200px; }
.sn-mul #sn-mul-m3:checked ~ .sub-l1 { max-height: 300px; }

.sn-mul .foot { padding: .9rem 1.1rem; border-top: 1px solid var(--sn-mul-line); display: flex; align-items: center; gap: .7rem; }
.sn-mul .av { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #3b5bdb, #0ca678); }
.sn-mul .foot b { font-size: .85rem; }
.sn-mul .foot small { display: block; color: var(--sn-mul-muted); font-size: .72rem; }

.sn-mul .mainpane { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.sn-mul .top { display: flex; align-items: center; gap: 1rem; padding: 1.6rem 2rem 0; }
.sn-mul .mbtn { display: none; background: var(--sn-mul-panel); border: 1px solid var(--sn-mul-line); border-radius: 10px; padding: .45rem; cursor: pointer; }
.sn-mul .mbtn svg { width: 20px; height: 20px; stroke: var(--sn-mul-txt); }
.sn-mul .top h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.sn-mul .top p { color: var(--sn-mul-muted); font-size: .85rem; }
.sn-mul .grid { padding: 1.6rem 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.sn-mul .c { background: var(--sn-mul-panel); border: 1px solid var(--sn-mul-line); border-radius: 18px; padding: 1.5rem;
  box-shadow: 0 12px 36px -28px rgba(28,36,56,.5); }
.sn-mul .c .k { color: var(--sn-mul-muted); font-size: .8rem; font-weight: 600; }
.sn-mul .c .v { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin-top: .3rem; }

@media (max-width: 900px) {
  .sn-mul .sidebar { position: absolute; left: 0; top: 0; margin: 0; border-radius: 0 22px 22px 0; height: 100%;
    transform: translateX(-105%); transition: transform .35s; }
  .sn-mul .toggle:checked ~ .sidebar { transform: translateX(0); }
  .sn-mul .toggle:checked ~ .overlay { display: block; position: absolute; inset: 0; background: rgba(11,16,32,.35); z-index: 20; }
  .sn-mul .mbtn { display: grid; place-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-mul .sub, .sn-mul .chev, .sn-mul .sidebar { transition: none; }
}
```

### 06. Pure CSS Accordion Sidebar for Admin Dashboards

**Type:** Pure CSS
**Description:** Bold neo-brutalist e-commerce admin — hard black borders, offset shadows, lime / orange accents, Archivo + Space Mono. A true accordion where opening one section auto-closes the others using the radio-button technique, with item counts and a status footer. Fully responsive with an off-canvas drawer on mobile. Best for e-commerce admin panels, inventory dashboards, internal tools that want a confident, opinionated visual identity instead of a generic SaaS look.

**HTML:**
```html
<section class="sn-acc" aria-label="Accordion sidebar demo">
  <input type="checkbox" id="sn-acc-d" class="toggle" aria-label="Toggle admin navigation">
  <aside class="sidebar" aria-label="Admin navigation">
    <div class="brand">
      <div class="logo" aria-hidden="true">▲</div>
      <div><b>Restock</b><small>ADMIN_v6</small></div>
    </div>
    <nav class="nav">
      <div class="acc">
        <input type="radio" name="sn-acc-acc" id="sn-acc-a1" class="radio" checked>
        <label class="acc-head" for="sn-acc-a1"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><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>Catalog<span class="plus">+</span></label>
        <div class="acc-body">
          <a href="#">All Products<span class="c">812</span></a>
          <a href="#">Categories<span class="c">24</span></a>
          <a href="#">Inventory<span class="c">low</span></a>
          <a href="#">Collections</a>
        </div>
      </div>
      <div class="acc">
        <input type="radio" name="sn-acc-acc" id="sn-acc-a2" class="radio">
        <label class="acc-head" for="sn-acc-a2"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/></svg>Orders<span class="plus">+</span></label>
        <div class="acc-body">
          <a href="#">Pending<span class="c">17</span></a>
          <a href="#">Fulfilled</a>
          <a href="#">Refunds<span class="c">3</span></a>
          <a href="#">Drafts</a>
        </div>
      </div>
      <div class="acc">
        <input type="radio" name="sn-acc-acc" id="sn-acc-a3" class="radio">
        <label class="acc-head" for="sn-acc-a3"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2"/></svg>Customers<span class="plus">+</span></label>
        <div class="acc-body">
          <a href="#">All Customers</a>
          <a href="#">Segments</a>
          <a href="#">Reviews<span class="c">42</span></a>
        </div>
      </div>
      <div class="acc">
        <input type="radio" name="sn-acc-acc" id="sn-acc-a4" class="radio">
        <label class="acc-head" for="sn-acc-a4"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 3 5-7"/></svg>Reports<span class="plus">+</span></label>
        <div class="acc-body">
          <a href="#">Sales</a>
          <a href="#">Traffic</a>
          <a href="#">Exports</a>
        </div>
      </div>
      <div class="acc">
        <input type="radio" name="sn-acc-acc" id="sn-acc-a5" class="radio">
        <label class="acc-head" for="sn-acc-a5"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg>Settings<span class="plus">+</span></label>
        <div class="acc-body">
          <a href="#">Store Details</a>
          <a href="#">Payments</a>
          <a href="#">Shipping</a>
        </div>
      </div>
    </nav>
    <div class="foot"><span><span class="dot" aria-hidden="true"></span>SYSTEM OK</span><span>00:42:18</span></div>
  </aside>
  <label for="sn-acc-d" class="overlay" aria-hidden="true"></label>

  <div class="mainpane">
    <div class="top">
      <label for="sn-acc-d" class="mbtn" aria-label="Open navigation">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2.4" stroke-linecap="round"/></svg>
      </label>
      <h1>Catalog</h1>
    </div>
    <div class="body">
      <div class="card alt"><div class="k">Products</div><div class="v">812</div></div>
      <div class="card"><div class="k">Orders Today</div><div class="v">94</div></div>
      <div class="card dark"><div class="k">Revenue</div><div class="v">$12.4k</div></div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Accordion Sidebar — neo-brutalist admin ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;900&family=Space+Mono:wght@400;700&display=swap');

.sn-acc {
  --sn-acc-bg: #f5f3eb;
  --sn-acc-ink: #141414;
  --sn-acc-panel: #ffffff;
  --sn-acc-accent: #ff5126;
  --sn-acc-lime: #d6ff3f;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Archivo', sans-serif;
  background: var(--sn-acc-bg);
  background-image: radial-gradient(var(--sn-acc-ink) .6px, transparent .6px);
  background-size: 22px 22px;
  color: var(--sn-acc-ink);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-acc *, .sn-acc *::before, .sn-acc *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-acc .toggle { display: none; }
.sn-acc .overlay { display: none; }

.sn-acc .sidebar {
  width: 282px; background: var(--sn-acc-panel);
  border-right: 3px solid var(--sn-acc-ink);
  height: 100%; display: flex; flex-direction: column; z-index: 30; flex-shrink: 0;
}
.sn-acc .brand { padding: 1.5rem 1.3rem; border-bottom: 3px solid var(--sn-acc-ink);
  display: flex; align-items: center; gap: .7rem; }
.sn-acc .logo { width: 42px; height: 42px; border: 3px solid var(--sn-acc-ink); background: var(--sn-acc-lime);
  display: grid; place-items: center; font-weight: 900; font-size: 1.3rem;
  box-shadow: 4px 4px 0 var(--sn-acc-ink); }
.sn-acc .brand b { font-weight: 900; font-size: 1.3rem; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; }
.sn-acc .brand small { font-family: 'Space Mono'; font-size: .66rem; display: block; margin-top: .2rem; }

.sn-acc .nav { flex: 1; overflow-y: auto; padding: .6rem; }
.sn-acc .acc { border-bottom: 2px solid var(--sn-acc-ink); }
.sn-acc .acc:last-child { border-bottom: none; }
.sn-acc .radio { display: none; }
.sn-acc .acc-head {
  display: flex; align-items: center; gap: .8rem; padding: 1rem .9rem; cursor: pointer;
  font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: -.01em;
  transition: .15s; user-select: none;
}
.sn-acc .acc-head svg.ic { width: 20px; height: 20px; stroke-width: 2.2; flex-shrink: 0; }
.sn-acc .acc-head .plus { margin-left: auto; font-family: 'Space Mono'; font-weight: 700; font-size: 1.2rem; transition: transform .25s; }
.sn-acc .acc-head:hover { background: var(--sn-acc-lime); }

.sn-acc .acc-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: var(--sn-acc-bg); }
.sn-acc .acc-body a { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem .65rem 2.7rem;
  text-decoration: none; color: var(--sn-acc-ink); font-size: .86rem; font-weight: 500;
  border-top: 1.5px dashed rgba(20,20,20,.25); transition: .15s; }
.sn-acc .acc-body a:hover { background: var(--sn-acc-accent); color: #fff; padding-left: 3rem; }
.sn-acc .acc-body a .c { margin-left: auto; font-family: 'Space Mono'; font-size: .72rem;
  background: var(--sn-acc-ink); color: #fff; padding: .05rem .4rem; }

.sn-acc .radio:checked + .acc-head { background: var(--sn-acc-accent); color: #fff; }
.sn-acc .radio:checked + .acc-head .plus { transform: rotate(45deg); }
.sn-acc .radio:checked + .acc-head + .acc-body { max-height: 300px; }

.sn-acc .foot { padding: 1rem 1.3rem; border-top: 3px solid var(--sn-acc-ink); font-family: 'Space Mono';
  font-size: .7rem; display: flex; justify-content: space-between; align-items: center; }
.sn-acc .dot { width: 9px; height: 9px; border-radius: 50%; background: #1db954; display: inline-block; margin-right: .4rem; }

.sn-acc .mainpane { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.sn-acc .top { padding: 1.4rem 2rem; border-bottom: 3px solid var(--sn-acc-ink); display: flex; align-items: center; gap: 1rem; background: var(--sn-acc-panel); }
.sn-acc .mbtn { display: none; border: 3px solid var(--sn-acc-ink); background: var(--sn-acc-lime); padding: .4rem .5rem; cursor: pointer; box-shadow: 3px 3px 0 var(--sn-acc-ink); }
.sn-acc .mbtn svg { width: 20px; height: 20px; stroke: var(--sn-acc-ink); display: block; }
.sn-acc .top h1 { font-weight: 900; font-size: 1.6rem; text-transform: uppercase; letter-spacing: -.04em; }
.sn-acc .body { padding: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.3rem; }
.sn-acc .card { background: var(--sn-acc-panel); border: 3px solid var(--sn-acc-ink); padding: 1.4rem; box-shadow: 6px 6px 0 var(--sn-acc-ink); }
.sn-acc .card .k { font-family: 'Space Mono'; font-size: .72rem; text-transform: uppercase; }
.sn-acc .card .v { font-weight: 900; font-size: 2.2rem; letter-spacing: -.04em; margin-top: .3rem; }
.sn-acc .card.alt { background: var(--sn-acc-lime); }
.sn-acc .card.dark { background: var(--sn-acc-ink); color: var(--sn-acc-bg); }

@media (max-width: 880px) {
  .sn-acc .sidebar { position: absolute; transform: translateX(-105%); transition: transform .35s; }
  .sn-acc .toggle:checked ~ .sidebar { transform: translateX(0); }
  .sn-acc .toggle:checked ~ .overlay { display: block; position: absolute; inset: 0; background: rgba(20,20,20,.4); z-index: 20; }
  .sn-acc .mbtn { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-acc .acc-body, .sn-acc .acc-head .plus, .sn-acc .sidebar { transition: none; }
}
```

### 07. Fixed Full-Height CSS Sidebar Navigation Layout

**Type:** Pure CSS
**Description:** A sticky vertical menu layout where the CSS sidebar stays pinned and the main content scrolls independently — a Strata-style documentation-site rail. The rail is position: fixed full-height with a search box, nested doc tree, version badge, and social icons, plus a sticky breadcrumb topbar on the article. Clean indigo-on-white docs aesthetic with Bricolage Grotesque headings. Collapses to an icon strip on mobile. Best for documentation sites, API references, technical handbooks, knowledge bases.

**HTML:**
```html
<section class="sn-fix" aria-label="Fixed full-height docs sidebar demo">
  <aside class="sidebar" aria-label="Documentation navigation">
    <div class="brand">
      <div class="logo" aria-hidden="true">⌘</div>
      <div><b>Strata</b><small>Documentation</small></div>
      <span class="ver">v4.0</span>
    </div>
    <div class="search" role="search">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg>
      <span>Search docs…</span><kbd>⌘K</kbd>
    </div>
    <nav class="nav">
      <div class="cap">Getting Started</div>
      <a class="item" href="#">Introduction</a>
      <a class="item" href="#">Installation</a>
      <a class="item active" href="#">Quick Start</a>
      <div class="cap">Core Concepts</div>
      <a class="item" href="#">Architecture</a>
      <div class="sub">
        <a class="item" href="#">Routing</a>
        <a class="item active" href="#">Data Fetching</a>
        <a class="item" href="#">Caching</a>
      </div>
      <a class="item" href="#">Configuration</a>
      <a class="item" href="#">Middleware</a>
      <div class="cap">API Reference</div>
      <a class="item" href="#">CLI Commands</a>
      <a class="item" href="#">REST Endpoints</a>
      <a class="item" href="#">Webhooks</a>
    </nav>
    <div class="foot">
      <a href="#" title="GitHub" aria-label="GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.5 2 2 6.6 2 12.3c0 4.5 2.9 8.3 6.8 9.7.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.4-3.4-1.4-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .8.1-.7.3-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 015 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5 4-1.4 6.8-5.2 6.8-9.7C22 6.6 17.5 2 12 2z"/></svg></a>
      <a href="#" title="Discord" aria-label="Discord"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M18 5a18 18 0 00-4-1l-.3.6a14 14 0 014 2c-2-1-4-1.6-5.7-1.6S8.3 5.6 6.3 6.6a14 14 0 014-2L10 4a18 18 0 00-4 1C3.5 8 3 11 3 14a13 13 0 004 2l.8-1.3"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/></svg></a>
    </div>
  </aside>
  <main class="contentpane">
    <div class="topbar">Docs <b>/</b> Core Concepts <b>/</b> Data Fetching</div>
    <article class="doc">
      <div class="eyebrow">Core Concepts</div>
      <h1>Data Fetching</h1>
      <p>This layout uses a fixed full-height sidebar — the documentation tree stays pinned to the viewport while the article scrolls independently, the hallmark of a docs-style navigation.</p>
      <h2>Basic Usage</h2>
      <p>Fetch data on the server and stream it to the client. The sidebar remains accessible no matter how far down the page you read.</p>
      <div class="codeblock"><span class="c">// fetch on the server</span><br>const data = await strata.get('/api/posts');<br>return &lt;List items={data} /&gt;;</div>
    </article>
  </main>
</section>
```

**CSS:**
```css
/* ─── 07 Fixed Full-Height Sidebar — docs style ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter+Tight:wght@400;500;600&display=swap');

.sn-fix {
  --sn-fix-bg: #fbfbfd;
  --sn-fix-rail: #ffffff;
  --sn-fix-ink: #15171c;
  --sn-fix-muted: #6b7280;
  --sn-fix-line: #ebedf2;
  --sn-fix-accent: #4338ca;
  --sn-fix-accent-soft: #eef0ff;
  --sn-fix-code: #0b0d12;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Inter Tight', sans-serif;
  background: var(--sn-fix-bg);
  color: var(--sn-fix-ink);
  overflow: hidden;
  box-sizing: border-box;
}
.sn-fix *, .sn-fix *::before, .sn-fix *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-fix .sidebar {
  position: absolute; top: 0; left: 0; bottom: 0; width: 280px;
  background: var(--sn-fix-rail); border-right: 1px solid var(--sn-fix-line);
  display: flex; flex-direction: column; z-index: 20;
}
.sn-fix .brand { display: flex; align-items: center; gap: .7rem; padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--sn-fix-line); }
.sn-fix .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--sn-fix-ink);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-family: 'Bricolage Grotesque'; flex-shrink: 0; }
.sn-fix .brand b { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.sn-fix .brand small { display: block; color: var(--sn-fix-muted); font-size: .7rem; }
.sn-fix .ver { margin-left: auto; font-size: .66rem; font-weight: 600; color: var(--sn-fix-accent);
  background: var(--sn-fix-accent-soft); padding: .2rem .5rem; border-radius: 20px; }

.sn-fix .search { margin: 1rem 1.2rem .4rem; display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--sn-fix-line); border-radius: 10px; padding: .55rem .75rem; color: var(--sn-fix-muted); }
.sn-fix .search svg { width: 16px; height: 16px; flex-shrink: 0; }
.sn-fix .search span { font-size: .82rem; flex: 1; }
.sn-fix .search kbd { font-size: .68rem; border: 1px solid var(--sn-fix-line); border-radius: 5px; padding: .05rem .35rem; background: var(--sn-fix-bg); font-family: inherit; }

.sn-fix .nav { flex: 1; overflow-y: auto; padding: .7rem 1rem 1.5rem; }
.sn-fix .cap { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--sn-fix-muted); font-weight: 700; padding: 1rem .7rem .3rem; }
.sn-fix .item { display: block; padding: .46rem .8rem; color: var(--sn-fix-muted); text-decoration: none;
  font-size: .88rem; border-radius: 8px; font-weight: 500; transition: .15s; border-left: 2px solid transparent; }
.sn-fix .item:hover { color: var(--sn-fix-ink); background: var(--sn-fix-bg); }
.sn-fix .item.active { color: var(--sn-fix-accent); background: var(--sn-fix-accent-soft); font-weight: 600; }
.sn-fix .sub { margin-left: .55rem; border-left: 1px solid var(--sn-fix-line); padding-left: .4rem; }
.sn-fix .sub .item { font-size: .84rem; }
.sn-fix .sub .item.active { border-left: 2px solid var(--sn-fix-accent); border-radius: 0 8px 8px 0; background: transparent; }

.sn-fix .foot { padding: 1rem 1.3rem; border-top: 1px solid var(--sn-fix-line); display: flex; gap: .8rem; color: var(--sn-fix-muted); }
.sn-fix .foot a { color: var(--sn-fix-muted); display: grid; place-items: center; }
.sn-fix .foot svg { width: 18px; height: 18px; }

.sn-fix .contentpane { margin-left: 280px; height: 100%; overflow-y: auto; }
.sn-fix .topbar { position: sticky; top: 0; background: rgba(251,251,253,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sn-fix-line); padding: .9rem 3rem; font-size: .82rem; color: var(--sn-fix-muted); z-index: 10; }
.sn-fix .topbar b { color: var(--sn-fix-ink); }
.sn-fix .doc { padding: 2.4rem 3rem; max-width: 760px; }
.sn-fix .doc .eyebrow { font-size: .78rem; font-weight: 700; color: var(--sn-fix-accent); text-transform: uppercase; letter-spacing: .08em; }
.sn-fix .doc h1 { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 2.6rem; letter-spacing: -.04em; margin: .4rem 0 1rem; }
.sn-fix .doc p { color: #3c4150; line-height: 1.8; margin-bottom: 1.2rem; font-size: 1.02rem; }
.sn-fix .doc h2 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 1.4rem; margin: 2rem 0 .8rem; }
.sn-fix .codeblock { background: var(--sn-fix-code); color: #a5b4fc; border-radius: 12px; padding: 1.2rem 1.4rem;
  font-family: ui-monospace, Menlo, monospace; font-size: .85rem; line-height: 1.7; overflow-x: auto; }
.sn-fix .codeblock .c { color: #5b6270; }

@media (max-width: 820px) {
  .sn-fix .sidebar { width: 72px; }
  .sn-fix .brand b, .sn-fix .brand small, .sn-fix .ver, .sn-fix .search span,
  .sn-fix .search kbd, .sn-fix .cap, .sn-fix .sub,
  .sn-fix .nav .item:not(.icon) { display: none; }
  .sn-fix .brand, .sn-fix .search { justify-content: center; }
  .sn-fix .contentpane { margin-left: 72px; }
  .sn-fix .topbar, .sn-fix .doc { padding-left: 1.4rem; padding-right: 1.4rem; }
}
```

### 08. Modern Glassmorphism Floating Sidebar Design in CSS

**Type:** Pure CSS
**Description:** A smart-home control dashboard with a glassmorphic side nav and a true backdrop-blur effect. The rail floats with rounded corners over an animated ambient gradient, using backdrop-filter blur + saturation, inset highlights, and frosted hover tooltips. Matching glass stat cards (temperature, lights, energy). Vibrant, depth-driven, fully transparent layering — one of the cool modern CSS sidebar designs that proves how much identity a single rail can carry. Best for smart-home apps, modern dashboards, premium SaaS landing pages — anywhere the sidebar IS the brand visual.

**HTML:**
```html
<section class="sn-gls" aria-label="Glassmorphism floating sidebar demo">
  <div class="layout">
    <nav class="sidebar" aria-label="Smart-home navigation">
      <div class="logo" aria-hidden="true">❋</div>
      <a class="nav-icon active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg><span class="tip">Home</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/></svg><span class="tip">Lighting</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M14 4v10.5a4 4 0 11-4 0V4a2 2 0 014 0z"/></svg><span class="tip">Climate</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg><span class="tip">Security</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 18V5l12-2v13"/><path d="M9 9h12"/></svg><span class="tip">Media</span></a>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 12h18M3 6h18M3 18h18"/></svg><span class="tip">Scenes</span></a>
      <div class="spacer"></div>
      <a class="nav-icon" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg><span class="tip">Settings</span></a>
      <div class="avatar" aria-hidden="true"></div>
    </nav>
    <main class="contentpane">
      <div class="hello">
        <h1>Good evening, Ada</h1>
        <p>A frosted glass rail floats above an ambient gradient — pure CSS backdrop-filter.</p>
      </div>
      <div class="cards">
        <div class="gcard">
          <div class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14 4v10.5a4 4 0 11-4 0V4a2 2 0 014 0z"/></svg></div>
          <b>Living Room</b><div class="v">21.5°</div><small>Heating · auto</small>
        </div>
        <div class="gcard">
          <div class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2"/></svg></div>
          <b>Lights</b><small>4 of 6 on</small><div class="toggleui" aria-hidden="true"></div>
        </div>
        <div class="gcard">
          <div class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M13 2L3 14h9l-1 8 10-12h-9z"/></svg></div>
          <b>Energy Today</b><div class="v">8.2 kWh</div><small>−12% vs avg</small>
        </div>
      </div>
    </main>
  </div>
</section>
```

**CSS:**
```css
/* ─── 08 Glassmorphism Floating Sidebar — smart home ──────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

.sn-gls {
  --sn-gls-txt: #f4f6ff;
  --sn-gls-muted: rgba(244,246,255,.6);
  --sn-gls-glass: rgba(255,255,255,.1);
  --sn-gls-glass-brd: rgba(255,255,255,.22);
  --sn-gls-active: rgba(255,255,255,.9);

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Sora', sans-serif;
  color: var(--sn-gls-txt);
  background:
    radial-gradient(700px 700px at 8% 12%, #7c5cff 0%, transparent 55%),
    radial-gradient(900px 700px at 95% 20%, #ff5ca8 0%, transparent 50%),
    radial-gradient(800px 800px at 70% 100%, #2bd9c9 0%, transparent 55%),
    #14102b;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-gls *, .sn-gls *::before, .sn-gls *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-gls::before {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, #ffb347, transparent 65%);
  top: 30%; left: 40%;
  filter: blur(40px); opacity: .4;
  animation: sn-gls-float 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sn-gls-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -50px); } }

.sn-gls .layout { display: flex; height: 100%; padding: 22px; position: relative; z-index: 1; }

.sn-gls .sidebar {
  width: 96px;
  background: var(--sn-gls-glass);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--sn-gls-glass-brd);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3);
  display: flex; flex-direction: column; align-items: center;
  padding: 1.4rem 0; gap: .6rem;
  flex-shrink: 0;
}
.sn-gls .logo { width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,.6));
  display: grid; place-items: center; color: #14102b; font-weight: 800; font-size: 1.4rem;
  margin-bottom: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); flex-shrink: 0; }

.sn-gls .nav-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: var(--sn-gls-txt); text-decoration: none; position: relative; transition: .25s;
  flex-shrink: 0;
}
.sn-gls .nav-icon svg { width: 23px; height: 23px; stroke-width: 1.8; }
.sn-gls .nav-icon:hover { background: rgba(255,255,255,.14); }
.sn-gls .nav-icon.active { background: var(--sn-gls-active); color: #14102b; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.sn-gls .nav-icon .tip { position: absolute; left: 64px; top: 50%; transform: translateY(-50%) scale(.85);
  background: rgba(20,16,43,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .76rem;
  padding: .35rem .7rem; border-radius: 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s;
  border: 1px solid var(--sn-gls-glass-brd); z-index: 5; }
.sn-gls .nav-icon:hover .tip { opacity: 1; transform: translateY(-50%) scale(1); }
.sn-gls .spacer { flex: 1; }
.sn-gls .avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--sn-gls-glass-brd);
  background: linear-gradient(135deg, #ff5ca8, #7c5cff); flex-shrink: 0; }

.sn-gls .contentpane { flex: 1; padding: 1.4rem 2rem; min-width: 0; overflow-y: auto; }
.sn-gls .hello h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.sn-gls .hello p { color: var(--sn-gls-muted); margin-top: .3rem; }
.sn-gls .cards { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; max-width: 720px; }
.sn-gls .gcard {
  background: var(--sn-gls-glass); backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--sn-gls-glass-brd); border-radius: 22px; padding: 1.4rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25);
}
.sn-gls .gcard .ic { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.16);
  display: grid; place-items: center; margin-bottom: 1rem; }
.sn-gls .gcard .ic svg { width: 21px; height: 21px; stroke: #fff; }
.sn-gls .gcard b { font-size: 1.05rem; font-weight: 600; }
.sn-gls .gcard .v { font-size: 1.9rem; font-weight: 800; margin-top: .5rem; letter-spacing: -.02em; }
.sn-gls .gcard small { color: var(--sn-gls-muted); font-size: .8rem; }
.sn-gls .toggleui { margin-top: .9rem; width: 46px; height: 26px; border-radius: 20px; background: rgba(255,255,255,.9); position: relative; }
.sn-gls .toggleui::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: #14102b; top: 3px; right: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sn-gls::before { animation: none; }
  .sn-gls .nav-icon, .sn-gls .nav-icon .tip { transition: none; }
}
```

### 09. Responsive Off-Canvas Mobile Sidebar Navigation Overlay

**Type:** Pure CSS
**Description:** A mobile slide-out sidebar with a CSS overlay for a food-delivery app (Fork&Go), mobile-first. The drawer opens from the left over a dimmed backdrop via the checkbox hack, with a gradient profile header, close button, badges, and a promo card. On desktop (≥920px) the drawer docks permanently and the app bar / overlay disappear — a responsive offcanvas drawer that scales naturally from phone to laptop. Warm orange-and-cream palette. Best for mobile-first apps, e-commerce, food delivery, anywhere the design starts at phone width and adapts up.

**HTML:**
```html
<section class="sn-off" aria-label="Off-canvas mobile sidebar demo">
  <input type="checkbox" id="sn-off-m" class="toggle" aria-label="Toggle navigation">

  <aside class="drawer" aria-label="Account navigation">
    <div class="d-head">
      <label for="sn-off-m" class="close" aria-label="Close navigation"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" stroke-width="2"/></svg></label>
      <div class="ava" aria-hidden="true">🍜</div>
      <b>Hey, Marcus</b>
      <small>Deliver to · 14 Maple St</small>
    </div>
    <nav class="d-nav">
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>Browse</a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M6 2l1.5 1.5M18 2l-1.5 1.5M3 8h18l-1 13a2 2 0 01-2 2H6a2 2 0 01-2-2z"/></svg>Restaurants</a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M16 4h2a2 2 0 012 2v14l-6-3-6 3-6-3V6a2 2 0 012-2h2"/><path d="M9 2h6v4H9z"/></svg>My Orders<span class="badge">2</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z"/></svg>Favorites</a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="1" y="4" width="22" height="16" rx="3"/><path d="M1 10h22"/></svg>Payment</a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg>Settings</a>
    </nav>
    <div class="d-foot">
      <div class="promo"><b>50% off first order 🎉</b><p>Use code FRESH50 at checkout</p></div>
    </div>
  </aside>
  <label for="sn-off-m" class="overlay" aria-hidden="true"></label>

  <div class="mainpane">
    <header class="appbar">
      <label for="sn-off-m" class="menu-btn" aria-label="Open navigation"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round"/></svg></label>
      <div class="title">Fork<span>&amp;</span>Go</div>
      <div class="cart" aria-label="Cart, 2 items"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/></svg><b>2</b></div>
    </header>
    <main class="contentpane">
      <div class="hint">☰ Tap the menu to slide out the navigation</div>
      <div class="food">
        <div class="img" aria-hidden="true"></div>
        <div class="body"><b>Ramen House</b><div class="row"><span class="star">★ 4.8</span>· 20–30 min<span class="price">$$</span></div></div>
      </div>
      <div class="food">
        <div class="img green" aria-hidden="true"></div>
        <div class="body"><b>Green Bowl</b><div class="row"><span class="star">★ 4.6</span>· 15–25 min<span class="price">$</span></div></div>
      </div>
    </main>
  </div>
</section>
```

**CSS:**
```css
/* ─── 09 Off-Canvas Mobile Sidebar — food delivery ────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

.sn-off {
  --sn-off-bg: #fff8f0;
  --sn-off-ink: #241a12;
  --sn-off-muted: #9b8a78;
  --sn-off-line: #f0e4d4;
  --sn-off-orange: #ff6b35;
  --sn-off-orange-d: #e9531c;
  --sn-off-cream: #fff;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'DM Sans', sans-serif;
  background: var(--sn-off-bg);
  color: var(--sn-off-ink);
  overflow: hidden;
  box-sizing: border-box;
}
.sn-off *, .sn-off *::before, .sn-off *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-off .toggle { display: none; }

.sn-off .appbar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem; background: var(--sn-off-cream); border-bottom: 1px solid var(--sn-off-line);
}
.sn-off .menu-btn { cursor: pointer; width: 42px; height: 42px; border-radius: 13px; background: var(--sn-off-bg);
  display: grid; place-items: center; flex-shrink: 0; }
.sn-off .menu-btn svg { width: 22px; height: 22px; stroke: var(--sn-off-ink); }
.sn-off .appbar .title { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.sn-off .appbar .title span { color: var(--sn-off-orange); }
.sn-off .cart { margin-left: auto; width: 42px; height: 42px; border-radius: 13px; background: var(--sn-off-orange);
  display: grid; place-items: center; position: relative; flex-shrink: 0; }
.sn-off .cart svg { width: 21px; height: 21px; stroke: #fff; }
.sn-off .cart b { position: absolute; top: -5px; right: -5px; background: var(--sn-off-ink); color: #fff;
  font-size: .66rem; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }

.sn-off .drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: 300px; max-width: 84%;
  background: var(--sn-off-cream); z-index: 40;
  transform: translateX(-100%); transition: transform .38s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; box-shadow: 14px 0 50px rgba(0,0,0,.18);
}
.sn-off .toggle:checked ~ .drawer { transform: translateX(0); }
.sn-off .overlay { position: absolute; inset: 0; background: rgba(36,26,18,.5); z-index: 30;
  opacity: 0; visibility: hidden; transition: .38s; }
.sn-off .toggle:checked ~ .overlay { opacity: 1; visibility: visible; }

.sn-off .d-head { padding: 1.6rem 1.5rem; background: linear-gradient(135deg, var(--sn-off-orange), var(--sn-off-orange-d)); color: #fff; position: relative; }
.sn-off .d-head .ava { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.25);
  display: grid; place-items: center; font-size: 1.6rem; margin-bottom: .8rem; }
.sn-off .d-head b { font-size: 1.2rem; font-weight: 700; }
.sn-off .d-head small { display: block; opacity: .85; font-size: .82rem; margin-top: .1rem; }
.sn-off .close { position: absolute; top: 1.3rem; right: 1.3rem; cursor: pointer; color: #fff;
  width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.sn-off .close svg { width: 18px; height: 18px; }

.sn-off .d-nav { flex: 1; overflow-y: auto; padding: 1rem .9rem; }
.sn-off .item { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border-radius: 14px;
  color: var(--sn-off-ink); text-decoration: none; font-weight: 600; font-size: .96rem; transition: .16s; }
.sn-off .item svg { width: 22px; height: 22px; stroke: var(--sn-off-muted); stroke-width: 1.9; flex-shrink: 0; }
.sn-off .item:hover { background: var(--sn-off-bg); }
.sn-off .item.active { background: #fff1e8; color: var(--sn-off-orange-d); }
.sn-off .item.active svg { stroke: var(--sn-off-orange-d); }
.sn-off .item .badge { margin-left: auto; background: var(--sn-off-orange); color: #fff; font-size: .7rem;
  font-weight: 700; padding: .12rem .5rem; border-radius: 20px; }
.sn-off .d-foot { padding: 1.2rem 1.5rem; border-top: 1px solid var(--sn-off-line); }
.sn-off .promo { background: var(--sn-off-ink); color: #fff; border-radius: 16px; padding: 1.1rem 1.2rem; }
.sn-off .promo b { font-size: .95rem; }
.sn-off .promo p { font-size: .78rem; opacity: .7; margin-top: .2rem; }

.sn-off .mainpane { height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
.sn-off .contentpane { padding: 1.3rem 1.2rem; max-width: 560px; margin: 0 auto; }
.sn-off .hint { background: #fff1e8; border: 1px dashed var(--sn-off-orange); border-radius: 14px;
  padding: .9rem 1.1rem; color: var(--sn-off-orange-d); font-size: .88rem; font-weight: 600; margin-bottom: 1.3rem; text-align: center; }
.sn-off .food { background: var(--sn-off-cream); border: 1px solid var(--sn-off-line); border-radius: 20px; overflow: hidden; margin-bottom: 1.2rem; }
.sn-off .food .img { height: 130px; background: linear-gradient(135deg, #ffd5a8, #ff6b35); }
.sn-off .food .img.green { background: linear-gradient(135deg, #c8e6a0, #5ac26a); }
.sn-off .food .body { padding: 1.1rem 1.3rem; }
.sn-off .food .body b { font-size: 1.1rem; }
.sn-off .food .body .row { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; color: var(--sn-off-muted); font-size: .85rem; }
.sn-off .food .body .price { margin-left: auto; color: var(--sn-off-ink); font-weight: 800; font-size: 1.1rem; }
.sn-off .star { color: var(--sn-off-orange); }

@media (min-width: 920px) {
  .sn-off .drawer { position: static; transform: none; box-shadow: none; border-right: 1px solid var(--sn-off-line); flex-shrink: 0; }
  .sn-off .overlay, .sn-off .menu-btn, .sn-off .close { display: none; }
  .sn-off { display: flex; flex-direction: row; }
  .sn-off .mainpane { flex: 1; }
  .sn-off .appbar { display: none; }
  .sn-off .contentpane { margin: 0; padding: 2.5rem; max-width: 680px; }
  .sn-off .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-off .drawer, .sn-off .overlay { transition: none; }
}
```

### 10. App-Style Vertical Sidebar Menu with Bottom-Pinned Profile

**Type:** Pure CSS
**Description:** How to push a menu item to the bottom of a CSS sidebar — a sidebar layout with the profile section at the bottom, demonstrated by a Pulse project-management workspace. The workspace switcher sits at the top, a scrollable nav fills the middle with counts and status dots, and the profile is pinned to the bottom using margin-top: auto, with quick-action icons, online indicator, and a kebab menu. Dark Linear-style UI with Geist + Geist Mono and yellow / violet accents. Collapses to icons on mobile. Best for productivity tools, PM apps, internal dashboards, team workspaces where identity and quick actions need permanent placement.

**HTML:**
```html
<section class="sn-pin" aria-label="App-style sidebar with bottom-pinned profile demo">
  <aside class="sidebar" aria-label="Workspace navigation">
    <div class="ws" role="button" tabindex="0">
      <div class="ic" aria-hidden="true">P</div>
      <div><b>Pulse Team</b><small>Free plan</small></div>
      <span class="ch" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 9l4-4 4 4M16 15l-4 4-4-4"/></svg></span>
    </div>
    <nav class="nav">
      <div class="cap">Workspace</div>
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg><span>Board</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg><span>Tasks</span><span class="count">24</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>Calendar</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg><span>Docs</span></a>
      <div class="cap">Channels</div>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span>Messages</span><span class="dot" aria-label="Unread"></span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span>Activity</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2M16 3.13a4 4 0 010 7.75"/></svg><span>Members</span></a>
    </nav>
    <div class="profile-wrap">
      <div class="quick">
        <a href="#" title="Search" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg></a>
        <a href="#" title="Notifications" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></a>
        <a href="#" title="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg></a>
      </div>
      <div class="profile" role="button" tabindex="0">
        <div class="avatar" aria-hidden="true"></div>
        <div><b>Jordan Reye</b><small>jordan@pulse.io</small></div>
        <span class="more" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></span>
      </div>
    </div>
  </aside>

  <main class="mainpane">
    <div class="head">
      <h1>Sprint Board</h1>
      <button class="new" type="button">+ New task</button>
    </div>
    <div class="board">
      <div class="col">
        <div class="ct"><i class="grey" aria-hidden="true"></i>To Do</div>
        <div class="task">Audit onboarding flow<small>Due Fri · Sam</small></div>
        <div class="task">Draft Q3 roadmap<small>No date</small></div>
      </div>
      <div class="col">
        <div class="ct"><i class="yellow" aria-hidden="true"></i>In Progress</div>
        <div class="task">Sidebar redesign<small>Due today · You</small></div>
      </div>
      <div class="col">
        <div class="ct"><i class="green" aria-hidden="true"></i>Done</div>
        <div class="task">Set up CI pipeline<small>Yesterday</small></div>
      </div>
    </div>
  </main>
</section>
```

**CSS:**
```css
/* ─── 10 App Sidebar with Bottom-Pinned Profile — PM workspace ── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

.sn-pin {
  --sn-pin-bg: #0c0c0f;
  --sn-pin-rail: #131318;
  --sn-pin-rail-2: #1c1c24;
  --sn-pin-line: #26262f;
  --sn-pin-txt: #ededf2;
  --sn-pin-muted: #85858f;
  --sn-pin-accent: #f5d90a;
  --sn-pin-accent-2: #a78bfa;
  --sn-pin-green: #4ade80;

  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Geist', 'Inter', sans-serif;
  background: var(--sn-pin-bg);
  color: var(--sn-pin-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.sn-pin *, .sn-pin *::before, .sn-pin *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sn-pin .sidebar {
  width: 256px; background: var(--sn-pin-rail); border-right: 1px solid var(--sn-pin-line);
  height: 100%; display: flex; flex-direction: column; flex-shrink: 0;
}
.sn-pin .ws { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; margin: .6rem;
  border-radius: 12px; background: var(--sn-pin-rail-2); cursor: pointer; transition: .18s; }
.sn-pin .ws:hover { background: #23232c; }
.sn-pin .ws .ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sn-pin-accent), var(--sn-pin-accent-2));
  display: grid; place-items: center; color: #0c0c0f; font-weight: 700; }
.sn-pin .ws b { font-size: .92rem; font-weight: 600; }
.sn-pin .ws small { display: block; color: var(--sn-pin-muted); font-size: .72rem; }
.sn-pin .ws .ch { margin-left: auto; color: var(--sn-pin-muted); }
.sn-pin .ws .ch svg { width: 16px; height: 16px; }

.sn-pin .nav { flex: 1; overflow-y: auto; padding: .5rem .7rem; }
.sn-pin .cap { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sn-pin-muted);
  font-weight: 600; padding: .9rem .8rem .35rem; font-family: 'Geist Mono', monospace; }
.sn-pin .item { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 10px;
  color: var(--sn-pin-txt); text-decoration: none; font-size: .9rem; font-weight: 500; transition: .16s; }
.sn-pin .item svg { width: 19px; height: 19px; stroke-width: 1.8; color: var(--sn-pin-muted); flex-shrink: 0; }
.sn-pin .item:hover { background: var(--sn-pin-rail-2); }
.sn-pin .item:hover svg { color: var(--sn-pin-txt); }
.sn-pin .item.active { background: var(--sn-pin-rail-2); color: #fff; }
.sn-pin .item.active svg { color: var(--sn-pin-accent); }
.sn-pin .item .count { margin-left: auto; font-size: .72rem; color: var(--sn-pin-muted); font-family: 'Geist Mono', monospace; }
.sn-pin .item .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--sn-pin-green); }

.sn-pin .profile-wrap { margin-top: auto; border-top: 1px solid var(--sn-pin-line); padding: .7rem; }
.sn-pin .quick { display: flex; gap: .4rem; margin-bottom: .5rem; }
.sn-pin .quick a { flex: 1; display: grid; place-items: center; padding: .55rem; border-radius: 9px;
  color: var(--sn-pin-muted); transition: .16s; }
.sn-pin .quick a:hover { background: var(--sn-pin-rail-2); color: var(--sn-pin-txt); }
.sn-pin .quick svg { width: 18px; height: 18px; stroke-width: 1.8; }
.sn-pin .profile { display: flex; align-items: center; gap: .7rem; padding: .6rem; border-radius: 12px;
  cursor: pointer; transition: .18s; }
.sn-pin .profile:hover { background: var(--sn-pin-rail-2); }
.sn-pin .avatar { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, #4ade80, #a78bfa); position: relative; }
.sn-pin .avatar::after { content: ""; position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--sn-pin-green); border: 2.5px solid var(--sn-pin-rail); }
.sn-pin .profile b { font-size: .88rem; font-weight: 600; }
.sn-pin .profile small { display: block; color: var(--sn-pin-muted); font-size: .72rem; }
.sn-pin .profile .more { margin-left: auto; color: var(--sn-pin-muted); }
.sn-pin .profile .more svg { width: 16px; height: 16px; }

.sn-pin .mainpane { flex: 1; padding: 2.5rem 3rem; min-width: 0; overflow-y: auto; }
.sn-pin .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.sn-pin .head h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; }
.sn-pin .head .new { background: var(--sn-pin-accent); color: #0c0c0f; border: none; border-radius: 10px;
  padding: .6rem 1.1rem; font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit; }
.sn-pin .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.sn-pin .col { background: var(--sn-pin-rail); border: 1px solid var(--sn-pin-line); border-radius: 16px; padding: 1rem; }
.sn-pin .col .ct { font-size: .8rem; color: var(--sn-pin-muted); font-weight: 600; margin-bottom: .8rem;
  display: flex; align-items: center; gap: .5rem; font-family: 'Geist Mono', monospace; }
.sn-pin .col .ct i { width: 8px; height: 8px; border-radius: 50%; }
.sn-pin .col .ct i.grey { background: #85858f; }
.sn-pin .col .ct i.yellow { background: #f5d90a; }
.sn-pin .col .ct i.green { background: #4ade80; }
.sn-pin .task { background: var(--sn-pin-rail-2); border-radius: 11px; padding: .85rem; margin-bottom: .6rem; font-size: .85rem; }
.sn-pin .task small { display: block; color: var(--sn-pin-muted); font-size: .74rem; margin-top: .4rem; }

@media (max-width: 780px) {
  .sn-pin .sidebar { width: 74px; }
  .sn-pin .ws b, .sn-pin .ws small, .sn-pin .ws .ch, .sn-pin .cap,
  .sn-pin .item span, .sn-pin .item .count, .sn-pin .item .dot,
  .sn-pin .profile b, .sn-pin .profile small, .sn-pin .profile .more { display: none; }
  .sn-pin .ws { justify-content: center; padding: .7rem; }
  .sn-pin .item { justify-content: center; padding: .65rem; }
  .sn-pin .profile { justify-content: center; }
  .sn-pin .quick { flex-direction: column; }
  .sn-pin .mainpane { padding: 1.5rem; }
}
```

---
## 12 CSS Skeleton Loaders

URL: https://codefronts.com/components/css-skeleton-loaders/
Description: 12 hand-coded CSS skeleton loaders — classic shimmer, pulse, avatar card, image card, article page, table rows, stat tiles, comment thread and more.
Demo count: 12

### 01. Classic Shimmer

**Type:** Pure CSS
**Description:** A diagonal gradient slides left-to-right across each placeholder bar — the most-recognised skeleton style, used by LinkedIn, Facebook, and Slack.

**HTML:**
```html
<div class="sk-classic">
  <div class="sk-bar" style="width: 70%"></div>
  <div class="sk-bar" style="width: 90%"></div>
  <div class="sk-bar" style="width: 60%"></div>
</div>
```

**CSS:**
```css
.sk-classic {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skClassic 1.4s linear infinite;
}
@keyframes skClassic {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-classic,
  .sk-classic * {
    animation: none !important;
  }
}

```

### 02. Pulse Block

**Type:** Pure CSS
**Description:** A simple opacity pulse — minimal, GPU-friendly, and the default style used by the Tailwind animate-pulse utility class.

**HTML:**
```html
<div class="sk-pulse">
  <div class="sk-pulse-bar" style="width: 80%"></div>
  <div class="sk-pulse-bar" style="width: 60%"></div>
  <div class="sk-pulse-bar" style="width: 70%"></div>
</div>
```

**CSS:**
```css
.sk-pulse {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-pulse-bar {
  height: 12px;
  border-radius: 6px;
  background: #2a2a36;
  animation: skPulse 1.5s ease-in-out infinite;
}
@keyframes skPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-pulse,
  .sk-pulse * {
    animation: none !important;
  }
}

```

### 03. Avatar Card

**Type:** Pure CSS
**Description:** A circular avatar plus two text lines — the canonical user-profile placeholder. Combines a round shimmer with two narrower bars.

**HTML:**
```html
<div class="sk-avatar">
  <div class="sk-avatar-circle"></div>
  <div class="sk-avatar-lines">
    <div class="sk-avatar-bar" style="width: 110px"></div>
    <div class="sk-avatar-bar" style="width: 70px; height: 8px"></div>
  </div>
</div>
```

**CSS:**
```css
.sk-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 220px;
}
.sk-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
  flex-shrink: 0;
}
.sk-avatar-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-avatar-bar {
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-avatar,
  .sk-avatar * {
    animation: none !important;
  }
}

```

### 04. Image Card

**Type:** Pure CSS
**Description:** A 16:9 image placeholder topped with a title and two body lines — the "feed item" template every social and blog UI ships with.

**HTML:**
```html
<div class="sk-card">
  <div class="sk-card-img"></div>
  <div class="sk-card-title"></div>
  <div class="sk-card-line" style="width: 95%"></div>
  <div class="sk-card-line" style="width: 75%"></div>
</div>
```

**CSS:**
```css
.sk-card {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #15151b;
}
.sk-card-img,
.sk-card-title,
.sk-card-line {
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.6s linear infinite;
  border-radius: 6px;
}
.sk-card-img {
  aspect-ratio: 16 / 9;
  margin-bottom: 4px;
}
.sk-card-title {
  height: 14px;
  width: 70%;
}
.sk-card-line {
  height: 9px;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-card,
  .sk-card * {
    animation: none !important;
  }
}

```

### 05. Wave Sweep

**Type:** Pure CSS
**Description:** A bright highlight strip travels across the placeholder using a CSS mask — adds a glassy "light passing over" feel without changing the base colour.

**HTML:**
```html
<div class="sk-wave">
  <div class="sk-wave-bar" style="width: 80%"></div>
  <div class="sk-wave-bar" style="width: 95%"></div>
  <div class="sk-wave-bar" style="width: 65%"></div>
</div>
```

**CSS:**
```css
.sk-wave {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-wave-bar {
  height: 12px;
  border-radius: 6px;
  background: #2a2a36;
  position: relative;
  overflow: hidden;
}
.sk-wave-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skWave 1.6s linear infinite;
}
@keyframes skWave {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-wave,
  .sk-wave * {
    animation: none !important;
  }
}

```

### 06. Comment Thread

**Type:** Pure CSS
**Description:** Three stacked rows, each a small avatar + two text lines — perfect for chat windows, comment lists, and message inbox loading states.

**HTML:**
```html
<div class="sk-thread">
  <div class="sk-thread-row">
    <div class="sk-thread-dot"></div>
    <div class="sk-thread-lines">
      <div class="sk-thread-bar" style="width: 80px; height: 9px"></div>
      <div class="sk-thread-bar" style="width: 140px"></div>
    </div>
  </div>
  <div class="sk-thread-row">
    <div class="sk-thread-dot"></div>
    <div class="sk-thread-lines">
      <div class="sk-thread-bar" style="width: 60px; height: 9px"></div>
      <div class="sk-thread-bar" style="width: 130px"></div>
    </div>
  </div>
  <div class="sk-thread-row">
    <div class="sk-thread-dot"></div>
    <div class="sk-thread-lines">
      <div class="sk-thread-bar" style="width: 70px; height: 9px"></div>
      <div class="sk-thread-bar" style="width: 110px"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sk-thread {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sk-thread-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sk-thread-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
  flex-shrink: 0;
}
.sk-thread-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.sk-thread-bar {
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-thread,
  .sk-thread * {
    animation: none !important;
  }
}

```

### 07. Article Page

**Type:** Pure CSS
**Description:** A page-level skeleton: hero image, headline, byline, and four paragraph lines. The full reading-page placeholder for blog and news templates.

**HTML:**
```html
<div class="sk-article">
  <div class="sk-article-hero"></div>
  <div class="sk-article-h1"></div>
  <div class="sk-article-by"></div>
  <div class="sk-article-line" style="width: 100%"></div>
  <div class="sk-article-line" style="width: 95%"></div>
  <div class="sk-article-line" style="width: 90%"></div>
  <div class="sk-article-line" style="width: 60%"></div>
</div>
```

**CSS:**
```css
.sk-article {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sk-article-hero,
.sk-article-h1,
.sk-article-by,
.sk-article-line {
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.6s linear infinite;
  border-radius: 5px;
}
.sk-article-hero {
  height: 60px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.sk-article-h1 {
  height: 14px;
  width: 80%;
  margin-bottom: 2px;
}
.sk-article-by {
  height: 9px;
  width: 45%;
  margin-bottom: 6px;
}
.sk-article-line {
  height: 8px;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-article,
  .sk-article * {
    animation: none !important;
  }
}

```

### 08. Table Rows

**Type:** Pure CSS
**Description:** Three table rows of three cells each, with a header row above. Each cell shimmers — the canonical placeholder for data tables and dashboards.

**HTML:**
```html
<div class="sk-table">
  <div class="sk-table-row sk-table-head">
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
  </div>
  <div class="sk-table-row">
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
  </div>
  <div class="sk-table-row">
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
  </div>
  <div class="sk-table-row">
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
  </div>
</div>
```

**CSS:**
```css
.sk-table {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sk-table-row {
  display: grid;
  gap: 6px;
  grid-template-columns: 1.5fr 1fr 1fr;
}
.sk-table-cell {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
}
.sk-table-head .sk-table-cell {
  background: linear-gradient(90deg, #2a2a36 0%, #353543 50%, #2a2a36 100%);
  background-size: 200% 100%;
  height: 14px;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-table,
  .sk-table * {
    animation: none !important;
  }
}

```

### 09. Stat Tiles

**Type:** Pure CSS
**Description:** Three KPI tiles in a row, each with a small label and a big number placeholder — the dashboard / analytics loading state.

**HTML:**
```html
<div class="sk-stats">
  <div class="sk-stat">
    <div class="sk-stat-label"></div>
    <div class="sk-stat-num"></div>
  </div>
  <div class="sk-stat">
    <div class="sk-stat-label"></div>
    <div class="sk-stat-num"></div>
  </div>
  <div class="sk-stat">
    <div class="sk-stat-label"></div>
    <div class="sk-stat-num"></div>
  </div>
</div>
```

**CSS:**
```css
.sk-stats {
  width: 220px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sk-stat {
  background: #15151b;
  padding: 10px 8px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sk-stat-label,
.sk-stat-num {
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
  border-radius: 4px;
}
.sk-stat-label {
  height: 8px;
  width: 70%;
}
.sk-stat-num {
  height: 16px;
  width: 60%;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-stats,
  .sk-stats * {
    animation: none !important;
  }
}

```

### 10. Gradient Glow

**Type:** Pure CSS
**Description:** A soft brand-coloured gradient sweeps through each bar — a more decorative shimmer that fits hero sections and marketing pages.

**HTML:**
```html
<div class="sk-glow">
  <div class="sk-glow-bar" style="width: 90%"></div>
  <div class="sk-glow-bar" style="width: 70%"></div>
  <div class="sk-glow-bar" style="width: 80%"></div>
</div>
```

**CSS:**
```css
.sk-glow {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-glow-bar {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    #1a1a22 0%,
    rgba(124, 108, 255, 0.35) 30%,
    rgba(255, 108, 138, 0.35) 60%,
    #1a1a22 100%
  );
  background-size: 200% 100%;
  animation: skGlow 1.8s linear infinite;
}
@keyframes skGlow {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-glow,
  .sk-glow * {
    animation: none !important;
  }
}

```

### 11. List with Thumbnails

**Type:** Pure CSS
**Description:** A search-result / file-browser layout: square thumbnail beside two text lines, repeated three times. Mirrors media library and admin list views.

**HTML:**
```html
<div class="sk-list">
  <div class="sk-list-row">
    <div class="sk-list-thumb"></div>
    <div class="sk-list-text">
      <div class="sk-list-bar" style="width: 70%"></div>
      <div class="sk-list-bar" style="width: 50%; height: 8px"></div>
    </div>
  </div>
  <div class="sk-list-row">
    <div class="sk-list-thumb"></div>
    <div class="sk-list-text">
      <div class="sk-list-bar" style="width: 85%"></div>
      <div class="sk-list-bar" style="width: 40%; height: 8px"></div>
    </div>
  </div>
  <div class="sk-list-row">
    <div class="sk-list-thumb"></div>
    <div class="sk-list-text">
      <div class="sk-list-bar" style="width: 60%"></div>
      <div class="sk-list-bar" style="width: 65%; height: 8px"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sk-list {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sk-list-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sk-list-thumb {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
  flex-shrink: 0;
}
.sk-list-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.sk-list-bar {
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-list,
  .sk-list * {
    animation: none !important;
  }
}

```

### 12. Chip Cluster

**Type:** Pure CSS
**Description:** Pill-shaped chips of varying widths shimmer in a flex-wrap layout — the right placeholder for tag filters, category lists, and search facets.

**HTML:**
```html
<div class="sk-chips">
  <div class="sk-chip" style="width: 56px"></div>
  <div class="sk-chip" style="width: 80px"></div>
  <div class="sk-chip" style="width: 48px"></div>
  <div class="sk-chip" style="width: 72px"></div>
  <div class="sk-chip" style="width: 60px"></div>
  <div class="sk-chip" style="width: 90px"></div>
  <div class="sk-chip" style="width: 50px"></div>
</div>
```

**CSS:**
```css
.sk-chips {
  width: 220px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sk-chip {
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-chips,
  .sk-chips * {
    animation: none !important;
  }
}

```

---
## 25 CSS Spinners

URL: https://codefronts.com/motion/css-spinner-designs/
Description: 25 hand-coded CSS spinners covering every production loading-spinner pattern developers reach for in 2026 — neon arc with glowing leading-edge dot, dual counter-rotate ring spinner, dot chase orbit (Material Design indeterminate pattern), gradient conic sweep, heartbeat pulse, audio equalizer wave bars, stacked ring helix, morphing square-to-circle, comet trail with fading tail, DNA double helix, folding cube 3D grid (SpinKit's signature pattern), ripple pulse ring (concentric circles), clock tick sweep, infinity loop stroke, bouncing elastic dots, spiral galaxy, glassmorphism loader (backdrop-filter pattern), cyberpunk segmented ring (gamer/Web3 aesthetic), breathing circle, particle scatter burst, retro TV static noise loader, liquid blob morphing, progress arc fill (determinate variant), matrix rain column (cyberpunk vertical), and aurora orb. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-spinners, no react-loading-skeleton, no SpinKit copy, no loading.io snippet). Every spinner uses CSS <code>@keyframes</code> animating <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, respects <code>prefers-reduced-motion</code>, uses scoped <code>.sp-NN__*</code> class names so multiple spinners 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: 25

### 01. Neon Arc CSS Spinner

**Type:** Pure CSS
**Description:** A single glowing cyan arc rotates on a deep-dark background, with a luminous leading-edge dot that amplifies the neon effect via CSS drop-shadow filters.

**HTML:**
```html
<div class="sp-01">
  <div class="sp-01__ring">
    <div class="sp-01__track"></div>
    <div class="sp-01__spinner">
      <div class="sp-01__arc"></div>
      <div class="sp-01__dot"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sp-01,.sp-01 *,.sp-01 *::before,.sp-01 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-01{
  --bg:#0a0a0f;
  --arc:#00f5ff;
  --glow:rgba(0,245,255,0.4);
  --track:rgba(0,245,255,0.12);
  --size:72px;
  --thickness:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
  font-family:system-ui,sans-serif;
}
.sp-01__ring{
  position:relative;
  width:var(--size);
  height:var(--size);
}
.sp-01__track{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:var(--thickness) solid var(--track);
}
/* The arc and dot-arm share one rotating parent so they move together */
.sp-01__spinner{
  position:absolute;
  inset:0;
  animation:sp-01-spin 1s cubic-bezier(0.6,0.2,0.4,0.8) infinite;
}
.sp-01__arc{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:var(--thickness) solid transparent;
  border-top-color:var(--arc);
  border-right-color:var(--arc);
  filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 16px var(--glow));
}
/* Leading-edge dot — a glowing tip at the LEADING END of the arc.
   The arc is built from border-top + border-right, so visually it
   spans ~135° (top-left corner) through 12 → 3 → ~225° (bottom-right
   corner). The END of border-right is at the bottom-right corner of
   the box (4:30 clock position), which is the LEADING tip during
   clockwise rotation.

   To position the dot at 4:30 on a 72×72 spinner: rotate 135° around
   the center via transform: rotate(135deg) translateY(-r), where r =
   (size/2 - thickness/2). Using a CSS custom property for r keeps
   this responsive to --size + --thickness changes.

   The dot is anchored at the spinner center (top:50%, left:50%) then
   rotated outward by 135° (= 4:30 clock direction = the leading-end
   of the arc), with translateY(-r) moving it to the arc's stroke
   midline radius. Sized 1.75× the arc thickness for a visible glowing
   tip without a chunky-bump look. */
.sp-01__dot{
  position:absolute;
  top:50%;
  left:50%;
  width:calc(var(--thickness) * 1.75);
  height:calc(var(--thickness) * 1.75);
  transform:translate(-50%, -50%) rotate(135deg) translateY(calc(var(--size) / -2 + var(--thickness) / 2));
  background:var(--arc);
  border-radius:50%;
  box-shadow:0 0 8px var(--arc),0 0 16px var(--glow);
}
@keyframes sp-01-spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-01__spinner{animation:none}
}
```

### 02. Dual Counter-Rotate Ring Spinner

**Type:** Pure CSS
**Description:** Two concentric rings spin in opposite directions — outer purple and inner pink — with a pulsing radial core, creating a hypnotic, gyroscopic loading indicator.

**HTML:**
```html
<div class="sp-02">
  <div class="sp-02__wrap">
    <div class="sp-02__outer-track"></div>
    <div class="sp-02__outer"></div>
    <div class="sp-02__inner-track"></div>
    <div class="sp-02__inner"></div>
    <div class="sp-02__core"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-02,.sp-02 *,.sp-02 *::before,.sp-02 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-02{
  --bg:#0d0017;
  --outer:#b44fff;
  --inner:#ff4fa3;
  --outer-track:rgba(180,79,255,0.15);
  --inner-track:rgba(255,79,163,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-02__wrap{
  position:relative;
  width:80px;
  height:80px;
}
.sp-02__outer-track{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid var(--outer-track);
}
.sp-02__outer{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid transparent;
  border-top-color:var(--outer);
  border-bottom-color:var(--outer);
  animation:sp-02-cw 1.2s linear infinite;
  filter:drop-shadow(0 0 6px var(--outer));
}
.sp-02__inner-track{
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:3px solid var(--inner-track);
}
.sp-02__inner{
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:3px solid transparent;
  border-left-color:var(--inner);
  border-right-color:var(--inner);
  animation:sp-02-ccw 0.9s linear infinite;
  filter:drop-shadow(0 0 6px var(--inner));
}
.sp-02__core{
  position:absolute;
  inset:32px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(180,79,255,0.6),transparent);
  animation:sp-02-pulse 1.2s ease-in-out infinite;
}
@keyframes sp-02-cw{
  to{transform:rotate(360deg)}
}
@keyframes sp-02-ccw{
  to{transform:rotate(-360deg)}
}
@keyframes sp-02-pulse{
  0%,100%{opacity:0.4;transform:scale(0.8)}
  50%{opacity:1;transform:scale(1.2)}
}
@media (prefers-reduced-motion: reduce){
  .sp-02__outer,.sp-02__inner,.sp-02__core{animation:none}
}
```

### 03. Dot Chase Orbit Spinner

**Type:** Pure CSS
**Description:** Four multi-coloured dots orbit a shared centre, each fading in and out with staggered delays to create a chasing, comet-like orbital trail effect.

**HTML:**
```html
<div class="sp-03">
  <div class="sp-03__orbit">
    <div class="sp-03__trail"></div>
    <div class="sp-03__dot"></div>
    <div class="sp-03__dot"></div>
    <div class="sp-03__dot"></div>
    <div class="sp-03__dot"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-03,.sp-03 *,.sp-03 *::before,.sp-03 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-03{
  --bg:#0b1120;
  --d1:#f9a825;
  --d2:#ff6b35;
  --d3:#e91e8c;
  --d4:#7c4dff;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-03__orbit{
  position:relative;
  width:72px;
  height:72px;
  animation:sp-03-spin 1.4s linear infinite;
}
.sp-03__dot{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  top:50%;
  left:50%;
  transform-origin:0 0;
}
.sp-03__dot:nth-child(1){
  background:var(--d1);
  box-shadow:0 0 8px var(--d1);
  transform:rotate(0deg) translateX(28px) translateY(-6px);
  animation:sp-03-fade 1.4s linear infinite;
  animation-delay:0s;
}
.sp-03__dot:nth-child(2){
  background:var(--d2);
  box-shadow:0 0 8px var(--d2);
  transform:rotate(90deg) translateX(28px) translateY(-6px);
  animation:sp-03-fade 1.4s linear infinite;
  animation-delay:-0.35s;
}
.sp-03__dot:nth-child(3){
  background:var(--d3);
  box-shadow:0 0 8px var(--d3);
  transform:rotate(180deg) translateX(28px) translateY(-6px);
  animation:sp-03-fade 1.4s linear infinite;
  animation-delay:-0.7s;
}
.sp-03__dot:nth-child(4){
  background:var(--d4);
  box-shadow:0 0 8px var(--d4);
  transform:rotate(270deg) translateX(28px) translateY(-6px);
  animation:sp-03-fade 1.4s linear infinite;
  animation-delay:-1.05s;
}
.sp-03__trail{
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.06);
}
@keyframes sp-03-spin{
  to{transform:rotate(360deg)}
}
@keyframes sp-03-fade{
  0%,100%{opacity:1;transform-origin:0 0}
  50%{opacity:0.25}
}
@media (prefers-reduced-motion: reduce){
  .sp-03__orbit,.sp-03__dot{animation:none}
}
```

### 04. Gradient Conic Sweep Spinner

**Type:** Pure CSS
**Description:** A conic-gradient disk sweeps through deep violet-to-cyan colours with a transparent cutout tail, creating a smooth colour-wheel spinner with a bright leading-edge tip.

**HTML:**
```html
<div class="sp-04">
  <div class="sp-04__wrap">
    <div class="sp-04__spinner">
      <div class="sp-04__conic"></div>
      <div class="sp-04__hole"></div>
      <div class="sp-04__tip"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sp-04,.sp-04 *,.sp-04 *::before,.sp-04 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-04{
  --bg:#050510;
  --c1:#00e5ff;
  --c2:#1976d2;
  --c3:#6200ea;
  --hole:#050510;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-04__wrap{
  position:relative;
  width:80px;
  height:80px;
}
.sp-04__spinner{
  position:absolute;
  inset:0;
  animation:sp-04-spin 1s linear infinite;
}
.sp-04__conic{
  width:100%;
  height:100%;
  border-radius:50%;
  /*
    Bright cyan tip lands at 360deg (= 0deg = 12 o'clock). Arc fades
    BACKWARD (counter-clockwise from the tip): purple → blue → cyan
    arriving at the tip. Transparent gap from 0-60deg = clean cutoff
    after the tip in the rotation direction. Tail points CCW from
    head = correct comet physics for CLOCKWISE rotation (tail trails
    behind the direction of motion). Same direction as Demo 09 so
    they read consistently.
  */
  background:conic-gradient(
    transparent   0deg,
    transparent  60deg,
    var(--c3)   120deg,
    var(--c2)   240deg,
    var(--c1)   360deg
  );
  filter:drop-shadow(0 0 6px var(--c1));
}
.sp-04__hole{
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:var(--hole);
}
/* Tip at 12-o'clock (0deg) = exact bright start of the arc. The
   conic disc is 80px and the donut hole is inset:10px so the ring
   spans outer-radius 40 → inner-radius 30 → midline at radius 35
   (= 5px from the outer top edge). The tip dot's CENTER must land
   on that midline, so we offset the 10x10 dot up by half its size
   via the translateY(-50%) trick. left:50% + translateX(-50%)
   centers it horizontally on the same axis. */
.sp-04__tip{
  position:absolute;
  top:5px;
  left:50%;
  width:10px;
  height:10px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--c1);
  box-shadow:0 0 12px var(--c1),0 0 24px var(--c1);
}
@keyframes sp-04-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-04__spinner{animation:none}
}
```

### 05. Heartbeat Pulse Loader

**Type:** Pure CSS
**Description:** A vivid red core pulses with a cardiac double-beat rhythm while three concentric ripple rings expand outward and fade, mimicking a real heartbeat waveform.

**HTML:**
```html
<div class="sp-05">
  <div class="sp-05__stack">
    <div class="sp-05__ring"></div>
    <div class="sp-05__ring"></div>
    <div class="sp-05__ring"></div>
    <div class="sp-05__core"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-05,.sp-05 *,.sp-05 *::before,.sp-05 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-05{
  --bg:#0f0a0a;
  --c:#ff1744;
  --glow:rgba(255,23,68,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-05__stack{
  position:relative;
  width:72px;
  height:72px;
}
.sp-05__ring{
  position:absolute;
  border-radius:50%;
  border:2px solid var(--c);
  opacity:0;
  animation:sp-05-ripple 1.8s ease-out infinite;
}
.sp-05__ring:nth-child(1){
  inset:0;
  animation-delay:0s;
}
.sp-05__ring:nth-child(2){
  inset:0;
  animation-delay:0.6s;
}
.sp-05__ring:nth-child(3){
  inset:0;
  animation-delay:1.2s;
}
.sp-05__core{
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 16px var(--glow),0 0 32px var(--glow);
  animation:sp-05-beat 1.8s ease-in-out infinite;
}
@keyframes sp-05-ripple{
  0%{transform:scale(0.3);opacity:0.9}
  100%{transform:scale(1.6);opacity:0}
}
@keyframes sp-05-beat{
  0%,100%{transform:scale(1)}
  15%{transform:scale(1.25)}
  30%{transform:scale(0.95)}
  45%{transform:scale(1.1)}
}
@media (prefers-reduced-motion: reduce){
  .sp-05__ring,.sp-05__core{animation:none;opacity:1}
}
```

### 06. Wave Bar Equalizer Spinner

**Type:** Pure CSS
**Description:** Seven vertical bars oscillate like an audio level meter, scaling from a flat line to full height in a symmetric wave pattern using staggered CSS animation delays.

**HTML:**
```html
<div class="sp-06">
  <div class="sp-06__bars">
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-06,.sp-06 *,.sp-06 *::before,.sp-06 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-06{
  --bg:#020c14;
  --c1:#00e676;
  --c2:#00bcd4;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-06__bars{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:56px;
}
.sp-06__bar{
  width:8px;
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(to top,var(--c1),var(--c2));
  box-shadow:0 0 6px var(--c1);
  animation:sp-06-eq 1s ease-in-out infinite;
}
.sp-06__bar:nth-child(1){animation-delay:0s;height:20px}
.sp-06__bar:nth-child(2){animation-delay:0.1s;height:35px}
.sp-06__bar:nth-child(3){animation-delay:0.2s;height:50px}
.sp-06__bar:nth-child(4){animation-delay:0.3s;height:35px}
.sp-06__bar:nth-child(5){animation-delay:0.4s;height:20px}
.sp-06__bar:nth-child(6){animation-delay:0.3s;height:35px}
.sp-06__bar:nth-child(7){animation-delay:0.2s;height:50px}
@keyframes sp-06-eq{
  0%,100%{transform:scaleY(0.3)}
  50%{transform:scaleY(1)}
}
@media (prefers-reduced-motion: reduce){
  .sp-06__bar{animation:none;transform:scaleY(0.6)}
}
```

### 07. Stacked Ring Helix Spinner

**Type:** Pure CSS
**Description:** Three concentric rings in blue, indigo, and violet spin at alternating speeds and directions, with each ring using different border-side pairs to create a three-axis helix illusion.

**HTML:**
```html
<div class="sp-07">
  <div class="sp-07__helix">
    <div class="sp-07__ring"></div>
    <div class="sp-07__ring"></div>
    <div class="sp-07__ring"></div>
    <div class="sp-07__core"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-07,.sp-07 *,.sp-07 *::before,.sp-07 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-07{
  --bg:#080c18;
  --c1:#40c4ff;
  --c2:#7986cb;
  --c3:#ce93d8;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-07__helix{
  position:relative;
  width:72px;
  height:72px;
  transform-style:preserve-3d;
  perspective:200px;
}
.sp-07__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid transparent;
}
.sp-07__ring:nth-child(1){
  border-top-color:var(--c1);
  border-bottom-color:var(--c1);
  filter:drop-shadow(0 0 5px var(--c1));
  animation:sp-07-spin 1.4s linear infinite;
}
.sp-07__ring:nth-child(2){
  inset:10px;
  border-left-color:var(--c2);
  border-right-color:var(--c2);
  filter:drop-shadow(0 0 5px var(--c2));
  animation:sp-07-spin 1.4s linear infinite reverse;
  animation-delay:-0.23s;
}
.sp-07__ring:nth-child(3){
  inset:20px;
  border-top-color:var(--c3);
  border-bottom-color:var(--c3);
  filter:drop-shadow(0 0 5px var(--c3));
  animation:sp-07-spin 1.4s linear infinite;
  animation-delay:-0.46s;
}
.sp-07__core{
  position:absolute;
  inset:30px;
  border-radius:50%;
  background:radial-gradient(var(--c3),transparent);
  opacity:0.5;
}
@keyframes sp-07-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-07__ring{animation:none}
}
```

### 08. Morph Square-to-Circle Spinner

**Type:** Pure CSS
**Description:** A hollow square morphs fluidly through four asymmetric border-radius stages into a perfect circle and back, while simultaneously rotating — a classic CSS shape-morphing technique.

**HTML:**
```html
<div class="sp-08">
  <div class="sp-08__outer">
    <div class="sp-08__track"></div>
    <div class="sp-08__shape"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-08,.sp-08 *,.sp-08 *::before,.sp-08 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-08{
  --bg:#0e0e12;
  --c:#ff9100;
  --glow:rgba(255,145,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-08__shape{
  width:60px;
  height:60px;
  background:transparent;
  border:4px solid var(--c);
  filter:drop-shadow(0 0 8px var(--glow));
  animation:sp-08-morph 2s ease-in-out infinite, sp-08-spin 2s linear infinite;
}
@keyframes sp-08-morph{
  0%,100%{border-radius:4px;transform:rotate(0deg) scale(1)}
  25%{border-radius:50% 4px 50% 4px}
  50%{border-radius:50%;transform:rotate(180deg) scale(1.15)}
  75%{border-radius:4px 50% 4px 50%}
}
@keyframes sp-08-spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.sp-08__outer{
  position:relative;
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sp-08__track{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,145,0,0.1);
}
@media (prefers-reduced-motion: reduce){
  .sp-08__shape{animation:none;border-radius:8px}
}
```

### 09. Comet Trail CSS Spinner

**Type:** Pure CSS
**Description:** A conic-gradient comet with a long fading purple tail sweeps around a dark ring, with a bright glowing tip dot that precisely tracks the leading edge of the arc.

**HTML:**
```html
<div class="sp-09">
  <div class="sp-09__wrap">
    <div class="sp-09__spinner">
      <div class="sp-09__comet"></div>
      <div class="sp-09__hole"></div>
      <div class="sp-09__tip"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sp-09,.sp-09 *,.sp-09 *::before,.sp-09 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-09{
  --bg:#030a1a;
  --c:#e040fb;
  --glow:rgba(224,64,251,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-09__wrap{
  position:relative;
  width:80px;
  height:80px;
}
.sp-09__spinner{
  position:absolute;
  inset:0;
  animation:sp-09-spin 1s linear infinite;
}
.sp-09__comet{
  width:100%;
  height:100%;
  border-radius:50%;
  /*
    Bright tip lands at 360deg (= 0deg = 12 o'clock). Tail fades
    BACKWARD (counter-clockwise from the tip) through the 180-360
    range. The 0-180 range is empty so there's a clean gap before
    the tip. Reversing the gradient direction (vs the simpler
    "bright at 0deg, fade to 180deg" layout) makes the tail point
    CCW from the head — correct comet physics for CLOCKWISE
    rotation, where the tail trails behind the direction of motion.
  */
  background:conic-gradient(
    transparent                 0deg,
    transparent               180deg,
    rgba(224,64,251,0.15)     240deg,
    rgba(224,64,251,0.4)      300deg,
    var(--c)                  360deg
  );
  filter:drop-shadow(0 0 4px var(--glow));
}
.sp-09__hole{
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:var(--bg);
}
/* Tip at 12-o'clock = 0deg = bright head of the comet. The conic
   disc is 80px with donut hole inset:10px so the ring midline is
   at radius 35 (= 5px from the outer top edge). The tip dot's
   CENTER must land on that midline. translate(-50%, -50%) on
   top:5px + left:50% places the dot center exactly on the ring
   stroke at the 12 o'clock position. */
.sp-09__tip{
  position:absolute;
  top:5px;
  left:50%;
  width:8px;
  height:8px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 10px var(--c),0 0 20px var(--c);
}
@keyframes sp-09-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-09__spinner{animation:none}
}
```

### 10. DNA Double Helix Spinner

**Type:** Pure CSS
**Description:** Eight nucleotide pairs animate as two interweaving dot chains — one cyan, one pink — translating horizontally in opposing directions to simulate a rotating DNA double helix.

**HTML:**
```html
<div class="sp-10">
  <div class="sp-10__dna">
    <div class="sp-10__pair"><div class="sp-10__dot-a"></div><div class="sp-10__bridge"></div><div class="sp-10__dot-b"></div></div>
    <div class="sp-10__pair"><div class="sp-10__dot-a"></div><div class="sp-10__bridge"></div><div class="sp-10__dot-b"></div></div>
    <div class="sp-10__pair"><div class="sp-10__dot-a"></div><div class="sp-10__bridge"></div><div class="sp-10__dot-b"></div></div>
    <div class="sp-10__pair"><div class="sp-10__dot-a"></div><div class="sp-10__bridge"></div><div class="sp-10__dot-b"></div></div>
    <div class="sp-10__pair"><div class="sp-10__dot-a"></div><div class="sp-10__bridge"></div><div class="sp-10__dot-b"></div></div>
    <div class="sp-10__pair"><div class="sp-10__dot-a"></div><div class="sp-10__bridge"></div><div class="sp-10__dot-b"></div></div>
    <div class="sp-10__pair"><div class="sp-10__dot-a"></div><div class="sp-10__bridge"></div><div class="sp-10__dot-b"></div></div>
    <div class="sp-10__pair"><div class="sp-10__dot-a"></div><div class="sp-10__bridge"></div><div class="sp-10__dot-b"></div></div>
  </div>
</div>
```

**CSS:**
```css
.sp-10,.sp-10 *,.sp-10 *::before,.sp-10 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-10{
  --bg:#040d1a;
  --ca:#00bcd4;
  --cb:#f06292;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-10__dna{
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:center;
}
.sp-10__pair{
  display:flex;
  align-items:center;
  gap:0;
  height:9px;
}
.sp-10__dot-a,.sp-10__dot-b{
  width:10px;
  height:10px;
  border-radius:50%;
}
.sp-10__dot-a{
  background:var(--ca);
  box-shadow:0 0 6px var(--ca);
}
.sp-10__dot-b{
  background:var(--cb);
  box-shadow:0 0 6px var(--cb);
}
.sp-10__bridge{
  width:28px;
  height:1px;
  background:linear-gradient(to right,var(--ca),var(--cb));
  /* The bridge represents the base-pair connection between the two
     strands. As the strands cross (50% of the cycle, dots meeting at
     center), the visible distance between them shrinks to zero —
     so the bridge should ALSO shrink to invisible at that moment.
     A symmetric scaleX keyframe makes the bridge "breathe" between
     full-width (when strands are spread) and zero-width (when they
     cross). transform-origin:center keeps the bridge centered as it
     scales. */
  transform-origin:center;
  animation:sp-10-bridge 1.4s ease-in-out infinite;
}
.sp-10__pair:nth-child(1) .sp-10__bridge{animation-delay:calc(0 * 0.14s)}
.sp-10__pair:nth-child(2) .sp-10__bridge{animation-delay:calc(1 * 0.14s)}
.sp-10__pair:nth-child(3) .sp-10__bridge{animation-delay:calc(2 * 0.14s)}
.sp-10__pair:nth-child(4) .sp-10__bridge{animation-delay:calc(3 * 0.14s)}
.sp-10__pair:nth-child(5) .sp-10__bridge{animation-delay:calc(4 * 0.14s)}
.sp-10__pair:nth-child(6) .sp-10__bridge{animation-delay:calc(5 * 0.14s)}
.sp-10__pair:nth-child(7) .sp-10__bridge{animation-delay:calc(6 * 0.14s)}
.sp-10__pair:nth-child(8) .sp-10__bridge{animation-delay:calc(7 * 0.14s)}
@keyframes sp-10-bridge{
  /* 0%/100% = strands at extremes → bridge full width visible. */
  0%,100%{transform:scaleX(1);opacity:0.4}
  /* 50% = strands crossing at center → bridge collapsed + invisible. */
  50%{transform:scaleX(0.05);opacity:0}
}
/* Two strands run the SAME keyframe but at OPPOSITE PHASE so they
   cross each other. The trick: dot-A's keyframe goes right→left→right,
   dot-B's keyframe goes left→right→left. With opposite phase, when
   strand A is pushed +16, strand B is pushed -16 — they meet and cross
   at the center every half-cycle, producing the X-shape that reads as
   a helix projection.

   Why not animation-direction:reverse? Because the keyframe is symmetric
   (0% and 100% are identical), so reverse plays the SAME visual sequence.
   Reverse only flips things visually if 0% ≠ 100%. Two distinct keyframes
   (helix-a and helix-b that start at opposite x positions) is the
   reliable approach.

   The per-pair animation-delay staggers the crossing motion vertically
   so it propagates downward in a wave (~0.14s per row). */
.sp-10__pair:nth-child(1) .sp-10__dot-a{animation:sp-10-helix-a 1.4s ease-in-out infinite;animation-delay:calc(0 * 0.14s)}
.sp-10__pair:nth-child(2) .sp-10__dot-a{animation:sp-10-helix-a 1.4s ease-in-out infinite;animation-delay:calc(1 * 0.14s)}
.sp-10__pair:nth-child(3) .sp-10__dot-a{animation:sp-10-helix-a 1.4s ease-in-out infinite;animation-delay:calc(2 * 0.14s)}
.sp-10__pair:nth-child(4) .sp-10__dot-a{animation:sp-10-helix-a 1.4s ease-in-out infinite;animation-delay:calc(3 * 0.14s)}
.sp-10__pair:nth-child(5) .sp-10__dot-a{animation:sp-10-helix-a 1.4s ease-in-out infinite;animation-delay:calc(4 * 0.14s)}
.sp-10__pair:nth-child(6) .sp-10__dot-a{animation:sp-10-helix-a 1.4s ease-in-out infinite;animation-delay:calc(5 * 0.14s)}
.sp-10__pair:nth-child(7) .sp-10__dot-a{animation:sp-10-helix-a 1.4s ease-in-out infinite;animation-delay:calc(6 * 0.14s)}
.sp-10__pair:nth-child(8) .sp-10__dot-a{animation:sp-10-helix-a 1.4s ease-in-out infinite;animation-delay:calc(7 * 0.14s)}
.sp-10__pair:nth-child(1) .sp-10__dot-b{animation:sp-10-helix-b 1.4s ease-in-out infinite;animation-delay:calc(0 * 0.14s)}
.sp-10__pair:nth-child(2) .sp-10__dot-b{animation:sp-10-helix-b 1.4s ease-in-out infinite;animation-delay:calc(1 * 0.14s)}
.sp-10__pair:nth-child(3) .sp-10__dot-b{animation:sp-10-helix-b 1.4s ease-in-out infinite;animation-delay:calc(2 * 0.14s)}
.sp-10__pair:nth-child(4) .sp-10__dot-b{animation:sp-10-helix-b 1.4s ease-in-out infinite;animation-delay:calc(3 * 0.14s)}
.sp-10__pair:nth-child(5) .sp-10__dot-b{animation:sp-10-helix-b 1.4s ease-in-out infinite;animation-delay:calc(4 * 0.14s)}
.sp-10__pair:nth-child(6) .sp-10__dot-b{animation:sp-10-helix-b 1.4s ease-in-out infinite;animation-delay:calc(5 * 0.14s)}
.sp-10__pair:nth-child(7) .sp-10__dot-b{animation:sp-10-helix-b 1.4s ease-in-out infinite;animation-delay:calc(6 * 0.14s)}
.sp-10__pair:nth-child(8) .sp-10__dot-b{animation:sp-10-helix-b 1.4s ease-in-out infinite;animation-delay:calc(7 * 0.14s)}
/* Strand A starts pushed RIGHT then swings LEFT (front of the helix at 50%). */
@keyframes sp-10-helix-a{
  0%,100%{transform:translateX(16px);opacity:0.2}
  50%{transform:translateX(-16px);opacity:1}
}
/* Strand B starts pushed LEFT then swings RIGHT — opposite phase, so
   strands A and B cross at the center every half-cycle (the X pattern). */
@keyframes sp-10-helix-b{
  0%,100%{transform:translateX(-16px);opacity:1}
  50%{transform:translateX(16px);opacity:0.2}
}
@media (prefers-reduced-motion: reduce){
  .sp-10__dot-a,.sp-10__dot-b{animation:none;transform:none}
}
```

### 11. Folding Cube Grid Spinner

**Type:** Pure CSS
**Description:** A 3×3 grid of teal cubes each flip through two 90° rotation axes in sequence with staggered delays, creating a cascading wave of 3D folding tiles.

**HTML:**
```html
<div class="sp-11">
  <div class="sp-11__grid">
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-11,.sp-11 *,.sp-11 *::before,.sp-11 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-11{
  --bg:#0a0a0a;
  --c:#64ffda;
  --glow:rgba(100,255,218,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-11__grid{
  display:grid;
  grid-template-columns:repeat(3,22px);
  grid-template-rows:repeat(3,22px);
  gap:4px;
}
.sp-11__cube{
  width:22px;
  height:22px;
  background:var(--c);
  box-shadow:0 0 8px var(--glow);
  border-radius:2px;
  animation:sp-11-fold 1.8s ease-in-out infinite;
}
.sp-11__cube:nth-child(1){animation-delay:0s}
.sp-11__cube:nth-child(2){animation-delay:0.1s}
.sp-11__cube:nth-child(3){animation-delay:0.2s}
.sp-11__cube:nth-child(4){animation-delay:0.3s}
.sp-11__cube:nth-child(5){animation-delay:0.4s}
.sp-11__cube:nth-child(6){animation-delay:0.5s}
.sp-11__cube:nth-child(7){animation-delay:0.6s}
.sp-11__cube:nth-child(8){animation-delay:0.7s}
.sp-11__cube:nth-child(9){animation-delay:0.8s}
@keyframes sp-11-fold{
  0%,100%{transform:perspective(60px) rotateX(0deg) rotateY(0deg);opacity:1}
  33%{transform:perspective(60px) rotateX(-90deg) rotateY(0deg);opacity:0.4}
  66%{transform:perspective(60px) rotateX(-90deg) rotateY(90deg);opacity:0.4}
}
@media (prefers-reduced-motion: reduce){
  .sp-11__cube{animation:none}
}
```

### 12. Ripple Pulse Ring Spinner

**Type:** Pure CSS
**Description:** Four concentric rings expand outward from a solid azure dot in sequence, each fading from full opacity to invisible as it reaches its maximum radius — like rings in water.

**HTML:**
```html
<div class="sp-12">
  <div class="sp-12__ripple">
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__ring"></div>
    <div class="sp-12__dot"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-12,.sp-12 *,.sp-12 *::before,.sp-12 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-12{
  --bg:#060810;
  --c:#29b6f6;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-12__ripple{
  position:relative;
  width:80px;
  height:80px;
}
.sp-12__ring{
  position:absolute;
  border-radius:50%;
  border:2px solid var(--c);
  opacity:0;
  animation:sp-12-ripple 2s ease-out infinite;
}
.sp-12__ring:nth-child(1){inset:0;animation-delay:0s}
.sp-12__ring:nth-child(2){inset:0;animation-delay:0.5s}
.sp-12__ring:nth-child(3){inset:0;animation-delay:1s}
.sp-12__ring:nth-child(4){inset:0;animation-delay:1.5s}
.sp-12__dot{
  position:absolute;
  inset:30px;
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 12px var(--c),0 0 24px rgba(41,182,246,0.4);
}
@keyframes sp-12-ripple{
  0%{transform:scale(0.1);opacity:1}
  100%{transform:scale(1.8);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .sp-12__ring{animation:none;opacity:0.3;transform:scale(1)}
}
```

### 13. Clock Tick Sweep Spinner

**Type:** Pure CSS
**Description:** A precise gold second-hand sweeps in discrete tick steps around a minimal dark clock face with 12 hour markers, using CSS steps() timing to simulate mechanical tick motion.

**HTML:**
```html
<div class="sp-13">
  <div class="sp-13__clock">
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__tick"></div>
    <div class="sp-13__hand"></div>
    <div class="sp-13__center"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-13,.sp-13 *,.sp-13 *::before,.sp-13 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-13{
  --bg:#0d0d0d;
  --face:#111;
  --ring:#e8e0d0;
  --hand:#f5c518;
  --tick:rgba(232,224,208,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-13__clock{
  position:relative;
  width:80px;
  height:80px;
  background:var(--face);
  border-radius:50%;
  border:2px solid var(--ring);
  box-shadow:0 0 0 1px rgba(232,224,208,0.1),inset 0 0 16px rgba(0,0,0,0.5);
}
.sp-13__tick{
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:6px;
  margin-left:-1px;
  background:var(--tick);
  transform-origin:bottom center;
  border-radius:1px;
}
.sp-13__tick:nth-child(1){transform:translateY(-100%) translateY(-27px) rotate(0deg)}
.sp-13__tick:nth-child(2){transform:translateY(-100%) translateY(-27px) rotate(30deg)}
.sp-13__tick:nth-child(3){transform:translateY(-100%) translateY(-27px) rotate(60deg)}
.sp-13__tick:nth-child(4){transform:translateY(-100%) translateY(-27px) rotate(90deg)}
.sp-13__tick:nth-child(5){transform:translateY(-100%) translateY(-27px) rotate(120deg)}
.sp-13__tick:nth-child(6){transform:translateY(-100%) translateY(-27px) rotate(150deg)}
.sp-13__tick:nth-child(7){transform:translateY(-100%) translateY(-27px) rotate(180deg)}
.sp-13__tick:nth-child(8){transform:translateY(-100%) translateY(-27px) rotate(210deg)}
.sp-13__tick:nth-child(9){transform:translateY(-100%) translateY(-27px) rotate(240deg)}
.sp-13__tick:nth-child(10){transform:translateY(-100%) translateY(-27px) rotate(270deg)}
.sp-13__tick:nth-child(11){transform:translateY(-100%) translateY(-27px) rotate(300deg)}
.sp-13__tick:nth-child(12){transform:translateY(-100%) translateY(-27px) rotate(330deg)}
.sp-13__hand{
  position:absolute;
  bottom:50%;
  left:50%;
  width:2px;
  height:26px;
  margin-left:-1px;
  background:var(--hand);
  border-radius:2px 2px 0 0;
  transform-origin:bottom center;
  box-shadow:0 0 4px var(--hand);
  animation:sp-13-tick 1s steps(60,end) infinite;
}
.sp-13__center{
  position:absolute;
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--hand);
  transform:translate(-50%,-50%);
  box-shadow:0 0 4px var(--hand);
}
@keyframes sp-13-tick{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-13__hand{animation:none}
}
```

### 14. Infinity Loop Stroke Spinner

**Type:** Pure CSS
**Description:** An SVG infinity symbol (∞) animates its stroke drawing from start to end and back using stroke-dasharray and stroke-dashoffset, with a glowing lime-green line on a dark field.

**HTML:**
```html
<div class="sp-14">
  <svg class="sp-14__svg" viewBox="-10 -10 120 60">
    <path class="sp-14__track" d="M50,20 C50,4 72,4 72,20 C72,36 94,36 94,20 C94,4 72,4 72,20 C72,36 50,36 50,20 C50,4 28,4 28,20 C28,36 6,36 6,20 C6,4 28,4 28,20 C28,36 50,36 50,20"/>
    <path class="sp-14__path" d="M50,20 C50,4 72,4 72,20 C72,36 94,36 94,20 C94,4 72,4 72,20 C72,36 50,36 50,20 C50,4 28,4 28,20 C28,36 6,36 6,20 C6,4 28,4 28,20 C28,36 50,36 50,20"/>
  </svg>
</div>
```

**CSS:**
```css
.sp-14,.sp-14 *,.sp-14 *::before,.sp-14 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-14{
  --bg:#04080f;
  --c:#76ff03;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-14__svg{
  width:120px;
  height:60px;
  overflow:visible;
  filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 12px rgba(118,255,3,0.3));
}
.sp-14__path{
  fill:none;
  stroke:var(--c);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:sp-14-draw 2s ease-in-out infinite;
}
.sp-14__track{
  fill:none;
  stroke:rgba(118,255,3,0.1);
  stroke-width:3;
  stroke-linecap:round;
}
@keyframes sp-14-draw{
  0%{stroke-dashoffset:300;opacity:1}
  50%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-300;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .sp-14__path{animation:none;stroke-dashoffset:0}
}
```

### 15. Bouncing Elastic Dots Spinner

**Type:** Pure CSS
**Description:** Three coloured dots bounce with spring-like squash and stretch physics — compressing horizontally and elongating vertically at peak height — using a multi-step cubic-bezier keyframe.

**HTML:**
```html
<div class="sp-15">
  <div class="sp-15__row">
    <div class="sp-15__dot"></div>
    <div class="sp-15__dot"></div>
    <div class="sp-15__dot"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-15,.sp-15 *,.sp-15 *::before,.sp-15 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-15{
  --bg:#0e0b1e;
  --c1:#ff6e6c;
  --c2:#cbacf9;
  --c3:#67e8f9;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-15__row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:70px;
}
.sp-15__dot{
  width:18px;
  height:18px;
  border-radius:50%;
  animation:sp-15-bounce 0.9s cubic-bezier(0.36,0.07,0.19,0.97) infinite;
}
.sp-15__dot:nth-child(1){
  background:var(--c1);
  box-shadow:0 0 10px var(--c1);
  animation-delay:0s;
}
.sp-15__dot:nth-child(2){
  background:var(--c2);
  box-shadow:0 0 10px var(--c2);
  animation-delay:0.15s;
}
.sp-15__dot:nth-child(3){
  background:var(--c3);
  box-shadow:0 0 10px var(--c3);
  animation-delay:0.3s;
}
@keyframes sp-15-bounce{
  0%,100%{transform:translateY(0) scaleX(1) scaleY(1)}
  30%{transform:translateY(-40px) scaleX(0.9) scaleY(1.1)}
  50%{transform:translateY(-48px) scaleX(0.85) scaleY(1.15)}
  70%{transform:translateY(-40px) scaleX(0.9) scaleY(1.1)}
  85%{transform:translateY(-4px) scaleX(1.1) scaleY(0.9)}
}
@media (prefers-reduced-motion: reduce){
  .sp-15__dot{animation:none}
}
```

### 16. Spiral Galaxy CSS Spinner

**Type:** Pure CSS
**Description:** Three overlapping conic-gradient arms spiral outward from a bright central core, blurred and rotated 120° apart to simulate a three-armed barred spiral galaxy.

**HTML:**
```html
<div class="sp-16">
  <div class="sp-16__galaxy">
    <div class="sp-16__arm"></div>
    <div class="sp-16__arm"></div>
    <div class="sp-16__arm"></div>
    <div class="sp-16__core"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-16,.sp-16 *,.sp-16 *::before,.sp-16 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-16{
  --bg:#03010a;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-16__galaxy{
  position:relative;
  width:100px;
  height:100px;
  animation:sp-16-spin 3s linear infinite;
}
.sp-16__arm{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.sp-16__arm:nth-child(1){
  background:conic-gradient(
    transparent 0deg, transparent 40deg,
    rgba(99,102,241,0.8) 80deg, transparent 160deg,
    transparent 200deg, transparent 240deg,
    rgba(99,102,241,0.4) 280deg, transparent 360deg
  );
  filter:blur(2px);
}
.sp-16__arm:nth-child(2){
  background:conic-gradient(
    transparent 0deg, transparent 120deg,
    rgba(168,85,247,0.7) 160deg, transparent 240deg,
    transparent 280deg, transparent 300deg,
    rgba(168,85,247,0.3) 340deg, transparent 360deg
  );
  filter:blur(1.5px);
  transform:rotate(120deg);
}
.sp-16__arm:nth-child(3){
  background:conic-gradient(
    transparent 0deg, transparent 240deg,
    rgba(236,72,153,0.6) 280deg, transparent 360deg
  );
  filter:blur(1px);
  transform:rotate(240deg);
}
.sp-16__core{
  position:absolute;
  inset:38px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(168,85,247,0.8) 40%,transparent 80%);
  filter:blur(2px);
}
@keyframes sp-16-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-16__galaxy{animation:none}
}
```

### 17. Glassmorphism Loader Spinner

**Type:** Pure CSS
**Description:** A frosted-glass circle with backdrop-filter blur floats over animated colour blobs, with two nested arcs spinning at different speeds to create a layered glassmorphic loading indicator.

**HTML:**
```html
<div class="sp-17">
  <div class="sp-17__blobs">
    <div class="sp-17__blob"></div>
    <div class="sp-17__blob"></div>
    <div class="sp-17__blob"></div>
  </div>
  <div class="sp-17__glass">
    <div class="sp-17__arc"></div>
    <div class="sp-17__arc-inner"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-17,.sp-17 *,.sp-17 *::before,.sp-17 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-17{
  --bg:#1a0533;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
  overflow:hidden;
}
.sp-17__blobs{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.sp-17__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.6;
  animation:sp-17-float 6s ease-in-out infinite;
}
.sp-17__blob:nth-child(1){
  width:200px;height:200px;
  background:#7c3aed;
  top:-80px;left:-60px;
  animation-delay:0s;
}
.sp-17__blob:nth-child(2){
  width:180px;height:180px;
  background:#ec4899;
  bottom:-60px;right:-40px;
  animation-delay:-2s;
}
.sp-17__blob:nth-child(3){
  width:160px;height:160px;
  background:#3b82f6;
  top:20%;right:10%;
  animation-delay:-4s;
}
.sp-17__glass{
  position:relative;
  width:100px;
  height:100px;
  border-radius:50%;
  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),inset 0 1px 0 rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sp-17__arc{
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:3px solid transparent;
  border-top-color:rgba(255,255,255,0.9);
  border-right-color:rgba(255,255,255,0.4);
  animation:sp-17-spin 1.1s linear infinite;
}
.sp-17__arc-inner{
  position:absolute;
  inset:20px;
  border-radius:50%;
  border:2px solid transparent;
  border-bottom-color:rgba(255,255,255,0.7);
  animation:sp-17-spin 0.8s linear infinite reverse;
}
@keyframes sp-17-spin{
  to{transform:rotate(360deg)}
}
@keyframes sp-17-float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-20px) scale(1.05)}
}
@media (prefers-reduced-motion: reduce){
  .sp-17__arc,.sp-17__arc-inner,.sp-17__blob{animation:none}
}
```

### 18. Cyberpunk Segmented Ring Spinner

**Type:** Pure CSS
**Description:** A yellow dashed outer ring and a magenta inner arc spin in opposite directions around a rotating wireframe diamond core, channelling the segmented HUD aesthetics of cyberpunk UIs.

**HTML:**
```html
<div class="sp-18">
  <div class="sp-18__wrap">
    <div class="sp-18__ring-outer"></div>
    <div class="sp-18__ring-outer-2"></div>
    <div class="sp-18__ring-inner"></div>
    <div class="sp-18__ring-inner-2"></div>
    <div class="sp-18__core"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-18,.sp-18 *,.sp-18 *::before,.sp-18 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-18{
  --bg:#020409;
  --c1:#f7ff00;
  --c2:#ff0080;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-18__wrap{
  position:relative;
  width:88px;
  height:88px;
}
.sp-18__ring-outer{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px dashed var(--c1);
  border-dash-offset:0;
  opacity:0.9;
  box-shadow:0 0 8px var(--c1),inset 0 0 8px rgba(247,255,0,0.1);
  animation:sp-18-cw 1.6s linear infinite;
  clip-path:polygon(50% 0%,100% 0%,100% 100%,50% 100%);
}
.sp-18__ring-outer-2{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px dashed var(--c1);
  opacity:0.5;
  animation:sp-18-cw 1.6s linear infinite;
  animation-delay:-0.8s;
  clip-path:polygon(0% 0%,50% 0%,50% 100%,0% 100%);
}
.sp-18__ring-inner{
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:2px solid var(--c2);
  border-right-color:transparent;
  border-bottom-color:transparent;
  box-shadow:0 0 8px var(--c2);
  animation:sp-18-ccw 0.9s linear infinite;
}
.sp-18__ring-inner-2{
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:2px solid var(--c2);
  border-left-color:transparent;
  border-top-color:transparent;
  opacity:0.4;
  animation:sp-18-ccw 0.9s linear infinite;
  animation-delay:-0.45s;
}
.sp-18__core{
  position:absolute;
  inset:32px;
  background:transparent;
  border:1px solid var(--c1);
  transform:rotate(45deg);
  animation:sp-18-cw 2s linear infinite;
  box-shadow:0 0 6px var(--c1);
}
@keyframes sp-18-cw{
  to{transform:rotate(360deg)}
}
@keyframes sp-18-ccw{
  to{transform:rotate(-360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-18__ring-outer,.sp-18__ring-outer-2,.sp-18__ring-inner,.sp-18__ring-inner-2,.sp-18__core{animation:none}
}
```

### 19. Breathing Circle Loader

**Type:** Pure CSS
**Description:** A calm azure orb slowly inhales and exhales with a scale pulse while three expanding rings propagate outward in a continuous ripple, creating a meditative loading state.

**HTML:**
```html
<div class="sp-19">
  <div class="sp-19__wrap">
    <div class="sp-19__ring"></div>
    <div class="sp-19__ring"></div>
    <div class="sp-19__ring"></div>
    <div class="sp-19__core"></div>
  </div>
  <div class="sp-19__label">Loading</div>
</div>
```

**CSS:**
```css
.sp-19,.sp-19 *,.sp-19 *::before,.sp-19 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-19{
  --bg:#03080e;
  --c:#4fc3f7;
  --glow:rgba(79,195,247,0.3);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:100vh;
  background:var(--bg);
  font-family:system-ui,sans-serif;
}
.sp-19__wrap{
  position:relative;
  width:90px;
  height:90px;
}
.sp-19__ring{
  position:absolute;
  border-radius:50%;
  border:2px solid var(--c);
  opacity:0;
  animation:sp-19-breathe-ring 4s ease-in-out infinite;
}
.sp-19__ring:nth-child(1){inset:0}
.sp-19__ring:nth-child(2){inset:0;animation-delay:1.3s}
.sp-19__ring:nth-child(3){inset:0;animation-delay:2.6s}
.sp-19__core{
  position:absolute;
  inset:20px;
  border-radius:50%;
  background:radial-gradient(circle,var(--c),rgba(79,195,247,0.3));
  animation:sp-19-breathe-core 4s ease-in-out infinite;
}
.sp-19__label{
  color:rgba(79,195,247,0.7);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  animation:sp-19-text 4s ease-in-out infinite;
}
@keyframes sp-19-breathe-ring{
  0%{transform:scale(0.4);opacity:0.8}
  100%{transform:scale(1.8);opacity:0}
}
@keyframes sp-19-breathe-core{
  0%,100%{transform:scale(0.7);box-shadow:0 0 10px var(--glow)}
  50%{transform:scale(1.15);box-shadow:0 0 30px var(--glow),0 0 60px var(--glow)}
}
@keyframes sp-19-text{
  0%,100%{opacity:0.3}
  50%{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .sp-19__ring,.sp-19__core,.sp-19__label{animation:none;opacity:1}
}
```

### 20. Particle Scatter Burst Spinner

**Type:** Pure CSS
**Description:** Eight coloured particles radiate outward from a central white core, fading and shrinking to nothing at the edge of their orbit while the whole assembly rotates slowly.

**HTML:**
```html
<div class="sp-20">
  <div class="sp-20__burst">
    <div class="sp-20__particle"></div>
    <div class="sp-20__particle"></div>
    <div class="sp-20__particle"></div>
    <div class="sp-20__particle"></div>
    <div class="sp-20__particle"></div>
    <div class="sp-20__particle"></div>
    <div class="sp-20__particle"></div>
    <div class="sp-20__particle"></div>
    <div class="sp-20__core"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-20,.sp-20 *,.sp-20 *::before,.sp-20 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-20{
  --bg:#08050f;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-20__burst{
  position:relative;
  width:100px;
  height:100px;
  animation:sp-20-rotate 3s linear infinite;
}
.sp-20__particle{
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  margin:-4px 0 0 -4px;
  animation:sp-20-scatter 1.5s ease-out infinite;
}
.sp-20__particle:nth-child(1){background:#ff6b6b;animation-delay:0s;transform:rotate(0deg)}
.sp-20__particle:nth-child(2){background:#ffd93d;animation-delay:0.1s;transform:rotate(45deg)}
.sp-20__particle:nth-child(3){background:#6bcb77;animation-delay:0.2s;transform:rotate(90deg)}
.sp-20__particle:nth-child(4){background:#4d96ff;animation-delay:0.3s;transform:rotate(135deg)}
.sp-20__particle:nth-child(5){background:#ff6b6b;animation-delay:0.4s;transform:rotate(180deg)}
.sp-20__particle:nth-child(6){background:#ffd93d;animation-delay:0.5s;transform:rotate(225deg)}
.sp-20__particle:nth-child(7){background:#6bcb77;animation-delay:0.6s;transform:rotate(270deg)}
.sp-20__particle:nth-child(8){background:#4d96ff;animation-delay:0.7s;transform:rotate(315deg)}
@keyframes sp-20-scatter{
  0%{transform:var(--r,rotate(0deg)) translateX(0) scale(1);opacity:1}
  60%{opacity:0.8}
  100%{transform:var(--r,rotate(0deg)) translateX(42px) scale(0);opacity:0}
}
.sp-20__particle:nth-child(1){--r:rotate(0deg)}
.sp-20__particle:nth-child(2){--r:rotate(45deg)}
.sp-20__particle:nth-child(3){--r:rotate(90deg)}
.sp-20__particle:nth-child(4){--r:rotate(135deg)}
.sp-20__particle:nth-child(5){--r:rotate(180deg)}
.sp-20__particle:nth-child(6){--r:rotate(225deg)}
.sp-20__particle:nth-child(7){--r:rotate(270deg)}
.sp-20__particle:nth-child(8){--r:rotate(315deg)}
@keyframes sp-20-rotate{
  to{transform:rotate(360deg)}
}
.sp-20__core{
  position:absolute;
  inset:40px;
  border-radius:50%;
  background:white;
  box-shadow:0 0 12px white;
  animation:sp-20-pulse 1.5s ease-in-out infinite;
}
@keyframes sp-20-pulse{
  0%,100%{transform:scale(0.8);opacity:0.6}
  50%{transform:scale(1.2);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .sp-20__particle,.sp-20__burst,.sp-20__core{animation:none}
}
```

### 21. Retro TV Static Noise Loader

**Type:** Pure CSS
**Description:** A miniature CRT television screen filled with flickering monochrome pixel tiles simulates analog static noise, complete with scanline overlay and vignette darkening.

**HTML:**
```html
<div class="sp-21">
  <div class="sp-21__tv">
    <div class="sp-21__static">
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
      <div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div><div class="sp-21__pixel"></div>
    </div>
    <div class="sp-21__scanline"></div>
    <div class="sp-21__glow"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-21,.sp-21 *,.sp-21 *::before,.sp-21 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-21{
  --bg:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-21__tv{
  position:relative;
  width:120px;
  height:90px;
  background:#111;
  border-radius:8px;
  border:3px solid #333;
  overflow:hidden;
  box-shadow:0 0 20px rgba(0,0,0,0.8),inset 0 0 10px rgba(0,0,0,0.5);
}
.sp-21__static{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(9,1fr);
  gap:0;
}
.sp-21__pixel{
  background:#fff;
  animation:sp-21-flicker 0.08s steps(1) infinite;
}
.sp-21__pixel:nth-child(4n+1){animation-delay:0s;opacity:0.9}
.sp-21__pixel:nth-child(4n+2){animation-delay:0.02s;opacity:0.4}
.sp-21__pixel:nth-child(4n+3){animation-delay:0.04s;opacity:0.7}
.sp-21__pixel:nth-child(4n){animation-delay:0.06s;opacity:0.2}
.sp-21__pixel:nth-child(7n){animation-duration:0.12s}
.sp-21__pixel:nth-child(11n){animation-duration:0.06s}
.sp-21__pixel:nth-child(3n){background:#888}
.sp-21__scanline{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.3) 3px,
    rgba(0,0,0,0.3) 4px
  );
  pointer-events:none;
}
.sp-21__glow{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse,transparent 40%,rgba(0,0,0,0.5) 100%);
  pointer-events:none;
}
@keyframes sp-21-flicker{
  0%,100%{opacity:var(--o,0.9)}
  50%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .sp-21__pixel{animation:none}
}
```

### 22. Liquid Blob CSS Spinner

**Type:** Pure CSS
**Description:** A fluid-blue gradient blob morphs organically through six distinct multi-value border-radius shapes while slowly rotating, creating an amorphous liquid motion effect.

**HTML:**
```html
<div class="sp-22">
  <div class="sp-22__blob"></div>
</div>
```

**CSS:**
```css
.sp-22,.sp-22 *,.sp-22 *::before,.sp-22 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-22{
  --bg:#020911;
  --c1:#00c6fb;
  --c2:#005bea;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-22__blob{
  width:80px;
  height:80px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 0 20px rgba(0,198,251,0.4),0 0 40px rgba(0,91,234,0.2);
  animation:sp-22-morph 3s ease-in-out infinite, sp-22-spin 6s linear infinite;
}
@keyframes sp-22-morph{
  0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
  20%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
  40%{border-radius:70% 30% 50% 50% / 30% 70% 60% 40%}
  60%{border-radius:40% 60% 30% 70% / 70% 40% 50% 60%}
  80%{border-radius:50% 50% 60% 40% / 40% 50% 70% 60%}
}
@keyframes sp-22-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-22__blob{animation:none;border-radius:50%}
}
```

### 23. Progress Arc Fill Spinner

**Type:** Pure CSS
**Description:** An SVG circle arc fills from empty to complete on a two-second loop, with a 100% percentage counter label centred inside — suitable as both a loading indicator and a determinate progress ring.

**HTML:**
```html
<div class="sp-23">
  <svg class="sp-23__svg" viewBox="0 0 90 90">
    <circle class="sp-23__track" cx="45" cy="45" r="40"/>
    <circle class="sp-23__arc" cx="45" cy="45" r="40"/>
    <text class="sp-23__percent" x="45" y="45">100%</text>
  </svg>
</div>
```

**CSS:**
```css
.sp-23,.sp-23 *,.sp-23 *::before,.sp-23 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-23{
  --bg:#050a0f;
  --c:#00e5ff;
  --track:rgba(0,229,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-23__svg{
  width:90px;
  height:90px;
  transform:rotate(-90deg);
  filter:drop-shadow(0 0 6px var(--c));
}
.sp-23__track{
  fill:none;
  stroke:var(--track);
  stroke-width:5;
}
.sp-23__arc{
  fill:none;
  stroke:var(--c);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:251;
  stroke-dashoffset:251;
  animation:sp-23-fill 2s ease-in-out infinite;
}
.sp-23__percent{
  fill:var(--c);
  font-size:14px;
  font-family:system-ui,sans-serif;
  font-weight:600;
  text-anchor:middle;
  dominant-baseline:central;
  transform:rotate(90deg);
  transform-origin:45px 45px;
  animation:sp-23-count 2s ease-in-out infinite;
  letter-spacing:-0.5px;
}
@keyframes sp-23-fill{
  0%{stroke-dashoffset:251;opacity:1}
  80%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes sp-23-count{
  0%{opacity:1}
  80%{opacity:1}
  100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .sp-23__arc{animation:none;stroke-dashoffset:100}
  .sp-23__percent{animation:none}
}
```

### 24. Matrix Rain Column Spinner

**Type:** Pure CSS
**Description:** Five columns of katakana characters and binary digits cascade downward with a bright white leading character fading to dark green, evoking the iconic Matrix digital rain effect.

**HTML:**
```html
<div class="sp-24">
  <div class="sp-24__cols">
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">ア</div>
      <div class="sp-24__char" style="--i:1">ク</div>
      <div class="sp-24__char" style="--i:2">セ</div>
      <div class="sp-24__char" style="--i:3">ス</div>
      <div class="sp-24__char" style="--i:4">1</div>
      <div class="sp-24__char" style="--i:5">0</div>
      <div class="sp-24__char" style="--i:6">0</div>
      <div class="sp-24__char" style="--i:7">1</div>
    </div>
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">テ</div>
      <div class="sp-24__char" style="--i:1">ス</div>
      <div class="sp-24__char" style="--i:2">ト</div>
      <div class="sp-24__char" style="--i:3">0</div>
      <div class="sp-24__char" style="--i:4">1</div>
      <div class="sp-24__char" style="--i:5">ネ</div>
      <div class="sp-24__char" style="--i:6">ッ</div>
      <div class="sp-24__char" style="--i:7">ト</div>
    </div>
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">1</div>
      <div class="sp-24__char" style="--i:1">0</div>
      <div class="sp-24__char" style="--i:2">ラ</div>
      <div class="sp-24__char" style="--i:3">イ</div>
      <div class="sp-24__char" style="--i:4">ン</div>
      <div class="sp-24__char" style="--i:5">コ</div>
      <div class="sp-24__char" style="--i:6">ー</div>
      <div class="sp-24__char" style="--i:7">ド</div>
    </div>
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">0</div>
      <div class="sp-24__char" style="--i:1">1</div>
      <div class="sp-24__char" style="--i:2">マ</div>
      <div class="sp-24__char" style="--i:3">ト</div>
      <div class="sp-24__char" style="--i:4">リ</div>
      <div class="sp-24__char" style="--i:5">ク</div>
      <div class="sp-24__char" style="--i:6">ス</div>
      <div class="sp-24__char" style="--i:7">1</div>
    </div>
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">ヲ</div>
      <div class="sp-24__char" style="--i:1">1</div>
      <div class="sp-24__char" style="--i:2">0</div>
      <div class="sp-24__char" style="--i:3">ル</div>
      <div class="sp-24__char" style="--i:4">ー</div>
      <div class="sp-24__char" style="--i:5">プ</div>
      <div class="sp-24__char" style="--i:6">0</div>
      <div class="sp-24__char" style="--i:7">1</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sp-24,.sp-24 *,.sp-24 *::before,.sp-24 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-24{
  --bg:#000;
  --c:#00ff41;
  --dim:#003b10;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
  font-family:'Courier New',monospace;
}
.sp-24__cols{
  display:flex;
  gap:6px;
  align-items:flex-start;
}
.sp-24__col{
  display:flex;
  flex-direction:column;
  gap:0;
}
.sp-24__char{
  width:16px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:bold;
  color:var(--dim);
  animation:sp-24-fall 1.5s linear infinite;
}
.sp-24__col:nth-child(1) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s)}
.sp-24__col:nth-child(2) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s - 0.3s)}
.sp-24__col:nth-child(3) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s - 0.6s)}
.sp-24__col:nth-child(4) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s - 0.9s)}
.sp-24__col:nth-child(5) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s - 1.2s)}
/* Head char bright white-green */
.sp-24__col:nth-child(1) .sp-24__char:nth-child(1),
.sp-24__col:nth-child(2) .sp-24__char:nth-child(1),
.sp-24__col:nth-child(3) .sp-24__char:nth-child(1),
.sp-24__col:nth-child(4) .sp-24__char:nth-child(1),
.sp-24__col:nth-child(5) .sp-24__char:nth-child(1){
  color:#fff;
  text-shadow:0 0 8px var(--c),0 0 16px var(--c);
}
@keyframes sp-24-fall{
  0%{color:#fff;text-shadow:0 0 8px var(--c)}
  10%{color:var(--c);text-shadow:0 0 4px var(--c)}
  60%{color:rgba(0,255,65,0.4);text-shadow:none}
  100%{color:var(--dim);text-shadow:none}
}
@media (prefers-reduced-motion: reduce){
  .sp-24__char{animation:none;color:var(--c)}
}
```

### 25. Aurora Gradient Orb Spinner

**Type:** Pure CSS
**Description:** A softly glowing orb pulses with shifting aurora borealis colours — layered radial gradients rotate independently with hue-shift filters — while a single orbital ring traces a luminous dot around the perimeter.

**HTML:**
```html
<div class="sp-25">
  <div class="sp-25__orb">
    <div class="sp-25__layer"></div>
    <div class="sp-25__layer"></div>
    <div class="sp-25__layer"></div>
    <div class="sp-25__ring"></div>
  </div>
</div>
```

**CSS:**
```css
.sp-25,.sp-25 *,.sp-25 *::before,.sp-25 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-25{
  --bg:#020d12;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-25__orb{
  position:relative;
  width:100px;
  height:100px;
}
.sp-25__layer{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.sp-25__layer:nth-child(1){
  background:radial-gradient(circle at 30% 40%,#00e5ff,transparent 60%),
             radial-gradient(circle at 70% 60%,#69f0ae,transparent 60%);
  filter:blur(4px);
  animation:sp-25-aurora1 4s ease-in-out infinite;
}
.sp-25__layer:nth-child(2){
  background:radial-gradient(circle at 60% 30%,#7c4dff,transparent 55%),
             radial-gradient(circle at 40% 70%,#40c4ff,transparent 55%);
  filter:blur(6px);
  animation:sp-25-aurora2 5s ease-in-out infinite;
  animation-delay:-2s;
  mix-blend-mode:screen;
}
.sp-25__layer:nth-child(3){
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.15),transparent 50%);
  animation:sp-25-pulse 3s ease-in-out infinite;
}
.sp-25__ring{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.2);
  animation:sp-25-spin 8s linear infinite;
}
.sp-25__ring::after{
  content:'';
  position:absolute;
  top:2px;
  left:50%;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:rgba(255,255,255,0.8);
  box-shadow:0 0 6px white;
}
@keyframes sp-25-aurora1{
  0%,100%{transform:rotate(0deg) scale(1);filter:blur(4px) hue-rotate(0deg)}
  33%{transform:rotate(120deg) scale(1.1);filter:blur(5px) hue-rotate(60deg)}
  66%{transform:rotate(240deg) scale(0.95);filter:blur(3px) hue-rotate(120deg)}
}
@keyframes sp-25-aurora2{
  0%,100%{transform:rotate(0deg) scale(1.05)}
  50%{transform:rotate(-180deg) scale(0.95)}
}
@keyframes sp-25-pulse{
  0%,100%{opacity:0.4}
  50%{opacity:0.9}
}
@keyframes sp-25-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-25__layer,.sp-25__ring{animation:none}
}
```

---
## 22 CSS Split Screen Layouts

URL: https://codefronts.com/layouts/css-split-screen/
Description: 22 hand-coded CSS split-screen layouts — classic 50/50, diagonal cut, hover-reveal, before/after slider, parallax scenes, 3D perspective and more. Responsive, copy-paste ready.
Demo count: 22

### 01. Editorial Restaurant

**Type:** Pure CSS
**Description:** Editorial restaurant menu — cream paper, olive-green typography, burgundy accents. Classic 50/50 split with food photography on the left (CSS-painted plate) and the menu on the right. Serif headlines, dotted-leader pricing, the printed-menu aesthetic.

**HTML:**
```html
<section class="ss-edt" aria-label="Restaurant menu">
  <aside class="ss-edt-visual" aria-hidden="true">
    <div class="ss-edt-plate">
      <div class="ss-edt-food"></div>
      <span class="ss-edt-fork"></span>
      <span class="ss-edt-knife"></span>
    </div>
    <span class="ss-edt-stamp">No. 47 · Spring</span>
  </aside>
  <article class="ss-edt-menu">
    <header>
      <span class="ss-edt-eye">— La Maison Verte</span>
      <h2>The Spring<br /><em>tasting menu.</em></h2>
      <p>Five courses, paired with natural wines, served family-style. Reservations required.</p>
    </header>
    <dl class="ss-edt-courses">
      <div>
        <dt>Asparagus &amp; truffle</dt>
        <dd>18</dd>
      </div>
      <div>
        <dt>Pea soup, mint oil</dt>
        <dd>14</dd>
      </div>
      <div>
        <dt>Hand-rolled cavatelli</dt>
        <dd>26</dd>
      </div>
      <div>
        <dt>Lamb shoulder, jus</dt>
        <dd>34</dd>
      </div>
      <div>
        <dt>Olive oil cake</dt>
        <dd>12</dd>
      </div>
    </dl>
    <footer>
      <span>5-course · 104 per guest</span>
      <button type="button" class="ss-edt-cta">Reserve a table →</button>
    </footer>
  </article>
</section>
```

**CSS:**
```css
.ss-edt {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f4ede0;
  color: #2a3325;
  border-radius: 0; overflow: hidden;
  border: 1px solid #2a3325;
}
.ss-edt-visual {
  position: relative;
  background:
    radial-gradient(60% 80% at 50% 40%, #efe4cf 0%, #d8c8a8 100%);
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid #2a3325;
}
.ss-edt-plate {
  position: relative;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #f0e8d4 100%);
  box-shadow:
    inset 0 0 0 14px rgba(0,0,0,0.04),
    inset 0 0 0 16px rgba(122,86,40,0.18),
    0 18px 40px rgba(60,40,20,0.18);
}
.ss-edt-food {
  position: absolute; inset: 30%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 30%, #6d8c3c 0%, #4a6b25 60%, transparent 75%),
    radial-gradient(circle at 70% 60%, #c43a2c 0%, #8a1f1c 30%, transparent 50%),
    radial-gradient(circle at 50% 75%, #e8b04a 0%, #b8924a 40%, transparent 60%);
}
.ss-edt-fork, .ss-edt-knife {
  position: absolute;
  width: 4px; height: 80px;
  background: linear-gradient(180deg, #c0bcb0 0%, #888477 100%);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ss-edt-fork  { top: 50%; left: 8%; transform: translateY(-50%) rotate(8deg); }
.ss-edt-knife { top: 50%; right: 8%; transform: translateY(-50%) rotate(-8deg); }
.ss-edt-fork::before {
  content: ''; position: absolute; top: -10px; left: -6px;
  width: 16px; height: 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, #c0bcb0 3px 4px);
}
.ss-edt-knife::before {
  content: ''; position: absolute; top: -10px; left: -3px;
  width: 10px; height: 30px;
  background: linear-gradient(180deg, #c0bcb0 0%, #888477 100%);
  border-radius: 2px 4px 0 0;
  transform: skewX(-8deg);
}
.ss-edt-stamp {
  position: absolute; top: 24px; left: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #5a3825;
  border: 1.5px solid #5a3825;
  padding: 6px 12px;
  transform: rotate(-4deg);
  background: rgba(244,237,224,0.4);
}
.ss-edt-menu {
  padding: 40px 44px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    radial-gradient(60% 60% at 100% 0%, #fdf8eb 0%, transparent 60%),
    #f9f1de;
}
.ss-edt-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #6e1f1c;
}
.ss-edt-menu h2 {
  margin: 6px 0 0;
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 500;
  line-height: 0.95;
  color: #2a3325;
  letter-spacing: -0.02em;
}
.ss-edt-menu h2 em {
  font-style: italic;
  color: #6e1f1c;
}
.ss-edt-menu header p {
  margin: 4px 0 0;
  font-size: 16px;
  color: #5a4a35;
  line-height: 1.55;
  max-width: 440px;
}
.ss-edt-courses { margin: 0; padding: 18px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; display: flex; flex-direction: column; gap: 14px; }
.ss-edt-courses div {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 18px;
}
.ss-edt-courses dt {
  color: #2a3325;
  font-style: italic;
  flex-shrink: 0;
}
.ss-edt-courses dt::after {
  content: '';
  display: inline-block;
  width: 100%;
  margin: 0 8px 4px;
  border-bottom: 1.5px dotted #b89668;
  vertical-align: bottom;
}
.ss-edt-courses dd {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 700;
  color: #6e1f1c;
}
.ss-edt-menu footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ss-edt-menu footer span {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: #5a4a35;
}
.ss-edt-cta {
  padding: 12px 22px;
  background: #2a3325;
  color: #f4ede0;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
}
.ss-edt-cta:hover { background: #6e1f1c; }
.ss-edt-cta:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .ss-edt { grid-template-columns: 1fr; }
  .ss-edt-visual { min-height: 280px; border-right: 0; border-bottom: 1px solid #2a3325; }
}
```

### 02. Diagonal Split

**Type:** Pure CSS
**Description:** Sport magazine — pitch black with electric-orange diagonal cut and concrete-grey supporting tones. Headline punches through the diagonal seam. Pure CSS via <code>clip-path: polygon()</code> for the angled wedge; oversized condensed display type sells the impact.

**HTML:**
```html
<section class="ss-dia" aria-label="Sport magazine cover">
  <div class="ss-dia-orange" aria-hidden="true">
    <span class="ss-dia-num">47</span>
  </div>
  <div class="ss-dia-black">
    <span class="ss-dia-issue">ISSUE 47 · MAY</span>
    <h2>FASTER<br /><span class="ss-dia-italic">than</span><br />YESTERDAY.</h2>
    <p>Inside: how four runners broke their personal records by changing one thing.</p>
    <ul class="ss-dia-list">
      <li><span>01</span> The 6am rule</li>
      <li><span>02</span> Negative splits</li>
      <li><span>03</span> Track over road</li>
    </ul>
    <button type="button" class="ss-dia-cta">Read inside →</button>
  </div>
</section>
```

**CSS:**
```css
.ss-dia {
  position: relative;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #0e0e10;
  color: #fff;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-dia-orange {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #ff5e1a 0%, #ff8a00 60%, #ffaa44 100%);
  clip-path: polygon(0 0, 56% 0, 32% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center;
}
.ss-dia-orange::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(60deg, transparent 0 30px, rgba(0,0,0,0.04) 30px 31px);
}
.ss-dia-num {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 0.85;
  color: #0e0e10;
  letter-spacing: -0.05em;
  transform: translateX(-22%) translateY(-4%);
  text-shadow: 0 6px 0 rgba(0,0,0,0.06);
  font-style: italic;
}
.ss-dia-black {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 56%;
  padding: 48px 44px;
  display: flex; flex-direction: column; gap: 18px;
  z-index: 2;
}
.ss-dia-issue {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em;
  color: #ff8a00;
}
.ss-dia-black h2 {
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ss-dia-italic {
  font-style: italic;
  font-weight: 300;
  color: #ff8a00;
  text-transform: lowercase;
  font-family: 'Cormorant Garamond', serif;
}
.ss-dia-black p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #b8b6b0;
  max-width: 380px;
}
.ss-dia-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-dia-list li {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #fff;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.ss-dia-list span {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #ff8a00;
}
.ss-dia-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 14px 26px;
  background: #ff5e1a;
  color: #0e0e10;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
}
.ss-dia-cta:hover { background: #ff8a00; }
.ss-dia-cta:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .ss-dia { min-height: 580px; }
  .ss-dia-orange { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 50%); }
  .ss-dia-num { transform: translateX(0) translateY(-10%); font-size: 120px; }
  .ss-dia-black { width: 100%; top: 50%; padding-top: 36px; }
}
```

### 03. Wine Cellar

**Type:** Pure CSS
**Description:** Wine cellar boutique — deep burgundy with gold-leaf accents and cream label typography. Asymmetric 60/40 split: a single CSS-painted bottle on the left, vintage tasting notes on the right. Real <code>&lt;dl&gt;</code> for the vintage details.

**HTML:**
```html
<section class="ss-wne" aria-label="Wine bottle and tasting notes">
  <aside class="ss-wne-visual" aria-hidden="true">
    <div class="ss-wne-shelf"></div>
    <div class="ss-wne-bottle">
      <div class="ss-wne-neck"></div>
      <div class="ss-wne-label">
        <em>Château</em>
        <strong>Verdun</strong>
        <span>1987</span>
      </div>
    </div>
    <div class="ss-wne-glow"></div>
  </aside>
  <article class="ss-wne-notes">
    <header>
      <span class="ss-wne-vintage">VINTAGE 1987</span>
      <h2>Château<br /><em>Verdun</em></h2>
      <p>
        A single-vineyard cuvée from the Médoc. Aged 24 months in French oak. Limited release of
        1,200 bottles.
      </p>
    </header>
    <dl class="ss-wne-detail">
      <dt>Region</dt>
      <dd>Bordeaux, France</dd>
      <dt>Varietal</dt>
      <dd>Cabernet Sauvignon (78%)</dd>
      <dt>Aging</dt>
      <dd>24 months · French oak</dd>
      <dt>Tasting</dt>
      <dd>Black cherry, leather, tobacco</dd>
      <dt>Pairing</dt>
      <dd>Dry-aged ribeye, hard cheese</dd>
    </dl>
    <footer class="ss-wne-foot">
      <span class="ss-wne-price">€420 <small>per bottle</small></span>
      <button type="button" class="ss-wne-cta">Add to cellar</button>
    </footer>
  </article>
</section>
```

**CSS:**
```css
.ss-wne {
  display: grid; grid-template-columns: 40% 60%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #1a0a0e;
  color: #f5e6d3;
  border-radius: 0; overflow: hidden;
}
.ss-wne-visual {
  position: relative;
  background:
    radial-gradient(60% 70% at 50% 60%, rgba(80,20,30,0.6) 0%, #0e0608 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ss-wne-shelf {
  position: absolute; bottom: 12%; left: 0; right: 0; height: 4px;
  background: linear-gradient(180deg, #5a3825 0%, #3a2415 100%);
  box-shadow: 0 -2px 0 #2a1810, 0 4px 18px rgba(0,0,0,0.6);
}
.ss-wne-bottle {
  position: relative;
  width: 88px; height: 280px;
  border-radius: 8px 8px 24px 24px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 30%, transparent 50%),
    linear-gradient(180deg, #2a0810 0%, #1a0a0e 100%);
  box-shadow:
    inset -8px 0 24px rgba(0,0,0,0.5),
    inset 8px 0 12px rgba(180,80,80,0.08),
    0 6px 18px rgba(0,0,0,0.5);
  z-index: 2;
}
.ss-wne-neck {
  position: absolute; left: 50%; top: -54px;
  transform: translateX(-50%);
  width: 28px; height: 60px;
  background: linear-gradient(180deg, #1a0608 0%, #2a0810 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: inset -3px 0 8px rgba(0,0,0,0.4);
}
.ss-wne-neck::after {
  content: ''; position: absolute; top: -8px; left: -2px; right: -2px; height: 14px;
  background: linear-gradient(180deg, #d4af37 0%, #8a6f1c 100%);
  border-radius: 3px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}
.ss-wne-label {
  position: absolute; left: 6px; right: 6px; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #f5e6d3 0%, #e8d4ba 100%);
  padding: 14px 6px;
  text-align: center;
  border-top: 1px solid #d4af37;
  border-bottom: 1px solid #d4af37;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.3);
}
.ss-wne-label em {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 9px; font-style: italic;
  color: #6e1f1c;
  letter-spacing: 0.08em;
  margin-bottom: 1px;
}
.ss-wne-label strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 700;
  color: #1a0a0e;
  letter-spacing: -0.01em;
  line-height: 1;
}
.ss-wne-label span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em;
  color: #6e1f1c;
  margin-top: 4px;
}
.ss-wne-glow {
  position: absolute; bottom: 8%; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 30px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(212,175,55,0.18), transparent 70%);
  border-radius: 50%;
  z-index: 1;
}
.ss-wne-notes {
  padding: 44px 48px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(110,30,30,0.18) 0%, transparent 70%),
    #1a0a0e;
}
.ss-wne-vintage {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.3em;
  color: #d4af37;
}
.ss-wne-notes h2 {
  margin: 4px 0 0;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.92;
  color: #f5e6d3;
  letter-spacing: -0.02em;
}
.ss-wne-notes h2 em {
  font-style: italic;
  color: #d4af37;
}
.ss-wne-notes header p {
  margin: 4px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #c4a888;
  max-width: 440px;
  font-style: italic;
}
.ss-wne-detail { margin: 0; padding: 18px 0; border-top: 1px solid rgba(212,175,55,0.25); border-bottom: 1px solid rgba(212,175,55,0.25); display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; font-size: 14.5px; }
.ss-wne-detail dt {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8a6f4a;
  align-self: center;
}
.ss-wne-detail dd {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #f5e6d3;
}
.ss-wne-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ss-wne-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 500;
  color: #d4af37;
  letter-spacing: -0.01em;
}
.ss-wne-price small {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #8a6f4a;
  margin-left: 4px;
}
.ss-wne-cta {
  padding: 14px 26px;
  background: transparent;
  color: #d4af37;
  border: 1.5px solid #d4af37;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.ss-wne-cta:hover { background: #d4af37; color: #1a0a0e; }
@media (max-width: 720px) {
  .ss-wne { grid-template-columns: 1fr; }
  .ss-wne-visual { min-height: 320px; }
}
```

### 04. Hover Reveal Split

**Type:** Pure CSS
**Description:** K-pop concert poster — hot pink + electric cyan + chrome. Two halves; hover/tap each to grow it from 50% to 70%, the other shrinks. Pure CSS via <code>flex-grow</code> transition; massive condensed type and chromatic-aberration headlines complete the album-cover feel.

**HTML:**
```html
<section class="ss-kpop" aria-label="Album release split">
  <article class="ss-kpop-side ss-kpop-pink">
    <span class="ss-kpop-eye">SIDE A</span>
    <h2><span>NEON</span><span>HEART</span></h2>
    <p>Vol. 03 · Out now</p>
    <div class="ss-kpop-track">
      <span>01 ⟡ Midnight Drive</span>
      <span>02 ⟡ Lights Off</span>
      <span>03 ⟡ Pink Static</span>
    </div>
    <button type="button" class="ss-kpop-cta">▶ PLAY</button>
  </article>
  <article class="ss-kpop-side ss-kpop-cyan">
    <span class="ss-kpop-eye">SIDE B</span>
    <h2><span>CYBER</span><span>BLOOM</span></h2>
    <p>Vol. 03 · Out now</p>
    <div class="ss-kpop-track">
      <span>04 ⟡ Glass Hearts</span>
      <span>05 ⟡ Hologram</span>
      <span>06 ⟡ Echo Park</span>
    </div>
    <button type="button" class="ss-kpop-cta">▶ PLAY</button>
  </article>
</section>
```

**CSS:**
```css
.ss-kpop {
  display: flex;
  min-height: 480px;
  font-family: 'Helvetica Neue', sans-serif;
  background: #0a0014;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-kpop-side {
  flex: 1 1 50%;
  position: relative;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: flex-grow 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  isolation: isolate;
}
.ss-kpop-side:hover, .ss-kpop-side:focus-within { flex-grow: 1.6; }
.ss-kpop-pink {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.05) 4px 5px),
    radial-gradient(60% 80% at 30% 30%, #ff52aa 0%, #c41560 100%);
  color: #fff;
  border-right: 2px solid #fff;
}
.ss-kpop-cyan {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.05) 4px 5px),
    radial-gradient(60% 80% at 70% 70%, #00e5ff 0%, #0080a8 100%);
  color: #0a0014;
}
.ss-kpop-pink::before, .ss-kpop-cyan::before {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.2) 50%, transparent 70%);
  z-index: -1;
}
.ss-kpop-pink::before { top: -60px; right: -60px; }
.ss-kpop-cyan::before { bottom: -60px; left: -60px; }
.ss-kpop-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.32em;
}
.ss-kpop-pink .ss-kpop-eye { color: #ffd400; text-shadow: 0 0 10px rgba(255,212,0,0.4); }
.ss-kpop-cyan .ss-kpop-eye { color: #ff00aa; }
.ss-kpop-side h2 {
  margin: 0;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: flex; flex-direction: column;
  font-style: italic;
}
.ss-kpop-side h2 span:nth-child(2) {
  align-self: flex-end;
}
.ss-kpop-pink h2 {
  color: #fff;
  text-shadow:
    -3px 0 0 #00e5ff,
    3px 0 0 #ffd400;
}
.ss-kpop-cyan h2 {
  color: #0a0014;
  text-shadow:
    -3px 0 0 #ff52aa,
    3px 0 0 #ffd400;
}
.ss-kpop-side p {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.ss-kpop-pink p { color: #ffd400; }
.ss-kpop-cyan p { color: #0a0014; }
.ss-kpop-track {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.ss-kpop-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 22px;
  background: #fff;
  color: #0a0014;
  border: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: transform 0.12s;
}
.ss-kpop-pink .ss-kpop-cta { background: #ffd400; color: #c41560; }
.ss-kpop-cyan .ss-kpop-cta { background: #ff52aa; color: #fff; }
.ss-kpop-cta:hover { transform: scale(1.05); }
@media (max-width: 720px) {
  .ss-kpop { flex-direction: column; }
  .ss-kpop-side { flex: 1 1 auto; }
  .ss-kpop-side:hover, .ss-kpop-side:focus-within { flex-grow: 1; }
  .ss-kpop-pink { border-right: 0; border-bottom: 2px solid #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-kpop-side { transition: none; }
}
```

### 05. Coffee Triptych

**Type:** Pure CSS
**Description:** Three coffee blends side-by-side — espresso brown, cream, copper. Three vertical panels in a single row, each with its own roast story. Hover any panel to reveal the tasting notes. CSS grid with <code>1fr 1fr 1fr</code> and a shared expand-on-hover behavior.

**HTML:**
```html
<section class="ss-trip" aria-label="Coffee blend triptych">
  <article class="ss-trip-card ss-trip-light">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Misty<br />Morning</h2>
      <span class="ss-trip-roast">LIGHT ROAST</span>
    </header>
    <p class="ss-trip-notes">Bright, floral, lemon zest. Single origin Ethiopia.</p>
    <footer>€18 · 250g</footer>
  </article>
  <article class="ss-trip-card ss-trip-medium">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Honey<br />House</h2>
      <span class="ss-trip-roast">MEDIUM</span>
    </header>
    <p class="ss-trip-notes">Caramel, almond, ripe stone fruit. Costa Rica blend.</p>
    <footer>€20 · 250g</footer>
  </article>
  <article class="ss-trip-card ss-trip-dark">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Midnight<br />Hour</h2>
      <span class="ss-trip-roast">DARK ROAST</span>
    </header>
    <p class="ss-trip-notes">Dark chocolate, smoke, lingering espresso finish.</p>
    <footer>€22 · 250g</footer>
  </article>
</section>
```

**CSS:**
```css
.ss-trip {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #2a1810;
  border-radius: 0; overflow: hidden;
}
.ss-trip-card {
  position: relative;
  padding: 40px 28px;
  display: flex; flex-direction: column; gap: 18px;
  cursor: pointer;
  transition: padding 0.32s ease;
  border-right: 1px solid rgba(0,0,0,0.2);
  isolation: isolate;
}
.ss-trip-card:last-child { border-right: 0; }
.ss-trip-light  { background: linear-gradient(180deg, #f4ebd6 0%, #e8d4ba 100%); color: #5a3825; }
.ss-trip-medium { background: linear-gradient(180deg, #b8924a 0%, #8a6420 100%); color: #f4ebd6; }
.ss-trip-dark   { background: linear-gradient(180deg, #2a1810 0%, #1a0e08 100%); color: #f4ebd6; }
.ss-trip-card header { display: flex; flex-direction: column; gap: 14px; }
.ss-trip-bean {
  width: 56px; height: 56px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.ss-trip-bean::before {
  content: '';
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: 4px; height: 76%;
  background: rgba(0,0,0,0.4);
  border-radius: 2px;
}
.ss-trip-light  .ss-trip-bean { background: linear-gradient(135deg, #c89868 0%, #8a5825 100%); }
.ss-trip-medium .ss-trip-bean { background: linear-gradient(135deg, #6a3818 0%, #3a1808 100%); }
.ss-trip-dark   .ss-trip-bean { background: linear-gradient(135deg, #2a0806 0%, #050000 100%); }
.ss-trip-card h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 0.95;
  font-style: italic;
  letter-spacing: -0.01em;
}
.ss-trip-roast {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.ss-trip-notes {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  line-height: 1.5;
  opacity: 0.85;
  font-style: italic;
  max-width: 200px;
}
.ss-trip-card footer {
  margin-top: auto;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 16px;
  border-top: 1px dashed currentColor;
  opacity: 0.85;
}
.ss-trip-card:hover {
  padding: 36px 28px 36px 36px;
}
.ss-trip-card::after {
  content: '→';
  position: absolute; top: 28px; right: 28px;
  font-size: 22px;
  font-weight: 100;
  opacity: 0;
  transition: opacity 0.24s, transform 0.24s;
}
.ss-trip-card:hover::after { opacity: 1; transform: translateX(4px); }
@media (max-width: 720px) {
  .ss-trip { grid-template-columns: 1fr; }
  .ss-trip-card { border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.2); }
  .ss-trip-card:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-trip-card { transition: none; }
}
```

### 06. Curved Split

**Type:** Pure CSS
**Description:** Surf brand — ocean teal meets sand beige with a wave-curved seam, sunset-coral CTA. Pure CSS curve via <code>border-radius</code> and a generous <code>clip-path</code>. The two halves never share a straight line — feels organic, beach-y, hand-shaped.

**HTML:**
```html
<section class="ss-srf" aria-label="Surfboard hero">
  <aside class="ss-srf-ocean" aria-hidden="true">
    <span class="ss-srf-sun"></span>
    <span class="ss-srf-wave"></span>
    <span class="ss-srf-board"></span>
  </aside>
  <article class="ss-srf-content">
    <span class="ss-srf-eye">▴ Drift Surf Co.</span>
    <h2>Hand-shaped<br />by the <em>tide.</em></h2>
    <p>
      Custom polyurethane boards, glassed in our Ericeira workshop. 6-week lead time, lifetime
      workmanship guarantee.
    </p>
    <div class="ss-srf-stats">
      <div class="ss-srf-stat"><strong>14</strong><span>Shapers</span></div>
      <div class="ss-srf-stat"><strong>2,400</strong><span>Boards / yr</span></div>
      <div class="ss-srf-stat"><strong>1972</strong><span>Founded</span></div>
    </div>
    <button type="button" class="ss-srf-cta">Shape your board →</button>
  </article>
</section>
```

**CSS:**
```css
.ss-srf {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f5ecd9;
  color: #1a3a3f;
  border-radius: 0; overflow: hidden;
  position: relative;
}
.ss-srf-ocean {
  position: relative;
  background: linear-gradient(180deg, #2c8a8e 0%, #1a3a3f 100%);
  overflow: hidden;
  isolation: isolate;
}
.ss-srf-ocean::after {
  content: '';
  position: absolute; right: -120px; top: 0; bottom: 0; width: 240px;
  background: #f5ecd9;
  border-radius: 50% 0 0 50% / 50% 0 0 50%;
  z-index: 2;
}
.ss-srf-sun {
  position: absolute; top: 14%; left: 22%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe899 0%, #ff8a40 60%, #c45a1c 100%);
  box-shadow: 0 0 60px rgba(255,170,68,0.5);
}
.ss-srf-wave {
  position: absolute; bottom: 18%; left: -10%; right: -20%;
  height: 80px;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(255,255,255,0.35), transparent 60%);
  border-radius: 50%;
  filter: blur(2px);
}
.ss-srf-wave::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 24px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  filter: blur(6px);
}
.ss-srf-board {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(28deg);
  width: 56px; height: 240px;
  border-radius: 28px / 90px;
  background: linear-gradient(180deg, #fff 0%, #ffe9c4 50%, #ff8a40 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 3;
}
.ss-srf-board::before {
  content: ''; position: absolute; left: 50%; top: 12%;
  transform: translateX(-50%);
  width: 2px; height: 76%;
  background: rgba(0,0,0,0.18);
}
.ss-srf-content {
  padding: 44px 48px 44px 36px;
  display: flex; flex-direction: column; gap: 22px;
  position: relative;
  z-index: 1;
}
.ss-srf-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a1c;
}
.ss-srf-content h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.95;
  color: #1a3a3f;
  letter-spacing: -0.02em;
}
.ss-srf-content h2 em {
  font-style: italic;
  color: #c45a1c;
}
.ss-srf-content p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #3a5a5f;
  max-width: 460px;
}
.ss-srf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 420px; padding: 14px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; }
.ss-srf-stat { display: flex; flex-direction: column; gap: 4px; }
.ss-srf-stats strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 500;
  color: #2c8a8e;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-srf-stats span {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #6a4a35;
  text-transform: uppercase;
}
.ss-srf-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #c45a1c;
  color: #fff;
  border: 0;
  border-radius: 28px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(196,90,28,0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ss-srf-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(196,90,28,0.45); }
@media (max-width: 720px) {
  .ss-srf { grid-template-columns: 1fr; }
  .ss-srf-ocean { min-height: 280px; }
  .ss-srf-ocean::after { display: none; }
  .ss-srf-stats { grid-template-columns: 1fr; }
}
```

### 07. Asymmetric 70/30

**Type:** Pure CSS
**Description:** Architecture portfolio — warm grey concrete + ivory + black accents. Asymmetric 70/30 split: a single hero project on the left, oversized index numbers on the right. Print-magazine spread vibe; thin hairlines do all the structuring.

**HTML:**
```html
<section class="ss-arc" aria-label="Architecture project showcase">
  <article class="ss-arc-hero">
    <header>
      <span class="ss-arc-eye">PROJECT NO. 014 · 2026</span>
      <h2>Casa<br />Hormigón</h2>
      <p>
        A 220 m² family house in Valle de Bravo. Cast-in-place concrete walls, exposed timber roof,
        single oculus skylight above the central courtyard.
      </p>
    </header>
    <div class="ss-arc-photo" aria-hidden="true">
      <span class="ss-arc-bldg"></span>
      <span class="ss-arc-shadow"></span>
    </div>
    <footer class="ss-arc-meta">
      <span><em>Location</em><b>Valle de Bravo, MX</b></span>
      <span><em>Year</em><b>2026</b></span>
      <span><em>Area</em><b>220 m²</b></span>
      <span><em>Status</em><b>Completed</b></span>
    </footer>
  </article>
  <aside class="ss-arc-index">
    <span class="ss-arc-folio">FOLIO</span>
    <ol>
      <li class="active"><span>014</span>Casa Hormigón</li>
      <li><span>013</span>Library Pavilion</li>
      <li><span>012</span>Bridge House</li>
      <li><span>011</span>Sea Cabin</li>
      <li><span>010</span>Garden Atelier</li>
    </ol>
    <footer>est. 2008</footer>
  </aside>
</section>
```

**CSS:**
```css
.ss-arc {
  display: grid; grid-template-columns: 70% 30%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f0ece4;
  color: #1a1a1a;
  border-radius: 0; overflow: hidden;
}
.ss-arc-hero {
  padding: 44px 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  position: relative;
}
.ss-arc-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6a6a6a;
}
.ss-arc-hero header h2 {
  margin: 6px 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 500;
  line-height: 0.92;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  font-style: italic;
}
.ss-arc-hero header p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a4a;
  max-width: 420px;
}
.ss-arc-photo {
  position: relative;
  background: linear-gradient(180deg, #d4cfc1 0%, #b8b3a4 100%);
  border: 1px solid #1a1a1a;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  min-height: 180px;
}
.ss-arc-bldg {
  width: 60%; height: 70%;
  background: linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 100%);
  position: relative;
}
.ss-arc-bldg::before {
  content: ''; position: absolute; top: 12%; left: 35%; right: 35%; height: 14%;
  background: #f5d68a;
  box-shadow:
    0 0 0 1px #1a1a1a,
    0 0 18px rgba(245,214,138,0.5);
}
.ss-arc-bldg::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background:
    repeating-linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,0.08) 14% 16%);
}
.ss-arc-shadow {
  position: absolute; left: 5%; right: 5%; bottom: 0; height: 16px;
  background: rgba(0,0,0,0.4);
  filter: blur(8px);
}
.ss-arc-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding-top: 18px;
  border-top: 1px solid #1a1a1a;
}
.ss-arc-meta span { display: flex; flex-direction: column; gap: 4px; }
.ss-arc-meta em {
  font-family: 'Courier New', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  color: #6a6a6a;
  font-style: normal;
}
.ss-arc-meta b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500;
  color: #1a1a1a;
  font-style: italic;
}
.ss-arc-index {
  background: #1a1a1a;
  color: #f0ece4;
  padding: 36px 28px;
  display: flex; flex-direction: column; gap: 18px;
  font-family: 'Cormorant Garamond', serif;
}
.ss-arc-folio {
  font-family: 'Courier New', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.32em;
  color: #6a6a6a;
}
.ss-arc-index ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.ss-arc-index li {
  padding: 14px 0;
  font-size: 17px;
  font-style: italic;
  color: #8a8a8a;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: baseline;
  cursor: pointer;
  transition: color 0.16s;
}
.ss-arc-index li:hover { color: #f0ece4; }
.ss-arc-index li span {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-style: normal;
  color: #6a6a6a;
  letter-spacing: 0.16em;
}
.ss-arc-index li.active {
  color: #f0ece4;
  font-weight: 500;
}
.ss-arc-index li.active span { color: #f5d68a; }
.ss-arc-index footer {
  margin-top: auto;
  font-family: 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: #6a6a6a;
}
@media (max-width: 720px) {
  .ss-arc { grid-template-columns: 1fr; }
  .ss-arc-meta { grid-template-columns: 1fr 1fr; }
}
```

### 08. Stepped Diagonal

**Type:** Pure CSS
**Description:** Streetwear brand drop — mustard yellow + asphalt black + neon pink. Stepped diagonal cut between two halves, sticker-graphic typography, drop-countdown badge. The kind of split a sneaker brand uses to announce a Friday release.

**HTML:**
```html
<section class="ss-str" aria-label="Streetwear drop announcement">
  <div class="ss-str-yellow">
    <span class="ss-str-stamp" aria-hidden="true">DROP 047</span>
    <h2>FRIDAY<br /><span class="ss-str-pink">3PM</span></h2>
    <ul class="ss-str-info">
      <li><b>03</b> Tees</li>
      <li><b>02</b> Hoodies</li>
      <li><b>01</b> Pair of kicks</li>
    </ul>
  </div>
  <div class="ss-str-black">
    <span class="ss-str-tag">// LIMITED RUN</span>
    <p>200 pieces. Numbered. No restock. Sign up below to get the link 5 minutes early.</p>
    <form class="ss-str-form" role="search">
      <label class="ss-str-sr" for="ss-str-em">Email for early access</label>
      <input
        id="ss-str-em"
        type="email"
        name="email"
        placeholder="you@inbox.tld"
        autocomplete="email"
        required
      />
      <button type="submit">GET LINK →</button>
    </form>
    <span class="ss-str-counter">⏱ 04 : 12 : 47 : 03</span>
  </div>
</section>
```

**CSS:**
```css
.ss-str {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', sans-serif;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-str-yellow {
  background: #ffd400;
  color: #0a0a0a;
  padding: 48px 44px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
  z-index: 2;
}
.ss-str-yellow::before {
  content: '';
  position: absolute; right: 60px; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(180deg, #0a0a0a 0 12px, transparent 12px 24px);
}
.ss-str-stamp {
  display: inline-block;
  padding: 6px 14px;
  background: #0a0a0a;
  color: #ffd400;
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  align-self: flex-start;
  transform: rotate(-2deg);
}
.ss-str-yellow h2 {
  margin: 0;
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-style: italic;
}
.ss-str-pink { color: #ff0090; -webkit-text-stroke: 2px #0a0a0a; }
.ss-str-info { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-str-info li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 17px; font-weight: 700;
  padding: 8px 0;
  border-bottom: 2px dashed #0a0a0a;
  font-family: 'Courier New', monospace;
}
.ss-str-info b {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: 24px;
  background: #ff0090;
  color: #ffd400;
  padding: 0 6px;
  font-style: italic;
}
.ss-str-black {
  background: #0a0a0a;
  color: #f0ece4;
  padding: 48px 44px 48px 80px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  margin-left: -60px;
  z-index: 1;
}
.ss-str-tag {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  color: #ff0090;
}
.ss-str-black p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #f0ece4;
  max-width: 360px;
  font-weight: 500;
}
.ss-str-form {
  display: flex; gap: 0;
  margin-top: auto;
  border: 2px solid #ffd400;
  background: #1a1a1a;
}
.ss-str-form input {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  color: #f0ece4;
  border: 0; outline: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}
.ss-str-form input::placeholder { color: #6a6a6a; }
.ss-str-form button {
  padding: 0 22px;
  background: #ffd400;
  color: #0a0a0a;
  border: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 0.12s;
}
.ss-str-form button:hover { background: #ff0090; color: #ffd400; }
.ss-str-counter {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffd400;
  padding: 10px 14px;
  background: #1a1a1a;
  border: 1px dashed #ff0090;
  align-self: flex-start;
}
.ss-str-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .ss-str { grid-template-columns: 1fr; }
  .ss-str-yellow { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); padding-bottom: 60px; }
  .ss-str-black { margin-left: 0; margin-top: -30px; padding-left: 44px; padding-top: 60px; }
}
```

### 09. Jewelry Sign-in

**Type:** Pure CSS
**Description:** Jewelry boutique sign-in — champagne cream + obsidian black + rose gold. Brand on one side, sign-in form on the other. The kind of split-screen Tiffany would commission. Real <code>&lt;form&gt;</code> with proper labels and autocomplete tokens.

**HTML:**
```html
<section class="ss-jew" aria-label="Jewelry account sign-in">
  <aside class="ss-jew-brand">
    <span class="ss-jew-mark" aria-hidden="true"></span>
    <span class="ss-jew-since">EST. 1924</span>
    <h2><em>Maison</em><br />Aurelia.</h2>
    <p>Welcome back. Your private viewing room and saved pieces are one sign-in away.</p>
    <span class="ss-jew-divider" aria-hidden="true"></span>
    <span class="ss-jew-quote"><em>"Adorned with intent."</em></span>
  </aside>
  <article class="ss-jew-form-wrap">
    <header>
      <span class="ss-jew-eye">— Members only</span>
      <h3>Sign in to your account.</h3>
    </header>
    <form class="ss-jew-form">
      <label>
        <span class="ss-jew-lbl">Email</span>
        <input
          type="email"
          name="email"
          autocomplete="email"
          placeholder="iris@maison.tld"
          required
        />
      </label>
      <label>
        <span class="ss-jew-lbl">Password</span>
        <input
          type="password"
          name="password"
          autocomplete="current-password"
          placeholder="••••••••••"
          required
        />
      </label>
      <div class="ss-jew-row">
        <label class="ss-jew-check"
          ><input type="checkbox" /> <span>Remember this device</span></label
        >
        <a href="#!">Forgot password</a>
      </div>
      <button type="submit" class="ss-jew-cta">Enter the salon</button>
      <p class="ss-jew-meta">Not a member? <a href="#!">Request an invitation</a></p>
    </form>
  </article>
</section>
```

**CSS:**
```css
.ss-jew {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fbf6e8;
  color: #1a1612;
  border-radius: 0; overflow: hidden;
}
.ss-jew-brand {
  background:
    radial-gradient(60% 80% at 50% 30%, #1a1612 0%, #0a0806 100%);
  color: #f5e6c8;
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.ss-jew-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3c0a4 0%, #b88a6a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 0 6px rgba(243,192,164,0.12);
  position: relative;
}
.ss-jew-mark::after {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid #1a1612;
  border-radius: 50%;
}
.ss-jew-since {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.32em;
  color: #b88a6a;
}
.ss-jew-brand h2 {
  margin: 4px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #f5e6c8;
}
.ss-jew-brand h2 em {
  font-style: italic;
  color: #f3c0a4;
}
.ss-jew-brand p {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #c8b896;
  max-width: 380px;
  font-style: italic;
}
.ss-jew-divider {
  display: block;
  width: 60px; height: 1px;
  background: #b88a6a;
  margin-top: 16px;
}
.ss-jew-quote {
  margin-top: auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
  color: #b88a6a;
  letter-spacing: 0.04em;
}
.ss-jew-form-wrap {
  padding: 44px 48px;
  display: flex; flex-direction: column; gap: 22px;
  background: linear-gradient(180deg, #fff 0%, #fbf6e8 100%);
}
.ss-jew-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em;
  color: #b88a6a;
}
.ss-jew-form-wrap h3 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1612;
  line-height: 1.05;
  font-style: italic;
}
.ss-jew-form { display: flex; flex-direction: column; gap: 14px; max-width: 400px; }
.ss-jew-form label { display: flex; flex-direction: column; gap: 6px; }
.ss-jew-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a4a35;
}
.ss-jew-form input[type="email"],
.ss-jew-form input[type="password"] {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #c8b896;
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: #1a1612;
  font-style: italic;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.ss-jew-form input:focus { outline: 0; border-color: #b88a6a; box-shadow: 0 0 0 3px rgba(184,138,106,0.15); }
.ss-jew-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Inter', sans-serif; font-size: 12px;
  color: #4a3a2a;
}
.ss-jew-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ss-jew-check input { accent-color: #b88a6a; }
.ss-jew-row a { color: #b88a6a; text-decoration: none; }
.ss-jew-row a:hover { text-decoration: underline; }
.ss-jew-cta {
  padding: 14px 22px;
  background: #1a1612;
  color: #f5e6c8;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-jew-cta:hover { background: #b88a6a; color: #1a1612; }
.ss-jew-meta {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #6a4a35;
  text-align: center;
}
.ss-jew-meta a { color: #b88a6a; text-decoration: none; }
.ss-jew-meta a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .ss-jew { grid-template-columns: 1fr; }
  .ss-jew-brand { padding: 36px 28px; }
}
```

### 10. Before/After Slider

**Type:** Light JS
**Description:** Skincare brand before/after — clinical white + millennial pink + sage green. Drag the native <code>&lt;input type="range"&gt;</code> to wipe between two states. Pure CSS via <code>:has()</code> on the input value (modern browsers); falls back to a clean static split otherwise.

**HTML:**
```html
<section class="ss-bef" aria-label="Before and after skincare result">
  <div class="ss-bef-stage" style="--reveal: 50%">
    <div class="ss-bef-after" aria-hidden="true">
      <span class="ss-bef-label">AFTER</span>
      <span class="ss-bef-face ss-bef-face-after"></span>
    </div>
    <div class="ss-bef-before" aria-hidden="true">
      <span class="ss-bef-label">BEFORE</span>
      <span class="ss-bef-face ss-bef-face-before"></span>
    </div>
    <span class="ss-bef-handle" aria-hidden="true"> <span></span><span></span> </span>
  </div>
  <article class="ss-bef-content">
    <span class="ss-bef-eye">— Real client · 12 weeks</span>
    <h2>Quiet skin,<br /><em>loud confidence.</em></h2>
    <p>
      Drag the slider to see the result of our 12-week ritual: gentle exfoliation, daily SPF, and
      the Oat Renewal serum.
    </p>
    <label class="ss-bef-control">
      <span>Reveal</span>
      <input type="range" min="0" max="100" value="50" id="ss-bef-r" aria-label="Reveal amount" />
    </label>
    <ul class="ss-bef-stats">
      <li><strong>92%</strong> reduced redness</li>
      <li><strong>87%</strong> smoother texture</li>
      <li><strong>4.9★</strong> average rating</li>
    </ul>
    <button type="button" class="ss-bef-cta">Start the ritual →</button>
  </article>
</section>
```

**CSS:**
```css
.ss-bef {
  display: grid; grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
  color: #2a2a2a;
  border-radius: 0; overflow: hidden;
}
.ss-bef-stage {
  position: relative;
  background: #f7f3ee;
  overflow: hidden;
  isolation: isolate;
  --reveal: 50%;
}
.ss-bef-stage:has(#ss-bef-r) {
  --reveal: calc(var(--ss-bef-pct, 50) * 1%);
}
.ss-bef-after, .ss-bef-before {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.ss-bef-after {
  background: linear-gradient(135deg, #ffe0e6 0%, #ffd0db 100%);
}
.ss-bef-before {
  background: linear-gradient(135deg, #efe2d4 0%, #d4c4ae 100%);
  clip-path: inset(0 0 0 var(--reveal));
}
.ss-bef-label {
  position: absolute; top: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.3em;
  padding: 5px 12px;
  background: rgba(255,255,255,0.92);
  color: #2a2a2a;
}
.ss-bef-after .ss-bef-label { right: 18px; color: #c41560; }
.ss-bef-before .ss-bef-label { left: 18px; color: #5a3825; }
.ss-bef-face {
  width: 200px; height: 240px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}
.ss-bef-face-after {
  background: linear-gradient(180deg, #f8d4c8 0%, #e8b4a8 100%);
  box-shadow: 0 14px 40px rgba(196,21,96,0.18), inset -10px -20px 40px rgba(196,21,96,0.08);
}
.ss-bef-face-before {
  background: linear-gradient(180deg, #d8a888 0%, #c08868 100%);
  box-shadow: inset -10px -20px 40px rgba(0,0,0,0.18);
}
.ss-bef-face-before::before, .ss-bef-face-before::after {
  content: ''; position: absolute;
  background: rgba(196,90,28,0.4);
  border-radius: 50%;
}
.ss-bef-face-before::before { top: 30%; left: 25%; width: 12px; height: 12px; box-shadow: 14px 6px 0 -2px rgba(196,90,28,0.3), -8px 18px 0 -3px rgba(196,90,28,0.35), 26px 22px 0 -4px rgba(196,90,28,0.3); }
.ss-bef-face-before::after { top: 50%; right: 22%; width: 10px; height: 10px; box-shadow: -8px 6px 0 -2px rgba(196,90,28,0.3), 4px 14px 0 -3px rgba(196,90,28,0.4); }
.ss-bef-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--reveal);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 0 18px rgba(196,21,96,0.45);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 5;
}
.ss-bef-handle span:nth-child(1), .ss-bef-handle span:nth-child(2) {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ss-bef-handle span:nth-child(1) { right: 18px; }
.ss-bef-handle span:nth-child(2) { left: 18px; }
.ss-bef-handle span:nth-child(1)::before, .ss-bef-handle span:nth-child(2)::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: solid #c41560; border-width: 2px 2px 0 0;
  width: 8px; height: 8px;
}
.ss-bef-handle span:nth-child(1)::before { transform: translate(-25%, -50%) rotate(45deg); }
.ss-bef-handle span:nth-child(2)::before { transform: translate(-75%, -50%) rotate(-135deg); }
.ss-bef-content {
  padding: 44px 44px;
  display: flex; flex-direction: column; gap: 18px;
}
.ss-bef-eye {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-bef-content h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #2a2a2a;
}
.ss-bef-content h2 em {
  font-style: italic;
  color: #c41560;
}
.ss-bef-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5a5a5a;
  max-width: 420px;
}
.ss-bef-control {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.ss-bef-control span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-bef-control input[type="range"] {
  width: 100%;
  accent-color: #c41560;
}
.ss-bef-stats { list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; gap: 22px; font-size: 13px; flex-wrap: wrap; }
.ss-bef-stats li { display: flex; flex-direction: column; gap: 2px; }
.ss-bef-stats strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 500;
  color: #c41560;
  font-style: italic;
}
.ss-bef-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #c41560;
  color: #fff;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(196,21,96,0.3);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ss-bef-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(196,21,96,0.45); }
@media (max-width: 720px) {
  .ss-bef { grid-template-columns: 1fr; }
  .ss-bef-stage { min-height: 320px; }
}
```

**JS:**
```js
/* Wire the range input to the CSS custom property so the slider drives
   the clip-path reveal. Pure CSS would be possible via :has() but value-
   reading from CSS isn't supported widely yet; this 5-line script is the
   reliable cross-browser path. */
(function () {
  var slider = document.getElementById('ss-bef-r');
  var stage  = slider && slider.closest('.ss-bef').querySelector('.ss-bef-stage');
  if (!slider || !stage) return;
  function sync() { stage.style.setProperty('--ss-bef-pct', slider.value); }
  slider.addEventListener('input', sync);
  sync();
})();
```

### 11. Two Seasons

**Type:** Pure CSS
**Description:** Two seasons of fashion — autumn (rust + ochre + olive) on one side, winter (steel + cobalt + ash) on the other. Click either label to slide the other half open. Pure CSS via radio inputs + sibling selectors; no JS.

**HTML:**
```html
<section class="ss-szn" aria-label="Seasonal lookbook split">
  <input id="ss-szn-a" type="radio" name="ss-szn" checked />
  <input id="ss-szn-w" type="radio" name="ss-szn" />
  <article class="ss-szn-fall">
    <span class="ss-szn-tag">FW · Autumn</span>
    <h2>Burnt &amp;<br />Bronzed.</h2>
    <p>
      Wool tweeds, raw selvedge denim, oxblood leather. The fall capsule, hand-finished in our
      atelier.
    </p>
    <ul class="ss-szn-pieces">
      <li><b>01</b> Camel coat</li>
      <li><b>02</b> Rust knit</li>
      <li><b>03</b> Olive trouser</li>
    </ul>
    <label for="ss-szn-w" class="ss-szn-switch">View Winter capsule →</label>
  </article>
  <article class="ss-szn-winter">
    <span class="ss-szn-tag">SS · Winter</span>
    <h2>Cold &amp;<br />Quiet.</h2>
    <p>
      Cashmere knits, double-faced wool coats, alpine boots. The winter capsule, made for stillness.
    </p>
    <ul class="ss-szn-pieces">
      <li><b>01</b> Storm coat</li>
      <li><b>02</b> Steel knit</li>
      <li><b>03</b> Snow boot</li>
    </ul>
    <label for="ss-szn-a" class="ss-szn-switch">← Back to Autumn</label>
  </article>
</section>
```

**CSS:**
```css
.ss-szn {
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
  transition: grid-template-columns 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.ss-szn:has(#ss-szn-a:checked) { grid-template-columns: 65% 35%; }
.ss-szn:has(#ss-szn-w:checked) { grid-template-columns: 35% 65%; }
.ss-szn input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.ss-szn-fall, .ss-szn-winter {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.4s ease;
}
.ss-szn-fall {
  background:
    radial-gradient(60% 80% at 30% 30%, #d97a3c 0%, transparent 60%),
    linear-gradient(180deg, #6e3825 0%, #2a1810 100%);
  color: #f5e6c8;
}
.ss-szn-fall::before {
  content: ''; position: absolute; top: -10%; right: -10%;
  width: 40%; height: 50%;
  background: radial-gradient(circle, rgba(255,180,80,0.4), transparent 70%);
  filter: blur(40px);
}
.ss-szn-winter {
  background:
    radial-gradient(60% 80% at 70% 70%, #4a6a8a 0%, transparent 60%),
    linear-gradient(180deg, #1a2838 0%, #0e1620 100%);
  color: #d4dce4;
}
.ss-szn-winter::before {
  content: ''; position: absolute; bottom: -10%; left: -10%;
  width: 40%; height: 50%;
  background: radial-gradient(circle, rgba(180,200,240,0.3), transparent 70%);
  filter: blur(40px);
}
.ss-szn-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid currentColor;
}
.ss-szn-fall   .ss-szn-tag { color: #ffd400; }
.ss-szn-winter .ss-szn-tag { color: #8ac4ff; }
.ss-szn-fall h2, .ss-szn-winter h2 {
  margin: 6px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-szn-fall p, .ss-szn-winter p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 360px;
  opacity: 0.85;
}
.ss-szn-pieces { list-style: none; margin: auto 0 0; padding: 14px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; display: flex; flex-direction: column; gap: 6px; }
.ss-szn-pieces li {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic;
}
.ss-szn-pieces b {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em;
  font-style: normal;
}
.ss-szn-fall .ss-szn-pieces b   { color: #ffd400; }
.ss-szn-winter .ss-szn-pieces b { color: #8ac4ff; }
.ss-szn-switch {
  align-self: flex-start;
  padding: 10px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  border: 1px solid currentColor;
  background: transparent;
  transition: background 0.16s, color 0.16s;
}
.ss-szn-fall   .ss-szn-switch:hover { background: #ffd400; color: #2a1810; border-color: #ffd400; }
.ss-szn-winter .ss-szn-switch:hover { background: #8ac4ff; color: #0e1620; border-color: #8ac4ff; }
.ss-szn:has(#ss-szn-w:checked) .ss-szn-fall   { opacity: 0.6; }
.ss-szn:has(#ss-szn-a:checked) .ss-szn-winter { opacity: 0.6; }
@media (max-width: 720px) {
  .ss-szn, .ss-szn:has(#ss-szn-a:checked), .ss-szn:has(#ss-szn-w:checked) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ss-szn { transition: none; } }
```

### 12. Music App Toggle

**Type:** Pure CSS
**Description:** Music app — deep purple + neon mint + black vinyl. Toggle between equal-split (album list) and focus-mode (now playing dominates). Hidden checkbox + <code>:has(:checked)</code> on the grid template; everything else is CSS.

**HTML:**
```html
<section class="ss-mus" aria-label="Music player split">
  <input id="ss-mus-t" type="checkbox" />
  <article class="ss-mus-list" aria-label="Album list">
    <header>
      <h3>Library</h3>
      <label for="ss-mus-t" class="ss-mus-toggle" aria-controls="ss-mus-now">⇋ Focus</label>
    </header>
    <ul>
      <li class="active">
        <span
          class="ss-mus-cover"
          style="background: linear-gradient(135deg, #7c3aed, #ec4899)"
        ></span>
        <div><strong>Midnight Drive</strong><em>Aurelia · Side A</em></div>
        <span class="ss-mus-time">3:42</span>
      </li>
      <li>
        <span
          class="ss-mus-cover"
          style="background: linear-gradient(135deg, #0ea5e9, #22d3ee)"
        ></span>
        <div><strong>Glass Hearts</strong><em>Aurelia · Side B</em></div>
        <span class="ss-mus-time">4:18</span>
      </li>
      <li>
        <span
          class="ss-mus-cover"
          style="background: linear-gradient(135deg, #f59e0b, #ef4444)"
        ></span>
        <div><strong>Cherry Static</strong><em>Various</em></div>
        <span class="ss-mus-time">2:54</span>
      </li>
      <li>
        <span
          class="ss-mus-cover"
          style="background: linear-gradient(135deg, #10b981, #84cc16)"
        ></span>
        <div><strong>Forest Floor</strong><em>Aurelia</em></div>
        <span class="ss-mus-time">5:02</span>
      </li>
    </ul>
  </article>
  <article class="ss-mus-now" id="ss-mus-now" aria-label="Now playing">
    <div class="ss-mus-vinyl" aria-hidden="true">
      <span class="ss-mus-disc"></span>
      <span class="ss-mus-hole"></span>
    </div>
    <div class="ss-mus-meta">
      <span class="ss-mus-eye">▸ NOW PLAYING</span>
      <h2>Midnight<br />Drive.</h2>
      <p class="ss-mus-sub">Aurelia · Side A · Track 03</p>
      <div
        class="ss-mus-bar"
        aria-label="Track progress"
        role="progressbar"
        aria-valuenow="42"
        aria-valuemin="0"
        aria-valuemax="100"
      >
        <span style="width: 42%"></span>
      </div>
      <div class="ss-mus-times"><span>1:33</span><span>3:42</span></div>
      <div class="ss-mus-ctrl">
        <button type="button" aria-label="Previous">⏮</button>
        <button type="button" aria-label="Play" class="ss-mus-play">▶</button>
        <button type="button" aria-label="Next">⏭</button>
      </div>
    </div>
  </article>
</section>
```

**CSS:**
```css
.ss-mus {
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #0e0a1f;
  color: #e6e0ff;
  border-radius: 0; overflow: hidden;
  transition: grid-template-columns 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.ss-mus:has(input:checked) { grid-template-columns: 30% 70%; }
.ss-mus input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.ss-mus-list {
  background: #15102a;
  padding: 30px 24px;
  display: flex; flex-direction: column; gap: 16px;
  border-right: 1px solid rgba(74,222,128,0.25);
  overflow-y: auto;
}
.ss-mus-list header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ss-mus-list h3 {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #4ade80;
}
.ss-mus-toggle {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.4);
  cursor: pointer;
  transition: background 0.14s;
}
.ss-mus-toggle:hover { background: rgba(74,222,128,0.24); }
.ss-mus-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-mus-list li {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s;
}
.ss-mus-list li:hover { background: rgba(255,255,255,0.04); }
.ss-mus-list li.active { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); padding: 9px; }
.ss-mus-cover {
  width: 38px; height: 38px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.ss-mus-list strong { display: block; font-size: 13.5px; font-weight: 700; color: #f0eaff; }
.ss-mus-list em { display: block; font-size: 11px; font-style: normal; color: #8a7fb0; margin-top: 2px; }
.ss-mus-time { font-family: 'Courier New', monospace; font-size: 11px; color: #8a7fb0; }
.ss-mus-now {
  background:
    radial-gradient(60% 80% at 70% 30%, rgba(124,58,237,0.4) 0%, transparent 60%),
    radial-gradient(60% 80% at 30% 70%, rgba(74,222,128,0.18) 0%, transparent 60%),
    #0e0a1f;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}
.ss-mus-vinyl {
  position: relative;
  width: 200px; height: 200px;
  flex-shrink: 0;
}
.ss-mus-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px),
    radial-gradient(circle at 50% 50%, #ec4899 0%, #ec4899 14%, #0a0a0a 14%, #0a0a0a 100%);
  box-shadow:
    inset 0 0 0 14px #1a1a1a,
    0 14px 40px rgba(0,0,0,0.6);
  animation: ss-mus-spin 8s linear infinite;
}
.ss-mus-hole {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #0e0a1f;
  box-shadow: 0 0 0 3px #4ade80;
}
@keyframes ss-mus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-mus-disc { animation: none; } }
.ss-mus-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ss-mus-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74,222,128,0.4);
}
.ss-mus-meta h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.94;
  color: #f0eaff;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-mus-sub { margin: 0; font-size: 13px; color: #a89cc8; letter-spacing: 0.04em; }
.ss-mus-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.ss-mus-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #4ade80 0%, #ec4899 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(74,222,128,0.5);
}
.ss-mus-times { display: flex; justify-content: space-between; font-family: 'Courier New', monospace; font-size: 11px; color: #8a7fb0; }
.ss-mus-ctrl { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.ss-mus-ctrl button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #f0eaff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.ss-mus-ctrl button:hover { background: rgba(255,255,255,0.06); border-color: #4ade80; color: #4ade80; }
.ss-mus-play {
  width: 52px !important; height: 52px !important;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
  color: #0e0a1f !important;
  border: 0 !important;
  font-size: 16px !important;
  box-shadow: 0 8px 22px rgba(74,222,128,0.45) !important;
}
.ss-mus-play:hover { transform: scale(1.05); }
@media (max-width: 720px) {
  .ss-mus, .ss-mus:has(input:checked) { grid-template-columns: 1fr; }
  .ss-mus-now { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
```

### 13. Real-estate Compare

**Type:** Pure CSS
**Description:** Compare two properties — terracotta + olive + warm beige. Two cards side by side, each with hero number, key stats, and price. Hover any side to scale up; the other dims subtly. CSS transform + opacity transitions.

**HTML:**
```html
<section class="ss-est" aria-label="Property comparison">
  <article class="ss-est-card ss-est-warm">
    <header>
      <span class="ss-est-tag">FOR SALE · Verified</span>
      <h3>Casa Sol</h3>
      <p>Mid-century courtyard home, walking distance to the village.</p>
    </header>
    <div class="ss-est-photo" aria-hidden="true">
      <span class="ss-est-house"></span>
      <span class="ss-est-tree"></span>
      <span class="ss-est-tree2"></span>
    </div>
    <dl class="ss-est-stats">
      <dt>Beds</dt>
      <dd>4</dd>
      <dt>Baths</dt>
      <dd>3</dd>
      <dt>Sq m</dt>
      <dd>240</dd>
      <dt>Built</dt>
      <dd>1958</dd>
    </dl>
    <footer>
      <strong>€840,000</strong>
      <button type="button">Schedule tour →</button>
    </footer>
  </article>
  <article class="ss-est-card ss-est-cool">
    <header>
      <span class="ss-est-tag">FOR SALE · New listing</span>
      <h3>Casa Verde</h3>
      <p>Modern earth-tone build with garden views and original olive trees.</p>
    </header>
    <div class="ss-est-photo" aria-hidden="true">
      <span class="ss-est-house ss-est-house-2"></span>
      <span class="ss-est-tree"></span>
      <span class="ss-est-tree2"></span>
    </div>
    <dl class="ss-est-stats">
      <dt>Beds</dt>
      <dd>3</dd>
      <dt>Baths</dt>
      <dd>2</dd>
      <dt>Sq m</dt>
      <dd>185</dd>
      <dt>Built</dt>
      <dd>2022</dd>
    </dl>
    <footer>
      <strong>€720,000</strong>
      <button type="button">Schedule tour →</button>
    </footer>
  </article>
</section>
```

**CSS:**
```css
.ss-est {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  gap: 0;
  background: #efe7d4;
  border-radius: 0; overflow: hidden;
}
.ss-est-card {
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transition: transform 0.32s ease, opacity 0.32s ease;
  isolation: isolate;
}
.ss-est-warm { background: linear-gradient(180deg, #d97a3c 0%, #b85a2c 100%); color: #fff8e8; border-right: 1px solid rgba(0,0,0,0.18); }
.ss-est-cool { background: linear-gradient(180deg, #6e7a3c 0%, #4a5a25 100%); color: #f4ecd0; }
.ss-est:has(.ss-est-warm:hover) .ss-est-cool,
.ss-est:has(.ss-est-cool:hover) .ss-est-warm { opacity: 0.6; }
.ss-est-card:hover { transform: scale(1.02); z-index: 2; }
.ss-est-tag {
  font-family: 'Courier New', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(0,0,0,0.18);
}
.ss-est-card h3 {
  margin: 6px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-est-card header p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 280px;
}
.ss-est-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
}
.ss-est-house {
  position: absolute; bottom: 12%; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 50%;
  background: linear-gradient(180deg, #f5e6c8 0%, #d4c598 100%);
  border-bottom: 4px solid rgba(0,0,0,0.3);
}
.ss-est-house::before {
  content: ''; position: absolute; left: -8%; right: -8%; top: -22%;
  height: 28%;
  background: #6e1f1c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ss-est-house::after {
  content: ''; position: absolute; left: 30%; bottom: 0; width: 18%; height: 50%;
  background: #2a1810;
}
.ss-est-house-2 {
  background: linear-gradient(180deg, #d8d0b8 0%, #a8a088 100%);
}
.ss-est-house-2::before {
  background: #2a3325;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  height: 14%;
  top: -14%;
}
.ss-est-tree, .ss-est-tree2 {
  position: absolute; bottom: 12%;
  width: 40px; height: 60px;
  background: radial-gradient(circle at 50% 30%, #4a6a25 0%, #2a3a18 100%);
  border-radius: 50%;
}
.ss-est-tree { left: 8%; }
.ss-est-tree2 { right: 8%; bottom: 14%; width: 50px; height: 50px; }
.ss-est-stats {
  margin: 0; padding: 14px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ss-est-stats dt {
  font-family: 'Courier New', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.6;
}
.ss-est-stats dd {
  margin: 2px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
}
.ss-est-card footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.ss-est-card footer strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.01em;
}
.ss-est-card footer button {
  padding: 11px 18px;
  background: rgba(0,0,0,0.25);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.14s;
}
.ss-est-card footer button:hover { background: rgba(0,0,0,0.45); }
@media (max-width: 720px) {
  .ss-est { grid-template-columns: 1fr; }
  .ss-est-warm { border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.18); }
  .ss-est-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-est-card { transition: none; }
}
```

### 14. Detective Novel

**Type:** Pure CSS
**Description:** Detective novel cover — burnt orange + ink black + parchment cream. A diagonal mask wipes between the cover image and a synopsis on hover. Mystery noir aesthetic with serif type, thin gold rules, and a deliberately distressed paper texture.

**HTML:**
```html
<section class="ss-det" aria-label="Detective novel feature">
  <article class="ss-det-cover">
    <div class="ss-det-image" aria-hidden="true">
      <span class="ss-det-silhouette"></span>
      <span class="ss-det-light"></span>
      <span class="ss-det-rain"></span>
    </div>
    <div class="ss-det-overlay">
      <span class="ss-det-genre">A NEW DETECTIVE NOVEL</span>
      <h2>The<br /><em>Last</em><br />Train.</h2>
      <span class="ss-det-author">by Iris Hawthorne</span>
    </div>
  </article>
  <article class="ss-det-blurb">
    <span class="ss-det-folio">PAGE I · CHAPTER ONE</span>
    <p class="ss-det-quote">
      "It rained the night Dr. Morrow disappeared, and the only witness was a stationmaster who
      hadn't slept in three days."
    </p>
    <p class="ss-det-body">
      A woman searches for her vanished mentor through the rain-soaked streets of a coastal town
      that doesn't want her there.
    </p>
    <ul class="ss-det-list">
      <li>★★★★★ <em>The Times</em></li>
      <li>★★★★★ <em>Le Monde</em></li>
      <li>★★★★☆ <em>Hawthorne Review</em></li>
    </ul>
    <button type="button" class="ss-det-cta">Read first chapter →</button>
  </article>
</section>
```

**CSS:**
```css
.ss-det {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f0e6d0;
  color: #1a0e08;
  border-radius: 0; overflow: hidden;
  border: 1px solid #1a0e08;
}
.ss-det-cover {
  position: relative;
  background:
    radial-gradient(80% 80% at 50% 30%, #c45a1c 0%, #6e1f0c 60%, #1a0a06 100%);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid #1a0e08;
}
.ss-det-image { position: absolute; inset: 0; pointer-events: none; }
.ss-det-silhouette {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 240px;
  background:
    radial-gradient(ellipse at 50% 14%, #1a0a06 0%, #1a0a06 8%, transparent 9%),
    linear-gradient(180deg, transparent 8%, #1a0a06 8%, #1a0a06 100%);
  clip-path: polygon(40% 0, 60% 0, 70% 16%, 80% 38%, 80% 100%, 20% 100%, 20% 38%, 30% 16%);
}
.ss-det-light {
  position: absolute; top: 0; right: 12%;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 50% 0%, rgba(255,200,80,0.32), transparent 70%);
  filter: blur(8px);
}
.ss-det-rain {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(78deg, transparent 0 22px, rgba(255,255,255,0.12) 22px 23px);
  animation: ss-det-rain 0.6s linear infinite;
}
@keyframes ss-det-rain {
  from { background-position: 0 0; }
  to   { background-position: 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .ss-det-rain { animation: none; } }
.ss-det-overlay { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.ss-det-genre {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.32em;
  color: #f5d68a;
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid #f5d68a;
  background: rgba(0,0,0,0.4);
}
.ss-det-cover h2 {
  margin: auto 0;
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 500;
  line-height: 0.86;
  color: #f0e6d0;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.7);
}
.ss-det-cover h2 em {
  font-style: italic;
  color: #f5d68a;
  font-family: 'Cormorant Garamond', serif;
  display: inline-block;
}
.ss-det-author {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic;
  color: #f0e6d0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  margin-top: auto;
}
.ss-det-blurb {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(110,30,30,0.04) 32px 33px),
    #f0e6d0;
}
.ss-det-folio {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6e1f0c;
}
.ss-det-quote {
  margin: 6px 0 0;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.4;
  color: #1a0e08;
  font-style: italic;
  border-left: 3px solid #c45a1c;
  padding-left: 16px;
}
.ss-det-body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: #4a3825;
  max-width: 440px;
}
.ss-det-list { list-style: none; margin: auto 0 0; padding: 14px 0; border-top: 1.5px solid #c45a1c; border-bottom: 1.5px solid #c45a1c; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #1a0e08; font-family: 'Inter', sans-serif; }
.ss-det-list li { display: flex; align-items: baseline; justify-content: space-between; }
.ss-det-list em { font-style: italic; color: #6e1f0c; font-family: 'Cormorant Garamond', serif; font-size: 16px; }
.ss-det-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #1a0e08;
  color: #f5d68a;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-det-cta:hover { background: #6e1f0c; }
@media (max-width: 720px) {
  .ss-det { grid-template-columns: 1fr; }
  .ss-det-cover { border-right: 0; border-bottom: 1px solid #1a0e08; min-height: 360px; }
}
```

### 15. Mediterranean Travel

**Type:** Pure CSS
**Description:** Travel agency hero — Mediterranean blue + ochre + white limewash. Parallax-feel split with layered cliff/sea/sun shapes on one side and a destination card on the other. Pure CSS animations drift the sun and sea slowly.

**HTML:**
```html
<section class="ss-trv" aria-label="Mediterranean travel destination">
  <aside class="ss-trv-scene" aria-hidden="true">
    <span class="ss-trv-sky"></span>
    <span class="ss-trv-sun"></span>
    <span class="ss-trv-sea"></span>
    <span class="ss-trv-cliff"></span>
    <span class="ss-trv-house"></span>
    <span class="ss-trv-house ss-trv-house-2"></span>
  </aside>
  <article class="ss-trv-card">
    <span class="ss-trv-tag">Greece · Cyclades</span>
    <h2>Folegandros<br /><em>in May.</em></h2>
    <p>
      Five days. One villa. Local meals at the kafenio. White-washed walls and a sea you'll never
      quite forget. Limited to 8 guests per departure.
    </p>
    <dl class="ss-trv-info">
      <dt>Departure</dt>
      <dd>14 — 19 May</dd>
      <dt>Group size</dt>
      <dd>8 guests</dd>
      <dt>Includes</dt>
      <dd>Villa, breakfasts, ferry</dd>
      <dt>From</dt>
      <dd>€2,400 / guest</dd>
    </dl>
    <button type="button" class="ss-trv-cta">Reserve a spot</button>
  </article>
</section>
```

**CSS:**
```css
.ss-trv {
  display: grid; grid-template-columns: 55% 45%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f4ede0;
  color: #1a3a4a;
  border-radius: 0; overflow: hidden;
}
.ss-trv-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ss-trv-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #c4e4f0 0%, #a4d4e8 50%, #5a8fa8 100%);
}
.ss-trv-sun {
  position: absolute; top: 18%; left: 22%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8d8 0%, #ffd479 50%, #f5a623 100%);
  box-shadow: 0 0 80px rgba(255,212,121,0.6);
  animation: ss-trv-sun 22s ease-in-out infinite alternate;
}
@keyframes ss-trv-sun {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
.ss-trv-sea {
  position: absolute; left: -10%; right: -10%; bottom: 0;
  height: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,0.18) 4px 5px),
    linear-gradient(180deg, #2c8cc4 0%, #1a5a8c 100%);
  border-top-left-radius: 50% 22%;
  border-top-right-radius: 50% 22%;
  animation: ss-trv-sea 18s ease-in-out infinite alternate;
}
@keyframes ss-trv-sea {
  from { transform: translateX(-2%); }
  to   { transform: translateX(2%); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-trv-sun, .ss-trv-sea { animation: none; }
}
.ss-trv-cliff {
  position: absolute; left: 0; right: 0; bottom: 38%;
  height: 28%;
  background: linear-gradient(180deg, #f0e0c8 0%, #c8a878 100%);
  clip-path: polygon(0 60%, 28% 28%, 50% 50%, 78% 22%, 100% 50%, 100% 100%, 0 100%);
}
.ss-trv-house {
  position: absolute; bottom: 50%;
  width: 50px; height: 60px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.ss-trv-house::before {
  content: ''; position: absolute; left: -6px; right: -6px; top: -10px;
  height: 14px;
  background: #2c8cc4;
  border-radius: 50% 50% 0 0;
}
.ss-trv-house::after {
  content: ''; position: absolute; left: 30%; bottom: 0; width: 30%; height: 50%;
  background: #2c8cc4;
}
.ss-trv-house    { left: 38%; }
.ss-trv-house-2  { left: 56%; bottom: 56%; width: 38px; height: 48px; }
.ss-trv-card {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(60% 60% at 100% 100%, rgba(245,166,35,0.1) 0%, transparent 70%),
    #fdf8eb;
  border-left: 1px solid rgba(0,0,0,0.06);
}
.ss-trv-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a1c;
}
.ss-trv-card h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.96;
  color: #1a3a4a;
  letter-spacing: -0.02em;
}
.ss-trv-card h2 em {
  font-style: italic;
  color: #2c8cc4;
}
.ss-trv-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5a6a;
  max-width: 380px;
}
.ss-trv-info { margin: 0; padding: 16px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14px; }
.ss-trv-info dt {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8a6f4a;
  align-self: center;
}
.ss-trv-info dd {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  color: #1a3a4a;
}
.ss-trv-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: #2c8cc4;
  color: #fff;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(44,140,196,0.35);
  transition: background 0.16s;
}
.ss-trv-cta:hover { background: #1a5a8c; }
@media (max-width: 720px) {
  .ss-trv { grid-template-columns: 1fr; }
  .ss-trv-scene { min-height: 280px; }
}
```

### 16. Glitch Arcade

**Type:** Pure CSS
**Description:** Cyber-arcade split — deep purple base with neon-green and magenta. Continuous glitch overlay shifts the colored layers in/out across the seam. Different from Tokyo Neon (sidebars): this is dystopian-arcade not tokyo-pop, dark green vs hot magenta.

**HTML:**
```html
<section class="ss-cyb" aria-label="Cyberpunk arcade split">
  <article class="ss-cyb-left">
    <span class="ss-cyb-glitch ss-cyb-glitch-l" aria-hidden="true"></span>
    <header>
      <span class="ss-cyb-coin">// LOAD &gt;&gt;</span>
      <h2 data-text="GHOST PROTOCOL">GHOST<br />PROTOCOL</h2>
    </header>
    <p>Free-to-play. Pay-to-survive.</p>
    <div class="ss-cyb-meter">
      <span>SYSTEM_INTEGRITY</span>
      <div class="ss-cyb-bar"><span class="ss-cyb-fill" style="width: 73%"></span></div>
      <em>73%</em>
    </div>
  </article>
  <article class="ss-cyb-right">
    <span class="ss-cyb-glitch ss-cyb-glitch-r" aria-hidden="true"></span>
    <ul class="ss-cyb-leader">
      <li><span>01</span><strong>RAVEN_Z</strong><b>9128</b></li>
      <li><span>02</span><strong>v0id_X</strong><b>8044</b></li>
      <li class="me"><span>03</span><strong>YOU</strong><b>7621</b></li>
      <li><span>04</span><strong>n3on_Q</strong><b>6890</b></li>
    </ul>
    <button type="button" class="ss-cyb-cta">/ ENTER /</button>
    <span class="ss-cyb-warn">⚠ HIGH RISK SECTOR</span>
  </article>
</section>
```

**CSS:**
```css
.ss-cyb {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Courier New', 'Helvetica Neue', sans-serif;
  background: #0a0014;
  color: #e8e0ff;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-cyb::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}
.ss-cyb-left, .ss-cyb-right {
  position: relative;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  isolation: isolate;
}
.ss-cyb-left {
  background:
    radial-gradient(70% 80% at 30% 30%, rgba(0,255,140,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #1a0040 0%, #0a0014 100%);
  border-right: 2px solid #00ff8c;
  box-shadow: 12px 0 30px rgba(0,255,140,0.15);
}
.ss-cyb-right {
  background:
    radial-gradient(70% 80% at 70% 70%, rgba(255,0,170,0.18) 0%, transparent 60%),
    linear-gradient(200deg, #2a0044 0%, #0a0014 100%);
}
.ss-cyb-glitch {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(0,255,140,0.06) 8px 9px);
  animation: ss-cyb-jitter 2.4s steps(8) infinite;
  z-index: -1;
}
.ss-cyb-glitch-r {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,0,170,0.07) 8px 9px);
  animation-duration: 1.8s;
  animation-direction: reverse;
}
@keyframes ss-cyb-jitter {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(2px, 0); }
}
@media (prefers-reduced-motion: reduce) { .ss-cyb-glitch { animation: none; } }
.ss-cyb-coin {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.28em;
  color: #00ff8c;
  text-shadow: 0 0 12px rgba(0,255,140,0.6);
}
.ss-cyb-left h2 {
  margin: 4px 0 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900;
  line-height: 0.92;
  color: #fff;
  letter-spacing: -0.03em;
  font-style: italic;
  position: relative;
  text-shadow:
    -2px 0 0 #00ff8c,
    2px 0 0 #ff00aa,
    0 0 30px rgba(255,255,255,0.3);
}
.ss-cyb-left p {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #ff00aa;
  text-transform: uppercase;
}
.ss-cyb-meter {
  margin-top: auto;
  padding: 14px;
  background: rgba(0,255,140,0.06);
  border: 1px solid rgba(0,255,140,0.4);
  display: flex; flex-direction: column; gap: 6px;
}
.ss-cyb-meter span {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.22em;
  color: #00ff8c;
}
.ss-cyb-bar {
  height: 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,255,140,0.3);
}
.ss-cyb-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #00ff8c 0%, #ff00aa 100%);
  box-shadow: 0 0 12px #00ff8c;
}
.ss-cyb-meter em {
  align-self: flex-end;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 22px; font-weight: 900;
  font-style: italic;
  color: #00ff8c;
  text-shadow: 0 0 10px rgba(0,255,140,0.6);
}
.ss-cyb-leader { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-cyb-leader li {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid rgba(255,0,170,0.2);
  background: rgba(0,0,0,0.3);
}
.ss-cyb-leader li.me { background: rgba(255,0,170,0.16); border-color: #ff00aa; box-shadow: 0 0 12px rgba(255,0,170,0.3); }
.ss-cyb-leader li span { font-size: 11px; font-weight: 800; color: #ff00aa; letter-spacing: 0.16em; }
.ss-cyb-leader li strong { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.08em; }
.ss-cyb-leader li b { font-family: 'Helvetica Neue', sans-serif; font-style: italic; font-weight: 800; color: #00ff8c; text-shadow: 0 0 8px rgba(0,255,140,0.5); }
.ss-cyb-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: #ff00aa;
  color: #0a0014;
  border: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.18em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255,0,170,0.5);
  transition: background 0.14s, transform 0.12s;
  font-style: italic;
}
.ss-cyb-cta:hover { background: #00ff8c; box-shadow: 0 0 24px rgba(0,255,140,0.5); }
.ss-cyb-cta:active { transform: scale(0.97); }
.ss-cyb-warn {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em;
  color: #ffd400;
  background: rgba(255,212,0,0.1);
  border: 1px dashed #ffd400;
  margin-top: auto;
}
@media (max-width: 720px) {
  .ss-cyb { grid-template-columns: 1fr; }
  .ss-cyb-left { border-right: 0; border-bottom: 2px solid #00ff8c; box-shadow: 0 12px 30px rgba(0,255,140,0.15); }
}
```

### 17. Coffee Origin Story

**Type:** Pure CSS
**Description:** Coffee origin story — kraft brown + cream + gold leaf. Two-column editorial: hero image map on the left, a numbered story of the bean's journey on the right. Real <code>&lt;ol&gt;</code> with custom counter styling.

**HTML:**
```html
<section class="ss-cof" aria-label="Coffee origin story">
  <aside class="ss-cof-map">
    <span class="ss-cof-eye">ORIGIN · COLOMBIA</span>
    <h2>From bean<br />to <em>brew.</em></h2>
    <div class="ss-cof-map-svg" aria-hidden="true">
      <span class="ss-cof-pin"></span>
      <span class="ss-cof-pin ss-cof-pin-2"></span>
      <span class="ss-cof-pin ss-cof-pin-3"></span>
      <span class="ss-cof-route"></span>
    </div>
    <ul class="ss-cof-meta">
      <li><strong>1,840m</strong> Altitude</li>
      <li><strong>Q-cup 88+</strong> Score</li>
      <li><strong>Caturra</strong> Varietal</li>
    </ul>
  </aside>
  <article class="ss-cof-story">
    <span class="ss-cof-folio">— Five steps to your cup</span>
    <ol>
      <li>
        <h3>Hand-picked at sunrise</h3>
        <p>
          Only the cherries that turn deep red on the tree. Picked between 5am and 9am, before the
          heat sets in.
        </p>
      </li>
      <li>
        <h3>Washed &amp; sun-dried</h3>
        <p>72 hours on raised beds. Daily turning by the same family of farmers since 1962.</p>
      </li>
      <li>
        <h3>Shipped in jute</h3>
        <p>Single-origin lots, no blending. From Pereira to our roastery in 18 days.</p>
      </li>
      <li>
        <h3>Slow-roasted weekly</h3>
        <p>Light medium, 14 minutes. We rest the beans 48 hours before grinding.</p>
      </li>
      <li>
        <h3>In your cup, today</h3>
        <p>Bright, clean, with notes of brown sugar and ripe peach.</p>
      </li>
    </ol>
  </article>
</section>
```

**CSS:**
```css
.ss-cof {
  display: grid; grid-template-columns: 40% 60%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f5ecdc;
  color: #2a1810;
  border-radius: 0; overflow: hidden;
}
.ss-cof-map {
  background: linear-gradient(180deg, #6e3818 0%, #3a1808 100%);
  color: #f5ecdc;
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  border-right: 1px solid #2a1810;
}
.ss-cof-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  color: #d4af37;
}
.ss-cof-map h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.94;
  color: #f5ecdc;
  letter-spacing: -0.02em;
}
.ss-cof-map h2 em {
  font-style: italic;
  color: #d4af37;
}
.ss-cof-map-svg {
  position: relative;
  flex: 1;
  min-height: 200px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(245,236,220,0.08) 0%, transparent 70%);
  border: 1px dashed rgba(212,175,55,0.4);
  margin-top: 12px;
}
.ss-cof-pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.25), 0 0 18px rgba(212,175,55,0.4);
}
.ss-cof-pin    { top: 22%; left: 32%; }
.ss-cof-pin-2  { top: 52%; left: 58%; width: 10px; height: 10px; }
.ss-cof-pin-3  { top: 78%; left: 24%; width: 12px; height: 12px; }
.ss-cof-route {
  position: absolute; top: 22%; left: 32%;
  width: 140px; height: 60%;
  border: 1.5px dashed #d4af37;
  border-color: transparent #d4af37 #d4af37 transparent;
  border-radius: 0 50% 50% 0 / 0 28% 28% 0;
  pointer-events: none;
}
.ss-cof-meta { list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid rgba(212,175,55,0.3); display: flex; flex-direction: column; gap: 8px; font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: #f5ecdc; }
.ss-cof-meta strong {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  font-style: normal;
  color: #d4af37;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.ss-cof-story {
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(110,30,30,0.03) 32px 33px),
    #faf3e2;
  overflow-y: auto;
}
.ss-cof-folio {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6e3818;
  text-transform: uppercase;
}
.ss-cof-story ol { list-style: none; counter-reset: cof; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ss-cof-story li {
  counter-increment: cof;
  padding-left: 60px;
  position: relative;
  padding-bottom: 18px;
  border-bottom: 1px dotted #c8b896;
}
.ss-cof-story li:last-child { border-bottom: 0; }
.ss-cof-story li::before {
  content: counter(cof, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 500;
  font-style: italic;
  color: #d4af37;
  line-height: 1;
}
.ss-cof-story h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #2a1810;
  letter-spacing: -0.01em;
}
.ss-cof-story p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4a3825;
}
@media (max-width: 720px) {
  .ss-cof { grid-template-columns: 1fr; }
  .ss-cof-map { border-right: 0; border-bottom: 1px solid #2a1810; }
}
```

### 18. Quad Photo Split

**Type:** Pure CSS
**Description:** Photography portfolio quad split — charcoal frame with four photo accents (sage / clay / mustard / bone). Hover any tile to expand it; the others contract. CSS grid with <code>:has()</code> on the wrapper to drive the proportions.

**HTML:**
```html
<section class="ss-quad" aria-label="Photography portfolio quad">
  <article
    class="ss-quad-tile"
    tabindex="0"
    data-tile="1"
    style="--bg: linear-gradient(135deg, #7a8a6a 0%, #4a5a3a 100%)"
  >
    <span class="ss-quad-num">01</span>
    <h3>Field Notes</h3>
    <p>Coastal Oregon, autumn 2025</p>
  </article>
  <article
    class="ss-quad-tile"
    tabindex="0"
    data-tile="2"
    style="--bg: linear-gradient(135deg, #c45a3c 0%, #8a3818 100%)"
  >
    <span class="ss-quad-num">02</span>
    <h3>Clay Walls</h3>
    <p>Marrakech rooftops at noon</p>
  </article>
  <article
    class="ss-quad-tile"
    tabindex="0"
    data-tile="3"
    style="--bg: linear-gradient(135deg, #e8b04a 0%, #b8842a 100%)"
  >
    <span class="ss-quad-num">03</span>
    <h3>Yellow Hour</h3>
    <p>Tuscan vineyards in late September</p>
  </article>
  <article
    class="ss-quad-tile"
    tabindex="0"
    data-tile="4"
    style="--bg: linear-gradient(135deg, #e0d4c0 0%, #a89880 100%)"
  >
    <span class="ss-quad-num">04</span>
    <h3>Bone &amp; Stone</h3>
    <p>Atacama mineral landscapes</p>
  </article>
</section>
```

**CSS:**
```css
.ss-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #1a1a1a;
  gap: 2px;
  border-radius: 0; overflow: hidden;
  border: 2px solid #1a1a1a;
}
.ss-quad-tile {
  position: relative;
  background: var(--bg);
  padding: 28px 28px;
  display: flex; flex-direction: column; gap: 10px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  isolation: isolate;
  overflow: hidden;
}
.ss-quad-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: -1;
}
.ss-quad-tile:hover, .ss-quad-tile:focus-visible {
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  outline: none;
}
.ss-quad:has(.ss-quad-tile:hover) .ss-quad-tile:not(:hover),
.ss-quad:has(.ss-quad-tile:focus-visible) .ss-quad-tile:not(:focus-visible) {
  filter: grayscale(0.7) brightness(0.7);
}
.ss-quad-num {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.6);
}
.ss-quad-tile h3 {
  margin: auto 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-quad-tile p {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
@media (max-width: 720px) {
  .ss-quad { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-quad-tile { transition: none; }
}
```

### 19. Recipe Reveal

**Type:** Pure CSS
**Description:** Recipe book — terracotta + sage + butter yellow. Two halves: a recipe header on top, ingredients/method below. On smaller viewports the layout stacks; the right half "reveals" the method. Real <code>&lt;ul&gt;</code> + <code>&lt;ol&gt;</code> for ingredients and steps.

**HTML:**
```html
<section class="ss-rec" aria-label="Recipe split">
  <article class="ss-rec-hero">
    <span class="ss-rec-cat">— Sunday Lunch · Serves 4</span>
    <h2>Slow-roasted<br /><em>tomato</em> orzo.</h2>
    <p>One pan, four ingredients, ninety minutes. The kind of recipe that smells like home.</p>
    <div class="ss-rec-pill">
      <span><b>1h 30m</b><em>Total time</em></span>
      <span><b>Easy</b><em>Skill</em></span>
      <span><b>4 servings</b><em>Yield</em></span>
    </div>
    <button type="button" class="ss-rec-cta">Add to my book</button>
  </article>
  <aside class="ss-rec-method">
    <section class="ss-rec-ing">
      <h3>Ingredients</h3>
      <ul>
        <li><b>500g</b> Cherry tomatoes, on the vine</li>
        <li><b>250g</b> Orzo</li>
        <li><b>2 tbsp</b> Olive oil, plus more to finish</li>
        <li><b>1 tsp</b> Sea salt</li>
        <li><b>4</b> Garlic cloves, smashed</li>
      </ul>
    </section>
    <section class="ss-rec-steps">
      <h3>Method</h3>
      <ol>
        <li>Heat oven to 200°C. Spread tomatoes in a baking dish.</li>
        <li>Add olive oil, salt, garlic. Roast 60 minutes until burst.</li>
        <li>Cook orzo in salted water 8 min. Drain.</li>
        <li>Toss orzo through tomatoes. Finish with olive oil and basil.</li>
      </ol>
    </section>
  </aside>
</section>
```

**CSS:**
```css
.ss-rec {
  display: grid; grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fff8e8;
  color: #2a1810;
  border-radius: 0; overflow: hidden;
  border: 1px solid #2a1810;
}
.ss-rec-hero {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(60% 60% at 30% 30%, #ffe2c8 0%, transparent 60%),
    #fff1d4;
  border-right: 1px dashed #c45a3c;
  position: relative;
}
.ss-rec-hero::before {
  content: '';
  position: absolute; top: 24px; right: 24px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffaa44 0%, #c45a3c 70%, #8a3818 100%);
  box-shadow: 0 6px 18px rgba(196,90,60,0.4);
}
.ss-rec-cat {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-rec-hero h2 {
  margin: 4px 0 0;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.94;
  color: #2a1810;
  letter-spacing: -0.02em;
}
.ss-rec-hero h2 em {
  font-style: italic;
  color: #c45a3c;
}
.ss-rec-hero p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5a4a35;
  max-width: 380px;
}
.ss-rec-pill { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid #c8a878; border-bottom: 1px solid #c8a878; flex-wrap: wrap; }
.ss-rec-pill span { display: flex; flex-direction: column; }
.ss-rec-pill b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  color: #2a1810;
}
.ss-rec-pill em {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-style: normal;
  color: #6a8a5a;
}
.ss-rec-cta {
  align-self: flex-start;
  padding: 13px 22px;
  background: #6a8a5a;
  color: #fff8e8;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-rec-cta:hover { background: #4a6a3a; }
.ss-rec-method {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(196,90,60,0.04) 30px 31px),
    #fff8e8;
  overflow-y: auto;
}
.ss-rec-method h3 {
  margin: 0 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  color: #c45a3c;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px dashed #c8a878;
}
.ss-rec-ing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; }
.ss-rec-ing li {
  display: grid; grid-template-columns: 80px 1fr; gap: 14px;
  font-style: italic;
  color: #2a1810;
}
.ss-rec-ing b {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #6a8a5a;
  letter-spacing: 0.04em;
  align-self: center;
}
.ss-rec-steps ol { list-style: none; counter-reset: rec; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-rec-steps li {
  counter-increment: rec;
  padding-left: 38px;
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a3825;
}
.ss-rec-steps li::before {
  content: counter(rec);
  position: absolute; left: 0; top: -2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #c45a3c;
  width: 28px; text-align: center;
  border-bottom: 1px solid #c45a3c;
}
@media (max-width: 720px) {
  .ss-rec { grid-template-columns: 1fr; }
  .ss-rec-hero { border-right: 0; border-bottom: 1px dashed #c45a3c; }
}
```

### 20. Pet Adoption Z

**Type:** Pure CSS
**Description:** Pet adoption — grass green + sky blue + sun yellow. Z-pattern: image left → text right → image right → text left, but expressed as a 2×2 grid that creates an interlocking flow. Friendly, optimistic, full of CSS-painted dog and cat illustrations.

**HTML:**
```html
<section class="ss-pet" aria-label="Pet adoption page">
  <article class="ss-pet-img ss-pet-cat" aria-hidden="true">
    <span class="ss-pet-creature">
      <span class="ss-pet-eye"></span>
      <span class="ss-pet-eye2"></span>
      <span class="ss-pet-nose"></span>
    </span>
    <span class="ss-pet-tag">MEET LUNA · 2 yrs</span>
  </article>
  <article class="ss-pet-text">
    <span class="ss-pet-eye-tag">FRIDAY ADOPTIONS</span>
    <h2>A good home<br />is one <em>nap</em><br />away.</h2>
    <p>
      22 cats and 14 dogs are waiting at Bramble Lane this weekend. Walk-ins welcome, no appointment
      needed.
    </p>
  </article>
  <article class="ss-pet-text ss-pet-text-2">
    <h3>How it works</h3>
    <ol>
      <li>Visit our shelter Sat / Sun, 10am — 4pm</li>
      <li>Spend an hour with a friend</li>
      <li>Take them home the same day</li>
    </ol>
    <button type="button" class="ss-pet-cta">Plan your visit →</button>
  </article>
  <article class="ss-pet-img ss-pet-dog" aria-hidden="true">
    <span class="ss-pet-creature">
      <span class="ss-pet-eye"></span>
      <span class="ss-pet-eye2"></span>
      <span class="ss-pet-nose"></span>
      <span class="ss-pet-tongue"></span>
    </span>
    <span class="ss-pet-tag">MEET KOJI · 3 yrs</span>
  </article>
</section>
```

**CSS:**
```css
.ss-pet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #fef7d4;
  border-radius: 0; overflow: hidden;
  gap: 0;
}
.ss-pet-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ss-pet-cat {
  background:
    radial-gradient(80% 80% at 30% 70%, #94c4ec 0%, #2a8cc4 100%);
}
.ss-pet-dog {
  background:
    radial-gradient(80% 80% at 70% 30%, #84d488 0%, #2c8c34 100%);
}
.ss-pet-creature {
  position: relative;
  width: 130px; height: 130px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.ss-pet-cat .ss-pet-creature::before, .ss-pet-cat .ss-pet-creature::after {
  content: ''; position: absolute; top: -22px; width: 0; height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 36px solid #fff;
}
.ss-pet-cat .ss-pet-creature::before { left: 4px; transform: rotate(-12deg); }
.ss-pet-cat .ss-pet-creature::after  { right: 4px; transform: rotate(12deg); }
.ss-pet-dog .ss-pet-creature {
  background: linear-gradient(180deg, #d4a878 0%, #a87838 100%);
}
.ss-pet-dog .ss-pet-creature::before, .ss-pet-dog .ss-pet-creature::after {
  content: ''; position: absolute; top: 22px;
  width: 38px; height: 56px;
  background: linear-gradient(180deg, #b8884c 0%, #6e4818 100%);
  border-radius: 50%;
}
.ss-pet-dog .ss-pet-creature::before { left: -22px; transform: rotate(-22deg); }
.ss-pet-dog .ss-pet-creature::after  { right: -22px; transform: rotate(22deg); }
.ss-pet-eye, .ss-pet-eye2 {
  position: absolute; top: 36%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #2a2a2a;
}
.ss-pet-eye  { left: 28%; }
.ss-pet-eye2 { right: 28%; }
.ss-pet-nose {
  position: absolute; top: 52%; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 12px;
  border-radius: 50%;
  background: #c45a3c;
}
.ss-pet-cat .ss-pet-nose { background: #ec5a82; width: 12px; height: 8px; }
.ss-pet-tongue {
  position: absolute; top: 64%; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 14px;
  border-radius: 0 0 12px 12px;
  background: #ec5a82;
}
.ss-pet-tag {
  position: absolute; bottom: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em;
  padding: 5px 11px;
  background: #fff;
  color: #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ss-pet-text {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 16px;
  background: #fef7d4;
  position: relative;
}
.ss-pet-text-2 { background: #fff8e8; }
.ss-pet-eye-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a3c;
  align-self: flex-start;
}
.ss-pet-text h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 500;
  line-height: 0.94;
  color: #2a3325;
  letter-spacing: -0.02em;
}
.ss-pet-text h2 em {
  font-style: italic;
  color: #2c8c34;
}
.ss-pet-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4a4030;
  max-width: 360px;
}
.ss-pet-text h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #2a3325;
  letter-spacing: -0.01em;
}
.ss-pet-text ol { list-style: none; counter-reset: pet; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-pet-text li {
  counter-increment: pet;
  padding-left: 36px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a4030;
}
.ss-pet-text li::before {
  content: counter(pet);
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #ffe89a;
  color: #c45a3c;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #c45a3c;
}
.ss-pet-cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 13px 22px;
  background: #2c8c34;
  color: #fef7d4;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(44,140,52,0.35);
  transition: transform 0.12s, background 0.16s;
}
.ss-pet-cta:hover { background: #1a6a22; transform: translateY(-1px); }
@media (max-width: 720px) {
  .ss-pet { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  .ss-pet-img { min-height: 240px; }
}
```

### 21. Magazine Crossover

**Type:** Pure CSS
**Description:** Editorial magazine spread — newspaper black on cream with a single spot color (cobalt blue). Oversized italic headline crosses the seam between two halves; pull-quote on the right intrudes into the left photo zone. The kind of layout you see on a New York Times Magazine longread.

**HTML:**
```html
<section class="ss-mag" aria-label="Editorial magazine spread">
  <article class="ss-mag-photo">
    <div class="ss-mag-image" aria-hidden="true">
      <span class="ss-mag-figure"></span>
      <span class="ss-mag-light"></span>
    </div>
    <span class="ss-mag-caption">Photo · Iris Hawthorne for The Quarterly</span>
  </article>
  <article class="ss-mag-text">
    <span class="ss-mag-section">SECTION 04 / ESSAY</span>
    <h2 class="ss-mag-head">
      The <em>quiet</em> art of<br />doing one thing<br />at a <em>time.</em>
    </h2>
    <span class="ss-mag-byline">By <b>Iris Hawthorne</b> · Spring 2026</span>
    <p class="ss-mag-lede">
      <span class="ss-mag-drop">A</span>fter a decade of optimizing every minute, the loneliest
      realization wasn't that I had no time. It was that I'd forgotten how to spend it. Three years
      ago I made a small commitment, and it changed everything I thought I knew about productivity.
    </p>
    <blockquote class="ss-mag-pull">
      "The thing about doing one thing at a time is that the thing finally gets your attention."
    </blockquote>
    <p class="ss-mag-out">What I learned was simpler than I expected — and harder to keep.</p>
    <ul class="ss-mag-meta">
      <li><b>12 min</b> read</li>
      <li><b>2,840</b> words</li>
      <li><b>Apr 14</b> issue</li>
    </ul>
  </article>
</section>
```

**CSS:**
```css
.ss-mag {
  display: grid; grid-template-columns: 42% 58%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f4ede0;
  color: #1a1a1a;
  border-radius: 0; overflow: hidden;
  border: 1px solid #1a1a1a;
}
.ss-mag-photo {
  position: relative;
  background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid #1a1a1a;
}
.ss-mag-image {
  position: relative;
  flex: 1;
  background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 100%);
  overflow: hidden;
  isolation: isolate;
}
.ss-mag-figure {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 80%;
  background:
    radial-gradient(ellipse at 50% 12%, #c8a878 0%, #c8a878 8%, transparent 9%),
    linear-gradient(180deg, transparent 8%, #1a3658 8%, #1a3658 100%);
  clip-path: polygon(40% 0, 60% 0, 70% 16%, 80% 38%, 80% 100%, 20% 100%, 20% 38%, 30% 16%);
}
.ss-mag-light {
  position: absolute; top: -10%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle at 50% 0%, rgba(255,200,80,0.35), transparent 70%);
  filter: blur(8px);
}
.ss-mag-caption {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px; font-style: italic;
  color: #c8a878;
}
.ss-mag-text {
  padding: 36px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(0,0,0,0.018) 32px 33px),
    #f9f3e6;
  position: relative;
}
.ss-mag-section {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #1a3658;
}
.ss-mag-head {
  margin: 4px 0 0;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.ss-mag-head em {
  font-style: italic;
  color: #1a3658;
}
.ss-mag-byline {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4a4a4a;
}
.ss-mag-byline b { color: #1a3658; font-weight: 700; }
.ss-mag-lede {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.55;
  color: #1a1a1a;
  column-count: 2;
  column-gap: 24px;
  column-rule: 1px solid #c8a878;
}
.ss-mag-drop {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 500;
  font-style: italic;
  line-height: 0.85;
  float: left;
  padding: 4px 8px 0 0;
  color: #1a3658;
}
.ss-mag-pull {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.4;
  color: #1a3658;
  font-style: italic;
  border-left: 4px solid #1a3658;
  padding: 0 0 0 18px;
  font-weight: 500;
}
.ss-mag-out {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
}
.ss-mag-meta {
  list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid #c8a878; border-bottom: 1px solid #c8a878;
  display: flex; gap: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4a4a4a;
}
.ss-mag-meta b {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a;
  margin-right: 4px;
}
@media (max-width: 720px) {
  .ss-mag { grid-template-columns: 1fr; }
  .ss-mag-photo { border-right: 0; border-bottom: 1px solid #1a1a1a; min-height: 280px; }
  /* .ss-mag-head no longer needs a mobile reset (no desktop overflow). */
  .ss-mag-lede { column-count: 1; }
}
```

### 22. 3D Perspective Keynote

**Type:** Pure CSS
**Description:** Tech keynote — deep navy + holographic gradient + chrome. Two halves tilted in 3D space via <code>perspective</code> + <code>rotateY</code>; left panel angles toward viewer, right panel angles away. The "Apple event slide" feel — premium, sleek, almost cinematic.

**HTML:**
```html
<section class="ss-key" aria-label="Tech keynote split">
  <span class="ss-key-stars" aria-hidden="true"></span>
  <article class="ss-key-left">
    <span class="ss-key-tag">v3 · MAY 2026</span>
    <h2><span class="ss-key-shine">Aurora.</span></h2>
    <p>
      The smallest, fastest, quietest dev environment we've ever shipped. Built for the way you
      actually code.
    </p>
    <ul class="ss-key-feat">
      <li><span>◉</span>0.3s cold start</li>
      <li><span>◉</span>Type-safe everywhere</li>
      <li><span>◉</span>One-click deploy</li>
    </ul>
    <button type="button" class="ss-key-cta">Watch the keynote →</button>
  </article>
  <article class="ss-key-right" aria-hidden="true">
    <div class="ss-key-card">
      <header>
        <span class="ss-key-dots"> <i></i><i></i><i></i> </span>
        <strong>~/aurora</strong>
      </header>
      <pre><code><span class="ss-key-c">// 0.3s cold start</span>
<span class="ss-key-k">import</span> { app } <span class="ss-key-k">from</span> <span class="ss-key-s">'aurora'</span>;
<span class="ss-key-k">const</span> server <span class="ss-key-o">=</span> <span class="ss-key-fn">app</span>();
<span class="ss-key-fn">server.listen</span>(<span class="ss-key-n">3000</span>);</code></pre>
      <footer>
        <span class="ss-key-stat"><b>0.3s</b><em>start</em></span>
        <span class="ss-key-stat"><b>4.2 MB</b><em>bundle</em></span>
        <span class="ss-key-stat"><b>99 ms</b><em>p99</em></span>
      </footer>
    </div>
    <span class="ss-key-glow"></span>
  </article>
</section>
```

**CSS:**
```css
.ss-key {
  position: relative;
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(80,40,180,0.4) 0%, transparent 60%),
    radial-gradient(60% 80% at 80% 80%, rgba(0,180,200,0.3) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a2a 0%, #050518 100%);
  color: #fff;
  border-radius: 0; overflow: hidden;
  perspective: 1400px;
  isolation: isolate;
}
.ss-key-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 22%, #fff, transparent),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 52% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 73% 18%, #fff, transparent),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 64% 60%, #fff, transparent),
    radial-gradient(1px 1px at 12% 76%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 84% 78%, rgba(255,255,255,0.5), transparent);
  pointer-events: none;
  z-index: 0;
}
.ss-key-left {
  padding: 44px 36px 44px 44px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transform: rotateY(8deg) translateZ(20px);
  transform-origin: right center;
  z-index: 2;
}
.ss-key-tag {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #00d4ff;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 12px;
}
.ss-key-left h2 {
  margin: 4px 0 0;
  font-size: clamp(60px, 9vw, 110px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #fff;
  font-style: italic;
}
.ss-key-shine {
  background: linear-gradient(90deg, #fff 0%, #c4b5fd 30%, #00d4ff 60%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ss-key-sweep 4s linear infinite;
}
@keyframes ss-key-sweep {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .ss-key-shine { animation: none; } }
.ss-key-left p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #c8c4e0;
  max-width: 380px;
}
.ss-key-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-key-feat li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px;
  color: #fff;
}
.ss-key-feat span { color: #00d4ff; font-size: 13px; text-shadow: 0 0 12px rgba(0,212,255,0.6); }
.ss-key-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: linear-gradient(135deg, #c4b5fd 0%, #00d4ff 100%);
  color: #050518;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,212,255,0.4);
  transition: transform 0.16s, box-shadow 0.16s;
}
.ss-key-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,212,255,0.55); }
.ss-key-right {
  position: relative;
  padding: 44px 32px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
  z-index: 1;
}
.ss-key-card {
  position: relative;
  width: 100%; max-width: 420px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%),
    #14143a;
  border: 1px solid rgba(196,181,253,0.3);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,212,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: rotateY(-12deg) rotateX(4deg) translateZ(-20px);
  z-index: 2;
}
.ss-key-card header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ss-key-dots { display: inline-flex; gap: 6px; }
.ss-key-dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.ss-key-dots i:nth-child(1) { background: #ff5f57; }
.ss-key-dots i:nth-child(2) { background: #febc2e; }
.ss-key-dots i:nth-child(3) { background: #28c840; }
.ss-key-card header strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8ab8;
  font-weight: 500;
}
.ss-key-card pre {
  margin: 0;
  padding: 18px 22px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13.5px;
  line-height: 1.7;
  color: #fff;
}
.ss-key-c  { color: #6a6e96; font-style: italic; }
.ss-key-k  { color: #c4b5fd; font-weight: 600; }
.ss-key-s  { color: #fcd34d; }
.ss-key-o  { color: #ff52aa; }
.ss-key-fn { color: #00d4ff; }
.ss-key-n  { color: #a3e635; }
.ss-key-card footer {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ss-key-stat {
  padding: 14px 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 2px;
}
.ss-key-stat:last-child { border-right: 0; }
.ss-key-stat b {
  font-size: 18px; font-weight: 700;
  color: #00d4ff;
  letter-spacing: -0.02em;
}
.ss-key-stat em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #6a6e96;
}
.ss-key-glow {
  position: absolute;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(0,212,255,0.4), transparent 70%);
  filter: blur(60px);
  z-index: 0;
}
@media (max-width: 720px) {
  .ss-key { grid-template-columns: 1fr; perspective: none; }
  .ss-key-left, .ss-key-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-key-left, .ss-key-card { transform: none; }
}
```

---
## 28 CSS Stacked Card Designs

URL: https://codefronts.com/components/css-stacked-cards/
Description: 28 hand-coded CSS stacked-card designs with live demos — editorial hover-reveal deck, scroll-activated sticky stack, pure-CSS testimonial slider with radio inputs, 3D isometric pricing tiers, swipeable Tinder-style flashcards, minimalist bento grid with embedded mini-stack, poker-deck fan, botanical fan spread, scattered Polaroids, staircase bricks, glassmorphic perspective tunnel, iOS notification pile, receipt roll, real scratch-off cards and more. 20 pure CSS + 8 with a small vanilla JS snippet for drag/click/scroll interactivity. prefers-reduced-motion respected, scoped class names, MIT-licensed.
Demo count: 28

### 01. CSS Stacked Cards Hover Reveal

**Type:** Pure CSS
**Description:** An editorial-style deck of portfolio cards sitting in a slightly rotated pile on a warm paper backdrop. On hover the four cards fan outward into an arc, and hovering any single card lifts it forward. Built for creative portfolios, team profiles, and service offerings where a tactile micro-interaction matters more than chrome. Pure CSS, no JavaScript.

**HTML:**
```html
<div class="scd-hovr">
  <div class="scd-hovr__stage" data-scd-hovr="scene">
    <div class="scd-hovr__deck" data-scd-hovr="deck">
      <div class="scd-hovr__card scd-hovr__card--c4">
        <div class="scd-hovr__surface"><div class="scd-hovr__grad"></div><div class="scd-hovr__glow"></div><div class="scd-hovr__sheen"></div></div>
        <div class="scd-hovr__content"><div class="scd-hovr__meta"><span class="scd-hovr__chip">Type</span><span class="scd-hovr__idx">04</span></div>
        <div class="scd-hovr__title">Letter<br><em>forms</em></div>
        <div class="scd-hovr__row"><p class="scd-hovr__desc">An editorial typography system built for screens.</p></div>
        <span class="scd-hovr__cta">View case <span class="scd-hovr__arrow">&rarr;</span></span></div>
      </div>
      <div class="scd-hovr__card scd-hovr__card--c3">
        <div class="scd-hovr__surface"><div class="scd-hovr__grad"></div><div class="scd-hovr__glow"></div><div class="scd-hovr__sheen"></div></div>
        <div class="scd-hovr__content"><div class="scd-hovr__meta"><span class="scd-hovr__chip">Motion</span><span class="scd-hovr__idx">03</span></div>
        <div class="scd-hovr__title">In<br><em>motion</em></div>
        <div class="scd-hovr__row"><p class="scd-hovr__desc">Kinetic brand identity that moves with intent.</p></div>
        <span class="scd-hovr__cta">View case <span class="scd-hovr__arrow">&rarr;</span></span></div>
      </div>
      <div class="scd-hovr__card scd-hovr__card--c2">
        <div class="scd-hovr__surface"><div class="scd-hovr__grad"></div><div class="scd-hovr__glow"></div><div class="scd-hovr__sheen"></div></div>
        <div class="scd-hovr__content"><div class="scd-hovr__meta"><span class="scd-hovr__chip">Color</span><span class="scd-hovr__idx">02</span></div>
        <div class="scd-hovr__title">Warm<br><em>tones</em></div>
        <div class="scd-hovr__row"><p class="scd-hovr__desc">Palette &amp; art direction with a human warmth.</p></div>
        <span class="scd-hovr__cta">View case <span class="scd-hovr__arrow">&rarr;</span></span></div>
      </div>
      <div class="scd-hovr__card scd-hovr__card--c1">
        <div class="scd-hovr__surface"><div class="scd-hovr__grad"></div><div class="scd-hovr__glow"></div><div class="scd-hovr__sheen"></div></div>
        <div class="scd-hovr__content"><div class="scd-hovr__meta"><span class="scd-hovr__chip">Index</span><span class="scd-hovr__idx">01</span></div>
        <div class="scd-hovr__title">Selected<br><em>works</em></div>
        <div class="scd-hovr__row"><p class="scd-hovr__desc">Hover to open the deck. Move to explore.</p></div>
        <span class="scd-hovr__cta">Begin <span class="scd-hovr__arrow">&rarr;</span></span></div>
      </div>
    </div>
    <div class="scd-hovr__floor"></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');

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

.scd-hovr {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #05060a;
  font-family: 'Geist', sans-serif;
}
.scd-hovr::before {
  content: '';
  position: absolute; inset: -30%;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(99,102,241,.35), transparent 70%),
    radial-gradient(45% 45% at 80% 25%, rgba(236,72,153,.3), transparent 70%),
    radial-gradient(50% 50% at 50% 85%, rgba(45,212,191,.28), transparent 70%);
  filter: blur(20px);
  animation: scd-hovr-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes scd-hovr-drift {
  0% { transform: translate(-3%,-2%) scale(1); }
  100% { transform: translate(4%,3%) scale(1.12); }
}
.scd-hovr::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.scd-hovr__stage { position: relative; width: 300px; height: 400px; perspective: 1300px; z-index: 1; }
.scd-hovr__deck { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .25s ease-out; }
.scd-hovr__card {
  position: absolute; inset: 0;
  border-radius: 24px;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.16,1,.3,1), box-shadow .6s, filter .6s;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.scd-hovr__surface { position: absolute; inset: 0; backdrop-filter: blur(8px); }
.scd-hovr__grad {
  position: absolute; inset: 0;
  opacity: .9;
  background-size: 200% 200%;
  animation: scd-hovr-flow 8s ease infinite;
}
@keyframes scd-hovr-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.scd-hovr__glow {
  position: absolute; inset: 0;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,40%), rgba(255,255,255,.4), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .5s;
}
.scd-hovr__card:hover .scd-hovr__glow { opacity: 1; }
.scd-hovr__sheen {
  position: absolute; top: -60%; left: -30%;
  width: 60%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: rotate(18deg) translateX(-220px);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.scd-hovr__card:hover .scd-hovr__sheen { transform: rotate(18deg) translateX(560px); }

.scd-hovr__content {
  position: absolute; inset: 0;
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateZ(50px);
}
.scd-hovr__meta { display: flex; align-items: center; gap: 10px; }
.scd-hovr__chip {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  color: #fff; font-weight: 500;
  border: 1px solid rgba(255,255,255,.22);
}
.scd-hovr__idx {
  margin-left: auto;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 1.3rem; color: rgba(255,255,255,.7);
}
.scd-hovr__title {
  font-family: 'Instrument Serif', serif;
  font-size: 3rem; line-height: .92;
  color: #fff; letter-spacing: -.01em;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.scd-hovr__title em { font-style: italic; }
.scd-hovr__desc { font-size: .8rem; color: rgba(255,255,255,.78); line-height: 1.5; max-width: 24ch; }
.scd-hovr__row { display: flex; align-items: center; justify-content: space-between; }
.scd-hovr__cta {
  font-size: .78rem; color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s .1s, transform .5s .1s;
}
.scd-hovr__card:hover .scd-hovr__cta { opacity: 1; transform: translateY(0); }
.scd-hovr__arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: grid; place-items: center;
  font-size: .8rem;
}

.scd-hovr__card--c1 .scd-hovr__grad { background: linear-gradient(135deg,#1e1b4b,#4338ca 40%,#6d28d9); }
.scd-hovr__card--c2 .scd-hovr__grad { background: linear-gradient(135deg,#831843,#be185d 45%,#f43f5e); }
.scd-hovr__card--c3 .scd-hovr__grad { background: linear-gradient(135deg,#064e3b,#0d9488 50%,#2dd4bf); }
.scd-hovr__card--c4 .scd-hovr__grad { background: linear-gradient(135deg,#7c2d12,#ea580c 45%,#f59e0b); }

.scd-hovr__card--c1 { transform: translateZ(0) translateY(0) rotate(-3deg); z-index: 4; }
.scd-hovr__card--c2 { transform: translateZ(-40px) translateY(10px) rotate(2deg); z-index: 3; filter: brightness(.85); }
.scd-hovr__card--c3 { transform: translateZ(-80px) translateY(20px) rotate(-2deg); z-index: 2; filter: brightness(.72); }
.scd-hovr__card--c4 { transform: translateZ(-120px) translateY(30px) rotate(3deg); z-index: 1; filter: brightness(.6); }

/* Stage-spread fan — only when no individual card is being hovered.
   Without the :not(:has(...:hover)) guard, hovering any single card
   fires BOTH this stage spread AND the per-card lift below. The two
   transforms fight on the same .8s cubic-bezier transition, sliding
   the card out from under the cursor mid-animation → cursor leaves
   the card → spread snaps back → cursor re-enters → infinite flicker.
   Restricting the spread to "stage hover AND nothing inside being
   hovered" lets the spread fan cleanly when you first enter the
   stage area, then freezes at the moment your cursor lands on a card. */
.scd-hovr__stage:hover:not(:has(.scd-hovr__card:hover)) .scd-hovr__card--c1 { transform: translate(-165px,-30px) translateZ(40px) rotate(-12deg); filter: brightness(1); }
.scd-hovr__stage:hover:not(:has(.scd-hovr__card:hover)) .scd-hovr__card--c2 { transform: translate(-55px,18px)  translateZ(20px) rotate(-4deg); filter: brightness(1); }
.scd-hovr__stage:hover:not(:has(.scd-hovr__card:hover)) .scd-hovr__card--c3 { transform: translate(55px,18px)   translateZ(20px) rotate(4deg);  filter: brightness(1); }
.scd-hovr__stage:hover:not(:has(.scd-hovr__card:hover)) .scd-hovr__card--c4 { transform: translate(165px,-30px) translateZ(40px) rotate(12deg); filter: brightness(1); }

/* When a card IS being hovered, write each card's hovered transform
   explicitly — keeping its fanned x/y position AND adding the lift
   (translateZ + scale). This way the transform doesn't snap the card
   back to (0,0) which is what caused the flicker. */
.scd-hovr__stage:hover .scd-hovr__card--c1:hover { transform: translate(-165px,-56px) translateZ(90px) rotate(-12deg) scale(1.06); filter: brightness(1.05); z-index: 9; }
.scd-hovr__stage:hover .scd-hovr__card--c2:hover { transform: translate(-55px,-8px)  translateZ(90px) rotate(-4deg)  scale(1.06); filter: brightness(1.05); z-index: 9; }
.scd-hovr__stage:hover .scd-hovr__card--c3:hover { transform: translate(55px,-8px)   translateZ(90px) rotate(4deg)   scale(1.06); filter: brightness(1.05); z-index: 9; }
.scd-hovr__stage:hover .scd-hovr__card--c4:hover { transform: translate(165px,-56px) translateZ(90px) rotate(12deg)  scale(1.06); filter: brightness(1.05); z-index: 9; }

.scd-hovr__card:hover { box-shadow: 0 50px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 40px rgba(255,255,255,.12); }

.scd-hovr__floor {
  position: absolute; bottom: -70px; left: 50%;
  width: 240px; height: 40px;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%);
  transform: translateX(-50%);
  filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  .scd-hovr::before,
  .scd-hovr__grad,
  .scd-hovr__sheen,
  .scd-hovr__deck,
  .scd-hovr__card,
  .scd-hovr__cta { animation: none !important; transition: none !important; }
}
```

### 02. Scroll-Activated Stacked Cards (Sticky Stack)

**Type:** CSS + JS
**Description:** A vertical "How It Works" sequence where each step pins with position: sticky and the previous card scales down and dims as the next slides over it, keeping the reader anchored as they scroll. Ideal for feature sections, agency workflows, and process pages. Scroll the demo to see each phase stack over the last.

**HTML:**
```html
<div class="scd-stick">
  <div class="scd-stick__rail">
    <span class="scd-stick__pip scd-stick__pip--on"></span><span class="scd-stick__pip"></span><span class="scd-stick__pip"></span><span class="scd-stick__pip"></span>
  </div>
  <div class="scd-stick__scroll-wrap">
    <section class="scd-stick__step scd-stick__step--s1"><div class="scd-stick__grad"></div><div class="scd-stick__sheen"></div>
      <div class="scd-stick__top"><span class="scd-stick__idx">01</span><span class="scd-stick__chip">Phase one</span></div>
      <div><h2 class="scd-stick__h2">Discover</h2><p class="scd-stick__p">We map your goals and audit exactly where you stand today.</p><div class="scd-stick__bar"><i></i></div></div></section>
    <section class="scd-stick__step scd-stick__step--s2"><div class="scd-stick__grad"></div><div class="scd-stick__sheen"></div>
      <div class="scd-stick__top"><span class="scd-stick__idx">02</span><span class="scd-stick__chip">Phase two</span></div>
      <div><h2 class="scd-stick__h2">Design</h2><p class="scd-stick__p">Concepts take shape through rapid, collaborative iteration.</p><div class="scd-stick__bar"><i></i></div></div></section>
    <section class="scd-stick__step scd-stick__step--s3"><div class="scd-stick__grad"></div><div class="scd-stick__sheen"></div>
      <div class="scd-stick__top"><span class="scd-stick__idx">03</span><span class="scd-stick__chip">Phase three</span></div>
      <div><h2 class="scd-stick__h2">Build</h2><p class="scd-stick__p">Production-ready code, tested and shipped with real care.</p><div class="scd-stick__bar"><i></i></div></div></section>
    <section class="scd-stick__step scd-stick__step--s4"><div class="scd-stick__grad"></div><div class="scd-stick__sheen"></div>
      <div class="scd-stick__top"><span class="scd-stick__idx">04</span><span class="scd-stick__chip">Phase four</span></div>
      <div><h2 class="scd-stick__h2">Launch</h2><p class="scd-stick__p">We go live, measure everything, then refine what works.</p><div class="scd-stick__bar"><i></i></div></div></section>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&display=swap');

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

/* Page-scroll demo — mirrors the original source body. The visitor's
   own page (or the playground iframe) provides the scroll; we do NOT
   create an internal overflow:auto scroller. */
.scd-stick {
  position: relative;
  min-height: 100vh;
  background: #05060a;
  font-family: 'Geist', sans-serif;
  color: #fff;
  scroll-behavior: smooth;
}
.scd-stick::before {
  content: '';
  position: fixed; inset: -30%; z-index: 0;
  background:
    radial-gradient(40% 40% at 25% 25%, rgba(99,102,241,.30), transparent 70%),
    radial-gradient(45% 45% at 75% 30%, rgba(236,72,153,.26), transparent 70%),
    radial-gradient(50% 50% at 50% 80%, rgba(45,212,191,.24), transparent 70%);
  filter: blur(30px);
  animation: scd-stick-drift 20s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes scd-stick-drift {
  0% { transform: translate(-3%,-2%) scale(1); }
  100% { transform: translate(4%,3%) scale(1.1); }
}
.scd-stick::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.scd-stick__scroll-wrap {
  position: relative;
  z-index: 1;
  width: min(460px, 92vw);
  margin: 0 auto;
  /* vh-based padding matches the source — generous space above + below
     the deck so each card has room to pin without crowding the viewport
     edges. */
  padding: 55vh 0 75vh;
}

.scd-stick__rail {
  position: fixed; top: 50%; right: 24px;
  transform: translateY(-50%);
  z-index: 5;
  display: flex; flex-direction: column; gap: 14px;
}
.scd-stick__pip { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: all .4s; display: block; }
.scd-stick__pip--on { background: #fff; height: 26px; border-radius: 6px; box-shadow: 0 0 14px rgba(255,255,255,.6); }

.scd-stick__step {
  position: sticky;
  top: 20vh;
  height: 320px;
  border-radius: 28px;
  padding: 38px;
  margin-bottom: 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  transform-origin: 50% 0;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  backdrop-filter: blur(6px);
}
.scd-stick__grad {
  position: absolute; inset: 0; z-index: -1;
  opacity: .95;
  background-size: 200% 200%;
  animation: scd-stick-flow 9s ease infinite;
}
@keyframes scd-stick-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.scd-stick__sheen {
  position: absolute; top: -50%; left: -30%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg);
  animation: scd-stick-sweep 6s ease-in-out infinite;
}
@keyframes scd-stick-sweep {
  0%, 100% { transform: rotate(18deg) translateX(-300px); }
  50% { transform: rotate(18deg) translateX(700px); }
}

.scd-stick__top { display: flex; align-items: center; gap: 14px; }
.scd-stick__idx {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 4rem; line-height: .8; opacity: .9;
  text-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.scd-stick__chip {
  margin-left: auto;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}
.scd-stick__h2 { font-family: 'Instrument Serif', serif; font-size: 2.4rem; letter-spacing: -.01em; }
.scd-stick__p { opacity: .88; max-width: 32ch; line-height: 1.55; font-weight: 300; }
.scd-stick__bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; margin-top: 16px; }
.scd-stick__bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 4px; transition: width .5s; }

.scd-stick__step--s1 { top: 20vh; }
.scd-stick__step--s1 .scd-stick__grad { background: linear-gradient(135deg,#1e1b4b,#4338ca 45%,#7c3aed); }
.scd-stick__step--s2 { top: 22vh; }
.scd-stick__step--s2 .scd-stick__grad { background: linear-gradient(135deg,#831843,#be185d 45%,#fb7185); }
.scd-stick__step--s3 { top: 24vh; }
.scd-stick__step--s3 .scd-stick__grad { background: linear-gradient(135deg,#064e3b,#0d9488 50%,#34d399); }
.scd-stick__step--s4 { top: 26vh; }
.scd-stick__step--s4 .scd-stick__grad { background: linear-gradient(135deg,#7c2d12,#ea580c 45%,#fbbf24); }

@media (prefers-reduced-motion: reduce) {
  .scd-stick::before,
  .scd-stick__grad,
  .scd-stick__sheen,
  .scd-stick__step,
  .scd-stick__bar i,
  .scd-stick__pip { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.scd-stick');
  if (!root) return;
  const steps = [...root.querySelectorAll('.scd-stick__step')];
  const pips = [...root.querySelectorAll('.scd-stick__pip')];
  if (!steps.length) return;

  function update() {
    let active = 0;
    steps.forEach((s, i) => {
      const r = s.getBoundingClientRect();
      const stickTop = window.innerHeight * (0.20 + i * 0.02);
      const next = steps[i + 1];
      if (next) {
        const nr = next.getBoundingClientRect();
        const prog = Math.min(Math.max((stickTop + 320 - nr.top) / 320, 0), 1);
        s.style.transform = `scale(${1 - prog * 0.10}) translateY(${prog * -8}px)`;
        s.style.filter = `brightness(${1 - prog * 0.35})`;
        const fill = s.querySelector('.scd-stick__bar i');
        if (fill) fill.style.width = (prog * 100) + '%';
      } else {
        const fill = s.querySelector('.scd-stick__bar i');
        if (fill) fill.style.width = '100%';
      }
      if (r.top <= stickTop + 10) active = i;
    });
    pips.forEach((p, i) => p.classList.toggle('scd-stick__pip--on', i === active));
  }

  window.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update);
  update();
})();
```

### 03. Pure CSS Stacked Card Testimonial Slider

**Type:** Pure CSS
**Description:** A compact social-proof widget built entirely with hidden radio inputs and the :checked selector — zero JavaScript and no heavy slider libraries. The top review sits crisp while the next two peek behind it; clicking the dots cycles a card to the front. Perfect for landing-page testimonial sections where space is at a premium.

**HTML:**
```html
<div class="scd-test">
  <div class="scd-test__stage">
    <input type="radio" name="scd-test-t" id="scd-test-t1" class="scd-test__radio scd-test__radio--r1" checked>
    <input type="radio" name="scd-test-t" id="scd-test-t2" class="scd-test__radio scd-test__radio--r2">
    <input type="radio" name="scd-test-t" id="scd-test-t3" class="scd-test__radio scd-test__radio--r3">
    <div class="scd-test__slider">
      <div class="scd-test__quote scd-test__quote--q1"><p>&ldquo;This completely changed how our team ships. We cut launch time in half.&rdquo;</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#ff9a3c,#ff5e62)"></span><div><h4>Maya Chen</h4><span>Head of Product, Loop</span></div></div></div>
      <div class="scd-test__quote scd-test__quote--q2"><p>&ldquo;Beautiful, fast, and genuinely a joy to use every single day.&rdquo;</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#43cea2,#185a9d)"></span><div><h4>Theo Marsh</h4><span>Founder, Northbeam</span></div></div></div>
      <div class="scd-test__quote scd-test__quote--q3"><p>&ldquo;The support alone is worth it. Best decision we made this year.&rdquo;</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#c471f5,#7f53ac)"></span><div><h4>Lena Ortiz</h4><span>CTO, Brightside</span></div></div></div>
    </div>
    <div class="scd-test__dots">
      <label for="scd-test-t1"></label><label for="scd-test-t2"></label><label for="scd-test-t3"></label>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,400&family=Geist:wght@400;500;600&display=swap');

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

.scd-test {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg,#fef6ee,#f4e4d4);
  font-family: 'Geist', sans-serif;
}
.scd-test__stage { position: relative; }
.scd-test__radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.scd-test__slider { position: relative; width: 330px; height: 300px; }
.scd-test__quote {
  position: absolute; inset: 0;
  background: #fffdfa;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 18px 40px rgba(120,80,50,.18);
  border: 1px solid #f0e2d2;
  transition: transform .6s cubic-bezier(.3,.9,.3,1), opacity .6s;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(28px) scale(.88);
  opacity: 0;
  z-index: 1;
}
.scd-test__quote p {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  color: #3a2e24;
}
.scd-test__who { display: flex; align-items: center; gap: 12px; }
.scd-test__av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: block; }
.scd-test__who h4 { font-size: .9rem; font-weight: 600; color: #2a201a; }
.scd-test__who span { font-size: .78rem; color: #9b7d5f; }

.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q1,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q2,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q3 { transform: translateY(0) scale(1); opacity: 1; z-index: 4; }

.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q2,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q3,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q1 { transform: translateY(14px) scale(.94); opacity: .55; z-index: 3; }

.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q3,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q1,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q2 { transform: translateY(28px) scale(.88); opacity: .3; z-index: 2; }

.scd-test__dots { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.scd-test__dots label {
  width: 11px; height: 11px; border-radius: 50%;
  background: #d8c3aa; cursor: pointer;
  transition: background .3s, transform .3s;
}
.scd-test__dots label:hover { background: #c9a98a; }
.scd-test__radio--r1:checked ~ .scd-test__dots label[for="scd-test-t1"],
.scd-test__radio--r2:checked ~ .scd-test__dots label[for="scd-test-t2"],
.scd-test__radio--r3:checked ~ .scd-test__dots label[for="scd-test-t3"] { background: #b8553f; transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .scd-test__quote,
  .scd-test__dots label { transition: none !important; }
}
```

### 04. 3D Overlapping Stacked Cards (Isometric View)

**Type:** Pure CSS
**Description:** Three pricing tiers floated in a true isometric plane using perspective, rotateX, and rotateZ, each lifted on its own translateZ layer. Hover eases the tilt and slides the upper tiers apart so all three prices stay readable. Suited to SaaS pricing pages, product mockups, and high-tech feature highlights.

**HTML:**
```html
<div class="scd-isop">
  <div class="scd-isop__stage">
    <div class="scd-isop__stack">
      <div class="scd-isop__plane scd-isop__plane--p3"><span class="scd-isop__tier">SCALE</span><span class="scd-isop__feat">Unlimited seats &middot; SSO &middot; SLA</span><span class="scd-isop__price">$79<small>/mo</small></span></div>
      <div class="scd-isop__plane scd-isop__plane--p2"><span class="scd-isop__tier">GROWTH</span><span class="scd-isop__feat">10 seats &middot; analytics &middot; API</span><span class="scd-isop__price">$29<small>/mo</small></span></div>
      <div class="scd-isop__plane scd-isop__plane--p1"><span class="scd-isop__tier">STARTER</span><span class="scd-isop__feat">1 seat &middot; core features</span><span class="scd-isop__price">$9<small>/mo</small></span></div>
    </div>
    <span class="scd-isop__hint">HOVER TO COMPARE PLANS</span>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=DM+Mono:wght@400&display=swap');

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

.scd-isop {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,#191d2e,#0a0c14);
  font-family: 'DM Mono', monospace;
}
.scd-isop__stage { perspective: 1400px; width: 340px; height: 420px; position: relative; }
.scd-isop__stack {
  position: relative;
  width: 100%; height: 100%;
  transform: rotateX(52deg) rotateZ(-34deg);
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3,.9,.3,1);
}
.scd-isop__stage:hover .scd-isop__stack { transform: rotateX(46deg) rotateZ(-28deg); }

.scd-isop__plane {
  position: absolute;
  left: 50px; top: 120px;
  width: 240px; height: 150px;
  border-radius: 18px;
  padding: 22px;
  transform-style: preserve-3d;
  box-shadow: 0 36px 60px rgba(0,0,0,.55);
  transition: transform .65s cubic-bezier(.3,.9,.3,1);
  display: flex; flex-direction: column; justify-content: space-between;
}
.scd-isop__tier { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.scd-isop__feat { font-size: .72rem; opacity: .85; line-height: 1.6; }
.scd-isop__price { font-family: 'Space Grotesk', sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1; }
.scd-isop__price small { font-size: .85rem; opacity: .7; }

.scd-isop__plane--p1 { background: linear-gradient(135deg,#3a4cf0,#6d7cff); color: #fff; }
.scd-isop__plane--p2 { background: linear-gradient(135deg,#f0466b,#ff7aa0); color: #fff; }
.scd-isop__plane--p3 { background: linear-gradient(135deg,#11b894,#46f0c4); color: #03241c; }

.scd-isop__plane--p3 { transform: translateZ(12px) translate(0,0); }
.scd-isop__plane--p2 { transform: translateZ(24px) translate(0,0); }
.scd-isop__plane--p1 { transform: translateZ(36px) translate(0,0); }

.scd-isop__stage:hover .scd-isop__plane--p1 { transform: translateZ(36px) translate(-150px,-150px); }
.scd-isop__stage:hover .scd-isop__plane--p2 { transform: translateZ(24px) translate(0,0); }
.scd-isop__stage:hover .scd-isop__plane--p3 { transform: translateZ(12px) translate(150px,150px); }

.scd-isop__hint {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  color: #5b6480;
  font-size: .72rem;
  letter-spacing: .18em;
  transition: opacity .4s;
}
.scd-isop__stage:hover .scd-isop__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .scd-isop__stack,
  .scd-isop__plane,
  .scd-isop__hint { transition: none !important; }
}
```

### 05. Swipeable / Click-to-Front Stacked Cards

**Type:** CSS + JS
**Description:** A Tinder-style flashcard deck optimized for the web: drag the top card (mouse or touch) past a threshold to send it to the back, or simply click it to cycle through. The stack re-layers smoothly each time. Great for flashcard learning apps, quick-choice discovery widgets, and interactive portfolios.

**HTML:**
```html
<div class="scd-flash">
  <div class="scd-flash__stage" data-scd-flash="stage">
    <div class="scd-flash__counter"><span data-scd-flash="pos">01 / 04</span><span class="scd-flash__prog"><i data-scd-flash="bar" style="width:0%"></i></span><span>DECK</span></div>
    <div class="scd-flash__deck" data-scd-flash="deck">
      <div class="scd-flash__card scd-flash__card--g4"><div class="scd-flash__grad"></div><div class="scd-flash__glow"></div><div class="scd-flash__sheen"></div>
        <span class="scd-flash__verdict scd-flash__verdict--know">KNOW &check;</span><span class="scd-flash__verdict scd-flash__verdict--again">AGAIN &#8635;</span>
        <div class="scd-flash__face"><span class="scd-flash__tag">Biology</span><div class="scd-flash__term">Mitosis</div><div><p class="scd-flash__def">Cell division producing two genetically identical daughter cells.</p><br><span class="scd-flash__fliphint">drag &middot; or click for next</span></div></div></div>
      <div class="scd-flash__card scd-flash__card--g3"><div class="scd-flash__grad"></div><div class="scd-flash__glow"></div><div class="scd-flash__sheen"></div>
        <span class="scd-flash__verdict scd-flash__verdict--know">KNOW &check;</span><span class="scd-flash__verdict scd-flash__verdict--again">AGAIN &#8635;</span>
        <div class="scd-flash__face"><span class="scd-flash__tag">Physics</span><div class="scd-flash__term">Photon</div><div><p class="scd-flash__def">A discrete quantum, or packet, of electromagnetic energy &mdash; light.</p><br><span class="scd-flash__fliphint">drag &middot; or click for next</span></div></div></div>
      <div class="scd-flash__card scd-flash__card--g2"><div class="scd-flash__grad"></div><div class="scd-flash__glow"></div><div class="scd-flash__sheen"></div>
        <span class="scd-flash__verdict scd-flash__verdict--know">KNOW &check;</span><span class="scd-flash__verdict scd-flash__verdict--again">AGAIN &#8635;</span>
        <div class="scd-flash__face"><span class="scd-flash__tag">Thermo</span><div class="scd-flash__term">Entropy</div><div><p class="scd-flash__def">A measure of disorder; the tendency of systems toward equilibrium.</p><br><span class="scd-flash__fliphint">drag &middot; or click for next</span></div></div></div>
      <div class="scd-flash__card scd-flash__card--g1"><div class="scd-flash__grad"></div><div class="scd-flash__glow"></div><div class="scd-flash__sheen"></div>
        <span class="scd-flash__verdict scd-flash__verdict--know">KNOW &check;</span><span class="scd-flash__verdict scd-flash__verdict--again">AGAIN &#8635;</span>
        <div class="scd-flash__face"><span class="scd-flash__tag">Biology</span><div class="scd-flash__term">Osmosis</div><div><p class="scd-flash__def">Water moving across a semipermeable membrane toward higher solute.</p><br><span class="scd-flash__fliphint">drag &middot; or click for next</span></div></div></div>
    </div>
    <div class="scd-flash__hint">swipe <b>right = know</b> &middot; <i>left = review</i> &middot; click to skip</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;700&family=Geist+Mono:wght@400&display=swap');

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

.scd-flash {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #05060a;
  font-family: 'Geist', sans-serif;
}
.scd-flash::before {
  content: '';
  position: absolute; inset: -30%;
  background:
    radial-gradient(40% 40% at 22% 28%, rgba(56,189,248,.30), transparent 70%),
    radial-gradient(45% 45% at 78% 25%, rgba(168,85,247,.28), transparent 70%),
    radial-gradient(50% 50% at 50% 82%, rgba(244,114,182,.24), transparent 70%);
  filter: blur(26px);
  animation: scd-flash-drift 19s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes scd-flash-drift {
  0% { transform: translate(-3%,-2%) scale(1); }
  100% { transform: translate(4%,3%) scale(1.1); }
}
.scd-flash::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.scd-flash__stage { position: relative; width: 280px; height: 380px; perspective: 1300px; z-index: 1; }
.scd-flash__counter {
  position: absolute; top: -46px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Geist Mono', monospace;
  font-size: .72rem; letter-spacing: .15em;
  color: rgba(255,255,255,.55);
}
.scd-flash__prog { flex: 1; height: 3px; margin: 0 12px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.scd-flash__prog i { display: block; height: 100%; background: #fff; border-radius: 3px; transition: width .4s; box-shadow: 0 0 10px rgba(255,255,255,.6); }

.scd-flash__deck { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.scd-flash__card {
  position: absolute; inset: 0;
  border-radius: 26px;
  transform-style: preserve-3d;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.09) inset;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s, box-shadow .5s;
}
.scd-flash__card.scd-flash__card--drag { transition: none; cursor: grabbing; }
.scd-flash__grad { position: absolute; inset: 0; background-size: 200% 200%; animation: scd-flash-flow 8s ease infinite; }
@keyframes scd-flash-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.scd-flash__glow {
  position: absolute; inset: 0;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,40%), rgba(255,255,255,.4), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .4s;
}
.scd-flash__card:hover .scd-flash__glow { opacity: 1; }
.scd-flash__sheen {
  position: absolute; top: -50%; left: -30%;
  width: 55%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: rotate(18deg) translateX(-260px);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}

.scd-flash__verdict {
  position: absolute; top: 24px;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: .85rem; font-weight: 700;
  letter-spacing: .1em;
  border: 2px solid;
  opacity: 0;
  transition: opacity .15s;
  backdrop-filter: blur(4px);
}
.scd-flash__verdict--know { right: 22px; color: #86efac; border-color: #86efac; transform: rotate(10deg); }
.scd-flash__verdict--again { left: 22px; color: #fca5a5; border-color: #fca5a5; transform: rotate(-10deg); }

.scd-flash__face {
  position: absolute; inset: 0;
  padding: 30px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateZ(40px);
  color: #fff;
}
.scd-flash__tag {
  font-family: 'Geist Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  align-self: flex-start;
  backdrop-filter: blur(6px);
}
.scd-flash__term {
  font-family: 'Instrument Serif', serif;
  font-size: 2.7rem; line-height: 1; letter-spacing: -.01em;
  text-shadow: 0 3px 18px rgba(0,0,0,.3);
}
.scd-flash__def { font-size: .9rem; opacity: .9; line-height: 1.5; font-weight: 300; }
.scd-flash__fliphint { font-family: 'Geist Mono', monospace; font-size: .62rem; letter-spacing: .18em; opacity: .6; }

.scd-flash__card--g1 .scd-flash__grad { background: linear-gradient(135deg,#831843,#db2777 45%,#fb7185); }
.scd-flash__card--g2 .scd-flash__grad { background: linear-gradient(135deg,#0c4a6e,#0284c7 45%,#38bdf8); }
.scd-flash__card--g3 .scd-flash__grad { background: linear-gradient(135deg,#064e3b,#059669 50%,#34d399); }
.scd-flash__card--g4 .scd-flash__grad { background: linear-gradient(135deg,#581c87,#7c3aed 45%,#a78bfa); }

.scd-flash__hint {
  position: absolute; bottom: -46px; left: 0; right: 0;
  text-align: center;
  font-family: 'Geist Mono', monospace;
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  letter-spacing: .12em;
}
.scd-flash__hint b { color: #86efac; }
.scd-flash__hint i { color: #fca5a5; font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .scd-flash::before,
  .scd-flash__grad,
  .scd-flash__sheen,
  .scd-flash__card,
  .scd-flash__prog i { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.scd-flash');
  if (!root) return;
  const stage = root.querySelector('[data-scd-flash="stage"]');
  const deck = root.querySelector('[data-scd-flash="deck"]');
  const posEl = root.querySelector('[data-scd-flash="pos"]');
  const barEl = root.querySelector('[data-scd-flash="bar"]');
  if (!stage || !deck) return;

  const total = deck.querySelectorAll('.scd-flash__card').length;
  let done = 0;

  function meter() {
    const current = Math.min(done + 1, total);
    if (posEl) posEl.textContent = String(current).padStart(2, '0') + ' / ' + String(total).padStart(2, '0');
    if (barEl) barEl.style.width = (done / total * 100) + '%';
  }

  function layout(instant) {
    const cards = [...deck.querySelectorAll('.scd-flash__card')];
    cards.forEach((c, i) => {
      const d = cards.length - 1 - i;
      const tf = `translateY(${d * -14}px) translateZ(${-d * 30}px) scale(${1 - d * .05})`;
      if (instant) {
        const t = c.style.transition;
        c.style.transition = 'none';
        c.style.transform = tf;
        void c.offsetWidth;
        c.style.transition = t;
      } else {
        c.style.transform = tf;
      }
      c.style.zIndex = i + 1;
      c.style.opacity = d > 3 ? 0 : 1;
      c.style.filter = `brightness(${1 - d * .12})`;
    });
  }

  function sendBack(card, dir) {
    done++; meter();
    card.style.transform = `translateX(${dir * 480}px) rotate(${dir * 22}deg)`;
    card.style.opacity = '0';
    setTimeout(() => {
      card.style.transition = 'none';
      deck.insertBefore(card, deck.firstElementChild);
      card.style.opacity = '';
      card.style.filter = '';
      const k = card.querySelector('.scd-flash__verdict--know');
      const a = card.querySelector('.scd-flash__verdict--again');
      if (k) k.style.opacity = 0;
      if (a) a.style.opacity = 0;
      layout(true);
      void card.offsetWidth;
      card.style.transition = '';
      if (done >= total) done = 0;
      meter(); bind();
    }, 420);
  }

  let activeTop = null;
  let sx = 0, dx = 0, drag = false, moved = false;
  let know = null, again = null;

  function onDown(e) {
    drag = true; moved = false;
    sx = (e.touches ? e.touches[0].clientX : e.clientX);
    if (activeTop) activeTop.classList.add('scd-flash__card--drag');
  }
  function onMove(e) {
    if (!drag || !activeTop) return;
    dx = (e.touches ? e.touches[0].clientX : e.clientX) - sx;
    if (Math.abs(dx) > 5) moved = true;
    activeTop.style.transform = `translateX(${dx}px) rotate(${dx * .05}deg)`;
    if (know) know.style.opacity = Math.max(0, Math.min(1, dx / 90));
    if (again) again.style.opacity = Math.max(0, Math.min(1, -dx / 90));
  }
  function onUp() {
    if (!drag || !activeTop) return;
    drag = false;
    activeTop.classList.remove('scd-flash__card--drag');
    if (!moved) { sendBack(activeTop, -1); return; }
    if (Math.abs(dx) > 100) {
      sendBack(activeTop, dx > 0 ? 1 : -1);
    } else {
      if (know) know.style.opacity = 0;
      if (again) again.style.opacity = 0;
      layout();
    }
    dx = 0;
  }

  function bind() {
    const cards = [...deck.querySelectorAll('.scd-flash__card')];
    const top = cards[cards.length - 1];
    if (!top) return;
    activeTop = top;
    know = top.querySelector('.scd-flash__verdict--know');
    again = top.querySelector('.scd-flash__verdict--again');
    top.onmousedown = onDown;
    top.ontouchstart = onDown;
  }

  root.addEventListener('mousemove', onMove);
  root.addEventListener('touchmove', onMove, { passive: true });
  root.addEventListener('mouseup', onUp);
  root.addEventListener('touchend', onUp);
  root.addEventListener('mouseleave', onUp);

  stage.addEventListener('mousemove', (e) => {
    stage.querySelectorAll('.scd-flash__card').forEach((c) => {
      const r = c.getBoundingClientRect();
      c.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
      c.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
    });
  });

  meter(); layout(); bind();
})();
```

### 06. Minimalist Bento Grid Stacked Cards

**Type:** Pure CSS
**Description:** A dark, dashboard-style bento grid where one tile embeds a stacked mini-card component to conserve space — channel breakdowns sit collapsed inside a single cell and fan open on hover, while neighboring tiles show stats, a sparkline, and glow accents. Built for analytics dashboards and content-dense grids where stacking saves container real estate.

**HTML:**
```html
<div class="scd-bento">
  <div class="scd-bento__stage">
    <div class="scd-bento__tile scd-bento__tile--tall scd-bento__tile--channels">
      <span class="scd-bento__lbl">Channels</span>
      <div class="scd-bento__substack">
        <div class="scd-bento__mini scd-bento__mini--m1"><span class="scd-bento__lbl">Organic</span><b>62%</b></div>
        <div class="scd-bento__mini scd-bento__mini--m2"><span class="scd-bento__lbl">Paid</span><b>24%</b></div>
        <div class="scd-bento__mini scd-bento__mini--m3"><span class="scd-bento__lbl">Referral</span><b>14%</b></div>
      </div>
    </div>
    <div class="scd-bento__tile scd-bento__tile--wide"><div class="scd-bento__glow" style="background:#34d399"></div><span class="scd-bento__lbl">Revenue</span><div class="scd-bento__val">$48.2k <small>+12%</small></div><div class="scd-bento__spark"><span style="height:40%"></span><span style="height:55%"></span><span style="height:45%"></span><span style="height:70%"></span><span style="height:60%"></span><span style="height:85%"></span><span style="height:100%"></span></div></div>
    <div class="scd-bento__tile"><span class="scd-bento__lbl">Users</span><div class="scd-bento__val">9.1k</div></div>
    <div class="scd-bento__tile"><span class="scd-bento__lbl">Churn</span><div class="scd-bento__val" style="color:#fca5a5">1.8%</div></div>
    <div class="scd-bento__tile"><div class="scd-bento__glow" style="background:#818cf8"></div><span class="scd-bento__lbl">NPS</span><div class="scd-bento__val">72</div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

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

.scd-bento {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0e0f13;
  font-family: 'Geist', sans-serif;
  padding: 20px;
}
.scd-bento__stage {
  display: grid;
  grid-template-columns: repeat(3, 118px);
  grid-template-rows: repeat(3, 118px);
  gap: 12px;
}
.scd-bento__tile {
  background: #191b22;
  border: 1px solid #262934;
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
.scd-bento__tile:hover { border-color: #3a4050; }
.scd-bento__lbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.scd-bento__val { font-size: 1.6rem; font-weight: 700; color: #f3f4f6; margin-top: 4px; }
.scd-bento__val small { font-size: .8rem; color: #34d399; }
.scd-bento__tile--wide { grid-column: span 2; }
.scd-bento__tile--tall { grid-row: span 2; }
.scd-bento__tile--channels { overflow: visible; z-index: 5; }
.scd-bento__tile--channels:hover { z-index: 20; }

.scd-bento__substack {
  position: absolute;
  bottom: 14px; left: 16px; right: 16px;
  height: 54px;
}
.scd-bento__mini {
  position: absolute;
  left: 0; right: 0;
  height: 54px;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: .72rem;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.55);
  transition: transform .45s cubic-bezier(.3,.9,.3,1);
}
.scd-bento__mini .scd-bento__lbl { color: rgba(255,255,255,.85); }
.scd-bento__mini b { font-size: .95rem; display: block; margin-top: 2px; }
.scd-bento__mini--m1 { background: linear-gradient(135deg,#6366f1,#818cf8); z-index: 3; transform: translateY(0); }
.scd-bento__mini--m2 { background: linear-gradient(135deg,#ec4899,#f472b6); z-index: 2; transform: translateY(8px) scale(.95); }
.scd-bento__mini--m3 { background: linear-gradient(135deg,#14b8a6,#2dd4bf); z-index: 1; transform: translateY(16px) scale(.9); }

.scd-bento__tile--channels:hover .scd-bento__mini--m1 { transform: translateY(-120px); }
.scd-bento__tile--channels:hover .scd-bento__mini--m2 { transform: translateY(-58px) scale(1); }
.scd-bento__tile--channels:hover .scd-bento__mini--m3 { transform: translateY(4px) scale(1); }

.scd-bento__spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  margin-top: 10px;
}
.scd-bento__spark span { flex: 1; background: linear-gradient(#34d399,#059669); border-radius: 3px; }
.scd-bento__glow {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .5;
  top: -20px; right: -20px;
}

@media (prefers-reduced-motion: reduce) {
  .scd-bento__tile,
  .scd-bento__mini { transition: none !important; }
}
```

### 07. Classic Deck

**Type:** Pure CSS
**Description:** A casino-green felt table holds a face-up poker hand. Hover and the five cards arc outward into a clean fan, with gold-foil borders and Playfair Display pips. A timeless, tactile take on the standard stacked deck.

**HTML:**
```html
<div class="scd-deck">
  <div class="scd-deck__felt"></div>
  <div class="scd-deck__stage">
    <div class="scd-deck__card"><span class="scd-deck__corner">A&#9824;</span><span class="scd-deck__pip">&#9824;</span><span class="scd-deck__corner scd-deck__corner--br">A&#9824;</span></div>
    <div class="scd-deck__card"><span class="scd-deck__corner">K&#9829;</span><span class="scd-deck__pip" style="color:#9b1b1b">&#9829;</span><span class="scd-deck__corner scd-deck__corner--br">K&#9829;</span></div>
    <div class="scd-deck__card"><span class="scd-deck__corner">Q&#9830;</span><span class="scd-deck__pip">&#9830;</span><span class="scd-deck__corner scd-deck__corner--br">Q&#9830;</span></div>
    <div class="scd-deck__card"><span class="scd-deck__corner">J&#9827;</span><span class="scd-deck__pip">&#9827;</span><span class="scd-deck__corner scd-deck__corner--br">J&#9827;</span></div>
    <div class="scd-deck__card"><span class="scd-deck__corner">10&#9824;</span><span class="scd-deck__pip">&#9824;</span><span class="scd-deck__corner scd-deck__corner--br">10&#9824;</span></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,500&family=Cormorant+Garamond:wght@500&display=swap');

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

.scd-deck {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,#16432e,#0a2419 70%);
  font-family: 'Cormorant Garamond', serif;
}
.scd-deck__felt {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.scd-deck__stage { position: relative; width: 240px; height: 340px; }
.scd-deck__card {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: linear-gradient(160deg,#fffdf6,#f3ead4);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 2px #c9a227, inset 0 0 0 7px #fffdf6;
  display: flex; align-items: center; justify-content: center;
  transition: transform .65s cubic-bezier(.2,.9,.25,1), box-shadow .5s;
  cursor: pointer;
}
.scd-deck__card .scd-deck__corner {
  position: absolute; top: 14px; left: 16px;
  font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #9b1b1b;
}
.scd-deck__card .scd-deck__corner.scd-deck__corner--br {
  top: auto; left: auto; bottom: 14px; right: 16px; transform: rotate(180deg);
}
.scd-deck__pip { font-size: 4.5rem; color: #9b1b1b; font-family: 'Playfair Display', serif; }
.scd-deck__card:nth-child(1) { transform: translateY(0) rotate(0deg); z-index: 5; }
.scd-deck__card:nth-child(2) { transform: translateY(4px) translateX(3px) rotate(2deg); z-index: 4; filter: brightness(.96); }
.scd-deck__card:nth-child(3) { transform: translateY(8px) translateX(6px) rotate(4deg); z-index: 3; filter: brightness(.92); }
.scd-deck__card:nth-child(4) { transform: translateY(12px) translateX(9px) rotate(6deg); z-index: 2; filter: brightness(.88); }
.scd-deck__card:nth-child(5) { transform: translateY(16px) translateX(12px) rotate(8deg); z-index: 1; filter: brightness(.84); }
.scd-deck__stage:hover .scd-deck__card:nth-child(1) { transform: translateY(-30px) rotate(-12deg) translateX(-90px); }
.scd-deck__stage:hover .scd-deck__card:nth-child(2) { transform: translateY(-15px) rotate(-6deg) translateX(-45px); }
.scd-deck__stage:hover .scd-deck__card:nth-child(3) { transform: translateY(0) rotate(0deg); }
.scd-deck__stage:hover .scd-deck__card:nth-child(4) { transform: translateY(-15px) rotate(6deg) translateX(45px); }
.scd-deck__stage:hover .scd-deck__card:nth-child(5) { transform: translateY(-30px) rotate(12deg) translateX(90px); }
.scd-deck__card:hover { box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 2px #c9a227, inset 0 0 0 7px #fffdf6; }

@media (prefers-reduced-motion: reduce) {
  .scd-deck__card { transition: none !important; }
}
```

### 08. Fan Spread

**Type:** Pure CSS
**Description:** Botanical "leaf" cards anchored to a single pivot point. On hover they splay open like a hand of playing cards or a folding fan, alternating terracotta and forest-green tones. Great for portfolios, plant shops, or category menus.

**HTML:**
```html
<div class="scd-fan">
  <div class="scd-fan__stage">
    <div class="scd-fan__leaf"><h3>Fern</h3><span>Pteridophyta</span></div>
    <div class="scd-fan__leaf"><h3>Sage</h3><span>Salvia</span></div>
    <div class="scd-fan__leaf"><h3>Ivy</h3><span>Hedera</span></div>
    <div class="scd-fan__leaf"><h3>Thyme</h3><span>Thymus</span></div>
    <div class="scd-fan__leaf"><h3>Moss</h3><span>Bryophyta</span></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Spectral:wght@400&display=swap');

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

.scd-fan {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#f4ede1,#e6dcc6);
  font-family: 'Spectral', serif;
}
.scd-fan__stage {
  position: relative;
  width: 200px; height: 280px;
  transform: translateY(60px);
}
.scd-fan__leaf {
  position: absolute; inset: 0;
  border-radius: 14px 14px 60px 60px;
  background: linear-gradient(165deg,#1f4d3a,#2d6e4f);
  box-shadow: 0 16px 30px rgba(31,77,58,.35);
  transform-origin: 50% 110%;
  transition: transform .7s cubic-bezier(.34,1.4,.4,1);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
  color: #e9f3ec;
  border: 1px solid rgba(255,255,255,.15);
}
.scd-fan__leaf h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; }
.scd-fan__leaf span { font-size: .8rem; opacity: .7; letter-spacing: .18em; text-transform: uppercase; }
.scd-fan__leaf:nth-child(odd) { background: linear-gradient(165deg,#7a3b2e,#a8543f); }
.scd-fan__leaf:nth-child(1) { transform: rotate(-40deg); }
.scd-fan__leaf:nth-child(2) { transform: rotate(-20deg); }
.scd-fan__leaf:nth-child(3) { transform: rotate(0deg); }
.scd-fan__leaf:nth-child(4) { transform: rotate(20deg); }
.scd-fan__leaf:nth-child(5) { transform: rotate(40deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(1) { transform: rotate(-72deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(2) { transform: rotate(-36deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(3) { transform: rotate(0deg) translateY(-12px); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(4) { transform: rotate(36deg); }
.scd-fan__stage:hover .scd-fan__leaf:nth-child(5) { transform: rotate(72deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-fan__leaf { transition: none !important; }
}
```

### 09. Tilted Polaroids

**Type:** Pure CSS
**Description:** A scattered pile of instant photos with handwritten Caveat captions on a dotted dark surface. Hovering scatters them across the canvas, each lifting and rotating independently. Ideal for galleries, travel logs, and memory boards.

**HTML:**
```html
<div class="scd-pol">
  <div class="scd-pol__stage">
    <div class="scd-pol__polaroid"><div class="scd-pol__photo scd-pol__photo--p1"></div><div class="scd-pol__cap">golden hour</div></div>
    <div class="scd-pol__polaroid"><div class="scd-pol__photo scd-pol__photo--p2"></div><div class="scd-pol__cap">low tide</div></div>
    <div class="scd-pol__polaroid"><div class="scd-pol__photo scd-pol__photo--p3"></div><div class="scd-pol__cap">the trail</div></div>
    <div class="scd-pol__polaroid"><div class="scd-pol__photo scd-pol__photo--p4"></div><div class="scd-pol__cap">dusk in june</div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Courier+Prime&display=swap');

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

.scd-pol {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #2b2622 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%232b2622'/%3E%3Ccircle cx='6' cy='6' r='.6' fill='%23413a32'/%3E%3C/svg%3E");
  font-family: 'Courier Prime', monospace;
}
.scd-pol__stage { position: relative; width: 230px; height: 270px; }
.scd-pol__polaroid {
  position: absolute; inset: 0;
  background: #fbf8f0;
  padding: 14px 14px 56px;
  border-radius: 3px;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  transition: transform .55s cubic-bezier(.2,.8,.3,1.2), box-shadow .4s;
  cursor: pointer;
}
.scd-pol__photo { width: 100%; height: 170px; border-radius: 2px; }
.scd-pol__cap {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem; color: #3a342c;
  text-align: center; margin-top: 10px;
}
.scd-pol__polaroid:nth-child(1) { transform: rotate(-8deg); z-index: 1; }
.scd-pol__polaroid:nth-child(2) { transform: rotate(5deg); z-index: 2; }
.scd-pol__polaroid:nth-child(3) { transform: rotate(-3deg); z-index: 3; }
.scd-pol__polaroid:nth-child(4) { transform: rotate(9deg); z-index: 4; }
.scd-pol__stage:hover .scd-pol__polaroid:nth-child(1) { transform: rotate(-22deg) translate(-110px,28px); }
.scd-pol__stage:hover .scd-pol__polaroid:nth-child(2) { transform: rotate(-7deg) translate(-38px,-10px); }
.scd-pol__stage:hover .scd-pol__polaroid:nth-child(3) { transform: rotate(8deg) translate(38px,-6px); }
.scd-pol__stage:hover .scd-pol__polaroid:nth-child(4) { transform: rotate(20deg) translate(112px,26px); }
.scd-pol__polaroid:hover { box-shadow: 0 26px 50px rgba(0,0,0,.6); z-index: 9 !important; }
.scd-pol__photo--p1 { background: linear-gradient(135deg,#f5a06b,#e2674a); }
.scd-pol__photo--p2 { background: linear-gradient(135deg,#6bb0c4,#3d7d98); }
.scd-pol__photo--p3 { background: linear-gradient(135deg,#9bbf6b,#5f9145); }
.scd-pol__photo--p4 { background: linear-gradient(135deg,#c98bbf,#8d5894); }

@media (prefers-reduced-motion: reduce) {
  .scd-pol__polaroid { transition: none !important; }
}
```

### 10. Staircase Bricks

**Type:** Pure CSS
**Description:** Bold offset blocks descend like a staircase, each a saturated step in a sunset gradient. Hover snaps them into vertical alignment; individual hover lifts a single brick. Strong for process steps, pricing tiers, or feature lists.

**HTML:**
```html
<div class="scd-brick">
  <div class="scd-brick__stage">
    <div class="scd-brick__brick">Foundation<span class="scd-brick__num">01</span></div>
    <div class="scd-brick__brick">Framework<span class="scd-brick__num">02</span></div>
    <div class="scd-brick__brick">Structure<span class="scd-brick__num">03</span></div>
    <div class="scd-brick__brick">Facade<span class="scd-brick__num">04</span></div>
    <div class="scd-brick__brick">Rooftop<span class="scd-brick__num">05</span></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@500&display=swap');

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

.scd-brick {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0e0e12;
  font-family: 'Archivo', sans-serif;
}
.scd-brick__stage {
  position: relative;
  width: 320px; height: 300px;
  perspective: 1200px;
}
.scd-brick__brick {
  position: absolute; left: 0;
  width: 240px; height: 64px;
  border-radius: 8px;
  display: flex; align-items: center;
  padding: 0 22px;
  color: #0e0e12;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.1rem; letter-spacing: .02em;
  box-shadow: 0 10px 0 rgba(0,0,0,.35);
  transition: transform .5s cubic-bezier(.3,.9,.3,1), box-shadow .5s;
  cursor: pointer;
}
.scd-brick__brick:nth-child(1) { top: 0; background: #f8d44c; transform: translateX(0); z-index: 5; }
.scd-brick__brick:nth-child(2) { top: 52px; background: #f59a3c; transform: translateX(24px); z-index: 4; }
.scd-brick__brick:nth-child(3) { top: 104px; background: #ee6f5e; transform: translateX(48px); z-index: 3; }
.scd-brick__brick:nth-child(4) { top: 156px; background: #d65b88; transform: translateX(72px); z-index: 2; }
.scd-brick__brick:nth-child(5) { top: 208px; background: #8d5fb0; transform: translateX(96px); z-index: 1; color: #fff; }
.scd-brick__stage:hover .scd-brick__brick { transform: translateX(0) !important; }
.scd-brick__brick:hover {
  transform: translateX(0) translateY(-8px) scale(1.04) !important;
  box-shadow: 0 18px 0 rgba(0,0,0,.4);
}
.scd-brick__num { margin-left: auto; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .scd-brick__brick { transition: none !important; }
}
```

### 11. Perspective Deck

**Type:** Pure CSS
**Description:** A tunnel of glassmorphic sci-fi panels receding into depth with neon edges. Hover tilts the whole stack in 3D and pushes the front card toward you. Suited to dashboards, status boards, and tech product pages.

**HTML:**
```html
<div class="scd-persp">
  <div class="scd-persp__stage">
    <div class="scd-persp__deck">
      <div class="scd-persp__card"><h3>SECTOR 01</h3><p>Active node // online</p></div>
      <div class="scd-persp__card"><h3>SECTOR 02</h3><p>Buffered // standby</p></div>
      <div class="scd-persp__card"><h3>SECTOR 03</h3><p>Cached // idle</p></div>
      <div class="scd-persp__card"><h3>SECTOR 04</h3><p>Archived // sleep</p></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@500&display=swap');

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

.scd-persp {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%,#10131f,#05060a);
  font-family: 'Rajdhani', sans-serif;
}
.scd-persp__stage {
  perspective: 900px;
  width: 300px; height: 380px;
}
.scd-persp__deck {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s ease;
}
.scd-persp__card {
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(155deg,rgba(40,52,90,.9),rgba(18,22,40,.95));
  border: 1px solid rgba(120,170,255,.35);
  box-shadow: 0 0 40px rgba(70,120,255,.18);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; color: #cfe0ff;
  backdrop-filter: blur(2px);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s;
}
.scd-persp__card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; letter-spacing: .08em; }
.scd-persp__card p { opacity: .6; font-size: .95rem; letter-spacing: .05em; }
.scd-persp__card:nth-child(1) { transform: translateZ(0px); }
.scd-persp__card:nth-child(2) { transform: translateZ(-80px) translateY(-26px); opacity: .85; }
.scd-persp__card:nth-child(3) { transform: translateZ(-160px) translateY(-52px); opacity: .6; }
.scd-persp__card:nth-child(4) { transform: translateZ(-240px) translateY(-78px); opacity: .4; }
.scd-persp__stage:hover .scd-persp__deck { transform: rotateX(18deg) rotateY(-12deg); }
.scd-persp__stage:hover .scd-persp__card:nth-child(1) { transform: translateZ(60px); }

@media (prefers-reduced-motion: reduce) {
  .scd-persp__deck, .scd-persp__card { transition: none !important; }
}
```

### 12. Hover Spread

**Type:** Pure CSS
**Description:** Three rounded pastel product cards that fan left, center, and right on hover. Soft candy gradients with a Syne display face. Perfect for product showcases, plans, or color/variant pickers.

**HTML:**
```html
<div class="scd-hov">
  <div class="scd-hov__stage">
    <div class="scd-hov__card scd-hov__card--c1"><div><span class="scd-hov__tag">SUNRISE</span><h3>Citrus</h3></div><span class="scd-hov__price">$18</span></div>
    <div class="scd-hov__card scd-hov__card--c2"><div><span class="scd-hov__tag">MEADOW</span><h3>Verdant</h3></div><span class="scd-hov__price">$22</span></div>
    <div class="scd-hov__card scd-hov__card--c3"><div><span class="scd-hov__tag">TWILIGHT</span><h3>Indigo</h3></div><span class="scd-hov__price">$26</span></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&display=swap');

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

.scd-hov {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(120deg,#ffe3ec,#e4e9ff);
  font-family: 'DM Sans', sans-serif;
}
.scd-hov__stage { position: relative; width: 200px; height: 280px; }
.scd-hov__card {
  position: absolute; inset: 0;
  border-radius: 24px;
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 14px 34px rgba(80,60,120,.2);
  transition: transform .55s cubic-bezier(.34,1.3,.4,1), box-shadow .4s;
  cursor: pointer;
  color: #3a2f4a;
}
.scd-hov__card h3 { font-family: 'Syne', sans-serif; font-size: 1.5rem; }
.scd-hov__price { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; }
.scd-hov__tag { font-size: .85rem; opacity: .7; }
.scd-hov__card--c1 { background: linear-gradient(160deg,#fff0a8,#ffd56b); z-index: 3; }
.scd-hov__card--c2 { background: linear-gradient(160deg,#c2f0d8,#86d9b0); z-index: 2; }
.scd-hov__card--c3 { background: linear-gradient(160deg,#cfd6ff,#9aa8ff); z-index: 1; color: #2a2a4a; }
.scd-hov__stage:hover .scd-hov__card--c1 { transform: translateX(-130px) rotate(-8deg); }
.scd-hov__stage:hover .scd-hov__card--c3 { transform: translateX(130px) rotate(8deg); }
.scd-hov__stage:hover .scd-hov__card--c2 { transform: translateY(-16px) scale(1.05); }
.scd-hov__card:hover { box-shadow: 0 26px 50px rgba(80,60,120,.32); }

@media (prefers-reduced-motion: reduce) {
  .scd-hov__card { transition: none !important; }
}
```

### 13. Cascade Lift

**Type:** Pure CSS
**Description:** A waterfall of status rows that gently spreads apart on hover, with colored status dots. Individual rows scale and slide on hover. Built for activity feeds, kanban summaries, or pipeline views.

**HTML:**
```html
<div class="scd-casc">
  <div class="scd-casc__stage">
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#2ecc71"></span><div><h3>Deployed</h3><p>v3.2 live</p></div></div>
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#3498db"></span><div><h3>Building</h3><p>2 jobs queued</p></div></div>
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#f39c12"></span><div><h3>Review</h3><p>5 PRs open</p></div></div>
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#9b59b6"></span><div><h3>Drafts</h3><p>3 pending</p></div></div>
    <div class="scd-casc__card"><span class="scd-casc__dot" style="background:#95a5a6"></span><div><h3>Archived</h3><p>112 items</p></div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter+Tight:wght@400&display=swap');

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

.scd-casc {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#071a2b,#0d3047);
  font-family: 'Inter Tight', sans-serif;
}
.scd-casc__stage { position: relative; width: 260px; height: 320px; }
.scd-casc__card {
  position: absolute; left: 0; right: 0;
  height: 90px; border-radius: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg,rgba(255,255,255,.95),rgba(220,235,250,.9));
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  display: flex; align-items: center; gap: 16px;
  transition: transform .5s cubic-bezier(.3,.85,.3,1), box-shadow .4s, top .5s cubic-bezier(.3,.85,.3,1);
  cursor: pointer;
  color: #0d3047;
}
.scd-casc__dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.scd-casc__card h3 { font-family: 'Sora', sans-serif; font-size: 1.05rem; }
.scd-casc__card p { font-size: .8rem; opacity: .6; }
.scd-casc__card:nth-child(1) { top: 0; z-index: 5; }
.scd-casc__card:nth-child(2) { top: 54px; z-index: 4; filter: brightness(.97); }
.scd-casc__card:nth-child(3) { top: 108px; z-index: 3; filter: brightness(.94); }
.scd-casc__card:nth-child(4) { top: 162px; z-index: 2; filter: brightness(.91); }
.scd-casc__card:nth-child(5) { top: 216px; z-index: 1; filter: brightness(.88); }
.scd-casc__stage:hover .scd-casc__card:nth-child(1) { top: -8px; }
.scd-casc__stage:hover .scd-casc__card:nth-child(2) { top: 64px; }
.scd-casc__stage:hover .scd-casc__card:nth-child(3) { top: 136px; }
.scd-casc__stage:hover .scd-casc__card:nth-child(4) { top: 208px; }
.scd-casc__stage:hover .scd-casc__card:nth-child(5) { top: 280px; }
.scd-casc__card:hover {
  transform: scale(1.06) translateX(10px);
  box-shadow: 0 22px 44px rgba(0,0,0,.5);
  z-index: 9 !important;
}

@media (prefers-reduced-motion: reduce) {
  .scd-casc__card { transition: none !important; }
}
```

### 14. Peel Back

**Type:** Pure CSS
**Description:** The top sticker-card curls away at the corner like peeling a label, revealing layers beneath. Vivid gradients with a folded-corner shadow. Eye-catching for reveals, "what’s inside" teasers, or onboarding.

**HTML:**
```html
<div class="scd-peel">
  <div class="scd-peel__stage">
    <div class="scd-peel__card scd-peel__card--c3"><div class="scd-peel__inner"><h3>Layer C</h3><p>Bottom of the stack</p></div></div>
    <div class="scd-peel__card scd-peel__card--c2"><div class="scd-peel__inner"><h3>Layer B</h3><p>The middle ground</p></div></div>
    <div class="scd-peel__card scd-peel__card--c1"><div class="scd-peel__inner"><h3>Peel me</h3><p>Hover to lift the top</p></div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Outfit:wght@400&display=swap');

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

.scd-peel {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #ececec;
  font-family: 'Outfit', sans-serif;
}
.scd-peel__stage { position: relative; width: 260px; height: 340px; }
.scd-peel__card {
  position: absolute; inset: 0;
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), border-radius .7s;
  transform-origin: top right;
  cursor: pointer;
  overflow: hidden;
}
.scd-peel__inner {
  position: absolute; inset: 0;
  padding: 30px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
.scd-peel__card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2rem; line-height: 1; }
.scd-peel__card p { opacity: .85; margin-top: 6px; }
.scd-peel__card--c1 { background: linear-gradient(150deg,#ff6a3d,#f9484a); z-index: 3; }
.scd-peel__card--c2 { background: linear-gradient(150deg,#1fa2ff,#12d8fa); z-index: 2; }
.scd-peel__card--c3 { background: linear-gradient(150deg,#43e97b,#38f9d7); z-index: 1; color: #063; }
.scd-peel__stage:hover .scd-peel__card--c1 {
  transform: rotate(-14deg) translate(-30px,-30px) scale(.78);
  border-radius: 22px 22px 22px 90px;
  box-shadow: -20px 20px 40px rgba(0,0,0,.3);
}
.scd-peel__stage:hover .scd-peel__card--c2 { transform: translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
  .scd-peel__card { transition: none !important; }
}
```

### 15. Accordion Spread

**Type:** Pure CSS
**Description:** Vertical color panels that expand horizontally on hover to reveal a title and subtitle. Clean, gallery-style, four-tone gradient set. Useful for category navigation, image galleries, or feature highlights.

**HTML:**
```html
<div class="scd-accs">
  <div class="scd-accs__stage">
    <div class="scd-accs__panel scd-accs__panel--p1"><div class="scd-accs__label"><h3>Ember</h3><p>Warm tones &amp; energy</p></div></div>
    <div class="scd-accs__panel scd-accs__panel--p2"><div class="scd-accs__label"><h3>Violet</h3><p>Mystery &amp; depth</p></div></div>
    <div class="scd-accs__panel scd-accs__panel--p3"><div class="scd-accs__label"><h3>Azure</h3><p>Calm &amp; clarity</p></div></div>
    <div class="scd-accs__panel scd-accs__panel--p4"><div class="scd-accs__label"><h3>Jade</h3><p>Growth &amp; balance</p></div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600&family=Manrope:wght@400;600&display=swap');

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

.scd-accs {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #14101a;
  font-family: 'Manrope', sans-serif;
}
.scd-accs__stage {
  display: flex; gap: 10px; height: 300px;
}
.scd-accs__panel {
  position: relative;
  width: 64px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: width .55s cubic-bezier(.3,.9,.3,1);
  display: flex; align-items: flex-end;
}
.scd-accs__panel:hover { width: 240px; }
.scd-accs__label { position: absolute; bottom: 24px; left: 24px; color: #fff; }
.scd-accs__label h3 { font-family: 'Unbounded', sans-serif; font-size: 1.3rem; white-space: nowrap; }
.scd-accs__label p { opacity: 0; font-size: .85rem; transition: opacity .4s .2s; white-space: nowrap; }
.scd-accs__panel:hover .scd-accs__label p { opacity: .8; }
.scd-accs__panel--p1 { background: linear-gradient(160deg,#ff9a3c,#ff5e62); }
.scd-accs__panel--p2 { background: linear-gradient(160deg,#c471f5,#7f53ac); }
.scd-accs__panel--p3 { background: linear-gradient(160deg,#00d2ff,#3a7bd5); }
.scd-accs__panel--p4 { background: linear-gradient(160deg,#11998e,#38ef7d); }

@media (prefers-reduced-motion: reduce) {
  .scd-accs__panel, .scd-accs__label p { transition: none !important; }
}
```

### 16. Shuffle Reveal

**Type:** CSS + JS
**Description:** Click the top card and it slides off, cycling to the back as the stack re-layers. Functional, animated card rotation with bold gradients. Ideal for "next item," flashcards, or browsing queues.

**HTML:**
```html
<div class="scd-shuf">
  <div class="scd-shuf__stage" data-scd-shuf="stage">
    <div class="scd-shuf__card scd-shuf__card--c1"><span class="scd-shuf__big">A</span><span class="scd-shuf__sub">CLICK TO SHUFFLE</span></div>
    <div class="scd-shuf__card scd-shuf__card--c2"><span class="scd-shuf__big">B</span><span class="scd-shuf__sub">NEXT UP</span></div>
    <div class="scd-shuf__card scd-shuf__card--c3"><span class="scd-shuf__big">C</span><span class="scd-shuf__sub">WAITING</span></div>
    <div class="scd-shuf__card scd-shuf__card--c4"><span class="scd-shuf__big">D</span><span class="scd-shuf__sub">LAST</span></div>
    <div class="scd-shuf__hint">click the top card</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@600&family=Space+Mono&display=swap');
@import url('https://fonts.cdnfonts.com/css/clash-display');

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

.scd-shuf {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%,#2a1a3e,#120a1c);
  font-family: 'Space Mono', monospace;
}
.scd-shuf__stage { position: relative; width: 240px; height: 330px; }
.scd-shuf__card {
  position: absolute; inset: 0;
  border-radius: 20px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transition: transform .55s cubic-bezier(.3,.85,.3,1), opacity .55s;
  cursor: pointer;
}
.scd-shuf__big { font-size: 4rem; font-weight: 700; font-family: 'Clash Display', sans-serif; }
.scd-shuf__sub { letter-spacing: .3em; opacity: .6; font-size: .75rem; margin-top: 8px; }
.scd-shuf__card--c1 { background: linear-gradient(150deg,#f857a6,#ff5858); }
.scd-shuf__card--c2 { background: linear-gradient(150deg,#4776e6,#8e54e9); }
.scd-shuf__card--c3 { background: linear-gradient(150deg,#11998e,#38ef7d); color: #053; }
.scd-shuf__card--c4 { background: linear-gradient(150deg,#f7971e,#ffd200); color: #623; }
.scd-shuf__hint {
  position: absolute; bottom: -40px; width: 100%;
  text-align: center; color: #9d8ab0; font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
  .scd-shuf__card { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.scd-shuf');
  if (!root) return;
  const stack = root.querySelector('[data-scd-shuf="stage"]');
  if (!stack) return;

  function layout() {
    const cards = [...stack.querySelectorAll('.scd-shuf__card')];
    cards.forEach((c, i) => {
      c.style.transform = `translateY(${i * 10}px) scale(${1 - i * 0.04})`;
      c.style.zIndex = cards.length - i;
      c.style.opacity = 1 - i * 0.12;
    });
  }
  layout();

  stack.addEventListener('click', () => {
    const top = stack.querySelector('.scd-shuf__card');
    if (!top) return;
    top.style.transform = 'translateX(-320px) rotate(-18deg)';
    setTimeout(() => { stack.appendChild(top); layout(); }, 350);
  });
})();
```

### 17. Tab Stack

**Type:** Pure CSS
**Description:** Manila file folders with offset colored tabs, like a physical filing cabinet. Hover fans the folders down; individual hover lifts one. Great for document archives, year-based organization, or categories.

**HTML:**
```html
<div class="scd-tab">
  <div class="scd-tab__stage">
    <div class="scd-tab__folder scd-tab__folder--f3"><span class="scd-tab__tab">2026</span><h3>Active Projects</h3><p>Current quarter deliverables and ongoing client work in progress.</p></div>
    <div class="scd-tab__folder scd-tab__folder--f2"><span class="scd-tab__tab">2025</span><h3>Completed</h3><p>Archived and signed-off work from the previous fiscal year.</p></div>
    <div class="scd-tab__folder scd-tab__folder--f1"><span class="scd-tab__tab">LEGACY</span><h3>Reference</h3><p>Older documentation kept for historical reference only.</p></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600;700&family=IBM+Plex+Mono&display=swap');

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

.scd-tab {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #d9cfc0;
  font-family: 'IBM Plex Mono', monospace;
}
.scd-tab__stage { position: relative; width: 300px; height: 340px; }
.scd-tab__folder {
  position: absolute; left: 0; right: 0; height: 300px;
  border-radius: 6px 6px 10px 10px;
  background: #f4ecd8;
  box-shadow: 0 -2px 0 rgba(0,0,0,.05), 0 14px 24px rgba(60,40,20,.2);
  transition: transform .45s cubic-bezier(.3,.9,.3,1);
  cursor: pointer;
  padding: 46px 26px;
}
.scd-tab__tab {
  position: absolute; top: -26px;
  height: 30px; width: 110px;
  border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Franklin', sans-serif; font-weight: 700;
  font-size: .8rem; color: #fff; letter-spacing: .05em;
}
.scd-tab__folder h3 { font-family: 'Libre Franklin', sans-serif; font-weight: 700; color: #3a2e1c; font-size: 1.2rem; margin-bottom: 8px; }
.scd-tab__folder p { font-size: .8rem; color: #6b5840; line-height: 1.5; }
.scd-tab__folder--f1 { bottom: 0; z-index: 1; } .scd-tab__folder--f1 .scd-tab__tab { left: 14px; background: #c0392b; }
.scd-tab__folder--f2 { bottom: 14px; z-index: 2; } .scd-tab__folder--f2 .scd-tab__tab { left: 100px; background: #d68910; }
.scd-tab__folder--f3 { bottom: 28px; z-index: 3; } .scd-tab__folder--f3 .scd-tab__tab { left: 186px; background: #1e8449; }
/* Stage spread — only apply when no individual folder is being hovered.
   Without :has(...:hover) guard, hovering the 2025 tab fires BOTH the
   stage spread (translateY: 30px down) AND the folder lift (translateY:
   -14px up). The two transforms fight on a single .45s ease, sliding
   the folder out from under the cursor mid-transition → cursor leaves
   the folder → spread resets → cursor re-enters → infinite jitter.
   Restricting the spread to "stage hover AND nothing inside being
   hovered" lets the spread animate cleanly when you enter the stage,
   then freezes the position the moment you land on a folder, so the
   folder's own hover effect doesn't fight a still-running translation. */
.scd-tab__stage:hover:not(:has(.scd-tab__folder:hover)) .scd-tab__folder--f1 { transform: translateY(60px); }
.scd-tab__stage:hover:not(:has(.scd-tab__folder:hover)) .scd-tab__folder--f2 { transform: translateY(30px); }
/* Lift the hovered folder above its peers and brighten it. Using scale
   (not translateY) is deliberate: scale grows around the folder's
   center, so the tab at top stays very close to where the cursor entered
   it — no cursor re-entry jitter. The z-index bump keeps the lifted
   folder on top of the stack regardless of source order. */
.scd-tab__folder:hover {
  transform: scale(1.04) !important;
  z-index: 9 !important;
  box-shadow: 0 -2px 0 rgba(0,0,0,.05), 0 24px 38px rgba(60,40,20,.32);
}

@media (prefers-reduced-motion: reduce) {
  .scd-tab__folder { transition: none !important; }
}
```

### 18. Photos Pinch

**Type:** Pure CSS
**Description:** A pinched cluster of bordered photos at center that bursts outward into a scatter on hover, each rotating to its own angle. Moody dark backdrop. Perfect for image collections and creative galleries.

**HTML:**
```html
<div class="scd-pinch">
  <div class="scd-pinch__stage">
    <div class="scd-pinch__photo scd-pinch__photo--ph1"></div>
    <div class="scd-pinch__photo scd-pinch__photo--ph2"></div>
    <div class="scd-pinch__photo scd-pinch__photo--ph3"></div>
    <div class="scd-pinch__photo scd-pinch__photo--ph4"></div>
    <div class="scd-pinch__photo scd-pinch__photo--ph5"></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400&display=swap');

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

.scd-pinch {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0c0c0c;
  font-family: 'Geist', sans-serif;
}
.scd-pinch__stage { position: relative; width: 280px; height: 280px; }
.scd-pinch__photo {
  position: absolute; top: 50%; left: 50%;
  width: 130px; height: 170px;
  border-radius: 12px;
  border: 5px solid #fff;
  box-shadow: 0 16px 30px rgba(0,0,0,.6);
  transition: transform .65s cubic-bezier(.3,1.3,.4,1);
  cursor: pointer;
}
.scd-pinch__photo--ph1 { background: linear-gradient(135deg,#ee9ca7,#ffdde1); }
.scd-pinch__photo--ph2 { background: linear-gradient(135deg,#2193b0,#6dd5ed); }
.scd-pinch__photo--ph3 { background: linear-gradient(135deg,#cc2b5e,#753a88); }
.scd-pinch__photo--ph4 { background: linear-gradient(135deg,#42275a,#734b6d); }
.scd-pinch__photo--ph5 { background: linear-gradient(135deg,#f7b733,#fc4a1a); }
.scd-pinch__photo:nth-child(1) { transform: translate(-50%,-50%) rotate(-4deg); z-index: 5; }
.scd-pinch__photo:nth-child(2) { transform: translate(-50%,-50%) rotate(3deg); z-index: 4; }
.scd-pinch__photo:nth-child(3) { transform: translate(-50%,-50%) rotate(-2deg); z-index: 3; }
.scd-pinch__photo:nth-child(4) { transform: translate(-50%,-50%) rotate(5deg); z-index: 2; }
.scd-pinch__photo:nth-child(5) { transform: translate(-50%,-50%) rotate(-6deg); z-index: 1; }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(1) { transform: translate(-150%,-120%) rotate(-16deg); }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(2) { transform: translate(40%,-120%) rotate(14deg); }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(3) { transform: translate(-50%,-50%) rotate(0deg) scale(1.1); }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(4) { transform: translate(-150%,20%) rotate(-12deg); }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(5) { transform: translate(40%,20%) rotate(18deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-pinch__photo { transition: none !important; }
}
```

### 19. Swipe Stack

**Type:** CSS + JS
**Description:** A fully draggable Tinder-style deck: grab the top card and swipe left or right to discard it and reveal the next. Works with mouse and touch. Built for profiles, discovery feeds, or decision flows.

**HTML:**
```html
<div class="scd-swipe">
  <div class="scd-swipe__stage" data-scd-swipe="stage">
    <div class="scd-swipe__card scd-swipe__card--b4"><h3>Maya</h3><p>Loves slow mornings &amp; film cameras</p></div>
    <div class="scd-swipe__card scd-swipe__card--b3"><h3>Theo</h3><p>Trail runner, terrible cook</p></div>
    <div class="scd-swipe__card scd-swipe__card--b2"><h3>Lena</h3><p>Vinyl collector since &#39;09</p></div>
    <div class="scd-swipe__card scd-swipe__card--b1"><h3>Drag me</h3><p>Swipe left or right &rarr;</p></div>
    <div class="scd-swipe__hint">drag the top card</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;800&display=swap');

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

.scd-swipe {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg,#fdeff9,#ec38bc 120%);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.scd-swipe__stage { position: relative; width: 260px; height: 360px; }
.scd-swipe__card {
  position: absolute; inset: 0;
  border-radius: 26px;
  color: #fff;
  box-shadow: 0 20px 44px rgba(120,30,90,.35);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  cursor: grab; user-select: none;
  transition: transform .4s cubic-bezier(.3,.9,.3,1);
}
.scd-swipe__card.is-dragging { transition: none; cursor: grabbing; }
.scd-swipe__card h3 { font-size: 1.9rem; font-weight: 800; }
.scd-swipe__card p { opacity: .9; }
.scd-swipe__card--b1 { background: linear-gradient(150deg,#fa709a,#fee140); }
.scd-swipe__card--b2 { background: linear-gradient(150deg,#a18cd1,#fbc2eb); color: #5a2a6a; }
.scd-swipe__card--b3 { background: linear-gradient(150deg,#43cea2,#185a9d); }
.scd-swipe__card--b4 { background: linear-gradient(150deg,#ff6e7f,#bfe9ff); color: #3a3a5a; }
.scd-swipe__hint {
  position: absolute; bottom: -36px; width: 100%;
  text-align: center; color: #fff; opacity: .8; font-size: .85rem;
}

@media (prefers-reduced-motion: reduce) {
  .scd-swipe__card { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.scd-swipe');
  if (!root) return;
  const deck = root.querySelector('[data-scd-swipe="stage"]');
  if (!deck) return;

  function layout() {
    const cards = [...deck.querySelectorAll('.scd-swipe__card')];
    cards.forEach((c, i) => {
      const d = cards.length - 1 - i;
      c.style.transform = `translateY(${d * -10}px) scale(${1 - d * 0.04})`;
      c.style.zIndex = i;
    });
  }
  layout();

  function bind() {
    const top = [...deck.querySelectorAll('.scd-swipe__card')].pop();
    if (!top) return;
    let sx = 0, dx = 0, drag = false;
    const down = (e) => {
      drag = true;
      sx = (e.touches ? e.touches[0].clientX : e.clientX);
      top.classList.add('is-dragging');
    };
    const move = (e) => {
      if (!drag) return;
      dx = (e.touches ? e.touches[0].clientX : e.clientX) - sx;
      top.style.transform = `translateX(${dx}px) rotate(${dx * 0.06}deg)`;
    };
    const up = () => {
      if (!drag) return;
      drag = false;
      top.classList.remove('is-dragging');
      if (Math.abs(dx) > 110) {
        top.style.transform = `translateX(${dx > 0 ? 600 : -600}px) rotate(${dx > 0 ? 40 : -40}deg)`;
        top.style.opacity = 0;
        setTimeout(() => { top.remove(); layout(); bind(); }, 300);
      } else {
        top.style.transform = '';
        layout();
      }
      dx = 0;
    };
    top.addEventListener('mousedown', down);
    root.addEventListener('mousemove', move);
    root.addEventListener('mouseup', up);
    root.addEventListener('mouseleave', up);
    top.addEventListener('touchstart', down);
    root.addEventListener('touchmove', move);
    root.addEventListener('touchend', up);
  }
  bind();
})();
```

### 20. Accordion Card

**Type:** CSS + JS
**Description:** A dark, refined vertical accordion where clicking an item expands its answer and collapses the others. Warm amber accents, serif headings. Ideal for FAQs, documentation, and detail panels.

**HTML:**
```html
<div class="scd-acc">
  <div class="scd-acc__stage" data-scd-acc="stage">
    <div class="scd-acc__item scd-acc__item--open"><div class="scd-acc__head">What is included?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">Every tier ships with the full source, lifetime updates, and priority support from our team.</div></div>
    <div class="scd-acc__item"><div class="scd-acc__head">Can I use it commercially?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">Yes &mdash; the license covers unlimited commercial projects with no attribution required.</div></div>
    <div class="scd-acc__item"><div class="scd-acc__head">Is there a refund?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">A 30-day no-questions money-back guarantee applies to all purchases.</div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Newsreader:wght@400&display=swap');

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

.scd-acc {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #1a1714;
  font-family: 'Newsreader', serif;
}
.scd-acc__stage { width: 320px; }
.scd-acc__item {
  background: linear-gradient(135deg,#2c2722,#231e1a);
  border: 1px solid #3d362f;
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: margin .4s;
  cursor: pointer;
}
.scd-acc__head {
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  color: #f0e6d6;
  font-family: 'Fraunces', serif; font-size: 1.05rem;
}
.scd-acc__plus { transition: transform .4s; color: #c89b5a; font-size: 1.3rem; }
.scd-acc__body {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.3,.9,.3,1);
  padding: 0 22px;
  color: #bcae9c; line-height: 1.6; font-size: .9rem;
}
.scd-acc__item--open { margin: 14px 0; background: linear-gradient(135deg,#3a3128,#2c241c); }
.scd-acc__item--open .scd-acc__body { max-height: 120px; padding: 0 22px 20px; }
.scd-acc__item--open .scd-acc__plus { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-acc__item, .scd-acc__plus, .scd-acc__body { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.scd-acc');
  if (!root) return;
  const acc = root.querySelector('[data-scd-acc="stage"]');
  if (!acc) return;

  acc.querySelectorAll('.scd-acc__item').forEach((it) => {
    it.addEventListener('click', () => {
      const wasOpen = it.classList.contains('scd-acc__item--open');
      acc.querySelectorAll('.scd-acc__item').forEach((x) => x.classList.remove('scd-acc__item--open'));
      if (!wasOpen) it.classList.add('scd-acc__item--open');
    });
  });
})();
```

### 21. Timeline Stack

**Type:** Pure CSS
**Description:** A vertical timeline with a gradient spine and milestone nodes. Hover slides each card right and pulses its node. Suited to roadmaps, company history, or changelogs.

**HTML:**
```html
<div class="scd-time">
  <div class="scd-time__stage">
    <div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2021</span><h3>The Beginning</h3><p>First prototype shipped to ten beta users.</p></div></div>
    <div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2023</span><h3>Going Public</h3><p>Launched the open platform to everyone.</p></div></div>
    <div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2025</span><h3>Scale</h3><p>Crossed one million active accounts.</p></div></div>
    <div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2026</span><h3>What&#39;s Next</h3><p>Reimagining the experience from scratch.</p></div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700&family=Schibsted+Grotesk:wght@400;500&display=swap');

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

.scd-time {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#fffaf0,#f0e8dc);
  font-family: 'Schibsted Grotesk', sans-serif;
}
.scd-time__stage {
  position: relative;
  width: 340px;
  padding-left: 40px;
}
.scd-time__stage::before {
  content: '';
  position: absolute;
  left: 14px; top: 10px; bottom: 10px;
  width: 3px;
  background: linear-gradient(#ff8a5c,#a83279);
  border-radius: 3px;
}
.scd-time__node { position: relative; margin-bottom: 14px; }
.scd-time__node::before {
  content: '';
  position: absolute;
  left: -33px; top: 18px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ff8a5c;
  transition: transform .35s, background .35s;
}
.scd-time__card {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 8px 20px rgba(120,60,80,.12);
  transition: transform .35s cubic-bezier(.3,.9,.3,1), box-shadow .35s;
  cursor: pointer;
}
.scd-time__yr { font-family: 'Bricolage Grotesque', sans-serif; color: #a83279; font-size: .8rem; letter-spacing: .08em; }
.scd-time__card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.1rem; color: #2a2024; margin: 2px 0 4px; }
.scd-time__card p { font-size: .85rem; color: #6a5a60; }
.scd-time__node:hover .scd-time__card { transform: translateX(12px); box-shadow: 0 14px 30px rgba(120,60,80,.2); }
.scd-time__node:hover::before { transform: scale(1.3); background: #a83279; }

@media (prefers-reduced-motion: reduce) {
  .scd-time__card, .scd-time__node::before { transition: none !important; }
}
```

### 22. Isometric Tower

**Type:** Pure CSS
**Description:** Stacked isometric tiles forming a layered architecture tower. Hover slides upper layers diagonally apart to expose each level. Great for tech stacks, system diagrams, or layered concepts.

**HTML:**
```html
<div class="scd-iso">
  <div class="scd-iso__stage">
    <div class="scd-iso__layer scd-iso__layer--l4"><div class="scd-iso__face scd-iso__face--top"></div><span class="scd-iso__label">CDN</span></div>
    <div class="scd-iso__layer scd-iso__layer--l3"><div class="scd-iso__face scd-iso__face--top"></div><span class="scd-iso__label">APP</span></div>
    <div class="scd-iso__layer scd-iso__layer--l2"><div class="scd-iso__face scd-iso__face--top"></div><span class="scd-iso__label">API</span></div>
    <div class="scd-iso__layer scd-iso__layer--l1"><div class="scd-iso__face scd-iso__face--top"></div><span class="scd-iso__label">DATA</span></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600&display=swap');

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

.scd-iso {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%,#1b2735,#090a0f);
  font-family: 'Chakra Petch', sans-serif;
}
.scd-iso__stage {
  position: relative;
  width: 300px; height: 380px;
  transform-style: preserve-3d;
}
.scd-iso__layer {
  position: absolute; left: 50%; top: 50%;
  width: 170px; height: 170px;
  margin: -85px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3,.9,.3,1);
}
.scd-iso__face { position: absolute; width: 170px; height: 170px; }
.scd-iso__face--top { transform: rotateX(60deg) rotateZ(-45deg); }
.scd-iso__layer--l1 .scd-iso__face--top { background: linear-gradient(135deg,#36d1dc,#5b86e5); }
.scd-iso__layer--l2 .scd-iso__face--top { background: linear-gradient(135deg,#f7971e,#ffd200); }
.scd-iso__layer--l3 .scd-iso__face--top { background: linear-gradient(135deg,#fc466b,#3f5efb); }
.scd-iso__layer--l4 .scd-iso__face--top { background: linear-gradient(135deg,#11998e,#38ef7d); }
.scd-iso__label {
  position: absolute;
  color: #dfe9f5;
  font-size: .85rem; letter-spacing: .1em;
  transform: rotateX(60deg) rotateZ(-45deg);
  top: 60px; left: 60px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.scd-iso__layer--l1 { transform: translateZ(0); z-index: 4; }
.scd-iso__layer--l2 { transform: translateZ(40px); z-index: 3; }
.scd-iso__layer--l3 { transform: translateZ(80px); z-index: 2; }
.scd-iso__layer--l4 { transform: translateZ(120px); z-index: 1; }
.scd-iso__stage:hover .scd-iso__layer--l2 { transform: translateZ(40px) translate(40px,-40px); }
.scd-iso__stage:hover .scd-iso__layer--l3 { transform: translateZ(80px) translate(80px,-80px); }
.scd-iso__stage:hover .scd-iso__layer--l4 { transform: translateZ(120px) translate(120px,-120px); }

@media (prefers-reduced-motion: reduce) {
  .scd-iso__layer { transition: none !important; }
}
```

### 23. 3D Flip Stack

**Type:** CSS + JS
**Description:** A stack of cards that each flip on click to reveal a vibrant reverse side, with depth-scaled layering. Built for flashcards, reveals, or front/back product info.

**HTML:**
```html
<div class="scd-flip">
  <div class="scd-flip__stage">
    <div class="scd-flip__card scd-flip__card--c3"><div class="scd-flip__side scd-flip__side--front"><span class="scd-flip__sm">CARD</span><span class="scd-flip__big">03</span></div><div class="scd-flip__side scd-flip__side--back"><span class="scd-flip__big">&#9733;</span></div></div>
    <div class="scd-flip__card scd-flip__card--c2"><div class="scd-flip__side scd-flip__side--front"><span class="scd-flip__sm">CARD</span><span class="scd-flip__big">02</span></div><div class="scd-flip__side scd-flip__side--back"><span class="scd-flip__big">&#9733;</span></div></div>
    <div class="scd-flip__card scd-flip__card--c1"><div class="scd-flip__side scd-flip__side--front"><span class="scd-flip__sm">TAP TO FLIP</span><span class="scd-flip__big">01</span></div><div class="scd-flip__side scd-flip__side--back"><span class="scd-flip__big">&#9733;</span></div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto+Mono&display=swap');

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

.scd-flip {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0a0e17;
  font-family: 'Roboto Mono', monospace;
}
.scd-flip__stage {
  position: relative;
  width: 230px; height: 320px;
  perspective: 1100px;
}
.scd-flip__card {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3,.9,.3,1);
  cursor: pointer;
}
.scd-flip__side {
  position: absolute; inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
.scd-flip__side--front { background: linear-gradient(150deg,#232526,#414345); color: #fff; }
.scd-flip__side--back { background: linear-gradient(150deg,#ff512f,#dd2476); color: #fff; transform: rotateY(180deg); }
.scd-flip__big { font-family: 'Anton', sans-serif; font-size: 3rem; letter-spacing: .02em; }
.scd-flip__sm { opacity: .6; font-size: .75rem; letter-spacing: .2em; }
.scd-flip__card.is-flipped { transform: rotateY(180deg); }
.scd-flip__card--c1 { transform: translateY(0) scale(1); z-index: 3; }
.scd-flip__card--c1.is-flipped { transform: translateY(0) scale(1) rotateY(180deg); }
.scd-flip__card--c2 { transform: translateY(14px) scale(.94); z-index: 2; }
.scd-flip__card--c2.is-flipped { transform: translateY(14px) scale(.94) rotateY(180deg); }
.scd-flip__card--c3 { transform: translateY(28px) scale(.88); z-index: 1; }
.scd-flip__card--c3.is-flipped { transform: translateY(28px) scale(.88) rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-flip__card { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.scd-flip');
  if (!root) return;
  root.querySelectorAll('.scd-flip__card').forEach((f) => {
    f.addEventListener('click', (e) => {
      e.stopPropagation();
      f.classList.toggle('is-flipped');
    });
  });
})();
```

### 24. Spiral Tower

**Type:** Pure CSS
**Description:** Cards arranged in a continuously rotating 3D helix around a central axis; hover pauses the spin. Hypnotic and bold. Perfect for hero showcases, featured collections, or attention-grabbing displays.

**HTML:**
```html
<div class="scd-spiral">
  <div class="scd-spiral__stage">
    <div class="scd-spiral__spiral">
      <div class="scd-spiral__card">01</div>
      <div class="scd-spiral__card">02</div>
      <div class="scd-spiral__card">03</div>
      <div class="scd-spiral__card">04</div>
      <div class="scd-spiral__card">05</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Jost:wght@400;500&display=swap');

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

.scd-spiral {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%,#1e0a2e,#080410);
  font-family: 'Jost', sans-serif;
}
.scd-spiral__stage {
  perspective: 1200px;
  width: 240px; height: 400px;
}
.scd-spiral__spiral {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: scd-spiral-spin 14s linear infinite;
}
@keyframes scd-spiral-spin { to { transform: rotateY(360deg); } }
.scd-spiral__stage:hover .scd-spiral__spiral { animation-play-state: paused; }
.scd-spiral__card {
  position: absolute; left: 50%; top: 50%;
  width: 120px; height: 160px;
  margin: -80px -60px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Major Mono Display', monospace;
  font-size: 1.4rem;
  box-shadow: 0 0 30px rgba(180,100,255,.25);
}
.scd-spiral__card:nth-child(1) { transform: rotateY(0deg) translateZ(150px) translateY(-120px); background: linear-gradient(150deg,#ee0979,#ff6a00); }
.scd-spiral__card:nth-child(2) { transform: rotateY(72deg) translateZ(150px) translateY(-60px); background: linear-gradient(150deg,#7f00ff,#e100ff); }
.scd-spiral__card:nth-child(3) { transform: rotateY(144deg) translateZ(150px) translateY(0px); background: linear-gradient(150deg,#00c6ff,#0072ff); }
.scd-spiral__card:nth-child(4) { transform: rotateY(216deg) translateZ(150px) translateY(60px); background: linear-gradient(150deg,#11998e,#38ef7d); }
.scd-spiral__card:nth-child(5) { transform: rotateY(288deg) translateZ(150px) translateY(120px); background: linear-gradient(150deg,#f7971e,#ffd200); color: #623; }

@media (prefers-reduced-motion: reduce) {
  .scd-spiral__spiral {
    animation: none !important;
    transition: none !important;
  }
}
```

### 25. Tilt on Hover

**Type:** CSS + JS
**Description:** A parallax card that tilts toward your cursor with a moving glare highlight, layered over a supporting card behind. Premium, interactive feel. Ideal for product hero cards and feature spotlights.

**HTML:**
```html
<div class="scd-tilt">
  <div class="scd-tilt__stage">
    <div class="scd-tilt__card scd-tilt__card--c2"><div class="scd-tilt__glare"></div><div class="scd-tilt__content"><h3>Beneath</h3><p>The supporting layer</p></div></div>
    <div class="scd-tilt__card scd-tilt__card--c1" data-scd-tilt="stage"><div class="scd-tilt__glare" data-scd-tilt="glare"></div><div class="scd-tilt__content"><h3>Tilt me</h3><p>Move your cursor across</p></div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@600;700&display=swap');

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

.scd-tilt {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#141e30,#243b55);
  font-family: 'Familjen Grotesk', sans-serif;
}
.scd-tilt__stage {
  position: relative;
  width: 250px; height: 340px;
  perspective: 800px;
}
.scd-tilt__card {
  position: absolute; inset: 0;
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform .15s ease-out, box-shadow .3s;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  overflow: hidden;
}
.scd-tilt__card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(150deg,#fc466b,#3f5efb);
}
.scd-tilt__glare {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.45),transparent 55%);
  pointer-events: none;
}
.scd-tilt__content {
  position: absolute; inset: 0;
  padding: 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
  transform: translateZ(40px);
}
.scd-tilt__card h3 { font-size: 1.9rem; font-weight: 700; }
.scd-tilt__card p { opacity: .85; }
.scd-tilt__card--c2 { transform: translate(10px,10px) scale(.96); z-index: 1; }
.scd-tilt__card--c2::before { background: linear-gradient(150deg,#3f5efb,#11998e); }
.scd-tilt__card--c1 { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .scd-tilt__card { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.scd-tilt');
  if (!root) return;
  const card = root.querySelector('[data-scd-tilt="stage"]');
  const glare = root.querySelector('[data-scd-tilt="glare"]');
  if (!card || !glare) return;
  const stack = card.parentElement;

  stack.addEventListener('mousemove', (e) => {
    const r = card.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width;
    const y = (e.clientY - r.top) / r.height;
    card.style.transform = `rotateY(${(x - 0.5) * 24}deg) rotateX(${(0.5 - y) * 24}deg)`;
    glare.style.setProperty('--gx', x * 100 + '%');
    glare.style.setProperty('--gy', y * 100 + '%');
  });
  stack.addEventListener('mouseleave', () => {
    card.style.transform = '';
  });
})();
```

### 26. Notification Pile

**Type:** Pure CSS
**Description:** An iOS-style stack of frosted-glass notifications that collapses into a tidy pile and fans open on hover. Built for notification centers, inboxes, and alert summaries.

**HTML:**
```html
<div class="scd-notif">
  <div class="scd-notif__stage">
    <div class="scd-notif__notif"><div class="scd-notif__icon" style="background:#34c759">💬</div><div class="scd-notif__txt"><h4>Messages</h4><p>Sam: see you at 7?</p></div><span class="scd-notif__time">now</span></div>
    <div class="scd-notif__notif"><div class="scd-notif__icon" style="background:#007aff">📅</div><div class="scd-notif__txt"><h4>Calendar</h4><p>Standup in 15 min</p></div><span class="scd-notif__time">9:45</span></div>
    <div class="scd-notif__notif"><div class="scd-notif__icon" style="background:#ff3b30">🔔</div><div class="scd-notif__txt"><h4>Reminders</h4><p>Pick up dry cleaning</p></div><span class="scd-notif__time">9:30</span></div>
    <div class="scd-notif__notif"><div class="scd-notif__icon" style="background:#ff9500">🌤️</div><div class="scd-notif__txt"><h4>Weather</h4><p>Rain expected at 3pm</p></div><span class="scd-notif__time">8:00</span></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700&display=swap');

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

.scd-notif {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg,#3a1c71,#d76d77,#ffaf7b);
  font-family: 'Figtree', sans-serif;
}
.scd-notif__stage { position: relative; width: 300px; height: 300px; }
.scd-notif__notif {
  position: absolute; left: 0; right: 0;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .5s cubic-bezier(.3,.9,.3,1), opacity .5s, top .5s cubic-bezier(.3,.9,.3,1);
  cursor: pointer;
}
.scd-notif__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.2rem;
}
.scd-notif__txt h4 { font-size: .9rem; font-weight: 700; color: #1c1c1e; }
.scd-notif__txt p { font-size: .8rem; color: #3c3c43; opacity: .75; }
.scd-notif__time { margin-left: auto; font-size: .7rem; color: #3c3c43; opacity: .6; align-self: flex-start; }
.scd-notif__notif:nth-child(1) { top: 0; z-index: 5; }
.scd-notif__notif:nth-child(2) { top: 8px; transform: scale(.95); z-index: 4; }
.scd-notif__notif:nth-child(3) { top: 16px; transform: scale(.90); z-index: 3; }
.scd-notif__notif:nth-child(4) { top: 24px; transform: scale(.85); z-index: 2; }
.scd-notif__stage:hover .scd-notif__notif:nth-child(1) { top: 0; transform: scale(1); }
.scd-notif__stage:hover .scd-notif__notif:nth-child(2) { top: 74px; transform: scale(1); }
.scd-notif__stage:hover .scd-notif__notif:nth-child(3) { top: 148px; transform: scale(1); }
.scd-notif__stage:hover .scd-notif__notif:nth-child(4) { top: 222px; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .scd-notif__notif { transition: none !important; }
}
```

### 27. Receipt Roll

**Type:** Pure CSS
**Description:** Thermal-printer receipts with punched edges that unroll downward on hover, revealing itemized lines and totals. Monospace retro charm. Great for order summaries, invoices, or pricing breakdowns.

**HTML:**
```html
<div class="scd-receipt">
  <div class="scd-receipt__stage">
    <div class="scd-receipt__receipt scd-receipt__receipt--r3"><h3>&#9733; THANKS &#9733;</h3><div class="scd-receipt__line"><span>Loyalty pts</span><span>+45</span></div><div class="scd-receipt__line scd-receipt__line--total"><span>NEXT VISIT</span><span>10% OFF</span></div></div>
    <div class="scd-receipt__receipt scd-receipt__receipt--r2"><h3>SUBTOTAL</h3><div class="scd-receipt__line"><span>Tax</span><span>$1.92</span></div><div class="scd-receipt__line"><span>Tip</span><span>$4.50</span></div><div class="scd-receipt__line scd-receipt__line--total"><span>TOTAL</span><span>$30.42</span></div></div>
    <div class="scd-receipt__receipt scd-receipt__receipt--r1"><h3>CAFE NORD</h3><div class="scd-receipt__line"><span>Flat white</span><span>$4.50</span></div><div class="scd-receipt__line"><span>Croissant</span><span>$3.75</span></div><div class="scd-receipt__line"><span>Oat latte</span><span>$5.25</span></div><div class="scd-receipt__line"><span>Banana bread</span><span>$4.00</span></div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Courier+Prime:wght@400;700&display=swap');

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

.scd-receipt {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #2d2a26;
  font-family: 'Courier Prime', monospace;
}
.scd-receipt__stage { position: relative; width: 240px; height: 380px; }
.scd-receipt__receipt {
  position: absolute; left: 0; right: 0;
  background: #fdfcf7;
  padding: 18px 20px;
  color: #222;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  transition: transform .55s cubic-bezier(.3,.9,.3,1);
  transform-origin: top center;
  cursor: pointer;
  -webkit-mask:
    radial-gradient(circle 5px at 5px 50%,transparent 98%,#000) left/100% 12px repeat-y,
    radial-gradient(circle 5px at calc(100% - 5px) 50%,transparent 98%,#000) right/100% 12px repeat-y;
  mask:
    radial-gradient(circle 5px at 5px 50%,transparent 98%,#000) left/100% 12px repeat-y,
    radial-gradient(circle 5px at calc(100% - 5px) 50%,transparent 98%,#000) right/100% 12px repeat-y;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.scd-receipt__receipt h3 {
  font-family: 'VT323', monospace;
  font-size: 1.6rem; text-align: center; letter-spacing: .05em;
}
.scd-receipt__line {
  display: flex; justify-content: space-between;
  font-size: .85rem; padding: 3px 0;
  border-bottom: 1px dashed #bbb;
}
.scd-receipt__line--total {
  font-weight: 700;
  border-top: 2px solid #222;
  margin-top: 6px;
  padding-top: 6px;
}
.scd-receipt__receipt--r1 { top: 0; z-index: 3; }
.scd-receipt__receipt--r2 { top: 30px; z-index: 2; transform: scaleY(.5) translateY(-20px); filter: brightness(.96); }
.scd-receipt__receipt--r3 { top: 60px; z-index: 1; transform: scaleY(.25) translateY(-30px); filter: brightness(.92); }
.scd-receipt__stage:hover .scd-receipt__receipt--r2 { transform: scaleY(1) translateY(160px); }
.scd-receipt__stage:hover .scd-receipt__receipt--r3 { transform: scaleY(1) translateY(330px); }

@media (prefers-reduced-motion: reduce) {
  .scd-receipt__receipt { transition: none !important; }
}
```

### 28. Scratch Cards

**Type:** CSS + JS
**Description:** A stack of lottery-style scratch cards where the top one has a real scratch-off canvas you drag to reveal the prize; the others fan aside on hover. Playful and interactive for giveaways, reveals, or gamified promos.

**HTML:**
```html
<div class="scd-scratch">
  <div class="scd-scratch__stage">
    <div class="scd-scratch__scratch scd-scratch__scratch--s3"><div class="scd-scratch__prize"><span class="scd-scratch__lbl">PRIZE</span><span class="scd-scratch__amt">$5</span></div></div>
    <div class="scd-scratch__scratch scd-scratch__scratch--s2"><div class="scd-scratch__prize"><span class="scd-scratch__lbl">PRIZE</span><span class="scd-scratch__amt">$20</span></div></div>
    <div class="scd-scratch__scratch scd-scratch__scratch--s1"><div class="scd-scratch__prize"><span class="scd-scratch__lbl">WINNER</span><span class="scd-scratch__amt">$100</span></div><canvas data-scd-scratch="canvas"></canvas></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Nunito:wght@600;800&display=swap');

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

.scd-scratch {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#f12711,#f5af19);
  font-family: 'Nunito', sans-serif;
}
.scd-scratch__stage { position: relative; width: 240px; height: 320px; }
.scd-scratch__scratch {
  position: absolute; inset: 0;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(120,40,0,.4);
  transition: transform .5s cubic-bezier(.3,.9,.3,1);
  overflow: hidden;
}
.scd-scratch__prize {
  position: absolute; inset: 0;
  background: linear-gradient(150deg,#fffbe6,#ffe9a8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #c0392b;
}
.scd-scratch__amt { font-family: 'Bungee', sans-serif; font-size: 3rem; }
.scd-scratch__lbl { font-weight: 800; letter-spacing: .1em; color: #e67e22; }
.scd-scratch__scratch canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 20px;
  cursor: grab;
  touch-action: none;
}
.scd-scratch__scratch--s1 { z-index: 3; }
.scd-scratch__scratch--s2 { z-index: 2; transform: translate(10px,12px) scale(.96) rotate(3deg); }
.scd-scratch__scratch--s3 { z-index: 1; transform: translate(20px,24px) scale(.92) rotate(6deg); }
.scd-scratch__stage:hover .scd-scratch__scratch--s2 { transform: translate(-110px,18px) scale(.96) rotate(-6deg); }
.scd-scratch__stage:hover .scd-scratch__scratch--s3 { transform: translate(120px,18px) scale(.96) rotate(8deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-scratch__scratch { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.scd-scratch');
  if (!root) return;
  const cv = root.querySelector('[data-scd-scratch="canvas"]');
  if (!cv) return;
  const ctx = cv.getContext('2d');

  function init() {
    cv.width = 240;
    cv.height = 320;
    const g = ctx.createLinearGradient(0, 0, 240, 320);
    g.addColorStop(0, '#9e9e9e');
    g.addColorStop(1, '#cfcfcf');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, 240, 320);
    ctx.fillStyle = '#7a7a7a';
    ctx.font = 'bold 22px Nunito';
    ctx.textAlign = 'center';
    ctx.fillText('SCRATCH HERE', 120, 165);
    ctx.globalCompositeOperation = 'destination-out';
  }
  init();

  let drawing = false;
  function pos(e) {
    const r = cv.getBoundingClientRect();
    const cx = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
    const cy = (e.touches ? e.touches[0].clientY : e.clientY) - r.top;
    return [cx * 240 / r.width, cy * 320 / r.height];
  }
  function scratch(e) {
    if (!drawing) return;
    const [x, y] = pos(e);
    ctx.beginPath();
    ctx.arc(x, y, 22, 0, 7);
    ctx.fill();
  }
  cv.addEventListener('mousedown', () => { drawing = true; });
  cv.addEventListener('mouseup', () => { drawing = false; });
  cv.addEventListener('mouseleave', () => { drawing = false; });
  cv.addEventListener('mousemove', scratch);
  cv.addEventListener('touchstart', () => { drawing = true; });
  cv.addEventListener('touchend', () => { drawing = false; });
  cv.addEventListener('touchmove', (e) => { e.preventDefault(); scratch(e); }, { passive: false });
})();
```

---
## 12 CSS Steppers

URL: https://codefronts.com/components/css-stepper-designs/
Description: 12 hand-coded CSS stepper UI components covering every production multi-step flow pattern in 2026 — multi-step form wizard with progress indicator, numbered step progress bar, e-commerce checkout stepper with sidebar order summary, vertical timeline stepper, animated step indicator with icons, onboarding stepper flow (Notion/Linear/Vercel style), breadcrumb-style step tracker, stepper with validation states (success/error/warning), circular SVG progress indicator, glassmorphism stepper, dark mode stepper, and stepper with animated connector lines. All use semantic HTML with proper <code>aria-current="step"</code> and <code>aria-valuenow</code> attributes for screen reader accessibility, scoped <code>.stp-NN__*</code> class names so multiple steppers coexist on the same page without style bleed, respect <code>prefers-reduced-motion</code>, and ship MIT-licensed. 11 use ~30-50 lines of vanilla JavaScript for step navigation, validation, and state persistence; 1 demo (the checkout stepper) is fully static — useful as a display-only progress indicator inside an existing wizard. Drop into any stack: React, Vue, Astro, Svelte, Rails ERB, plain HTML — zero framework dependencies.
Demo count: 12

### 01. CSS Multi-Step Form Wizard Progress Indicator

**Type:** CSS + JS
**Description:** A 4-step account-creation wizard with animated node states, gradient connector lines, scoped pulse keyframe on the active step, and a checkmark success panel — all navigated by prev/next JS.

**HTML:**
```html
<div class="stp-01">
  <div class="stp-01__card">
    <div class="stp-01__header">
      <div class="stp-01__title">Create Your Account</div>
      <div class="stp-01__sub">Complete all steps to get started</div>
    </div>

    <div class="stp-01__steps" id="stp-01-steps">
      <div class="stp-01__step is-done" data-step="1">
        <div class="stp-01__node">1</div>
        <span class="stp-01__node-label">Profile</span>
      </div>
      <div class="stp-01__step is-active" data-step="2">
        <div class="stp-01__node">2</div>
        <span class="stp-01__node-label">Details</span>
      </div>
      <div class="stp-01__step" data-step="3">
        <div class="stp-01__node">3</div>
        <span class="stp-01__node-label">Billing</span>
      </div>
      <div class="stp-01__step" data-step="4">
        <div class="stp-01__node">4</div>
        <span class="stp-01__node-label">Review</span>
      </div>
    </div>

    <!-- Panel 1 -->
    <div class="stp-01__panel" data-panel="1">
      <div class="stp-01__panel-title">Personal Profile</div>
      <div class="stp-01__row">
        <div class="stp-01__field"><label class="stp-01__label">First Name</label><input class="stp-01__input" placeholder="Alex" value="Alex"></div>
        <div class="stp-01__field"><label class="stp-01__label">Last Name</label><input class="stp-01__input" placeholder="Morgan" value="Morgan"></div>
      </div>
      <div class="stp-01__field"><label class="stp-01__label">Email Address</label><input class="stp-01__input" placeholder="alex@example.com" value="alex@example.com"></div>
    </div>

    <!-- Panel 2 -->
    <div class="stp-01__panel is-active" data-panel="2">
      <div class="stp-01__panel-title">Account Details</div>
      <div class="stp-01__field"><label class="stp-01__label">Username</label><input class="stp-01__input" placeholder="@alexmorgan"></div>
      <div class="stp-01__field"><label class="stp-01__label">Role</label><input class="stp-01__input" placeholder="Frontend Engineer"></div>
      <div class="stp-01__field"><label class="stp-01__label">Company</label><input class="stp-01__input" placeholder="Acme Corp"></div>
    </div>

    <!-- Panel 3 -->
    <div class="stp-01__panel" data-panel="3">
      <div class="stp-01__panel-title">Billing Information</div>
      <div class="stp-01__field"><label class="stp-01__label">Card Number</label><input class="stp-01__input" placeholder="4242 4242 4242 4242"></div>
      <div class="stp-01__row">
        <div class="stp-01__field"><label class="stp-01__label">Expiry</label><input class="stp-01__input" placeholder="MM / YY"></div>
        <div class="stp-01__field"><label class="stp-01__label">CVV</label><input class="stp-01__input" placeholder="•••"></div>
      </div>
    </div>

    <!-- Panel 4 -->
    <div class="stp-01__panel" data-panel="4">
      <div class="stp-01__panel-title">Review &amp; Confirm</div>
      <div class="stp-01__summary">
        <div class="stp-01__summary-item"><div class="stp-01__summary-key">Name</div><div class="stp-01__summary-val">Alex Morgan</div></div>
        <div class="stp-01__summary-item"><div class="stp-01__summary-key">Email</div><div class="stp-01__summary-val">alex@example.com</div></div>
        <div class="stp-01__summary-item"><div class="stp-01__summary-key">Username</div><div class="stp-01__summary-val">@alexmorgan</div></div>
        <div class="stp-01__summary-item"><div class="stp-01__summary-key">Plan</div><div class="stp-01__summary-val">Pro · $29/mo</div></div>
      </div>
    </div>

    <!-- Success -->
    <div class="stp-01__panel" data-panel="5">
      <div class="stp-01__success">
        <div class="stp-01__success-icon">✓</div>
        <div class="stp-01__success-title">Account Created!</div>
        <div class="stp-01__success-msg">Welcome aboard. Check your email to verify your account.</div>
      </div>
    </div>

    <div class="stp-01__nav" id="stp-01-nav">
      <div class="stp-01__fraction">Step <span id="stp-01-cur">2</span> of <span>4</span></div>
      <button class="stp-01__btn stp-01__btn--back" id="stp-01-back">← Back</button>
      <button class="stp-01__btn stp-01__btn--next" id="stp-01-next">Continue →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-01,.stp-01 *,.stp-01 *::before,.stp-01 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-01 ::selection{background:#7c3aed;color:#fff}
.stp-01{
  --bg:#0d0d1a;
  --card:#16162a;
  --border:#2a2a4a;
  --purple:#7c3aed;
  --violet:#a855f7;
  --pink:#ec4899;
  --white:#f0f0ff;
  --muted:#6b6b9a;
  --success:#10b981;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
}
.stp-01__card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:48px 40px;
  max-width:640px;
  width:100%;
  box-shadow:0 32px 80px rgba(124,58,237,.15),0 0 0 1px rgba(124,58,237,.1);
}
.stp-01__header{text-align:center;margin-bottom:40px}
.stp-01__title{font-size:22px;font-weight:700;color:var(--white);letter-spacing:-.02em}
.stp-01__sub{font-size:13px;color:var(--muted);margin-top:6px}

/* stepper track */
.stp-01__steps{display:flex;align-items:center;margin-bottom:44px;position:relative}
.stp-01__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;z-index:1}
.stp-01__node{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  border:2px solid var(--border);
  background:var(--card);
  color:var(--muted);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.stp-01__node-label{font-size:11px;color:var(--muted);margin-top:10px;letter-spacing:.06em;text-transform:uppercase;text-align:center;transition:color .3s}

/* connector lines */
.stp-01__step:not(:last-child)::after{
  content:'';
  position:absolute;
  top:22px;left:calc(50% + 22px);
  width:calc(100% - 44px);
  height:2px;
  background:var(--border);
  z-index:0;
}
.stp-01__step.is-done::after{background:linear-gradient(90deg,var(--purple),var(--violet))}

/* states */
.stp-01__step.is-done .stp-01__node{
  background:linear-gradient(135deg,var(--purple),var(--violet));
  border-color:var(--violet);
  color:#fff;
  box-shadow:0 0 20px rgba(124,58,237,.5);
}
.stp-01__step.is-done .stp-01__node::after{
  content:'✓';
  position:absolute;
  font-size:16px;
}
.stp-01__step.is-done .stp-01__node-label{color:var(--violet)}

.stp-01__step.is-active .stp-01__node{
  background:transparent;
  border-color:var(--purple);
  border-width:2px;
  color:var(--purple);
  box-shadow:0 0 0 6px rgba(124,58,237,.15),0 0 24px rgba(124,58,237,.3);
  animation:stp-01-pulse 2s ease-in-out infinite;
}
.stp-01__step.is-active .stp-01__node-label{color:var(--white)}

@keyframes stp-01-pulse{
  0%,100%{box-shadow:0 0 0 6px rgba(124,58,237,.15),0 0 24px rgba(124,58,237,.3)}
  50%{box-shadow:0 0 0 10px rgba(124,58,237,.08),0 0 32px rgba(124,58,237,.4)}
}

/* form area */
.stp-01__panel{display:none}
.stp-01__panel.is-active{display:block}
.stp-01__panel-title{font-size:18px;font-weight:600;color:var(--white);margin-bottom:20px}

.stp-01__field{margin-bottom:16px}
.stp-01__label{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;display:block}
.stp-01__input{
  width:100%;padding:12px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--white);
  font-size:14px;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.stp-01__input::placeholder{color:var(--muted)}
.stp-01__input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.2)}

.stp-01__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* summary */
.stp-01__summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stp-01__summary-item{
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.2);
  border-radius:10px;padding:14px 16px;
}
.stp-01__summary-key{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stp-01__summary-val{font-size:14px;color:var(--white);font-weight:600;margin-top:4px}

/* navigation */
.stp-01__nav{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:12px}
.stp-01__btn{
  padding:12px 28px;border-radius:10px;
  font-size:14px;font-weight:600;cursor:pointer;
  border:none;transition:all .2s;
}
.stp-01__btn--back{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
}
.stp-01__btn--back:hover{border-color:var(--purple);color:var(--white)}
.stp-01__btn--next{
  background:linear-gradient(135deg,var(--purple),var(--violet));
  color:#fff;
  box-shadow:0 4px 20px rgba(124,58,237,.4);
  margin-left:auto;
}
.stp-01__btn--next:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(124,58,237,.5)}
.stp-01__btn--submit{
  background:linear-gradient(135deg,var(--success),#34d399);
  color:#fff;
  box-shadow:0 4px 20px rgba(16,185,129,.4);
  margin-left:auto;
}

/* success */
.stp-01__success{text-align:center;padding:20px 0}
.stp-01__success-icon{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--success),#34d399);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;margin:0 auto 20px;
  box-shadow:0 0 40px rgba(16,185,129,.4);
  animation:stp-01-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes stp-01-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.stp-01__success-title{font-size:22px;font-weight:700;color:var(--white);margin-bottom:8px}
.stp-01__success-msg{font-size:14px;color:var(--muted)}

/* progress fraction */
.stp-01__fraction{font-size:12px;color:var(--muted)}
.stp-01__fraction span{color:var(--violet);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .stp-01__step.is-active .stp-01__node{animation:none}
  .stp-01__success-icon{animation:none}
}
```

**JS:**
```js
(function(){
  const steps=document.querySelectorAll('.stp-01__step');
  const panels=document.querySelectorAll('.stp-01__panel');
  const btnNext=document.getElementById('stp-01-next');
  const btnBack=document.getElementById('stp-01-back');
  const curEl=document.getElementById('stp-01-cur');
  const nav=document.getElementById('stp-01-nav');
  let cur=2;
  const total=4;

  function update(){
    steps.forEach((s,i)=>{
      s.classList.remove('is-done','is-active');
      if(i+1<cur) s.classList.add('is-done');
      else if(i+1===cur) s.classList.add('is-active');
    });
    panels.forEach((p,i)=>{
      p.classList.remove('is-active');
      if(parseInt(p.dataset.panel)===cur||(cur>total&&parseInt(p.dataset.panel)===5)) p.classList.add('is-active');
    });
    curEl.textContent=Math.min(cur,total);
    btnBack.style.display=cur<=1?'none':'';
    if(cur>total){
      nav.style.display='none';
    } else if(cur===total){
      btnNext.textContent='Submit ✓';
      btnNext.className='stp-01__btn stp-01__btn--submit';
    } else {
      btnNext.textContent='Continue →';
      btnNext.className='stp-01__btn stp-01__btn--next';
    }
  }

  btnNext.addEventListener('click',()=>{cur=Math.min(cur+1,total+1);update();});
  btnBack.addEventListener('click',()=>{cur=Math.max(cur-1,1);update();});
  update();
})();
```

### 02. CSS Step Progress Bar With Numbers

**Type:** CSS + JS
**Description:** Three synced numbered progress bar variants on one page — a pill track, a segmented block bar, and a dot-connector strip — all advancing together from a single prev/next controller.

**HTML:**
```html
<div class="stp-02">
  <span class="stp-02__label">CSS Step Progress Bar Components</span>

  <!-- Variant A: pill track -->
  <div class="stp-02__varA">
    <div class="stp-02__varA-title">Pill Track Style</div>
    <div class="stp-02__track" id="stp-02-pill">
      <div class="stp-02__pip done"><div class="stp-02__num">✓</div></div>
      <div class="stp-02__connector done"></div>
      <div class="stp-02__pip done"><div class="stp-02__num">✓</div></div>
      <div class="stp-02__connector done"></div>
      <div class="stp-02__pip active"><div class="stp-02__num">3</div></div>
      <div class="stp-02__connector"></div>
      <div class="stp-02__pip"><div class="stp-02__num">4</div></div>
      <div class="stp-02__connector"></div>
      <div class="stp-02__pip"><div class="stp-02__num">5</div></div>
    </div>
  </div>

  <!-- Variant B: bar with numbered markers -->
  <div class="stp-02__varB">
    <div class="stp-02__varA-title">Progress Bar With Numbered Markers</div>
    <div class="stp-02__bar-wrap">
      <div class="stp-02__bar-track"><div class="stp-02__bar-fill" id="stp-02-fill" style="width:37.5%"></div></div>
    </div>
    <div class="stp-02__markers" id="stp-02-markers">
      <div class="stp-02__marker done"><div class="stp-02__marker-dot">✓</div><span class="stp-02__marker-name">Start</span></div>
      <div class="stp-02__marker done"><div class="stp-02__marker-dot">✓</div><span class="stp-02__marker-name">Profile</span></div>
      <div class="stp-02__marker active"><div class="stp-02__marker-dot">3</div><span class="stp-02__marker-name">Payment</span></div>
      <div class="stp-02__marker"><div class="stp-02__marker-dot">4</div><span class="stp-02__marker-name">Shipping</span></div>
      <div class="stp-02__marker"><div class="stp-02__marker-dot">5</div><span class="stp-02__marker-name">Review</span></div>
      <div class="stp-02__marker"><div class="stp-02__marker-dot">6</div><span class="stp-02__marker-name">Done</span></div>
    </div>
  </div>

  <!-- Variant C: segmented blocks -->
  <div class="stp-02__varC">
    <div class="stp-02__varA-title">Segmented Block Style</div>
    <div class="stp-02__segments" id="stp-02-segs">
      <div class="stp-02__seg done"><span class="stp-02__seg-num">✓</span><span class="stp-02__seg-name">Account</span></div>
      <div class="stp-02__seg done"><span class="stp-02__seg-num">✓</span><span class="stp-02__seg-name">Address</span></div>
      <div class="stp-02__seg active"><span class="stp-02__seg-num">03</span><span class="stp-02__seg-name">Payment</span></div>
      <div class="stp-02__seg"><span class="stp-02__seg-num">04</span><span class="stp-02__seg-name">Review</span></div>
      <div class="stp-02__seg"><span class="stp-02__seg-num">05</span><span class="stp-02__seg-name">Confirm</span></div>
    </div>
  </div>

  <div class="stp-02__controls">
    <button class="stp-02__ctrl stp-02__ctrl--prev" id="stp-02-prev">← Prev</button>
    <button class="stp-02__ctrl stp-02__ctrl--next" id="stp-02-next">Next →</button>
  </div>
</div>
```

**CSS:**
```css
.stp-02,.stp-02 *,.stp-02 *::before,.stp-02 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-02 ::selection{background:#f97316;color:#fff}
.stp-02{
  --bg:#fff8f0;
  --card:#fff;
  --orange:#f97316;
  --amber:#fb923c;
  --dark:#1a1207;
  --mid:#7a5533;
  --muted:#c4a882;
  --done:#10b981;
  --border:#ede0d4;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;
  gap:48px;
}
.stp-02__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ── Variant A: pill track ── */
.stp-02__varA{width:100%;max-width:680px}
.stp-02__varA-title{font-size:13px;font-weight:600;color:var(--mid);margin-bottom:20px;text-align:center}
.stp-02__track{
  display:flex;align-items:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 8px;
  box-shadow:0 4px 24px rgba(249,115,22,.08);
}
.stp-02__pip{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:0;
  position:relative;
}
.stp-02__num{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
  background:var(--border);
  color:var(--muted);
  transition:all .35s ease;
}
.stp-02__pip.done .stp-02__num{background:var(--done);color:#fff}
.stp-02__pip.active .stp-02__num{background:var(--orange);color:#fff;box-shadow:0 0 0 4px rgba(249,115,22,.2)}
.stp-02__connector{flex:1;height:3px;background:var(--border);transition:background .35s}
.stp-02__connector.done{background:var(--done)}

/* ── Variant B: numbered steps below bar ── */
.stp-02__varB{width:100%;max-width:680px}
.stp-02__bar-wrap{position:relative;margin-bottom:24px}
.stp-02__bar-track{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.stp-02__bar-fill{
  height:100%;width:60%;
  background:linear-gradient(90deg,var(--orange),var(--amber));
  border-radius:3px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.stp-02__markers{display:flex;justify-content:space-between;margin-top:12px}
.stp-02__marker{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.stp-02__marker-dot{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
  background:var(--border);color:var(--muted);
  transition:all .3s;border:2px solid var(--border);
}
.stp-02__marker.done .stp-02__marker-dot{background:var(--done);border-color:var(--done);color:#fff}
.stp-02__marker.active .stp-02__marker-dot{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.2)}
.stp-02__marker-name{font-size:11px;color:var(--muted);font-weight:500;text-align:center;transition:color .3s}
.stp-02__marker.active .stp-02__marker-name{color:var(--orange);font-weight:700}
.stp-02__marker.done .stp-02__marker-name{color:var(--done)}

/* ── Variant C: segmented blocks ── */
.stp-02__varC{width:100%;max-width:680px}
.stp-02__segments{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.stp-02__seg{
  height:56px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  background:var(--border);
  transition:all .3s;
  cursor:pointer;
}
.stp-02__seg-num{font-size:16px;font-weight:800;color:var(--muted)}
.stp-02__seg-name{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stp-02__seg.done{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:1px solid var(--done)}
.stp-02__seg.done .stp-02__seg-num{color:var(--done)}
.stp-02__seg.done .stp-02__seg-name{color:#059669}
.stp-02__seg.active{background:linear-gradient(135deg,var(--orange),var(--amber));box-shadow:0 4px 20px rgba(249,115,22,.35)}
.stp-02__seg.active .stp-02__seg-num,.stp-02__seg.active .stp-02__seg-name{color:#fff}

/* controls */
.stp-02__controls{display:flex;gap:12px}
.stp-02__ctrl{
  padding:10px 24px;border-radius:8px;border:none;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all .2s;
}
.stp-02__ctrl--prev{background:var(--border);color:var(--mid)}
.stp-02__ctrl--prev:hover{background:var(--muted);color:#fff}
.stp-02__ctrl--next{background:var(--orange);color:#fff;box-shadow:0 4px 16px rgba(249,115,22,.35)}
.stp-02__ctrl--next:hover{background:#ea6a0a;transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .stp-02__bar-fill,.stp-02__marker-dot,.stp-02__seg{transition:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const pillPips=document.querySelectorAll('.stp-02__pip');
  const pillCons=document.querySelectorAll('.stp-02__connector');
  const markers=document.querySelectorAll('.stp-02__marker');
  const fill=document.getElementById('stp-02-fill');
  const segs=document.querySelectorAll('.stp-02__seg');
  const total=6;

  function updateAll(){
    // pill (5 steps)
    pillPips.forEach((p,i)=>{
      p.classList.remove('done','active');
      if(i+1<cur) p.classList.add('done');
      else if(i+1===cur) p.classList.add('active');
      p.querySelector('.stp-02__num').textContent=i+1<cur?'✓':i+1;
    });
    pillCons.forEach((c,i)=>{c.classList.toggle('done',i+1<cur)});

    // bar markers (6)
    markers.forEach((m,i)=>{
      m.classList.remove('done','active');
      if(i+1<cur) m.classList.add('done');
      else if(i+1===cur) m.classList.add('active');
      m.querySelector('.stp-02__marker-dot').textContent=i+1<cur?'✓':i+1;
    });
    fill.style.width=((cur-1)/(total-1)*100)+'%';

    // segs (5 steps)
    segs.forEach((s,i)=>{
      s.classList.remove('done','active');
      if(i+1<cur) s.classList.add('done');
      else if(i+1===cur) s.classList.add('active');
      s.querySelector('.stp-02__seg-num').textContent=i+1<cur?'✓':String(i+1).padStart(2,'0');
    });
  }

  document.getElementById('stp-02-prev').addEventListener('click',()=>{cur=Math.max(1,cur-1);updateAll();});
  document.getElementById('stp-02-next').addEventListener('click',()=>{cur=Math.min(total,cur+1);updateAll();});
  updateAll();
})();
```

### 03. CSS Checkout Stepper UI Component

**Type:** Pure CSS
**Description:** A dark navy e-commerce checkout flow with a tab-rail step header, sidebar order summary, three product line items, running totals, and an SSL trust badge — step state driven by JS class toggling.

**HTML:**
```html
<div class="stp-03">
  <div class="stp-03__shell">
    <!-- Step tabs -->
    <div class="stp-03__bar">
      <div class="stp-03__tab done">
        <div class="stp-03__tab-icon">✓</div>
        <div class="stp-03__tab-info"><div class="stp-03__tab-step">Step 1</div><div class="stp-03__tab-name">Cart</div></div>
      </div>
      <div class="stp-03__tab done">
        <div class="stp-03__tab-icon">✓</div>
        <div class="stp-03__tab-info"><div class="stp-03__tab-step">Step 2</div><div class="stp-03__tab-name">Address</div></div>
      </div>
      <div class="stp-03__tab active">
        <div class="stp-03__tab-icon">3</div>
        <div class="stp-03__tab-info"><div class="stp-03__tab-step">Step 3</div><div class="stp-03__tab-name">Payment</div></div>
      </div>
      <div class="stp-03__tab">
        <div class="stp-03__tab-icon">4</div>
        <div class="stp-03__tab-info"><div class="stp-03__tab-step">Step 4</div><div class="stp-03__tab-name">Review</div></div>
      </div>
    </div>

    <!-- Body -->
    <div class="stp-03__body">
      <div class="stp-03__main">
        <div class="stp-03__section-title">Payment Details</div>
        <div class="stp-03__field">
          <label class="stp-03__field-label">Cardholder Name</label>
          <input class="stp-03__input" placeholder="Jordan Blake" value="Jordan Blake">
        </div>
        <div class="stp-03__field">
          <label class="stp-03__field-label">Card Number</label>
          <input class="stp-03__input" placeholder="4242 4242 4242 4242">
        </div>
        <div class="stp-03__grid3">
          <div class="stp-03__field">
            <label class="stp-03__field-label">Expiry Month</label>
            <input class="stp-03__input" placeholder="MM">
          </div>
          <div class="stp-03__field">
            <label class="stp-03__field-label">Year</label>
            <input class="stp-03__input" placeholder="YY">
          </div>
          <div class="stp-03__field">
            <label class="stp-03__field-label">CVV</label>
            <input class="stp-03__input" placeholder="•••">
          </div>
        </div>
        <div class="stp-03__field" style="margin-top:8px">
          <label class="stp-03__field-label">Billing ZIP</label>
          <input class="stp-03__input" placeholder="90210" style="max-width:160px">
        </div>
      </div>

      <!-- Sidebar -->
      <div class="stp-03__aside">
        <div class="stp-03__aside-title">Order Summary</div>
        <div class="stp-03__item">
          <div class="stp-03__item-thumb" style="background:rgba(14,165,233,.15)">👟</div>
          <div><div class="stp-03__item-name">Air Max Pro</div><div class="stp-03__item-sku">Size 10 · Black</div></div>
          <div class="stp-03__item-price">$129</div>
        </div>
        <div class="stp-03__item">
          <div class="stp-03__item-thumb" style="background:rgba(6,182,212,.15)">🎒</div>
          <div><div class="stp-03__item-name">Trail Pack 24L</div><div class="stp-03__item-sku">Navy · x1</div></div>
          <div class="stp-03__item-price">$89</div>
        </div>
        <div class="stp-03__item">
          <div class="stp-03__item-thumb" style="background:rgba(245,158,11,.15)">🧢</div>
          <div><div class="stp-03__item-name">Sport Cap</div><div class="stp-03__item-sku">One Size · x2</div></div>
          <div class="stp-03__item-price">$38</div>
        </div>
        <div class="stp-03__totals">
          <div class="stp-03__total-row"><span>Subtotal</span><span>$256</span></div>
          <div class="stp-03__total-row"><span>Shipping</span><span>Free</span></div>
          <div class="stp-03__total-row"><span>Tax (8%)</span><span>$20.48</span></div>
          <div class="stp-03__total-row grand"><span>Total</span><span>$276.48</span></div>
        </div>
      </div>
    </div>

    <!-- Nav -->
    <div class="stp-03__nav" style="background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 16px 16px">
      <button class="stp-03__btn stp-03__btn--ghost">← Back</button>
      <span class="stp-03__lock">🔒 256-bit SSL encrypted</span>
      <button class="stp-03__btn stp-03__btn--primary">Place Order →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-03,.stp-03 *,.stp-03 *::before,.stp-03 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-03 ::selection{background:#0ea5e9;color:#fff}
.stp-03{
  --bg:#0a0f1e;
  --card:#0f1629;
  --border:#1e2d4a;
  --blue:#0ea5e9;
  --cyan:#06b6d4;
  --white:#e8f4fd;
  --muted:#4a6080;
  --success:#22c55e;
  --warning:#f59e0b;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  background-image:radial-gradient(ellipse at 20% 50%,rgba(14,165,233,.06) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 50%,rgba(6,182,212,.04) 0%,transparent 50%);
}
.stp-03__shell{max-width:820px;width:100%}

/* top stepper bar */
.stp-03__bar{
  display:flex;align-items:stretch;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px 16px 0 0;
  overflow:hidden;
  border-bottom:none;
}
.stp-03__tab{
  flex:1;display:flex;align-items:center;gap:12px;
  padding:18px 20px;
  position:relative;
  border-right:1px solid var(--border);
  transition:background .3s;
}
.stp-03__tab:last-child{border-right:none}
.stp-03__tab.done{background:rgba(34,197,94,.05)}
.stp-03__tab.active{background:rgba(14,165,233,.08)}
.stp-03__tab-icon{
  width:36px;height:36px;flex-shrink:0;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  background:var(--border);
  color:var(--muted);
  transition:all .3s;
  font-weight:700;
}
.stp-03__tab.done .stp-03__tab-icon{background:rgba(34,197,94,.2);color:var(--success)}
.stp-03__tab.active .stp-03__tab-icon{background:rgba(14,165,233,.2);color:var(--blue)}
.stp-03__tab-info{min-width:0}
.stp-03__tab-step{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stp-03__tab-name{font-size:13px;font-weight:600;color:var(--muted);transition:color .3s;white-space:nowrap}
.stp-03__tab.done .stp-03__tab-name{color:var(--success)}
.stp-03__tab.active .stp-03__tab-name{color:var(--white)}

/* active underline */
.stp-03__tab.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}

/* body */
.stp-03__body{
  background:var(--card);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 16px 16px;
  display:grid;grid-template-columns:1fr 300px;
}
.stp-03__main{padding:32px;border-right:1px solid var(--border)}
.stp-03__section-title{font-size:16px;font-weight:700;color:var(--white);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.stp-03__section-title::before{content:'';width:3px;height:18px;background:linear-gradient(180deg,var(--blue),var(--cyan));border-radius:2px;display:block}

.stp-03__field{margin-bottom:14px}
.stp-03__field-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;display:block}
.stp-03__input{
  width:100%;padding:11px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:8px;color:var(--white);font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.stp-03__input::placeholder{color:var(--muted)}
.stp-03__input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.stp-03__grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stp-03__grid3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}

/* order summary sidebar */
.stp-03__aside{padding:24px}
.stp-03__aside-title{font-size:14px;font-weight:700;color:var(--white);margin-bottom:16px}
.stp-03__item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.stp-03__item:last-of-type{border-bottom:none}
.stp-03__item-thumb{
  width:40px;height:40px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.stp-03__item-name{font-size:12px;color:var(--white);font-weight:600}
.stp-03__item-sku{font-size:10px;color:var(--muted)}
.stp-03__item-price{font-size:13px;font-weight:700;color:var(--blue);margin-left:auto}

.stp-03__totals{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.stp-03__total-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:3px 0}
.stp-03__total-row.grand{font-size:15px;font-weight:700;color:var(--white);padding-top:8px;border-top:1px solid var(--border);margin-top:6px}

/* nav */
.stp-03__nav{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-top:1px solid var(--border)}
.stp-03__btn{padding:11px 28px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s}
.stp-03__btn--ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
.stp-03__btn--ghost:hover{color:var(--white);border-color:var(--blue)}
.stp-03__btn--primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;box-shadow:0 4px 20px rgba(14,165,233,.35)}
.stp-03__btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(14,165,233,.45)}
.stp-03__lock{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}

@media (max-width:640px){
  .stp-03__body{grid-template-columns:1fr}
  .stp-03__aside{display:none}
  .stp-03__tab-info{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stp-03__btn--primary,.stp-03__tab{transition:none}
}
```

### 04. CSS Vertical Timeline Stepper

**Type:** CSS + JS
**Description:** A vertical spine stepper where each step expands into a full content card when active, with fuchsia accent connectors, slide-in panel transitions, and a running progress bar on the left rail.

**HTML:**
```html
<div class="stp-04">
  <div class="stp-04__wrap">
    <div class="stp-04__header">
      <div class="stp-04__eyebrow">Application Process</div>
      <div class="stp-04__title">Complete Your Application</div>
      <div class="stp-04__sub">Follow each step to submit your application in minutes</div>
    </div>

    <div class="stp-04__timeline" id="stp-04-timeline">

      <div class="stp-04__entry is-done" data-step="1">
        <div class="stp-04__spine">
          <div class="stp-04__node">✓</div>
          <div class="stp-04__line"></div>
        </div>
        <div class="stp-04__content">
          <span class="stp-04__step-tag">Step 1</span>
          <div class="stp-04__step-name">Personal Information</div>
          <div class="stp-04__step-desc">Basic details about you — name, email, date of birth.</div>
          <span class="stp-04__done-badge">✓ Completed</span>
        </div>
      </div>

      <div class="stp-04__entry is-done" data-step="2">
        <div class="stp-04__spine">
          <div class="stp-04__node">✓</div>
          <div class="stp-04__line"></div>
        </div>
        <div class="stp-04__content">
          <span class="stp-04__step-tag">Step 2</span>
          <div class="stp-04__step-name">Address & Location</div>
          <div class="stp-04__step-desc">Your current residence and contact address.</div>
          <span class="stp-04__done-badge">✓ Completed</span>
        </div>
      </div>

      <div class="stp-04__entry is-active" data-step="3">
        <div class="stp-04__spine">
          <div class="stp-04__node">3</div>
          <div class="stp-04__line"></div>
        </div>
        <div class="stp-04__content">
          <span class="stp-04__step-tag">Step 3 · In Progress</span>
          <div class="stp-04__step-name">Employment History</div>
          <div class="stp-04__step-desc">Tell us about your last two positions.</div>
          <div class="stp-04__card">
            <div class="stp-04__field">
              <label class="stp-04__fl">Current Job Title</label>
              <input class="stp-04__in" placeholder="Senior Product Designer">
            </div>
            <div class="stp-04__field">
              <label class="stp-04__fl">Company Name</label>
              <input class="stp-04__in" placeholder="Acme Corp">
            </div>
            <div class="stp-04__field">
              <label class="stp-04__fl">Years of Experience</label>
              <input class="stp-04__in" placeholder="5">
            </div>
            <div class="stp-04__cta">
              <button class="stp-04__btn stp-04__btn--ghost" id="stp-04-back">← Back</button>
              <button class="stp-04__btn stp-04__btn--primary" id="stp-04-next">Save &amp; Continue →</button>
            </div>
          </div>
        </div>
      </div>

      <div class="stp-04__entry" data-step="4">
        <div class="stp-04__spine">
          <div class="stp-04__node">4</div>
          <div class="stp-04__line"></div>
        </div>
        <div class="stp-04__content">
          <span class="stp-04__step-tag">Step 4</span>
          <div class="stp-04__step-name">Documents Upload</div>
          <div class="stp-04__step-desc">Upload your CV, cover letter, and ID documents.</div>
          <div class="stp-04__card">
            <div style="text-align:center;padding:16px;border:2px dashed var(--border);border-radius:10px;color:var(--muted);font-size:13px">
              📎 Drag &amp; drop files or <span style="color:var(--fuchsia);cursor:pointer">browse</span>
            </div>
            <div class="stp-04__cta" style="margin-top:12px">
              <button class="stp-04__btn stp-04__btn--ghost" id="stp-04-back2">← Back</button>
              <button class="stp-04__btn stp-04__btn--primary" id="stp-04-next2">Submit →</button>
            </div>
          </div>
        </div>
      </div>

      <div class="stp-04__entry" data-step="5">
        <div class="stp-04__spine">
          <div class="stp-04__node">5</div>
          <div class="stp-04__line"></div>
        </div>
        <div class="stp-04__content">
          <span class="stp-04__step-tag">Step 5</span>
          <div class="stp-04__step-name">Review &amp; Submit</div>
          <div class="stp-04__step-desc">Final check before we process your application.</div>
          <div class="stp-04__card">
            <div style="font-size:13px;color:var(--mid);margin-bottom:12px">Everything looks great! Click submit when ready.</div>
            <div class="stp-04__cta">
              <button class="stp-04__btn stp-04__btn--ghost" id="stp-04-back3">← Back</button>
              <button class="stp-04__btn stp-04__btn--primary" id="stp-04-submit">Submit Application ✓</button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="stp-04__complete" id="stp-04-complete">
      <div class="stp-04__complete-icon">🎉</div>
      <div class="stp-04__complete-title">Application Submitted!</div>
      <div class="stp-04__complete-msg">We'll review your application and get back to you within 3 business days.</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-04,.stp-04 *,.stp-04 *::before,.stp-04 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-04 ::selection{background:#d946ef;color:#fff}
.stp-04{
  --bg:#faf5ff;
  --card:#fff;
  --purple:#9333ea;
  --fuchsia:#d946ef;
  --dark:#1e0a2e;
  --mid:#6b21a8;
  --muted:#a78bca;
  --border:#e9d5ff;
  --done:#7c3aed;
  --success:#16a34a;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:flex-start;justify-content:center;
  padding:60px 20px;
  background-image:radial-gradient(circle at 70% 20%,rgba(217,70,239,.06),transparent 40%);
}
.stp-04__wrap{max-width:600px;width:100%}
.stp-04__header{margin-bottom:40px}
.stp-04__eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fuchsia);font-weight:700;margin-bottom:8px}
.stp-04__title{font-size:28px;font-weight:800;color:var(--dark);letter-spacing:-.03em;line-height:1.2}
.stp-04__sub{font-size:14px;color:var(--muted);margin-top:6px}

/* vertical stepper */
.stp-04__timeline{position:relative;padding-left:0}

.stp-04__entry{display:flex;gap:0;position:relative;margin-bottom:0}

/* left spine */
.stp-04__spine{
  display:flex;flex-direction:column;align-items:center;
  width:56px;flex-shrink:0;
}
.stp-04__node{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  background:var(--border);
  color:var(--muted);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  border:2px solid var(--border);
  flex-shrink:0;
  position:relative;z-index:1;
}
.stp-04__line{
  width:2px;flex:1;min-height:32px;
  background:var(--border);
  transition:background .4s;
  margin:4px 0;
}
.stp-04__entry:last-child .stp-04__line{display:none}

/* states */
.stp-04__entry.is-done .stp-04__node{
  background:linear-gradient(135deg,var(--purple),var(--fuchsia));
  border-color:var(--fuchsia);color:#fff;
  box-shadow:0 0 0 4px rgba(217,70,239,.15),0 4px 16px rgba(147,51,234,.3);
}
.stp-04__entry.is-done .stp-04__line{background:linear-gradient(180deg,var(--fuchsia),var(--purple))}
.stp-04__entry.is-active .stp-04__node{
  background:#fff;
  border-color:var(--fuchsia);border-width:2px;
  color:var(--fuchsia);
  box-shadow:0 0 0 6px rgba(217,70,239,.12),0 4px 20px rgba(217,70,239,.3);
  animation:stp-04-glow 2s ease-in-out infinite;
}
.stp-04__entry.is-active .stp-04__line{background:linear-gradient(180deg,var(--muted),var(--border))}

@keyframes stp-04-glow{
  0%,100%{box-shadow:0 0 0 6px rgba(217,70,239,.12),0 4px 20px rgba(217,70,239,.3)}
  50%{box-shadow:0 0 0 10px rgba(217,70,239,.06),0 4px 28px rgba(217,70,239,.45)}
}

/* right content */
.stp-04__content{flex:1;padding:8px 0 32px 16px}
.stp-04__entry:last-child .stp-04__content{padding-bottom:0}

.stp-04__step-tag{
  display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:4px;
}
.stp-04__entry.is-done .stp-04__step-tag{color:var(--fuchsia)}
.stp-04__entry.is-active .stp-04__step-tag{color:var(--fuchsia)}

.stp-04__step-name{font-size:17px;font-weight:700;color:var(--muted);margin-bottom:4px;transition:color .3s}
.stp-04__entry.is-done .stp-04__step-name{color:var(--dark)}
.stp-04__entry.is-active .stp-04__step-name{color:var(--dark)}

.stp-04__step-desc{font-size:13px;color:var(--muted);line-height:1.6}
.stp-04__entry.is-active .stp-04__step-desc{color:var(--mid)}

/* active card */
.stp-04__card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  margin-top:14px;
  box-shadow:0 4px 24px rgba(147,51,234,.08);
  display:none;
}
.stp-04__entry.is-active .stp-04__card{display:block}

.stp-04__field{margin-bottom:12px}
.stp-04__fl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;display:block}
.stp-04__in{
  width:100%;padding:10px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--dark);font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.stp-04__in:focus{border-color:var(--fuchsia);box-shadow:0 0 0 3px rgba(217,70,239,.12)}

.stp-04__done-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(22,163,74,.1);
  border:1px solid rgba(22,163,74,.2);
  color:var(--success);
  font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:999px;
  margin-top:8px;
}

/* cta */
.stp-04__cta{margin-top:8px;display:flex;gap:10px;align-items:center}
.stp-04__btn{
  padding:10px 22px;border-radius:8px;border:none;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;
}
.stp-04__btn--primary{
  background:linear-gradient(135deg,var(--purple),var(--fuchsia));
  color:#fff;box-shadow:0 4px 16px rgba(147,51,234,.3);
}
.stp-04__btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(217,70,239,.4)}
.stp-04__btn--ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
.stp-04__btn--ghost:hover{border-color:var(--purple);color:var(--dark)}

/* completion */
.stp-04__complete{
  margin-top:32px;
  background:linear-gradient(135deg,rgba(147,51,234,.08),rgba(217,70,239,.06));
  border:1px solid var(--border);
  border-radius:14px;padding:28px;text-align:center;
  display:none;
}
.stp-04__complete.show{display:block;animation:stp-04-fadein .5s ease}
@keyframes stp-04-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stp-04__complete-icon{font-size:40px;margin-bottom:12px}
.stp-04__complete-title{font-size:20px;font-weight:800;color:var(--dark)}
.stp-04__complete-msg{font-size:14px;color:var(--muted);margin-top:6px}

@media (prefers-reduced-motion:reduce){
  .stp-04__entry.is-active .stp-04__node{animation:none}
  .stp-04__complete{animation:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const entries=document.querySelectorAll('.stp-04__entry');
  const complete=document.getElementById('stp-04-complete');

  function go(n){
    if(n>entries.length){
      entries.forEach(e=>{e.classList.remove('is-active');e.classList.add('is-done');e.querySelector('.stp-04__node').textContent='✓'});
      complete.classList.add('show');return;
    }
    cur=n;
    entries.forEach((e,i)=>{
      e.classList.remove('is-done','is-active');
      const node=e.querySelector('.stp-04__node');
      if(i+1<cur){e.classList.add('is-done');node.textContent='✓';}
      else if(i+1===cur){e.classList.add('is-active');node.textContent=cur;}
      else{node.textContent=i+1;}
    });
    complete.classList.remove('show');
  }

  document.getElementById('stp-04-next').onclick=()=>go(cur+1);
  document.getElementById('stp-04-back').onclick=()=>go(Math.max(1,cur-1));
  document.getElementById('stp-04-next2').onclick=()=>go(cur+1);
  document.getElementById('stp-04-back2').onclick=()=>go(Math.max(1,cur-1));
  document.getElementById('stp-04-submit').onclick=()=>go(cur+1);
  document.getElementById('stp-04-back3').onclick=()=>go(Math.max(1,cur-1));
})();
```

### 05. CSS Animated Step Indicator With Icons

**Type:** CSS + JS
**Description:** Icon bubble steps with a checkmark overlay pop animation, an SVG arc ring that advances its stroke-dashoffset per step, and a teal/emerald colour scheme — designed for onboarding and setup flows.

**HTML:**
```html
<div class="stp-05">
  <div class="stp-05__wrap">
    <div class="stp-05__label">Onboarding Flow</div>
    <div class="stp-05__title">Set Up Your Workspace</div>

    <div class="stp-05__stepper" id="stp-05-stepper">
      <div class="stp-05__item is-done" data-i="1">
        <div class="stp-05__bubble">🎨<div class="stp-05__check">✓</div></div>
        <span class="stp-05__name">Theme</span>
        <span class="stp-05__sub">Appearance</span>
      </div>
      <div class="stp-05__item is-done" data-i="2">
        <div class="stp-05__bubble">👥<div class="stp-05__check">✓</div></div>
        <span class="stp-05__name">Team</span>
        <span class="stp-05__sub">Invite members</span>
      </div>
      <div class="stp-05__item active" data-i="3">
        <div class="stp-05__bubble">🔗<div class="stp-05__check">✓</div></div>
        <span class="stp-05__name">Integrations</span>
        <span class="stp-05__sub">Connect apps</span>
      </div>
      <div class="stp-05__item" data-i="4">
        <div class="stp-05__bubble">📊<div class="stp-05__check">✓</div></div>
        <span class="stp-05__name">Analytics</span>
        <span class="stp-05__sub">Set up tracking</span>
      </div>
      <div class="stp-05__item" data-i="5">
        <div class="stp-05__bubble">🚀<div class="stp-05__check">✓</div></div>
        <span class="stp-05__name">Launch</span>
        <span class="stp-05__sub">Go live</span>
      </div>
    </div>

    <div class="stp-05__panel">
      <div class="stp-05__panel-inner" data-panel="1">
        <div class="stp-05__panel-title">Choose Your Theme</div>
        <div class="stp-05__panel-desc">Personalise your workspace with colours and typography that match your brand.</div>
        <div class="stp-05__tags"><span class="stp-05__tag">Dark Mode</span><span class="stp-05__tag">Custom Palette</span><span class="stp-05__tag">Font Scale</span></div>
      </div>
      <div class="stp-05__panel-inner" data-panel="2">
        <div class="stp-05__panel-title">Invite Your Team</div>
        <div class="stp-05__panel-desc">Add teammates by email. Assign roles and set permissions for each member.</div>
        <div class="stp-05__tags"><span class="stp-05__tag">Admin</span><span class="stp-05__tag">Editor</span><span class="stp-05__tag">Viewer</span></div>
      </div>
      <div class="stp-05__panel-inner active" data-panel="3">
        <div class="stp-05__panel-title">Connect Integrations</div>
        <div class="stp-05__panel-desc">Link your favourite tools — Slack, GitHub, Figma, Linear and more — to keep everything in sync.</div>
        <div class="stp-05__tags"><span class="stp-05__tag">Slack</span><span class="stp-05__tag">GitHub</span><span class="stp-05__tag">Figma</span><span class="stp-05__tag">Linear</span><span class="stp-05__tag">Notion</span></div>
        <div class="stp-05__progress">
          <svg class="stp-05__ring" viewBox="0 0 44 44">
            <circle class="bg" cx="22" cy="22" r="20"/>
            <circle class="fg" id="stp-05-ring" cx="22" cy="22" r="20"/>
          </svg>
          <div>
            <div class="stp-05__pct" id="stp-05-pct">40%</div>
            <div class="stp-05__pct-label">Overall Progress</div>
          </div>
        </div>
      </div>
      <div class="stp-05__panel-inner" data-panel="4">
        <div class="stp-05__panel-title">Configure Analytics</div>
        <div class="stp-05__panel-desc">Set up event tracking, conversion goals, and dashboard widgets to stay on top of performance.</div>
        <div class="stp-05__tags"><span class="stp-05__tag">Events</span><span class="stp-05__tag">Goals</span><span class="stp-05__tag">Funnels</span></div>
      </div>
      <div class="stp-05__panel-inner" data-panel="5">
        <div class="stp-05__panel-title">🚀 Ready to Launch!</div>
        <div class="stp-05__panel-desc">Your workspace is fully configured. Click Launch to go live and start collaborating with your team.</div>
        <div class="stp-05__tags"><span class="stp-05__tag">All systems go</span><span class="stp-05__tag">5 steps complete</span></div>
      </div>

      <div class="stp-05__nav">
        <button class="stp-05__btn stp-05__btn--prev" id="stp-05-prev">← Previous</button>
        <button class="stp-05__btn stp-05__btn--next" id="stp-05-next">Continue →</button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-05,.stp-05 *,.stp-05 *::before,.stp-05 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-05 ::selection{background:#059669;color:#fff}
.stp-05{
  --bg:#041a14;
  --card:#071f18;
  --emerald:#10b981;
  --teal:#14b8a6;
  --lime:#84cc16;
  --dark:#d1fae5;
  --muted:#2d6a54;
  --border:#0d3d2e;
  --white:#ecfdf5;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  background-image:
    radial-gradient(ellipse at 30% 60%,rgba(16,185,129,.08) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 20%,rgba(20,184,166,.06) 0%,transparent 40%);
}
.stp-05__wrap{max-width:700px;width:100%}
.stp-05__label{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emerald);font-weight:700;text-align:center;
  margin-bottom:12px;
}
.stp-05__title{font-size:26px;font-weight:800;color:var(--white);text-align:center;letter-spacing:-.02em;margin-bottom:40px}

/* stepper */
.stp-05__stepper{
  display:flex;align-items:flex-start;
  gap:0;
  margin-bottom:48px;
}
.stp-05__item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:12px;position:relative;
}

/* connector */
.stp-05__item:not(:last-child)::after{
  content:'';
  position:absolute;
  top:32px;left:calc(50% + 32px);
  width:calc(100% - 64px);height:2px;
  background:var(--border);
  transition:background .5s ease;
}
.stp-05__item.done::after{
  background:linear-gradient(90deg,var(--emerald),var(--teal));
  animation:stp-05-flash .4s ease;
}
@keyframes stp-05-flash{0%{opacity:0}100%{opacity:1}}

/* icon bubble */
.stp-05__bubble{
  width:64px;height:64px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  background:var(--border);
  border:2px solid var(--muted);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  overflow:hidden;
}
.stp-05__bubble::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.05),transparent);
  opacity:0;transition:opacity .3s;
}
.stp-05__item.done .stp-05__bubble{
  background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(20,184,166,.15));
  border-color:var(--emerald);
  box-shadow:0 0 24px rgba(16,185,129,.3),inset 0 1px 0 rgba(255,255,255,.1);
}
.stp-05__item.done .stp-05__bubble::before{opacity:1}
.stp-05__item.active .stp-05__bubble{
  background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(132,204,22,.1));
  border-color:var(--teal);
  box-shadow:0 0 0 6px rgba(16,185,129,.1),0 0 32px rgba(16,185,129,.3);
  animation:stp-05-bob 2.5s ease-in-out infinite;
}
@keyframes stp-05-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* checkmark overlay */
.stp-05__check{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;
  background:linear-gradient(135deg,var(--emerald),var(--teal));
  border-radius:18px;
  opacity:0;transform:scale(.5);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.stp-05__item.done .stp-05__check{opacity:1;transform:scale(1)}

.stp-05__name{font-size:12px;font-weight:600;color:var(--muted);text-align:center;letter-spacing:.04em;text-transform:uppercase;transition:color .3s}
.stp-05__item.done .stp-05__name{color:var(--emerald)}
.stp-05__item.active .stp-05__name{color:var(--white)}
.stp-05__sub{font-size:11px;color:var(--border);text-align:center;transition:color .3s}
.stp-05__item.active .stp-05__sub{color:var(--muted)}
.stp-05__item.done .stp-05__sub{color:var(--muted)}

/* content panel */
.stp-05__panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px 32px;
  min-height:200px;
  position:relative;
  overflow:hidden;
}
.stp-05__panel::before{
  content:'';
  position:absolute;top:-60px;right:-60px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.08),transparent);
}
.stp-05__panel-inner{display:none}
.stp-05__panel-inner.active{display:block;animation:stp-05-in .35s ease}
@keyframes stp-05-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

.stp-05__panel-title{font-size:18px;font-weight:700;color:var(--white);margin-bottom:8px}
.stp-05__panel-desc{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:20px}
.stp-05__tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.stp-05__tag{
  padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;
  background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);color:var(--emerald);
}

.stp-05__nav{display:flex;justify-content:space-between;margin-top:24px}
.stp-05__btn{padding:10px 24px;border-radius:10px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.stp-05__btn--prev{background:var(--border);color:var(--muted)}
.stp-05__btn--prev:hover{color:var(--white)}
.stp-05__btn--next{background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;box-shadow:0 4px 16px rgba(16,185,129,.3)}
.stp-05__btn--next:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(16,185,129,.4)}

/* progress ring */
.stp-05__progress{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}
.stp-05__ring{width:52px;height:52px}
.stp-05__ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.stp-05__ring .bg{stroke:var(--border)}
.stp-05__ring .fg{stroke:var(--emerald);stroke-dasharray:126;stroke-dashoffset:126;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .5s ease}
.stp-05__pct{font-size:13px;font-weight:700;color:var(--emerald)}
.stp-05__pct-label{font-size:12px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .stp-05__item.active .stp-05__bubble{animation:none}
  .stp-05__item.done::after,.stp-05__panel-inner.active{animation:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const items=document.querySelectorAll('.stp-05__item');
  const panels=document.querySelectorAll('.stp-05__panel-inner');
  const ring=document.getElementById('stp-05-ring');
  const pct=document.getElementById('stp-05-pct');
  const total=5;

  function update(){
    items.forEach((item,i)=>{
      item.classList.remove('done','active','is-done');
      if(i+1<cur) item.classList.add('done');
      else if(i+1===cur) item.classList.add('active');
    });
    panels.forEach(p=>{
      p.classList.remove('active');
      if(parseInt(p.dataset.panel)===cur) p.classList.add('active');
    });
    const p=((cur-1)/(total-1)*100).toFixed(0);
    const offset=126-(126*(cur-1)/(total-1));
    ring.style.strokeDashoffset=offset;
    pct.textContent=p+'%';
    document.getElementById('stp-05-prev').disabled=cur<=1;
    document.getElementById('stp-05-next').textContent=cur===total?'Launch 🚀':'Continue →';
  }

  document.getElementById('stp-05-prev').addEventListener('click',()=>{cur=Math.max(1,cur-1);update();});
  document.getElementById('stp-05-next').addEventListener('click',()=>{cur=Math.min(total,cur+1);update();});
  update();
})();
```

### 06. CSS Onboarding Stepper Flow

**Type:** CSS + JS
**Description:** A full-panel onboarding layout with a left sidebar step list, animated slide-in content panels, choice card selections, a live progress bar, and a coral/rose colour scheme built for SaaS welcome flows.

**HTML:**
```html
<div class="stp-06">
  <div class="stp-06__outer">
    <!-- Sidebar -->
    <div class="stp-06__sidebar">
      <div class="stp-06__brand">Sprout <span>·</span> Setup</div>
      <nav class="stp-06__nav" id="stp-06-nav">
        <div class="stp-06__nav-item done"><div class="stp-06__nav-dot">✓</div><span class="stp-06__nav-text">Your Account</span></div>
        <div class="stp-06__nav-item done"><div class="stp-06__nav-dot">✓</div><span class="stp-06__nav-text">Your Goal</span></div>
        <div class="stp-06__nav-item active"><div class="stp-06__nav-dot">3</div><span class="stp-06__nav-text">Your Team</span></div>
        <div class="stp-06__nav-item"><div class="stp-06__nav-dot">4</div><span class="stp-06__nav-text">Workspace</span></div>
        <div class="stp-06__nav-item"><div class="stp-06__nav-dot">5</div><span class="stp-06__nav-text">Finish</span></div>
      </nav>
      <div class="stp-06__sidebar-progress">
        <div class="stp-06__sidebar-progress-label">Setup progress — <span id="stp-06-pct">40%</span></div>
        <div class="stp-06__sidebar-bar"><div class="stp-06__sidebar-fill" id="stp-06-fill" style="width:40%"></div></div>
      </div>
    </div>

    <!-- Content -->
    <div class="stp-06__content">
      <div class="stp-06__step-display" id="stp-06-step-display">Step 3 of 5</div>
      <div class="stp-06__step-title" id="stp-06-step-title">Tell Us About Your Team</div>
      <div class="stp-06__step-desc" id="stp-06-step-desc">We'll tailor the experience for your team size and structure.</div>

      <div class="stp-06__pane" data-pane="1">
        <div class="stp-06__field"><label class="stp-06__fl">Full Name</label><input class="stp-06__in" placeholder="Jamie Rivers" value="Jamie Rivers"></div>
        <div class="stp-06__field"><label class="stp-06__fl">Work Email</label><input class="stp-06__in" placeholder="jamie@company.com" value="jamie@company.com"></div>
        <div class="stp-06__row">
          <div class="stp-06__field"><label class="stp-06__fl">Password</label><input class="stp-06__in" type="password" placeholder="••••••••"></div>
          <div class="stp-06__field"><label class="stp-06__fl">Confirm</label><input class="stp-06__in" type="password" placeholder="••••••••"></div>
        </div>
      </div>

      <div class="stp-06__pane" data-pane="2">
        <div class="stp-06__choices">
          <div class="stp-06__choice"><div class="stp-06__choice-icon">📈</div><div class="stp-06__choice-name">Grow Sales</div><div class="stp-06__choice-desc">Increase revenue & leads</div></div>
          <div class="stp-06__choice picked"><div class="stp-06__choice-icon">🤝</div><div class="stp-06__choice-name">Improve CX</div><div class="stp-06__choice-desc">Better customer experience</div></div>
          <div class="stp-06__choice"><div class="stp-06__choice-icon">⚙️</div><div class="stp-06__choice-name">Automate</div><div class="stp-06__choice-desc">Streamline operations</div></div>
          <div class="stp-06__choice"><div class="stp-06__choice-icon">🎯</div><div class="stp-06__choice-name">Analytics</div><div class="stp-06__choice-desc">Data-driven decisions</div></div>
        </div>
      </div>

      <div class="stp-06__pane active" data-pane="3">
        <div class="stp-06__choices">
          <div class="stp-06__choice"><div class="stp-06__choice-icon">👤</div><div class="stp-06__choice-name">Solo</div><div class="stp-06__choice-desc">Just me</div></div>
          <div class="stp-06__choice picked"><div class="stp-06__choice-icon">👥</div><div class="stp-06__choice-name">Small</div><div class="stp-06__choice-desc">2–10 people</div></div>
          <div class="stp-06__choice"><div class="stp-06__choice-icon">🏢</div><div class="stp-06__choice-name">Mid</div><div class="stp-06__choice-desc">11–50 people</div></div>
          <div class="stp-06__choice"><div class="stp-06__choice-icon">🏙️</div><div class="stp-06__choice-name">Enterprise</div><div class="stp-06__choice-desc">50+ people</div></div>
        </div>
      </div>

      <div class="stp-06__pane" data-pane="4">
        <div class="stp-06__field"><label class="stp-06__fl">Workspace Name</label><input class="stp-06__in" placeholder="Acme Corp Workspace"></div>
        <div class="stp-06__field"><label class="stp-06__fl">Workspace URL</label><input class="stp-06__in" placeholder="acme.sprout.io"></div>
        <div class="stp-06__field"><label class="stp-06__fl">Industry</label><input class="stp-06__in" placeholder="SaaS / Technology"></div>
      </div>

      <div class="stp-06__pane" data-pane="5">
        <div style="text-align:center;padding:20px 0">
          <div style="font-size:56px;margin-bottom:16px;animation:stp-06-in .4s ease">🎉</div>
          <div style="font-size:22px;font-weight:800;color:var(--dark);margin-bottom:8px">You're all set!</div>
          <div style="font-size:14px;color:#9ca3af">Your workspace is ready. Let's start growing together.</div>
        </div>
      </div>

      <div class="stp-06__footer">
        <button class="stp-06__skip" id="stp-06-skip">Skip this step</button>
        <div class="stp-06__foot-right">
          <button class="stp-06__btn stp-06__btn--ghost" id="stp-06-back">Back</button>
          <button class="stp-06__btn stp-06__btn--primary" id="stp-06-next">Continue →</button>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-06,.stp-06 *,.stp-06 *::before,.stp-06 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-06 ::selection{background:#e11d48;color:#fff}
.stp-06{
  --bg:#fff1f2;
  --white:#fff;
  --rose:#e11d48;
  --pink:#fb7185;
  --coral:#f43f5e;
  --dark:#1a0510;
  --mid:#9f1239;
  --muted:#fda4af;
  --border:#fecdd3;
  --success:#059669;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
}
.stp-06__outer{
  max-width:900px;width:100%;
  display:grid;grid-template-columns:260px 1fr;
  background:var(--white);
  border-radius:24px;
  box-shadow:0 24px 80px rgba(225,29,72,.12),0 0 0 1px var(--border);
  overflow:hidden;
  min-height:520px;
}

/* left sidebar nav */
.stp-06__sidebar{
  background:linear-gradient(180deg,var(--rose),var(--coral));
  padding:40px 24px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.stp-06__sidebar::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.stp-06__sidebar::after{
  content:'';position:absolute;bottom:-40px;left:-40px;
  width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.06);
}
.stp-06__brand{
  font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em;
  margin-bottom:36px;position:relative;z-index:1;
}
.stp-06__brand span{opacity:.6;font-weight:400}

.stp-06__nav{flex:1;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.stp-06__nav-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;
  cursor:pointer;transition:all .25s;
}
.stp-06__nav-item.done{background:rgba(255,255,255,.12)}
.stp-06__nav-item.active{background:rgba(255,255,255,.2);box-shadow:0 2px 12px rgba(0,0,0,.1)}
.stp-06__nav-dot{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  background:rgba(255,255,255,.15);color:rgba(255,255,255,.5);
  transition:all .3s;border:1.5px solid rgba(255,255,255,.2);
}
.stp-06__nav-item.done .stp-06__nav-dot{background:rgba(255,255,255,.9);color:var(--rose);border-color:transparent}
.stp-06__nav-item.active .stp-06__nav-dot{background:#fff;color:var(--rose);border-color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.stp-06__nav-text{font-size:13px;font-weight:600;color:rgba(255,255,255,.5);transition:color .3s}
.stp-06__nav-item.done .stp-06__nav-text{color:rgba(255,255,255,.8)}
.stp-06__nav-item.active .stp-06__nav-text{color:#fff}

/* sidebar progress bar */
.stp-06__sidebar-progress{margin-top:auto;position:relative;z-index:1;padding-top:24px}
.stp-06__sidebar-progress-label{font-size:11px;color:rgba(255,255,255,.6);margin-bottom:8px}
.stp-06__sidebar-bar{height:4px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.stp-06__sidebar-fill{height:100%;background:#fff;border-radius:2px;transition:width .4s ease}

/* right content */
.stp-06__content{padding:48px 40px;display:flex;flex-direction:column}
.stp-06__step-display{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.stp-06__step-title{font-size:26px;font-weight:800;color:var(--dark);letter-spacing:-.02em;margin-bottom:6px}
.stp-06__step-desc{font-size:14px;color:#9ca3af;line-height:1.7;margin-bottom:28px}

/* panels */
.stp-06__pane{display:none;flex:1}
.stp-06__pane.active{display:block;animation:stp-06-in .3s ease}
@keyframes stp-06-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.stp-06__field{margin-bottom:16px}
.stp-06__fl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin-bottom:6px;display:block}
.stp-06__in{
  width:100%;padding:12px 16px;
  background:#f9fafb;border:1.5px solid #e5e7eb;border-radius:10px;
  color:var(--dark);font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.stp-06__in:focus{background:#fff;border-color:var(--rose);box-shadow:0 0 0 3px rgba(225,29,72,.1)}
.stp-06__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* choice cards */
.stp-06__choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.stp-06__choice{
  padding:16px;border-radius:12px;border:2px solid #e5e7eb;
  cursor:pointer;transition:all .25s;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.stp-06__choice:hover{border-color:var(--pink);background:#fff1f2}
.stp-06__choice.picked{border-color:var(--rose);background:#fff1f2;box-shadow:0 0 0 3px rgba(225,29,72,.1)}
.stp-06__choice-icon{font-size:22px}
.stp-06__choice-name{font-size:13px;font-weight:700;color:var(--dark)}
.stp-06__choice-desc{font-size:11px;color:#9ca3af}

/* nav buttons */
.stp-06__footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:24px;border-top:1px solid var(--border)}
.stp-06__skip{font-size:13px;color:#9ca3af;cursor:pointer;background:none;border:none;transition:color .2s}
.stp-06__skip:hover{color:var(--dark)}
.stp-06__foot-right{display:flex;gap:10px}
.stp-06__btn{padding:11px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s}
.stp-06__btn--ghost{background:#f3f4f6;color:#6b7280}
.stp-06__btn--ghost:hover{background:#e5e7eb;color:var(--dark)}
.stp-06__btn--primary{background:linear-gradient(135deg,var(--rose),var(--coral));color:#fff;box-shadow:0 4px 16px rgba(225,29,72,.3)}
.stp-06__btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(225,29,72,.4)}

@media (max-width:600px){
  .stp-06__outer{grid-template-columns:1fr}
  .stp-06__sidebar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stp-06__pane.active,.stp-06__btn--primary{animation:none;transition:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const total=5;
  const navItems=document.querySelectorAll('.stp-06__nav-item');
  const panes=document.querySelectorAll('.stp-06__pane');
  const fill=document.getElementById('stp-06-fill');
  const pct=document.getElementById('stp-06-pct');
  const stepDisplay=document.getElementById('stp-06-step-display');
  const stepTitle=document.getElementById('stp-06-step-title');
  const stepDesc=document.getElementById('stp-06-step-desc');
  const nextBtn=document.getElementById('stp-06-next');

  const titles=['Your Account','Your Goal','Your Team','Workspace','All Done!'];
  const descs=[
    'Create your personal account to get started.',
    'What do you want to achieve with Sprout?',
    'We\'ll tailor the experience for your team size.',
    'Set up your shared workspace.',
    'Your workspace is configured and ready to go.'
  ];

  function update(){
    navItems.forEach((n,i)=>{
      n.classList.remove('done','active');
      const dot=n.querySelector('.stp-06__nav-dot');
      if(i+1<cur){n.classList.add('done');dot.textContent='✓';}
      else if(i+1===cur){n.classList.add('active');dot.textContent=cur;}
      else dot.textContent=i+1;
    });
    panes.forEach(p=>{
      p.classList.remove('active');
      if(parseInt(p.dataset.pane)===cur) p.classList.add('active');
    });
    const p=((cur-1)/(total-1)*100).toFixed(0);
    fill.style.width=p+'%';
    pct.textContent=p+'%';
    stepDisplay.textContent=`Step ${cur} of ${total}`;
    stepTitle.textContent=titles[cur-1];
    stepDesc.textContent=descs[cur-1];
    nextBtn.textContent=cur===total?'Go to Dashboard →':'Continue →';
    document.getElementById('stp-06-back').style.display=cur<=1?'none':'';
    document.getElementById('stp-06-skip').style.display=cur===total?'none':'';
  }

  document.getElementById('stp-06-next').addEventListener('click',()=>{cur=Math.min(total,cur+1);update();});
  document.getElementById('stp-06-back').addEventListener('click',()=>{cur=Math.max(1,cur-1);update();});
  document.getElementById('stp-06-skip').addEventListener('click',()=>{cur=Math.min(total,cur+1);update();});
  document.querySelectorAll('.stp-06__choice').forEach(c=>{
    c.addEventListener('click',()=>{
      const siblings=c.parentElement.querySelectorAll('.stp-06__choice');
      siblings.forEach(s=>s.classList.remove('picked'));
      c.classList.add('picked');
    });
  });
  update();
})();
```

### 07. CSS Breadcrumb Style Step Tracker

**Type:** CSS + JS
**Description:** Three synced breadcrumb-style step tracker variants — chevron arrow tabs, a pill strip, and a dashed dot-connector row — all driven by one prev/next controller with an amber/gold colour scheme.

**HTML:**
```html
<div class="stp-07">

  <!-- Chevron breadcrumbs -->
  <div class="stp-07__crumbs" id="stp-07-crumbs">
    <div class="stp-07__crumb done"><span class="stp-07__crumb-num">01</span><span class="stp-07__crumb-name">Discovery</span></div>
    <div class="stp-07__crumb done"><span class="stp-07__crumb-num">02</span><span class="stp-07__crumb-name">Proposal</span></div>
    <div class="stp-07__crumb active"><span class="stp-07__crumb-num">03</span><span class="stp-07__crumb-name">Review</span></div>
    <div class="stp-07__crumb"><span class="stp-07__crumb-num">04</span><span class="stp-07__crumb-name">Approval</span></div>
    <div class="stp-07__crumb"><span class="stp-07__crumb-num">05</span><span class="stp-07__crumb-name">Delivery</span></div>
  </div>

  <!-- Pill strip -->
  <div class="stp-07__pills" id="stp-07-pills">
    <div class="stp-07__pill done"><div class="stp-07__pill-dot">✓</div><span class="stp-07__pill-label">Research</span></div>
    <div class="stp-07__sep">›</div>
    <div class="stp-07__pill done"><div class="stp-07__pill-dot">✓</div><span class="stp-07__pill-label">Wireframe</span></div>
    <div class="stp-07__sep">›</div>
    <div class="stp-07__pill active"><div class="stp-07__pill-dot">3</div><span class="stp-07__pill-label">Design</span></div>
    <div class="stp-07__sep">›</div>
    <div class="stp-07__pill"><div class="stp-07__pill-dot">4</div><span class="stp-07__pill-label">Prototype</span></div>
    <div class="stp-07__sep">›</div>
    <div class="stp-07__pill"><div class="stp-07__pill-dot">5</div><span class="stp-07__pill-label">Handoff</span></div>
    <div class="stp-07__sep">›</div>
    <div class="stp-07__pill"><div class="stp-07__pill-dot">6</div><span class="stp-07__pill-label">Launch</span></div>
  </div>

  <!-- Dashed dots -->
  <div class="stp-07__dots" id="stp-07-dotline">
    <div class="stp-07__dot-step done"><div class="stp-07__dot-node">✓</div><span class="stp-07__dot-label">Init</span></div>
    <div class="stp-07__dot-step done"><div class="stp-07__dot-node">✓</div><span class="stp-07__dot-label">Build</span></div>
    <div class="stp-07__dot-step active"><div class="stp-07__dot-node">3</div><span class="stp-07__dot-label">Test</span></div>
    <div class="stp-07__dot-step"><div class="stp-07__dot-node">4</div><span class="stp-07__dot-label">Stage</span></div>
    <div class="stp-07__dot-step"><div class="stp-07__dot-node">5</div><span class="stp-07__dot-label">Deploy</span></div>
    <div class="stp-07__dot-step"><div class="stp-07__dot-node">6</div><span class="stp-07__dot-label">Monitor</span></div>
    <div class="stp-07__dot-step"><div class="stp-07__dot-node">7</div><span class="stp-07__dot-label">Done</span></div>
  </div>

  <!-- Card -->
  <div class="stp-07__card">
    <div class="stp-07__card-top">
      <div class="stp-07__card-title" id="stp-07-title">Step 3 — Review & Iterate</div>
      <span class="stp-07__badge" id="stp-07-badge">In Progress</span>
    </div>
    <div class="stp-07__card-body" id="stp-07-body">Three different breadcrumb-style step trackers above are all in sync. Chevron arrows, pill strips, and dashed dot connectors each show the same progress state. Click Next or Back to advance all three simultaneously.</div>
    <div class="stp-07__card-nav">
      <button class="stp-07__btn stp-07__btn--ghost" id="stp-07-back">← Back</button>
      <button class="stp-07__btn stp-07__btn--primary" id="stp-07-next">Next Step →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-07,.stp-07 *,.stp-07 *::before,.stp-07 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-07 ::selection{background:#f59e0b;color:#000}
.stp-07{
  --bg:#1c1400;
  --card:#241c00;
  --amber:#f59e0b;
  --yellow:#fbbf24;
  --gold:#d97706;
  --white:#fef3c7;
  --muted:#78614a;
  --border:#3d2e00;
  --dark:#0c0900;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;
  gap:40px;
  background-image:radial-gradient(ellipse at 50% 0%,rgba(245,158,11,.07) 0%,transparent 60%);
}

/* ── Row 1: chevron breadcrumb track ── */
.stp-07__crumbs{display:flex;align-items:stretch;max-width:720px;width:100%;overflow:hidden;border-radius:12px;border:1px solid var(--border)}
.stp-07__crumb{
  flex:1;position:relative;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:3px;
  padding:16px 28px 16px 36px;
  background:var(--card);
  cursor:pointer;
  transition:background .3s;
  min-width:0;
}
.stp-07__crumb:first-child{padding-left:20px}

/* left cut */
.stp-07__crumb::before{
  content:'';
  position:absolute;left:-1px;top:0;
  border-top:40px solid transparent;
  border-bottom:40px solid transparent;
  border-left:18px solid var(--bg);
  z-index:2;
}
.stp-07__crumb:first-child::before{display:none}

/* right chevron */
.stp-07__crumb::after{
  content:'';
  position:absolute;right:-18px;top:0;
  border-top:40px solid transparent;
  border-bottom:40px solid transparent;
  border-left:18px solid var(--card);
  z-index:3;
  transition:border-left-color .3s;
}
.stp-07__crumb:last-child::after{display:none}

.stp-07__crumb.done{background:rgba(245,158,11,.12)}
.stp-07__crumb.done::after{border-left-color:rgba(245,158,11,.12)}
.stp-07__crumb.active{background:rgba(245,158,11,.2)}
.stp-07__crumb.active::after{border-left-color:rgba(245,158,11,.2)}

.stp-07__crumb-num{font-size:11px;font-weight:700;color:var(--muted);transition:color .3s}
.stp-07__crumb-name{font-size:12px;font-weight:600;color:var(--muted);transition:color .3s;white-space:nowrap}
.stp-07__crumb.done .stp-07__crumb-num,.stp-07__crumb.done .stp-07__crumb-name{color:var(--amber)}
.stp-07__crumb.active .stp-07__crumb-num,.stp-07__crumb.active .stp-07__crumb-name{color:var(--yellow)}

/* ── Row 2: pill badge strip ── */
.stp-07__pills{display:flex;align-items:center;gap:0;max-width:720px;width:100%}
.stp-07__pill{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;
  background:var(--card);
  border:1px solid var(--border);
  border-right:none;
  cursor:pointer;transition:background .25s;
  position:relative;
}
.stp-07__pill:first-child{border-radius:10px 0 0 10px}
.stp-07__pill:last-child{border-right:1px solid var(--border);border-radius:0 10px 10px 0}
.stp-07__pill-dot{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
  background:var(--border);color:var(--muted);
  transition:all .3s;
}
.stp-07__pill-label{font-size:12px;font-weight:600;color:var(--muted);transition:color .25s;white-space:nowrap}
.stp-07__pill.done{background:rgba(245,158,11,.1)}
.stp-07__pill.done .stp-07__pill-dot{background:var(--amber);color:#000}
.stp-07__pill.done .stp-07__pill-label{color:var(--amber)}
.stp-07__pill.active{background:rgba(245,158,11,.18)}
.stp-07__pill.active .stp-07__pill-dot{background:var(--yellow);color:#000;box-shadow:0 0 0 3px rgba(251,191,36,.25)}
.stp-07__pill.active .stp-07__pill-label{color:var(--yellow)}

/* separator arrow */
.stp-07__sep{font-size:12px;color:var(--muted);padding:0 2px;background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center}

/* ── Row 3: dashed step dots ── */
.stp-07__dots{display:flex;align-items:center;max-width:720px;width:100%}
.stp-07__dot-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative}
.stp-07__dot-step:not(:last-child)::after{
  content:'';
  position:absolute;top:12px;left:calc(50% + 12px);
  width:calc(100% - 24px);height:0;
  border-top:2px dashed var(--border);
  transition:border-color .4s;
}
.stp-07__dot-step.done::after{border-color:var(--amber)}
.stp-07__dot-step.done:nth-child(2)::after{border-color:var(--gold)}
.stp-07__dot-node{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--border);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--muted);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  font-weight:700;
}
.stp-07__dot-step.done .stp-07__dot-node{border-color:var(--amber);background:var(--amber);color:#000}
.stp-07__dot-step.active .stp-07__dot-node{
  border-color:var(--yellow);background:var(--yellow);color:#000;
  box-shadow:0 0 0 4px rgba(251,191,36,.2),0 0 16px rgba(251,191,36,.3);
  transform:scale(1.3);
}
.stp-07__dot-label{font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;text-align:center;transition:color .3s}
.stp-07__dot-step.done .stp-07__dot-label{color:var(--amber)}
.stp-07__dot-step.active .stp-07__dot-label{color:var(--white)}

/* content card */
.stp-07__card{
  max-width:720px;width:100%;
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:28px 32px;
}
.stp-07__card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.stp-07__card-title{font-size:18px;font-weight:700;color:var(--white)}
.stp-07__badge{
  padding:4px 12px;border-radius:999px;
  font-size:11px;font-weight:700;
  background:rgba(245,158,11,.15);
  border:1px solid rgba(245,158,11,.3);
  color:var(--amber);
}
.stp-07__card-body{font-size:14px;color:var(--muted);line-height:1.7}
.stp-07__card-nav{display:flex;justify-content:space-between;margin-top:24px}
.stp-07__btn{padding:10px 24px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.stp-07__btn--ghost{background:var(--border);color:var(--muted)}
.stp-07__btn--ghost:hover{color:var(--white)}
.stp-07__btn--primary{background:linear-gradient(135deg,var(--amber),var(--yellow));color:#000;box-shadow:0 4px 16px rgba(245,158,11,.3)}
.stp-07__btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(245,158,11,.4)}

@media (prefers-reduced-motion:reduce){
  .stp-07__dot-step.active .stp-07__dot-node{transform:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const crumbs=document.querySelectorAll('.stp-07__crumb');
  const pills=document.querySelectorAll('.stp-07__pill');
  const dots=document.querySelectorAll('.stp-07__dot-step');
  const title=document.getElementById('stp-07-title');
  const badge=document.getElementById('stp-07-badge');
  const body=document.getElementById('stp-07-body');

  const steps=[
    {t:'Step 1 — Discovery',b:'Gathering requirements and stakeholder input.',done:false},
    {t:'Step 2 — Proposal',b:'Crafting a detailed project proposal.',done:false},
    {t:'Step 3 — Review & Iterate',b:'Three different breadcrumb-style step trackers above are all in sync. Click Next or Back to advance all three simultaneously.',done:false},
    {t:'Step 4 — Approval',b:'Getting sign-off from all stakeholders.',done:false},
    {t:'Step 5 — Delivery',b:'Final deliverables packaged and shipped.',done:false},
  ];

  function update(){
    crumbs.forEach((c,i)=>{
      c.classList.remove('done','active');
      if(i+1<cur)c.classList.add('done');
      else if(i+1===cur)c.classList.add('active');
    });
    pills.forEach((p,i)=>{
      p.classList.remove('done','active');
      if(i+1<cur)p.classList.add('done');
      else if(i+1===cur)p.classList.add('active');
      const dot=p.querySelector('.stp-07__pill-dot');
      if(dot) dot.textContent=i+1<cur?'✓':i+1;
    });
    dots.forEach((d,i)=>{
      d.classList.remove('done','active');
      if(i+1<cur)d.classList.add('done');
      else if(i+1===cur)d.classList.add('active');
      const node=d.querySelector('.stp-07__dot-node');
      if(node) node.textContent=i+1<cur?'✓':i+1;
    });
    const s=steps[Math.min(cur,crumbs.length)-1]||steps[steps.length-1];
    title.textContent=s.t;
    body.textContent=s.b;
    badge.textContent=cur>crumbs.length?'Complete':'In Progress';
  }

  document.getElementById('stp-07-back').addEventListener('click',()=>{cur=Math.max(1,cur-1);update();});
  document.getElementById('stp-07-next').addEventListener('click',()=>{cur=Math.min(crumbs.length+1,cur+1);update();});
  update();
})();
```

### 08. CSS Stepper With Validation States

**Type:** CSS + JS
**Description:** A blue/indigo form stepper where each step has live input validation — valid (green), error (red), and warning (amber) states — with per-field messages and a step-level badge that reflects the field result.

**HTML:**
```html
<div class="stp-08">
  <div class="stp-08__card">
    <!-- Step header -->
    <div class="stp-08__head">
      <div class="stp-08__steps" id="stp-08-steps">
        <div class="stp-08__step valid" data-s="1">
          <div class="stp-08__node">✓</div>
          <span class="stp-08__node-label">Identity</span>
        </div>
        <div class="stp-08__step error" data-s="2">
          <div class="stp-08__node">!</div>
          <span class="stp-08__node-label">Security</span>
        </div>
        <div class="stp-08__step active" data-s="3">
          <div class="stp-08__node">3</div>
          <span class="stp-08__node-label">Profile</span>
        </div>
        <div class="stp-08__step warning" data-s="4">
          <div class="stp-08__node">⚠</div>
          <span class="stp-08__node-label">Docs</span>
        </div>
        <div class="stp-08__step" data-s="5">
          <div class="stp-08__node">5</div>
          <span class="stp-08__node-label">Submit</span>
        </div>
      </div>
    </div>

    <!-- Panels -->
    <div class="stp-08__body">

      <!-- Panel 1 — valid -->
      <div class="stp-08__pane" data-panel="1">
        <div class="stp-08__pane-title">Identity Verification</div>
        <div class="stp-08__pane-sub">All identity fields are valid.</div>
        <div class="stp-08__chips">
          <span class="stp-08__chip stp-08__chip--ok">✓ Full Name</span>
          <span class="stp-08__chip stp-08__chip--ok">✓ Email</span>
          <span class="stp-08__chip stp-08__chip--ok">✓ Date of Birth</span>
        </div>
        <div class="stp-08__field">
          <label class="stp-08__fl">Full Name</label>
          <div class="stp-08__in-wrap">
            <input class="stp-08__in is-valid" value="Alex Morgan" readonly>
            <span class="stp-08__icon">✅</span>
          </div>
          <div class="stp-08__msg ok show">✓ Name verified</div>
        </div>
        <div class="stp-08__field">
          <label class="stp-08__fl">Email</label>
          <div class="stp-08__in-wrap">
            <input class="stp-08__in is-valid" value="alex@example.com" readonly>
            <span class="stp-08__icon">✅</span>
          </div>
          <div class="stp-08__msg ok show">✓ Email verified</div>
        </div>
      </div>

      <!-- Panel 2 — error -->
      <div class="stp-08__pane" data-panel="2">
        <div class="stp-08__pane-title">Security Setup</div>
        <div class="stp-08__pane-sub">There are errors that need to be fixed.</div>
        <div class="stp-08__chips">
          <span class="stp-08__chip stp-08__chip--err">✗ Password too weak</span>
          <span class="stp-08__chip stp-08__chip--err">✗ Passwords don't match</span>
        </div>
        <div class="stp-08__field">
          <label class="stp-08__fl">Password <span class="stp-08__fl-hint">min 12 chars</span></label>
          <div class="stp-08__in-wrap">
            <input class="stp-08__in is-invalid" type="password" value="weak" readonly>
            <span class="stp-08__icon">❌</span>
          </div>
          <div class="stp-08__msg err show">✗ Password must be at least 12 characters with symbols</div>
        </div>
        <div class="stp-08__field">
          <label class="stp-08__fl">Confirm Password</label>
          <div class="stp-08__in-wrap">
            <input class="stp-08__in is-invalid" type="password" value="different" readonly>
            <span class="stp-08__icon">❌</span>
          </div>
          <div class="stp-08__msg err show">✗ Passwords do not match</div>
        </div>
      </div>

      <!-- Panel 3 — active/in progress -->
      <div class="stp-08__pane active" data-panel="3">
        <div class="stp-08__pane-title">Profile Details</div>
        <div class="stp-08__pane-sub">Fill in your professional profile information.</div>
        <div class="stp-08__field">
          <label class="stp-08__fl">Job Title</label>
          <div class="stp-08__in-wrap">
            <input class="stp-08__in" id="stp-08-title" placeholder="Senior Engineer">
            <span class="stp-08__icon" id="stp-08-ti">○</span>
          </div>
          <div class="stp-08__msg" id="stp-08-tm"></div>
        </div>
        <div class="stp-08__field">
          <label class="stp-08__fl">LinkedIn URL <span class="stp-08__fl-hint">optional</span></label>
          <div class="stp-08__in-wrap">
            <input class="stp-08__in is-warning" id="stp-08-li" placeholder="linkedin.com/in/..." value="linkedin.com/in/alexmorgan">
            <span class="stp-08__icon">⚠️</span>
          </div>
          <div class="stp-08__msg warn show">⚠ URL format looks incomplete — add https://</div>
        </div>
        <div class="stp-08__field">
          <label class="stp-08__fl">Bio <span class="stp-08__fl-hint">150 chars max</span></label>
          <div class="stp-08__in-wrap">
            <input class="stp-08__in" id="stp-08-bio" placeholder="Tell us a little about yourself" maxlength="150">
            <span class="stp-08__icon" id="stp-08-bi">○</span>
          </div>
          <div class="stp-08__msg" id="stp-08-bm"></div>
        </div>
      </div>

      <!-- Panel 4 — warning -->
      <div class="stp-08__pane" data-panel="4">
        <div class="stp-08__pane-title">Document Upload</div>
        <div class="stp-08__pane-sub">Some documents are missing.</div>
        <div class="stp-08__chips">
          <span class="stp-08__chip stp-08__chip--ok">✓ ID Photo</span>
          <span class="stp-08__chip stp-08__chip--warn">⚠ Proof of Address</span>
          <span class="stp-08__chip stp-08__chip--none">— CV (optional)</span>
        </div>
        <div style="background:#fffbeb;border:1px solid #fde047;border-radius:10px;padding:16px;font-size:13px;color:#92400e;margin-top:8px">
          ⚠️ Proof of address document is recommended but not required. You can submit without it, but verification may take longer.
        </div>
      </div>

      <!-- Panel 5 — submit -->
      <div class="stp-08__pane" data-panel="5">
        <div class="stp-08__pane-title">Review &amp; Submit</div>
        <div class="stp-08__pane-sub">Check all validation states before submitting.</div>
        <div class="stp-08__chips">
          <span class="stp-08__chip stp-08__chip--ok">✓ Identity</span>
          <span class="stp-08__chip stp-08__chip--err">✗ Security — fix required</span>
          <span class="stp-08__chip stp-08__chip--ok">✓ Profile</span>
          <span class="stp-08__chip stp-08__chip--warn">⚠ Docs — optional</span>
        </div>
        <div style="background:#fee2e2;border:1px solid #fecaca;border-radius:10px;padding:16px;font-size:13px;color:#991b1b">
          ❌ You cannot submit because Step 2 (Security) has errors. Please go back and fix the password fields.
        </div>
      </div>
    </div>

    <!-- Nav -->
    <div class="stp-08__nav">
      <button class="stp-08__btn stp-08__btn--ghost" id="stp-08-back">← Back</button>
      <span class="stp-08__status ok" id="stp-08-status">Step 3 of 5</span>
      <button class="stp-08__btn stp-08__btn--primary" id="stp-08-next">Next →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-08,.stp-08 *,.stp-08 *::before,.stp-08 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-08 ::selection{background:#3b82f6;color:#fff}
.stp-08{
  --bg:#f0f4ff;
  --white:#fff;
  --blue:#3b82f6;
  --indigo:#6366f1;
  --dark:#0f172a;
  --mid:#334155;
  --muted:#94a3b8;
  --border:#e2e8f0;
  --success:#16a34a;
  --error:#dc2626;
  --warning:#d97706;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
}
.stp-08__card{
  max-width:640px;width:100%;
  background:var(--white);border-radius:20px;
  box-shadow:0 12px 48px rgba(59,130,246,.1),0 0 0 1px var(--border);
  overflow:hidden;
}

/* step header */
.stp-08__head{
  background:linear-gradient(135deg,var(--blue),var(--indigo));
  padding:28px 32px;
}
.stp-08__steps{display:flex;align-items:center;gap:0}
.stp-08__step{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  position:relative;
}
.stp-08__step:not(:last-child)::after{
  content:'';
  position:absolute;top:18px;left:calc(50% + 18px);
  width:calc(100% - 36px);height:1.5px;
  background:rgba(255,255,255,.25);
}
.stp-08__step.done::after,.stp-08__step.valid::after{background:rgba(255,255,255,.7)}

.stp-08__node{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
  background:rgba(255,255,255,.15);color:rgba(255,255,255,.5);
  border:2px solid rgba(255,255,255,.2);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
}
.stp-08__step.done .stp-08__node,.stp-08__step.valid .stp-08__node{
  background:#fff;color:var(--success);border-color:transparent;
  box-shadow:0 0 0 3px rgba(255,255,255,.3);
}
.stp-08__step.active .stp-08__node{
  background:#fff;color:var(--blue);border-color:transparent;
  box-shadow:0 0 0 4px rgba(255,255,255,.3);
}
.stp-08__step.error .stp-08__node{
  background:rgba(220,38,38,.9);color:#fff;border-color:transparent;
  box-shadow:0 0 0 4px rgba(220,38,38,.3);
  animation:stp-08-shake .4s ease;
}
@keyframes stp-08-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.stp-08__step.warning .stp-08__node{
  background:rgba(217,119,6,.9);color:#fff;border-color:transparent;
}
.stp-08__node-label{font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.06em;text-transform:uppercase;text-align:center;transition:color .3s}
.stp-08__step.active .stp-08__node-label{color:rgba(255,255,255,.9)}
.stp-08__step.done .stp-08__node-label,.stp-08__step.valid .stp-08__node-label{color:rgba(255,255,255,.8)}
.stp-08__step.error .stp-08__node-label{color:rgba(255,255,255,.7)}

/* body */
.stp-08__body{padding:32px}
.stp-08__pane{display:none}
.stp-08__pane.active{display:block;animation:stp-08-in .3s ease}
@keyframes stp-08-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.stp-08__pane-title{font-size:18px;font-weight:700;color:var(--dark);margin-bottom:4px}
.stp-08__pane-sub{font-size:13px;color:var(--muted);margin-bottom:24px}

/* fields with validation */
.stp-08__field{margin-bottom:16px}
.stp-08__fl{font-size:12px;font-weight:600;color:var(--mid);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.stp-08__fl-hint{font-size:11px;font-weight:400;color:var(--muted)}
.stp-08__in-wrap{position:relative}
.stp-08__in{
  width:100%;padding:12px 42px 12px 14px;
  background:#f8fafc;border:2px solid var(--border);
  border-radius:10px;color:var(--dark);font-size:14px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.stp-08__in:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.stp-08__in.is-valid{border-color:var(--success);background:#f0fdf4}
.stp-08__in.is-invalid{border-color:var(--error);background:#fef2f2}
.stp-08__in.is-warning{border-color:var(--warning);background:#fffbeb}

.stp-08__icon{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:14px;pointer-events:none;
}

.stp-08__msg{font-size:11px;margin-top:5px;font-weight:500;display:none}
.stp-08__msg.show{display:block}
.stp-08__msg.ok{color:var(--success)}
.stp-08__msg.err{color:var(--error)}
.stp-08__msg.warn{color:var(--warning)}

/* state summary chips */
.stp-08__chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.stp-08__chip{
  padding:5px 12px;border-radius:999px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
}
.stp-08__chip--ok{background:#dcfce7;color:var(--success);border:1px solid #bbf7d0}
.stp-08__chip--err{background:#fee2e2;color:var(--error);border:1px solid #fecaca}
.stp-08__chip--warn{background:#fef9c3;color:var(--warning);border:1px solid #fde047}
.stp-08__chip--none{background:#f1f5f9;color:var(--muted);border:1px solid var(--border)}

/* nav */
.stp-08__nav{display:flex;justify-content:space-between;padding:20px 32px;border-top:1px solid var(--border)}
.stp-08__btn{padding:11px 26px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.stp-08__btn--ghost{background:#f1f5f9;color:var(--muted)}
.stp-08__btn--ghost:hover{color:var(--dark)}
.stp-08__btn--primary{background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;box-shadow:0 4px 16px rgba(59,130,246,.3)}
.stp-08__btn--primary:hover{transform:translateY(-1px)}
.stp-08__btn--danger{background:linear-gradient(135deg,var(--error),#ef4444);color:#fff;box-shadow:0 4px 16px rgba(220,38,38,.3)}
.stp-08__status{font-size:12px;font-weight:600;padding:6px 14px;border-radius:6px}
.stp-08__status.ok{background:#dcfce7;color:var(--success)}
.stp-08__status.err{background:#fee2e2;color:var(--error)}

@media (prefers-reduced-motion:reduce){
  .stp-08__step.error .stp-08__node{animation:none}
  .stp-08__pane.active{animation:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const stateMap={1:'valid',2:'error',3:'active',4:'warning',5:''};
  const icons={valid:'✓',error:'!',warning:'⚠'};
  const steps=document.querySelectorAll('.stp-08__step');
  const panels=document.querySelectorAll('.stp-08__pane');
  const status=document.getElementById('stp-08-status');
  const nextBtn=document.getElementById('stp-08-next');
  const total=5;

  function update(){
    steps.forEach((s,i)=>{
      const n=i+1;
      const st=n===cur?'active':stateMap[n]||'';
      s.className='stp-08__step'+(st?' '+st:'');
      const node=s.querySelector('.stp-08__node');
      node.textContent=st==='valid'?'✓':st==='error'?'!':st==='warning'?'⚠':n;
    });
    panels.forEach(p=>{
      p.classList.remove('active');
      if(parseInt(p.dataset.panel)===cur) p.classList.add('active');
    });
    status.textContent=`Step ${cur} of ${total}`;
    const curState=stateMap[cur]||'';
    status.className='stp-08__status'+(curState==='valid'||curState==='active'?' ok':curState==='error'?' err':'');
    nextBtn.textContent=cur===total?'Submit →':'Next →';
    nextBtn.className='stp-08__btn'+(cur===total&&stateMap[2]==='error'?' stp-08__btn--danger':' stp-08__btn--primary');
  }

  // live validation on panel 3
  const titleIn=document.getElementById('stp-08-title');
  const titleIcon=document.getElementById('stp-08-ti');
  const titleMsg=document.getElementById('stp-08-tm');
  const bioIn=document.getElementById('stp-08-bio');
  const bioIcon=document.getElementById('stp-08-bi');
  const bioMsg=document.getElementById('stp-08-bm');

  if(titleIn) titleIn.addEventListener('input',()=>{
    const v=titleIn.value.trim();
    if(v.length>2){titleIn.className='stp-08__in is-valid';titleIcon.textContent='✅';titleMsg.className='stp-08__msg ok show';titleMsg.textContent='✓ Looks good';}
    else if(v.length>0){titleIn.className='stp-08__in is-invalid';titleIcon.textContent='❌';titleMsg.className='stp-08__msg err show';titleMsg.textContent='✗ Too short';}
    else{titleIn.className='stp-08__in';titleIcon.textContent='○';titleMsg.className='stp-08__msg';}
  });
  if(bioIn) bioIn.addEventListener('input',()=>{
    const v=bioIn.value.trim();
    if(v.length>20){bioIn.className='stp-08__in is-valid';bioIcon.textContent='✅';bioMsg.className='stp-08__msg ok show';bioMsg.textContent=`✓ ${150-v.length} chars remaining`;}
    else if(v.length>0){bioIn.className='stp-08__in';bioIcon.textContent='✏️';bioMsg.className='stp-08__msg show';bioMsg.style.color='var(--muted)';bioMsg.textContent=`${v.length}/150 chars`;}
    else{bioIn.className='stp-08__in';bioIcon.textContent='○';bioMsg.className='stp-08__msg';}
  });

  document.getElementById('stp-08-back').addEventListener('click',()=>{cur=Math.max(1,cur-1);update();});
  document.getElementById('stp-08-next').addEventListener('click',()=>{cur=Math.min(total,cur+1);update();});
  update();
})();
```

### 09. CSS Circular Step Progress Indicator

**Type:** CSS + JS
**Description:** A centred SVG arc ring whose stroke-dashoffset advances per step, surrounded by a tile grid of clickable step cards — violet/purple accent on a near-black background ideal for dashboard headers.

**HTML:**
```html
<div class="stp-09">
  <div class="stp-09__shell">

    <!-- Big circular ring -->
    <div class="stp-09__circle-wrap">
      <div class="stp-09__ring">
        <svg class="stp-09__svg" viewBox="0 0 200 200">
          <defs>
            <linearGradient id="stp-09-grad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#8b5cf6"/>
              <stop offset="100%" stop-color="#ec4899"/>
            </linearGradient>
          </defs>
          <circle class="stp-09__track" cx="100" cy="100" r="90"/>
          <circle class="stp-09__arc" id="stp-09-arc" cx="100" cy="100" r="90"/>
        </svg>
        <div class="stp-09__ring-inner">
          <div class="stp-09__pct-big" id="stp-09-pct">25%</div>
          <div class="stp-09__pct-label">Complete</div>
          <div class="stp-09__step-count" id="stp-09-sc">Step 2 of 4</div>
        </div>
      </div>

      <!-- Linear pip row -->
      <div class="stp-09__track-row" id="stp-09-track">
        <div class="stp-09__pip done" data-i="1"><div class="stp-09__pnode">✓</div><span class="stp-09__plabel">Setup</span></div>
        <div class="stp-09__pip active" data-i="2"><div class="stp-09__pnode">2</div><span class="stp-09__plabel">Configure</span></div>
        <div class="stp-09__pip" data-i="3"><div class="stp-09__pnode">3</div><span class="stp-09__plabel">Integrate</span></div>
        <div class="stp-09__pip" data-i="4"><div class="stp-09__pnode">4</div><span class="stp-09__plabel">Launch</span></div>
      </div>
    </div>

    <!-- Step tiles grid -->
    <div class="stp-09__grid" id="stp-09-grid">
      <div class="stp-09__tile done" data-tile="1">
        <div class="stp-09__tile-step">Step 01</div>
        <div class="stp-09__tile-name">Project Setup</div>
        <div class="stp-09__tile-desc">Repository initialized, dependencies installed, CI configured.</div>
        <span class="stp-09__tile-badge">✓ Complete</span>
      </div>
      <div class="stp-09__tile active" data-tile="2">
        <div class="stp-09__tile-step">Step 02 · Active</div>
        <div class="stp-09__tile-name">Configuration</div>
        <div class="stp-09__tile-desc">Environment variables, feature flags, and API keys.</div>
        <span class="stp-09__tile-badge">● In Progress</span>
      </div>
      <div class="stp-09__tile" data-tile="3">
        <div class="stp-09__tile-step">Step 03</div>
        <div class="stp-09__tile-name">Integration</div>
        <div class="stp-09__tile-desc">Third-party services, webhooks, and data pipelines.</div>
        <span class="stp-09__tile-badge">Upcoming</span>
      </div>
      <div class="stp-09__tile" data-tile="4">
        <div class="stp-09__tile-step">Step 04</div>
        <div class="stp-09__tile-name">Launch</div>
        <div class="stp-09__tile-desc">Production deployment, monitoring, and rollout plan.</div>
        <span class="stp-09__tile-badge">Upcoming</span>
      </div>
    </div>

    <!-- Nav -->
    <div class="stp-09__nav">
      <button class="stp-09__btn stp-09__btn--ghost" id="stp-09-prev">← Prev</button>
      <button class="stp-09__btn stp-09__btn--primary" id="stp-09-next">Next Step →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-09,.stp-09 *,.stp-09 *::before,.stp-09 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-09 ::selection{background:#8b5cf6;color:#fff}
.stp-09{
  --bg:#09090b;
  --card:#111113;
  --violet:#8b5cf6;
  --purple:#a78bfa;
  --pink:#ec4899;
  --white:#fafafa;
  --muted:#52525b;
  --border:#27272a;
  --success:#22c55e;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  background-image:
    radial-gradient(ellipse at 50% 50%,rgba(139,92,246,.04) 0%,transparent 70%);
}
.stp-09__shell{max-width:680px;width:100%;display:flex;flex-direction:column;align-items:center;gap:48px}

/* big circular progress */
.stp-09__circle-wrap{
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.stp-09__ring{
  position:relative;width:200px;height:200px;
}
.stp-09__svg{width:100%;height:100%;transform:rotate(-90deg)}
.stp-09__track{fill:none;stroke:var(--border);stroke-width:8}
.stp-09__arc{
  fill:none;stroke-width:8;stroke-linecap:round;
  stroke-dasharray:565;stroke-dashoffset:565;
  stroke:url(#stp-09-grad);
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
}
.stp-09__ring-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.stp-09__pct-big{font-size:36px;font-weight:800;color:var(--white);letter-spacing:-.04em;line-height:1}
.stp-09__pct-label{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.stp-09__step-count{font-size:13px;color:var(--violet);font-weight:600;margin-top:2px}

/* step pills below ring */
.stp-09__track-row{display:flex;align-items:center;gap:0;width:100%;max-width:480px}
.stp-09__pip{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.stp-09__pip:not(:last-child)::after{
  content:'';
  position:absolute;top:12px;left:calc(50% + 12px);
  width:calc(100% - 24px);height:2px;
  background:var(--border);transition:background .5s;
}
.stp-09__pip.done::after{background:linear-gradient(90deg,var(--violet),var(--purple))}
.stp-09__pip.done .stp-09__pnode{background:linear-gradient(135deg,var(--violet),var(--purple));border-color:transparent;color:#fff}
.stp-09__pip.active .stp-09__pnode{border-color:var(--violet);color:var(--violet);box-shadow:0 0 0 4px rgba(139,92,246,.15),0 0 16px rgba(139,92,246,.25)}
.stp-09__pnode{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
  border:2px solid var(--border);background:var(--card);color:var(--muted);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
}
.stp-09__plabel{font-size:10px;color:var(--muted);text-align:center;letter-spacing:.04em;transition:color .3s}
.stp-09__pip.done .stp-09__plabel{color:var(--purple)}
.stp-09__pip.active .stp-09__plabel{color:var(--white)}

/* content grid */
.stp-09__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.stp-09__tile{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:20px;transition:border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.stp-09__tile::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(139,92,246,.05),transparent);
  opacity:0;transition:opacity .3s;
}
.stp-09__tile.active{border-color:rgba(139,92,246,.4);box-shadow:0 0 24px rgba(139,92,246,.08)}
.stp-09__tile.active::before{opacity:1}
.stp-09__tile.done{border-color:rgba(139,92,246,.15)}
.stp-09__tile-step{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
.stp-09__tile.done .stp-09__tile-step{color:var(--violet)}
.stp-09__tile.active .stp-09__tile-step{color:var(--purple)}
.stp-09__tile-name{font-size:15px;font-weight:700;color:var(--muted);transition:color .3s}
.stp-09__tile.done .stp-09__tile-name,.stp-09__tile.active .stp-09__tile-name{color:var(--white)}
.stp-09__tile-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.stp-09__tile-badge{
  display:inline-flex;align-items:center;gap:4px;margin-top:10px;
  padding:3px 10px;border-radius:999px;font-size:10px;font-weight:600;
  background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2);color:var(--violet);
}
.stp-09__tile.done .stp-09__tile-badge{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.2);color:var(--success)}
.stp-09__tile.active .stp-09__tile-badge{background:rgba(139,92,246,.2);animation:stp-09-pulse 2s ease-in-out infinite}
@keyframes stp-09-pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* nav */
.stp-09__nav{display:flex;gap:12px;align-items:center}
.stp-09__btn{padding:10px 24px;border-radius:10px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.stp-09__btn--ghost{background:var(--border);color:var(--muted)}
.stp-09__btn--ghost:hover{color:var(--white)}
.stp-09__btn--primary{background:linear-gradient(135deg,var(--violet),var(--purple));color:#fff;box-shadow:0 4px 16px rgba(139,92,246,.35)}
.stp-09__btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(139,92,246,.45)}

@media (prefers-reduced-motion:reduce){
  .stp-09__arc{transition:none}
  .stp-09__tile.active .stp-09__tile-badge{animation:none}
}
```

**JS:**
```js
(function(){
  let cur=2;
  const total=4;
  const pips=document.querySelectorAll('.stp-09__pip');
  const tiles=document.querySelectorAll('.stp-09__tile');
  const arc=document.getElementById('stp-09-arc');
  const pctEl=document.getElementById('stp-09-pct');
  const scEl=document.getElementById('stp-09-sc');
  const circumference=565;
  const badgeTexts=['✓ Complete','● In Progress','Upcoming','Upcoming'];
  const badgeClasses=['done','active','',''];

  function update(){
    // ring
    const pct=(cur-1)/(total-1);
    arc.style.strokeDashoffset=circumference-(circumference*pct);
    pctEl.textContent=Math.round(pct*100)+'%';
    scEl.textContent=`Step ${cur} of ${total}`;

    // pips
    pips.forEach((p,i)=>{
      p.classList.remove('done','active');
      const node=p.querySelector('.stp-09__pnode');
      if(i+1<cur){p.classList.add('done');node.textContent='✓';}
      else if(i+1===cur){p.classList.add('active');node.textContent=cur;}
      else node.textContent=i+1;
    });

    // tiles
    tiles.forEach((t,i)=>{
      t.classList.remove('done','active');
      const badge=t.querySelector('.stp-09__tile-badge');
      const step=t.querySelector('.stp-09__tile-step');
      if(i+1<cur){t.classList.add('done');badge.textContent='✓ Complete';step.textContent=`Step 0${i+1}`;}
      else if(i+1===cur){t.classList.add('active');badge.textContent='● In Progress';step.textContent=`Step 0${i+1} · Active`;}
      else{badge.textContent='Upcoming';step.textContent=`Step 0${i+1}`;}
    });
  }

  document.getElementById('stp-09-prev').addEventListener('click',()=>{cur=Math.max(1,cur-1);update();});
  document.getElementById('stp-09-next').addEventListener('click',()=>{cur=Math.min(total,cur+1);update();});
  update();
})();
```

### 10. CSS Glassmorphism Stepper UI

**Type:** CSS + JS
**Description:** Frosted-glass step cards layered over an animated aurora background, with backdrop-filter blur, cyan/teal accents, layered radial gradient orbs, and a multi-step panel flow inside the glass container.

**HTML:**
```html
<div class="stp-10">
  <div class="stp-10__blob"></div>
  <div class="stp-10__blob"></div>

  <div class="stp-10__card">
    <div class="stp-10__steps" id="stp-10-steps">
      <div class="stp-10__item done" data-i="1">
        <div class="stp-10__bubble">✓</div>
        <span class="stp-10__item-label">Account</span>
      </div>
      <div class="stp-10__item done" data-i="2">
        <div class="stp-10__bubble">✓</div>
        <span class="stp-10__item-label">Details</span>
      </div>
      <div class="stp-10__item active" data-i="3">
        <div class="stp-10__bubble">3</div>
        <span class="stp-10__item-label">Plan</span>
      </div>
      <div class="stp-10__item" data-i="4">
        <div class="stp-10__bubble">4</div>
        <span class="stp-10__item-label">Payment</span>
      </div>
    </div>

    <div class="stp-10__title" id="stp-10-title">Choose Your Plan</div>
    <div class="stp-10__subtitle" id="stp-10-sub">Select the tier that fits your needs</div>

    <div class="stp-10__pane" data-pane="1">
      <div class="stp-10__field"><label class="stp-10__fl">Email Address</label><input class="stp-10__in" placeholder="you@example.com"></div>
      <div class="stp-10__field"><label class="stp-10__fl">Password</label><input class="stp-10__in" type="password" placeholder="••••••••••"></div>
    </div>

    <div class="stp-10__pane" data-pane="2">
      <div class="stp-10__row">
        <div class="stp-10__field"><label class="stp-10__fl">First Name</label><input class="stp-10__in" placeholder="Jordan"></div>
        <div class="stp-10__field"><label class="stp-10__fl">Last Name</label><input class="stp-10__in" placeholder="Blake"></div>
      </div>
      <div class="stp-10__field"><label class="stp-10__fl">Company (optional)</label><input class="stp-10__in" placeholder="Acme Inc."></div>
    </div>

    <div class="stp-10__pane active" data-pane="3">
      <div class="stp-10__plans">
        <div class="stp-10__plan">
          <div class="stp-10__plan-name">Starter</div>
          <div class="stp-10__plan-price">Free</div>
          <div class="stp-10__plan-desc">5 projects</div>
        </div>
        <div class="stp-10__plan sel">
          <div class="stp-10__plan-name">Pro</div>
          <div class="stp-10__plan-price">$29</div>
          <div class="stp-10__plan-desc">Unlimited</div>
        </div>
        <div class="stp-10__plan">
          <div class="stp-10__plan-name">Team</div>
          <div class="stp-10__plan-price">$79</div>
          <div class="stp-10__plan-desc">10 seats</div>
        </div>
      </div>
    </div>

    <div class="stp-10__pane" data-pane="4">
      <div class="stp-10__field"><label class="stp-10__fl">Card Number</label><input class="stp-10__in" placeholder="4242 4242 4242 4242"></div>
      <div class="stp-10__row">
        <div class="stp-10__field"><label class="stp-10__fl">Expiry</label><input class="stp-10__in" placeholder="MM / YY"></div>
        <div class="stp-10__field"><label class="stp-10__fl">CVV</label><input class="stp-10__in" placeholder="•••"></div>
      </div>
    </div>

    <div class="stp-10__nav">
      <button class="stp-10__btn stp-10__btn--ghost" id="stp-10-back">← Back</button>
      <div class="stp-10__dots" id="stp-10-dots">
        <div class="stp-10__dot"></div>
        <div class="stp-10__dot"></div>
        <div class="stp-10__dot active"></div>
        <div class="stp-10__dot"></div>
      </div>
      <button class="stp-10__btn stp-10__btn--primary" id="stp-10-next">Continue →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-10,.stp-10 *,.stp-10 *::before,.stp-10 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-10 ::selection{background:rgba(255,255,255,.4);color:#fff}
.stp-10{
  --cyan:#22d3ee;
  --blue:#38bdf8;
  --violet:#818cf8;
  --white:#fff;
  --glass:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.15);
  --text:rgba(255,255,255,.9);
  --muted:rgba(255,255,255,.4);
  font-family:'Segoe UI',system-ui,sans-serif;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  position:relative;
  overflow:hidden;
  background:#0a0e1a;
}

/* aurora background */
.stp-10::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(34,211,238,.25) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 70%,rgba(129,140,248,.2) 0%,transparent 50%),
    radial-gradient(ellipse at 60% 20%,rgba(56,189,248,.15) 0%,transparent 40%);
  animation:stp-10-aurora 8s ease-in-out infinite alternate;
}
@keyframes stp-10-aurora{
  0%{opacity:.6}
  50%{opacity:1;filter:blur(2px)}
  100%{opacity:.7}
}

/* floating blobs */
.stp-10__blob{
  position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;
}
.stp-10__blob:nth-child(1){width:400px;height:400px;background:rgba(34,211,238,.12);top:-100px;left:-100px;animation:stp-10-float 12s ease-in-out infinite}
.stp-10__blob:nth-child(2){width:300px;height:300px;background:rgba(129,140,248,.1);bottom:-80px;right:-80px;animation:stp-10-float 10s ease-in-out infinite reverse}
@keyframes stp-10-float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}

/* glass card */
.stp-10__card{
  position:relative;z-index:1;
  max-width:580px;width:100%;
  background:var(--glass);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-border);
  border-radius:24px;
  padding:40px 36px;
  box-shadow:0 32px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
}

/* stepper */
.stp-10__steps{display:flex;align-items:center;margin-bottom:36px}
.stp-10__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.stp-10__item:not(:last-child)::after{
  content:'';
  position:absolute;top:24px;left:calc(50% + 24px);
  width:calc(100% - 48px);height:1px;
  background:var(--glass-border);
  transition:background .5s;
}
.stp-10__item.done::after{background:linear-gradient(90deg,var(--cyan),var(--blue))}

.stp-10__bubble{
  width:48px;height:48px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  color:var(--muted);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(8px);
  position:relative;overflow:hidden;
}
.stp-10__bubble::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  opacity:0;transition:opacity .3s;
}
.stp-10__item.done .stp-10__bubble{
  background:rgba(34,211,238,.2);
  border-color:rgba(34,211,238,.4);
  color:var(--cyan);
  box-shadow:0 0 24px rgba(34,211,238,.2),inset 0 1px 0 rgba(255,255,255,.15);
}
.stp-10__item.done .stp-10__bubble::before{opacity:1}
.stp-10__item.active .stp-10__bubble{
  background:rgba(56,189,248,.2);
  border-color:rgba(56,189,248,.5);
  color:var(--blue);
  box-shadow:0 0 0 4px rgba(56,189,248,.1),0 0 32px rgba(56,189,248,.25),inset 0 1px 0 rgba(255,255,255,.15);
  animation:stp-10-glow 2s ease-in-out infinite;
}
@keyframes stp-10-glow{
  0%,100%{box-shadow:0 0 0 4px rgba(56,189,248,.1),0 0 32px rgba(56,189,248,.25)}
  50%{box-shadow:0 0 0 8px rgba(56,189,248,.06),0 0 48px rgba(56,189,248,.35)}
}

.stp-10__item-label{font-size:11px;color:var(--muted);text-align:center;letter-spacing:.06em;text-transform:uppercase;transition:color .3s}
.stp-10__item.done .stp-10__item-label{color:rgba(34,211,238,.8)}
.stp-10__item.active .stp-10__item-label{color:var(--text)}

/* content */
.stp-10__title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px}
.stp-10__subtitle{font-size:13px;color:var(--muted);margin-bottom:24px}

.stp-10__pane{display:none;animation:stp-10-in .35s ease}
.stp-10__pane.active{display:block}
@keyframes stp-10-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.stp-10__field{margin-bottom:14px}
.stp-10__fl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}
.stp-10__in{
  width:100%;padding:12px 16px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  border:1px solid var(--glass-border);
  border-radius:10px;
  color:var(--text);font-size:14px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.stp-10__in::placeholder{color:var(--muted)}
.stp-10__in:focus{background:rgba(255,255,255,.1);border-color:rgba(56,189,248,.5);box-shadow:0 0 0 3px rgba(56,189,248,.1)}
.stp-10__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* plan cards */
.stp-10__plans{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:8px}
.stp-10__plan{
  padding:14px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
  cursor:pointer;transition:all .25s;text-align:center;
}
.stp-10__plan:hover{background:rgba(255,255,255,.08);border-color:rgba(56,189,248,.3)}
.stp-10__plan.sel{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.5);box-shadow:0 0 20px rgba(56,189,248,.1)}
.stp-10__plan-name{font-size:13px;font-weight:700;color:var(--text)}
.stp-10__plan-price{font-size:19px;font-weight:800;color:var(--blue);margin:4px 0}
.stp-10__plan-desc{font-size:10px;color:var(--muted)}

/* nav */
.stp-10__nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px}
.stp-10__btn{
  padding:11px 26px;border-radius:10px;border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;
}
.stp-10__btn--ghost{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  border:1px solid var(--glass-border);
  color:var(--muted);
}
.stp-10__btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--text)}
.stp-10__btn--primary{
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  color:#000;font-weight:700;
  box-shadow:0 4px 20px rgba(34,211,238,.3);
}
.stp-10__btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(34,211,238,.4)}

.stp-10__dots{display:flex;gap:6px}
.stp-10__dot{width:6px;height:6px;border-radius:50%;background:var(--glass-border);transition:all .3s}
.stp-10__dot.active{width:18px;border-radius:3px;background:var(--cyan)}

@media (prefers-reduced-motion:reduce){
  .stp-10::before,.stp-10__blob{animation:none}
  .stp-10__item.active .stp-10__bubble{animation:none}
  .stp-10__pane.active{animation:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const total=4;
  const items=document.querySelectorAll('.stp-10__item');
  const panes=document.querySelectorAll('.stp-10__pane');
  const dots=document.querySelectorAll('.stp-10__dot');
  const title=document.getElementById('stp-10-title');
  const sub=document.getElementById('stp-10-sub');
  const nextBtn=document.getElementById('stp-10-next');

  const info=[
    {t:'Create Your Account',s:'Start with your email and password'},
    {t:'Personal Details',s:'Tell us a bit about yourself'},
    {t:'Choose Your Plan',s:'Select the tier that fits your needs'},
    {t:'Payment Info',s:'Secure checkout — cancel anytime'},
  ];

  function update(){
    items.forEach((item,i)=>{
      item.classList.remove('done','active');
      const b=item.querySelector('.stp-10__bubble');
      if(i+1<cur){item.classList.add('done');b.textContent='✓';}
      else if(i+1===cur){item.classList.add('active');b.textContent=cur;}
      else b.textContent=i+1;
    });
    panes.forEach(p=>{
      p.classList.remove('active');
      if(parseInt(p.dataset.pane)===cur) p.classList.add('active');
    });
    dots.forEach((d,i)=>{
      d.classList.remove('active');
      if(i+1===cur) d.classList.add('active');
    });
    const inf=info[cur-1];
    title.textContent=inf.t;
    sub.textContent=inf.s;
    nextBtn.textContent=cur===total?'Complete Setup ✓':'Continue →';
    document.getElementById('stp-10-back').style.display=cur<=1?'none':'';
  }

  document.querySelectorAll('.stp-10__plan').forEach(p=>{
    p.addEventListener('click',()=>{
      document.querySelectorAll('.stp-10__plan').forEach(x=>x.classList.remove('sel'));
      p.classList.add('sel');
    });
  });
  document.getElementById('stp-10-back').addEventListener('click',()=>{cur=Math.max(1,cur-1);update();});
  document.getElementById('stp-10-next').addEventListener('click',()=>{cur=Math.min(total,cur+1);update();});
  update();
})();
```

### 11. CSS Dark Mode Stepper Component

**Type:** CSS + JS
**Description:** A dark green/teal step component with a tab rail showing step sublabels, a mini progress bar beneath the rail, a light/dark theme toggle, and a completion summary panel at the final step.

**HTML:**
```html
<div class="stp-11">
  <div class="stp-11__eyebrow">
    <div class="stp-11__dot-live"></div>
    Dark Mode Stepper · 4 Steps
  </div>

  <div class="stp-11__card">
    <!-- Rail -->
    <div class="stp-11__rail" id="stp-11-rail">
      <div class="stp-11__rail-item done" data-r="1">
        <div class="stp-11__rail-num">✓</div>
        <div class="stp-11__rail-text"><div class="stp-11__rail-label">Account</div><div class="stp-11__rail-sublabel">Done</div></div>
      </div>
      <div class="stp-11__rail-item done" data-r="2">
        <div class="stp-11__rail-num">✓</div>
        <div class="stp-11__rail-text"><div class="stp-11__rail-label">Preferences</div><div class="stp-11__rail-sublabel">Done</div></div>
      </div>
      <div class="stp-11__rail-item active" data-r="3">
        <div class="stp-11__rail-num">3</div>
        <div class="stp-11__rail-text"><div class="stp-11__rail-label">Notifications</div><div class="stp-11__rail-sublabel">In progress</div></div>
      </div>
      <div class="stp-11__rail-item" data-r="4">
        <div class="stp-11__rail-num">4</div>
        <div class="stp-11__rail-text"><div class="stp-11__rail-label">Review</div><div class="stp-11__rail-sublabel">Next</div></div>
      </div>
    </div>

    <!-- Body -->
    <div class="stp-11__body">
      <div class="stp-11__mini-bar"><div class="stp-11__mini-fill" id="stp-11-fill" style="width:50%"></div></div>

      <div class="stp-11__pane" data-pane="1">
        <div class="stp-11__pane-head"><div class="stp-11__pane-title">Account Setup</div><div class="stp-11__pane-desc">Create your secure account credentials.</div></div>
        <div class="stp-11__field"><label class="stp-11__fl">Email</label><input class="stp-11__in" placeholder="you@example.com"></div>
        <div class="stp-11__row2">
          <div class="stp-11__field"><label class="stp-11__fl">Username</label><input class="stp-11__in" placeholder="@handle"></div>
          <div class="stp-11__field"><label class="stp-11__fl">Password</label><input class="stp-11__in" type="password" placeholder="••••••••"></div>
        </div>
      </div>

      <div class="stp-11__pane" data-pane="2">
        <div class="stp-11__pane-head"><div class="stp-11__pane-title">Preferences</div><div class="stp-11__pane-desc">Personalise your experience.</div></div>
        <div class="stp-11__field"><label class="stp-11__fl">Display Name</label><input class="stp-11__in" placeholder="Jordan Blake"></div>
        <div class="stp-11__field"><label class="stp-11__fl">Time Zone</label><input class="stp-11__in" placeholder="UTC-08:00 Pacific"></div>
        <div class="stp-11__field"><label class="stp-11__fl">Language</label><input class="stp-11__in" placeholder="English (US)"></div>
      </div>

      <div class="stp-11__pane active" data-pane="3">
        <div class="stp-11__pane-head"><div class="stp-11__pane-title">Notification Settings</div><div class="stp-11__pane-desc">Choose what you want to hear about.</div></div>
        <div class="stp-11__toggles">
          <div class="stp-11__toggle">
            <div class="stp-11__toggle-info"><div class="stp-11__toggle-name">Email Digest</div><div class="stp-11__toggle-desc">Weekly summary of your activity</div></div>
            <div class="stp-11__sw on" tabindex="0" role="switch"></div>
          </div>
          <div class="stp-11__toggle">
            <div class="stp-11__toggle-info"><div class="stp-11__toggle-name">Push Alerts</div><div class="stp-11__toggle-desc">Real-time browser notifications</div></div>
            <div class="stp-11__sw" tabindex="0" role="switch"></div>
          </div>
          <div class="stp-11__toggle">
            <div class="stp-11__toggle-info"><div class="stp-11__toggle-name">Product Updates</div><div class="stp-11__toggle-desc">New features and changelog</div></div>
            <div class="stp-11__sw on" tabindex="0" role="switch"></div>
          </div>
        </div>
      </div>

      <div class="stp-11__pane" data-pane="4">
        <div class="stp-11__pane-head"><div class="stp-11__pane-title">Review &amp; Confirm</div><div class="stp-11__pane-desc">Everything looks right?</div></div>
        <div class="stp-11__review">
          <div class="stp-11__review-row"><span class="stp-11__review-key">Username</span><span class="stp-11__review-val">@jordanblake</span></div>
          <div class="stp-11__review-row"><span class="stp-11__review-key">Email</span><span class="stp-11__review-val">jordan@example.com</span></div>
          <div class="stp-11__review-row"><span class="stp-11__review-key">Time Zone</span><span class="stp-11__review-val">UTC-08:00 Pacific</span></div>
          <div class="stp-11__review-row"><span class="stp-11__review-key">Email Digest</span><span class="stp-11__review-val" style="color:var(--green)">✓ Enabled</span></div>
          <div class="stp-11__review-row"><span class="stp-11__review-key">Push Alerts</span><span class="stp-11__review-val" style="color:var(--muted)">Disabled</span></div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="stp-11__foot">
      <span class="stp-11__step-text">Step <strong id="stp-11-cur">3</strong> of <strong>4</strong></span>
      <div class="stp-11__foot-btns">
        <button class="stp-11__btn stp-11__btn--ghost" id="stp-11-back">Back</button>
        <button class="stp-11__btn stp-11__btn--primary" id="stp-11-next">Continue →</button>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-11,.stp-11 *,.stp-11 *::before,.stp-11 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-11 ::selection{background:#34d399;color:#000}
.stp-11{
  --bg:#0f0f0f;
  --surface:#181818;
  --elevated:#222;
  --green:#34d399;
  --teal:#2dd4bf;
  --white:#f5f5f5;
  --muted:#525252;
  --border:#2a2a2a;
  --text:#e5e5e5;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:32px;
}

/* ─ Top label ─ */
.stp-11__eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.stp-11__dot-live{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:stp-11-blink 1.5s ease-in-out infinite;
}
@keyframes stp-11-blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ─ Main card ─ */
.stp-11__card{
  max-width:620px;width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}

/* ─ Step rail ─ */
.stp-11__rail{
  display:flex;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.stp-11__rail-item{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  position:relative;border-right:1px solid var(--border);
  cursor:pointer;transition:background .2s;
}
.stp-11__rail-item:last-child{border-right:none}
.stp-11__rail-item:hover{background:rgba(255,255,255,.02)}
.stp-11__rail-item.active{background:rgba(52,211,153,.04)}
.stp-11__rail-item.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--teal));
}
.stp-11__rail-num{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
  background:var(--border);color:var(--muted);
  transition:all .3s;
}
.stp-11__rail-item.done .stp-11__rail-num{background:rgba(52,211,153,.15);color:var(--green)}
.stp-11__rail-item.active .stp-11__rail-num{background:rgba(52,211,153,.2);color:var(--green);box-shadow:0 0 12px rgba(52,211,153,.2)}
.stp-11__rail-text{min-width:0}
.stp-11__rail-label{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .3s}
.stp-11__rail-item.done .stp-11__rail-label{color:var(--green)}
.stp-11__rail-item.active .stp-11__rail-label{color:var(--text)}
.stp-11__rail-sublabel{font-size:10px;color:var(--muted);display:none}
.stp-11__rail-item.active .stp-11__rail-sublabel{display:block}

/* ─ Body ─ */
.stp-11__body{padding:28px 28px 24px}

/* progress micro bar */
.stp-11__mini-bar{height:3px;background:var(--border);border-radius:2px;margin-bottom:24px;overflow:hidden}
.stp-11__mini-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--teal));transition:width .4s ease}

.stp-11__pane{display:none}
.stp-11__pane.active{display:block;animation:stp-11-in .3s ease}
@keyframes stp-11-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

.stp-11__pane-head{margin-bottom:20px}
.stp-11__pane-title{font-size:17px;font-weight:700;color:var(--white)}
.stp-11__pane-desc{font-size:13px;color:var(--muted);margin-top:4px}

/* fields */
.stp-11__field{margin-bottom:14px}
.stp-11__fl{font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:block}
.stp-11__in{
  width:100%;padding:10px 14px;
  background:var(--elevated);
  border:1px solid var(--border);border-radius:8px;
  color:var(--white);font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.stp-11__in::placeholder{color:var(--muted)}
.stp-11__in:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(52,211,153,.1)}
.stp-11__row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* toggle switches */
.stp-11__toggles{display:flex;flex-direction:column;gap:12px}
.stp-11__toggle{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;
  background:var(--elevated);border:1px solid var(--border);border-radius:10px;
}
.stp-11__toggle-info{flex:1}
.stp-11__toggle-name{font-size:14px;font-weight:600;color:var(--text)}
.stp-11__toggle-desc{font-size:12px;color:var(--muted);margin-top:2px}
.stp-11__sw{
  width:40px;height:22px;border-radius:11px;
  background:var(--border);position:relative;cursor:pointer;
  transition:background .25s;flex-shrink:0;
}
.stp-11__sw.on{background:var(--green)}
.stp-11__sw::after{
  content:'';position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .25s;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.stp-11__sw.on::after{transform:translateX(18px)}

/* review table */
.stp-11__review{display:grid;gap:10px}
.stp-11__review-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;background:var(--elevated);border-radius:8px;
  border:1px solid var(--border);
}
.stp-11__review-key{font-size:12px;color:var(--muted);font-weight:500}
.stp-11__review-val{font-size:13px;color:var(--white);font-weight:600}

/* footer nav */
.stp-11__foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 28px;
  border-top:1px solid var(--border);
  background:var(--bg);
}
.stp-11__step-text{font-size:12px;color:var(--muted)}
.stp-11__step-text strong{color:var(--green)}
.stp-11__foot-btns{display:flex;gap:10px}
.stp-11__btn{padding:9px 22px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.stp-11__btn--ghost{background:var(--border);color:var(--muted)}
.stp-11__btn--ghost:hover{color:var(--white)}
.stp-11__btn--primary{background:linear-gradient(135deg,var(--green),var(--teal));color:#000}
.stp-11__btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(52,211,153,.25)}

@media (prefers-reduced-motion:reduce){
  .stp-11__dot-live{animation:none}
  .stp-11__pane.active{animation:none}
  .stp-11__mini-fill{transition:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const total=4;
  const rails=document.querySelectorAll('.stp-11__rail-item');
  const panes=document.querySelectorAll('.stp-11__pane');
  const fill=document.getElementById('stp-11-fill');
  const curEl=document.getElementById('stp-11-cur');
  const nextBtn=document.getElementById('stp-11-next');
  const sublabels=['Done','Done','In progress','Next'];

  function update(){
    rails.forEach((r,i)=>{
      r.classList.remove('done','active');
      const num=r.querySelector('.stp-11__rail-num');
      const sub=r.querySelector('.stp-11__rail-sublabel');
      if(i+1<cur){r.classList.add('done');num.textContent='✓';if(sub)sub.textContent='Done';}
      else if(i+1===cur){r.classList.add('active');num.textContent=cur;if(sub)sub.textContent='In progress';}
      else{num.textContent=i+1;if(sub)sub.textContent=i+1===cur+1?'Next':''}
    });
    panes.forEach(p=>{
      p.classList.remove('active');
      if(parseInt(p.dataset.pane)===cur) p.classList.add('active');
    });
    fill.style.width=((cur-1)/(total-1)*100)+'%';
    curEl.textContent=cur;
    nextBtn.textContent=cur===total?'Confirm & Finish ✓':'Continue →';
    document.getElementById('stp-11-back').style.display=cur<=1?'none':'';
  }

  document.querySelectorAll('.stp-11__sw').forEach(sw=>{
    sw.addEventListener('click',()=>sw.classList.toggle('on'));
  });
  document.getElementById('stp-11-back').addEventListener('click',()=>{cur=Math.max(1,cur-1);update();});
  document.getElementById('stp-11-next').addEventListener('click',()=>{cur=Math.min(total,cur+1);update();});
  update();
})();
```

### 12. CSS Stepper With Connector Line Animation

**Type:** CSS + JS
**Description:** Animated fill connector lines in both horizontal and vertical layouts — a shimmer sweep runs along the line as each step completes, with ripple ring bursts on the active node and a rose/orange/amber gradient palette.

**HTML:**
```html
<div class="stp-12">
  <div class="stp-12__wrap">

    <!-- Horizontal with animated fill -->
    <div class="stp-12__horz">
      <div class="stp-12__horz-label">Horizontal — Animated Connector Fill</div>
      <div class="stp-12__h-track" id="stp-12-h">
        <div class="stp-12__h-step done" data-hi="1">
          <div class="stp-12__h-node">✓</div>
          <span class="stp-12__h-label">Initiate</span>
        </div>
        <div class="stp-12__h-connector" data-ci="1"><div class="stp-12__h-connector-fill" style="width:100%"></div></div>
        <div class="stp-12__h-step done" data-hi="2">
          <div class="stp-12__h-node">✓</div>
          <span class="stp-12__h-label">Configure</span>
        </div>
        <div class="stp-12__h-connector active" data-ci="2"><div class="stp-12__h-connector-fill" style="width:60%"></div></div>
        <div class="stp-12__h-step active" data-hi="3">
          <div class="stp-12__h-node">3</div>
          <span class="stp-12__h-label">Build</span>
        </div>
        <div class="stp-12__h-connector" data-ci="3"><div class="stp-12__h-connector-fill" style="width:0%"></div></div>
        <div class="stp-12__h-step" data-hi="4">
          <div class="stp-12__h-node">4</div>
          <span class="stp-12__h-label">Test</span>
        </div>
        <div class="stp-12__h-connector" data-ci="4"><div class="stp-12__h-connector-fill" style="width:0%"></div></div>
        <div class="stp-12__h-step" data-hi="5">
          <div class="stp-12__h-node">5</div>
          <span class="stp-12__h-label">Deploy</span>
        </div>
      </div>
    </div>

    <!-- Vertical with animated fill lines -->
    <div class="stp-12__vert" id="stp-12-v">

      <div class="stp-12__v-entry done" data-vi="1">
        <div class="stp-12__v-spine" style="grid-column:1;grid-row:1 / span 1">
          <div class="stp-12__v-node">✓</div>
          <div class="stp-12__v-line"><div class="stp-12__v-line-fill" style="height:100%"></div></div>
        </div>
        <div class="stp-12__v-content" style="grid-column:2;grid-row:1">
          <div class="stp-12__v-step-tag">Step 01 · Completed</div>
          <div class="stp-12__v-title">Project Kickoff</div>
          <div class="stp-12__v-desc">Stakeholder alignment, scope definition, and milestone planning locked in.</div>
          <div class="stp-12__v-meta">✓ Completed 3 Jan 2026</div>
        </div>
      </div>

      <div class="stp-12__v-entry done" data-vi="2">
        <div class="stp-12__v-spine" style="grid-column:1;grid-row:2 / span 1">
          <div class="stp-12__v-node">✓</div>
          <div class="stp-12__v-line"><div class="stp-12__v-line-fill" style="height:100%"></div></div>
        </div>
        <div class="stp-12__v-content" style="grid-column:2;grid-row:2">
          <div class="stp-12__v-step-tag">Step 02 · Completed</div>
          <div class="stp-12__v-title">Design Phase</div>
          <div class="stp-12__v-desc">Wireframes approved, component library built, and brand tokens exported.</div>
          <div class="stp-12__v-meta">✓ Completed 14 Feb 2026</div>
        </div>
      </div>

      <div class="stp-12__v-entry active" data-vi="3">
        <div class="stp-12__v-spine" style="grid-column:1;grid-row:3 / span 1">
          <div class="stp-12__v-node">3</div>
          <div class="stp-12__v-line"><div class="stp-12__v-line-fill" style="height:0%"></div></div>
        </div>
        <div class="stp-12__v-content" style="grid-column:2;grid-row:3">
          <div class="stp-12__v-step-tag">Step 03 · In Progress</div>
          <div class="stp-12__v-title">Development Sprint</div>
          <div class="stp-12__v-desc">Feature development, API integration, and unit test coverage underway.</div>
          <div class="stp-12__v-meta">● Started 1 Mar 2026</div>
        </div>
      </div>

      <div class="stp-12__v-entry" data-vi="4">
        <div class="stp-12__v-spine" style="grid-column:1;grid-row:4 / span 1">
          <div class="stp-12__v-node">4</div>
          <div class="stp-12__v-line"><div class="stp-12__v-line-fill" style="height:0%"></div></div>
        </div>
        <div class="stp-12__v-content" style="grid-column:2;grid-row:4">
          <div class="stp-12__v-step-tag">Step 04</div>
          <div class="stp-12__v-title">QA &amp; Staging</div>
          <div class="stp-12__v-desc">Full regression, performance audits, and stakeholder UAT on staging.</div>
          <div class="stp-12__v-meta">— Scheduled Apr 2026</div>
        </div>
      </div>

      <div class="stp-12__v-entry" data-vi="5">
        <div class="stp-12__v-spine" style="grid-column:1;grid-row:5 / span 1">
          <div class="stp-12__v-node">5</div>
          <!-- no line after last -->
        </div>
        <div class="stp-12__v-content" style="grid-column:2;grid-row:5">
          <div class="stp-12__v-step-tag">Step 05</div>
          <div class="stp-12__v-title">Production Launch</div>
          <div class="stp-12__v-desc">Canary rollout, monitoring alerts active, and public release.</div>
          <div class="stp-12__v-meta">— Scheduled May 2026</div>
        </div>
      </div>

    </div>

    <!-- Nav -->
    <div class="stp-12__nav">
      <button class="stp-12__btn stp-12__btn--ghost" id="stp-12-back">← Previous</button>
      <button class="stp-12__btn stp-12__btn--primary" id="stp-12-next">Mark Complete →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.stp-12,.stp-12 *,.stp-12 *::before,.stp-12 *::after{box-sizing:border-box;margin:0;padding:0}
.stp-12 ::selection{background:#f43f5e;color:#fff}
.stp-12{
  --bg:#fef2f2;
  --white:#fff;
  --rose:#f43f5e;
  --orange:#fb923c;
  --amber:#fbbf24;
  --dark:#1c0a0a;
  --mid:#7f1d1d;
  --muted:#f87171;
  --border:#fde8e8;
  --grad:linear-gradient(90deg,#f43f5e,#fb923c,#fbbf24);
  --gradv:linear-gradient(180deg,#f43f5e,#fb923c,#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 20px;
  background-image:
    radial-gradient(ellipse at 20% 80%,rgba(244,63,94,.06),transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(251,146,60,.06),transparent 50%);
}
.stp-12__wrap{max-width:740px;width:100%;display:flex;flex-direction:column;gap:64px}

/* ── Horizontal animated connector ── */
.stp-12__horz{width:100%}
.stp-12__horz-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:center;margin-bottom:28px}

.stp-12__h-track{display:flex;align-items:center;position:relative}
.stp-12__h-step{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;position:relative;z-index:1}
.stp-12__h-connector{flex:1;height:4px;background:var(--border);border-radius:2px;position:relative;overflow:hidden;margin:0 -2px}
.stp-12__h-connector-fill{
  height:100%;width:0%;border-radius:2px;
  background:var(--grad);
  transition:width .6s cubic-bezier(.4,0,.2,1);
  position:relative;
}
/* shimmer on connector fill */
.stp-12__h-connector-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  background-size:200% 100%;
  animation:stp-12-shimmer 1.5s linear infinite;
  opacity:0;
}
.stp-12__h-connector.active .stp-12__h-connector-fill::after{opacity:1}
@keyframes stp-12-shimmer{0%{background-position:200%}100%{background-position:-200%}}

.stp-12__h-node{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;
  background:var(--white);
  border:3px solid var(--border);
  color:#c4b0b0;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  box-shadow:0 2px 12px rgba(244,63,94,.06);
}
/* ripple ring on active */
.stp-12__h-node::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--rose);opacity:0;
  transition:all .4s;
}
.stp-12__h-step.done .stp-12__h-node{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 4px 20px rgba(244,63,94,.3);
}
.stp-12__h-step.active .stp-12__h-node{
  border-color:var(--rose);color:var(--rose);
  box-shadow:0 4px 24px rgba(244,63,94,.25);
  animation:stp-12-ring 2s ease-in-out infinite;
}
.stp-12__h-step.active .stp-12__h-node::before{opacity:.4;animation:stp-12-ripple 1.5s ease-out infinite}
@keyframes stp-12-ring{0%,100%{box-shadow:0 4px 24px rgba(244,63,94,.25)}50%{box-shadow:0 4px 36px rgba(244,63,94,.45)}}
@keyframes stp-12-ripple{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}

.stp-12__h-label{font-size:11px;font-weight:600;color:#c4b0b0;text-align:center;text-transform:uppercase;letter-spacing:.06em;transition:color .3s;max-width:64px}
.stp-12__h-step.done .stp-12__h-label{color:var(--rose)}
.stp-12__h-step.active .stp-12__h-label{color:var(--dark)}

/* ── Vertical animated connector ── */
.stp-12__vert{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:stretch}
.stp-12__v-spine{display:flex;flex-direction:column;align-items:center;padding-top:6px}
.stp-12__v-node{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  background:var(--white);border:2px solid var(--border);color:#c4b0b0;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 2px 8px rgba(244,63,94,.06);
}
.stp-12__v-entry.done .stp-12__v-node{
  background:var(--gradv);border-color:transparent;color:#fff;
  box-shadow:0 4px 16px rgba(244,63,94,.3);
}
.stp-12__v-entry.active .stp-12__v-node{
  border-color:var(--rose);color:var(--rose);
  box-shadow:0 4px 20px rgba(244,63,94,.2),0 0 0 4px rgba(244,63,94,.1);
}

.stp-12__v-line{
  width:4px;flex:1;min-height:24px;margin:6px 0;border-radius:2px;
  background:var(--border);position:relative;overflow:hidden;
}
.stp-12__v-line-fill{
  position:absolute;top:0;left:0;right:0;height:0%;
  background:var(--gradv);border-radius:2px;
  transition:height .6s cubic-bezier(.4,0,.2,1);
}
.stp-12__v-entry.done+.stp-12__v-gap .stp-12__v-line-fill{height:100%}

.stp-12__v-entry{display:contents}
.stp-12__v-content{padding:6px 0 28px}
.stp-12__v-entry:last-child .stp-12__v-content{padding-bottom:0}
.stp-12__v-step-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#c4b0b0;font-weight:700;margin-bottom:4px}
.stp-12__v-entry.done .stp-12__v-step-tag,.stp-12__v-entry.active .stp-12__v-step-tag{color:var(--rose)}
.stp-12__v-title{font-size:17px;font-weight:700;color:#c4b0b0;margin-bottom:4px;transition:color .3s}
.stp-12__v-entry.done .stp-12__v-title,.stp-12__v-entry.active .stp-12__v-title{color:var(--dark)}
.stp-12__v-desc{font-size:13px;color:var(--muted);line-height:1.6}
.stp-12__v-entry.active .stp-12__v-desc{color:var(--mid)}
.stp-12__v-meta{font-size:11px;color:#c4b0b0;margin-top:6px;display:flex;align-items:center;gap:6px}
.stp-12__v-entry.done .stp-12__v-meta{color:var(--rose)}
.stp-12__v-entry.active .stp-12__v-meta{color:var(--rose)}

/* nav row */
.stp-12__nav{display:flex;justify-content:center;gap:12px}
.stp-12__btn{padding:12px 28px;border-radius:12px;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.stp-12__btn--ghost{background:var(--white);border:1.5px solid var(--border);color:var(--muted)}
.stp-12__btn--ghost:hover{border-color:var(--rose);color:var(--dark)}
.stp-12__btn--primary{background:var(--grad);color:#fff;box-shadow:0 4px 20px rgba(244,63,94,.3)}
.stp-12__btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(244,63,94,.4)}

@media (prefers-reduced-motion:reduce){
  .stp-12__h-step.active .stp-12__h-node{animation:none}
  .stp-12__h-step.active .stp-12__h-node::before{animation:none}
  .stp-12__h-connector-fill::after{animation:none}
  .stp-12__h-connector-fill,.stp-12__v-line-fill{transition:none}
}
```

**JS:**
```js
(function(){
  let cur=3;
  const hSteps=document.querySelectorAll('.stp-12__h-step');
  const hCons=document.querySelectorAll('.stp-12__h-connector');
  const vEntries=document.querySelectorAll('.stp-12__v-entry');
  const total=5;

  const vMeta=[
    '✓ Completed 3 Jan 2026','✓ Completed 14 Feb 2026',
    '● Started 1 Mar 2026','— Scheduled Apr 2026','— Scheduled May 2026'
  ];
  const vTags=['Step 01 · Completed','Step 02 · Completed','Step 03 · In Progress','Step 04','Step 05'];

  function update(){
    // horizontal
    hSteps.forEach((s,i)=>{
      s.classList.remove('done','active');
      const node=s.querySelector('.stp-12__h-node');
      if(i+1<cur){s.classList.add('done');node.textContent='✓';}
      else if(i+1===cur){s.classList.add('active');node.textContent=cur;}
      else node.textContent=i+1;
    });
    hCons.forEach((c,i)=>{
      c.classList.remove('active');
      const fill=c.querySelector('.stp-12__h-connector-fill');
      if(i+1<cur){fill.style.width='100%';}
      else if(i+1===cur){c.classList.add('active');fill.style.width='55%';}
      else fill.style.width='0%';
    });
    // vertical
    vEntries.forEach((e,i)=>{
      e.classList.remove('done','active');
      const node=e.querySelector('.stp-12__v-node');
      const tag=e.querySelector('.stp-12__v-step-tag');
      const meta=e.querySelector('.stp-12__v-meta');
      const lineFill=e.querySelector('.stp-12__v-line-fill');
      if(i+1<cur){
        e.classList.add('done');node.textContent='✓';
        if(tag) tag.textContent=vTags[i].replace('In Progress','Completed').replace('Step 0'+String(i+1),'Step 0'+String(i+1)+' · Completed');
        if(lineFill) lineFill.style.height='100%';
      } else if(i+1===cur){
        e.classList.add('active');node.textContent=cur;
        if(tag) tag.textContent='Step 0'+cur+' · In Progress';
        if(lineFill) lineFill.style.height='0%';
      } else {
        node.textContent=i+1;
        if(tag) tag.textContent='Step 0'+(i+1);
        if(lineFill) lineFill.style.height='0%';
      }
    });
  }

  document.getElementById('stp-12-back').addEventListener('click',()=>{cur=Math.max(1,cur-1);update();});
  document.getElementById('stp-12-next').addEventListener('click',()=>{cur=Math.min(total,cur+1);update();});
  update();
})();
```

---
## 32 CSS Tab Designs

URL: https://codefronts.com/navigation/css-tabs/
Description: 32 CSS tab designs — 12 fan-favorite patterns (Ink Slider, Neon Electric, Brutalist Press, Chromatic, VS Code Files, iOS Segmented, Bento Grid, Vertical Dots, CRT Terminal, Morph Icon, Typewriter, Particle Burst) plus 20 typography-driven specimens. Sliding pills, halo blooms, drop caps, stencil cuts, folio folds. Each demo carries a distinct accent palette and motion choreography.
Demo count: 32

### 01. Ink Slider

**Type:** CSS + JS
**Description:** Solid ink-violet bar slides horizontally beneath the active tab. JS measures offsetLeft + offsetWidth so the bar matches each tab's exact width — no fixed-width assumption — and re-aligns on viewport resize.

**HTML:**
```html
<div class="tt21">
  <nav class="tt21n">
    <span class="tt21bar" aria-hidden="true"></span>
    <button class="tt21b active" data-t>Overview</button>
    <button class="tt21b" data-t>Pricing</button>
    <button class="tt21b" data-t>Reviews</button>
    <button class="tt21b" data-t>Support</button>
  </nav>
</div>
```

**CSS:**
```css
.tt21 {
  background: #faf8f3;
  padding: 32px 18px 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt21n {
  position: relative;
  display: flex;
  border-bottom: 1px solid rgba(35, 28, 72, 0.12);
  min-width: 0;
}
.tt21bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 0;
  background: #231c48;
  border-radius: 2px 2px 0 0;
  transition:
    left 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.tt21b {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 14px;
  border: 0;
  background: transparent;
  font:
    600 13px/1 ui-sans-serif,
    system-ui;
  color: rgba(35, 28, 72, 0.55);
  cursor: pointer;
  transition: color 0.25s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt21b:hover {
  color: rgba(35, 28, 72, 0.85);
}
.tt21b.active {
  color: #231c48;
}
.tt21b:focus-visible {
  outline: 2px solid #231c48;
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .tt21bar {
    transition: none;
  }
}
```

**JS:**
```js
/* Ink Slider — toggle .active and slide the ink bar to the active tab.
   Re-positions on viewport resize so the bar stays locked to its button. */
(function () {
  var nav = document.querySelector(".tt21n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var bar = nav.querySelector(".tt21bar");
  var current = null;

  function reposition() {
    if (!current || !bar) return;
    bar.style.left = current.offsetLeft + "px";
    bar.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 02. Neon Electric

**Type:** Pure CSS
**Description:** Each tab owns its own electric accent via a CSS custom property. The active tab lights up with a neon border and a soft outer glow in its color. Pure CSS via radio inputs and `:has()` panel switching.

**HTML:**
```html
<div class="tt22">
  <nav class="tt22n">
    <input type="radio" name="tt22" id="tt22-r1" checked />
    <label class="tt22b" for="tt22-r1" style="--c: #ff3df5">Pulse</label>
    <input type="radio" name="tt22" id="tt22-r2" />
    <label class="tt22b" for="tt22-r2" style="--c: #3df5ff">Wave</label>
    <input type="radio" name="tt22" id="tt22-r3" />
    <label class="tt22b" for="tt22-r3" style="--c: #caff3d">Surge</label>
    <input type="radio" name="tt22" id="tt22-r4" />
    <label class="tt22b" for="tt22-r4" style="--c: #ff913d">Bloom</label>
  </nav>
  <div class="tt22p">Pulse — short, rhythmic bursts of light.</div>
  <div class="tt22p">Wave — continuous oscillating motion.</div>
  <div class="tt22p">Surge — sudden upward power swell.</div>
  <div class="tt22p">Bloom — soft expanding glow front.</div>
</div>
```

**CSS:**
```css
.tt22 {
  background: #0c0c12;
  padding: 22px 18px;
  font-family: ui-monospace, monospace;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt22n {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.tt22n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt22b {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: transparent;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  text-align: center;
  transition:
    color 0.25s,
    border-color 0.25s,
    box-shadow 0.3s,
    background 0.25s;
  white-space: nowrap;
}
.tt22b:hover {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
}
.tt22n input:checked + .tt22b {
  color: var(--c);
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--c) 50%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--c) 25%, transparent);
}
.tt22n input:focus-visible + .tt22b {
  outline: 2px dashed var(--c);
  outline-offset: 2px;
}
.tt22p {
  display: none;
  padding-top: 18px;
  font:
    12px/1.55 ui-monospace,
    monospace;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
}
.tt22:has(#tt22-r1:checked) .tt22p:nth-of-type(1),
.tt22:has(#tt22-r2:checked) .tt22p:nth-of-type(2),
.tt22:has(#tt22-r3:checked) .tt22p:nth-of-type(3),
.tt22:has(#tt22-r4:checked) .tt22p:nth-of-type(4) {
  display: block;
}
```

### 03. Brutalist Press

**Type:** Pure CSS
**Description:** Heavy uppercase tabs with hard 4px black offset shadows. Active tab presses flush — shadow collapses, button translates 4px down-right, color inverts. Tactile mechanical-keyboard feedback.

**HTML:**
```html
<div class="tt23">
  <nav class="tt23n">
    <input type="radio" name="tt23" id="tt23-r1" checked />
    <label class="tt23b" for="tt23-r1">Build</label>
    <input type="radio" name="tt23" id="tt23-r2" />
    <label class="tt23b" for="tt23-r2">Ship</label>
    <input type="radio" name="tt23" id="tt23-r3" />
    <label class="tt23b" for="tt23-r3">Iterate</label>
  </nav>
  <div class="tt23p">Build — assemble the parts.</div>
  <div class="tt23p">Ship — push it to production.</div>
  <div class="tt23p">Iterate — measure and refine.</div>
</div>
```

**CSS:**
```css
.tt23 {
  background: #fef0c7;
  padding: 26px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt23n {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.tt23n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt23b {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 3px solid #0a0a0a;
  background: #fff;
  font:
    800 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a;
  cursor: pointer;
  text-align: center;
  box-shadow: 4px 4px 0 0 #0a0a0a;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background 0.2s,
    color 0.2s;
  white-space: nowrap;
}
.tt23b:hover {
  background: #f4e7b3;
}
.tt23n input:checked + .tt23b {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 #0a0a0a;
  background: #0a0a0a;
  color: #fef0c7;
}
.tt23n input:focus-visible + .tt23b {
  outline: 2px dashed #0a0a0a;
  outline-offset: 4px;
}
.tt23p {
  display: none;
  padding-top: 22px;
  font:
    600 13px/1.55 ui-sans-serif,
    system-ui;
  color: #0a0a0a;
}
.tt23:has(#tt23-r1:checked) .tt23p:nth-of-type(1),
.tt23:has(#tt23-r2:checked) .tt23p:nth-of-type(2),
.tt23:has(#tt23-r3:checked) .tt23p:nth-of-type(3) {
  display: block;
}
```

### 04. Chromatic

**Type:** Pure CSS
**Description:** Four color-coded tabs each with a dedicated tint, border, and active-state glow. Violet, rose, cyan, lime — each tab keeps its identity whether active or inactive. Pure CSS.

**HTML:**
```html
<div class="tt24">
  <nav class="tt24n">
    <input type="radio" name="tt24" id="tt24-r1" checked />
    <label class="tt24b tt24-v" for="tt24-r1">Violet</label>
    <input type="radio" name="tt24" id="tt24-r2" />
    <label class="tt24b tt24-r" for="tt24-r2">Rose</label>
    <input type="radio" name="tt24" id="tt24-r3" />
    <label class="tt24b tt24-c" for="tt24-r3">Cyan</label>
    <input type="radio" name="tt24" id="tt24-r4" />
    <label class="tt24b tt24-l" for="tt24-r4">Lime</label>
  </nav>
  <div class="tt24p">Violet — deep, contemplative.</div>
  <div class="tt24p">Rose — warm, inviting.</div>
  <div class="tt24p">Cyan — crisp, technical.</div>
  <div class="tt24p">Lime — fresh, urgent.</div>
</div>
```

**CSS:**
```css
.tt24 {
  background: #0f0f17;
  padding: 24px 20px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt24n {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.tt24n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt24b {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 8px;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.3s;
  white-space: nowrap;
  border: 1px solid;
}
.tt24-v {
  color: #c4b5fd;
  border-color: rgba(196, 181, 253, 0.3);
  background: rgba(196, 181, 253, 0.06);
}
.tt24-r {
  color: #fda4af;
  border-color: rgba(253, 164, 175, 0.3);
  background: rgba(253, 164, 175, 0.06);
}
.tt24-c {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.3);
  background: rgba(103, 232, 249, 0.06);
}
.tt24-l {
  color: #bef264;
  border-color: rgba(190, 242, 100, 0.3);
  background: rgba(190, 242, 100, 0.06);
}
.tt24n input:checked + .tt24-v {
  background: rgba(196, 181, 253, 0.18);
  border-color: #c4b5fd;
  box-shadow: 0 0 18px rgba(196, 181, 253, 0.35);
}
.tt24n input:checked + .tt24-r {
  background: rgba(253, 164, 175, 0.18);
  border-color: #fda4af;
  box-shadow: 0 0 18px rgba(253, 164, 175, 0.35);
}
.tt24n input:checked + .tt24-c {
  background: rgba(103, 232, 249, 0.18);
  border-color: #67e8f9;
  box-shadow: 0 0 18px rgba(103, 232, 249, 0.35);
}
.tt24n input:checked + .tt24-l {
  background: rgba(190, 242, 100, 0.18);
  border-color: #bef264;
  box-shadow: 0 0 18px rgba(190, 242, 100, 0.35);
}
.tt24n input:focus-visible + .tt24b {
  outline: 2px dashed currentColor;
  outline-offset: 3px;
}
.tt24p {
  display: none;
  padding-top: 20px;
  font:
    13px/1.55 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.7);
}
.tt24:has(#tt24-r1:checked) .tt24p:nth-of-type(1),
.tt24:has(#tt24-r2:checked) .tt24p:nth-of-type(2),
.tt24:has(#tt24-r3:checked) .tt24p:nth-of-type(3),
.tt24:has(#tt24-r4:checked) .tt24p:nth-of-type(4) {
  display: block;
}
```

### 05. VS Code Files

**Type:** Pure CSS
**Description:** IDE-inspired file tabs with language-colored dots and editor chrome. The active tab lifts with a top accent stripe and matches the editor surface, just like VS Code. Pure CSS.

**HTML:**
```html
<div class="tt25">
  <nav class="tt25n">
    <input type="radio" name="tt25" id="tt25-r1" checked />
    <label class="tt25b" for="tt25-r1"
      ><span class="tt25dot" style="--c: #3178c6"></span>app.tsx</label
    >
    <input type="radio" name="tt25" id="tt25-r2" />
    <label class="tt25b" for="tt25-r2"
      ><span class="tt25dot" style="--c: #f0db4f"></span>config.js</label
    >
    <input type="radio" name="tt25" id="tt25-r3" />
    <label class="tt25b" for="tt25-r3"
      ><span class="tt25dot" style="--c: #264de4"></span>styles.css</label
    >
  </nav>
  <div class="tt25body">
    <div class="tt25p">// app.tsx<br />export default App;</div>
    <div class="tt25p">// config.js<br />module.exports = {};</div>
    <div class="tt25p">/* styles.css */<br />:root { color: white; }</div>
  </div>
</div>
```

**CSS:**
```css
.tt25 {
  background: #1e1e1e;
  padding: 0;
  font-family: ui-monospace, monospace;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt25n {
  display: flex;
  background: #2d2d2d;
  border-bottom: 1px solid #1e1e1e;
  min-width: 0;
}
.tt25n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt25b {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font:
    12px/1 ui-monospace,
    monospace;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-right: 1px solid #1e1e1e;
  position: relative;
  white-space: nowrap;
  transition:
    background 0.18s,
    color 0.18s;
}
.tt25b:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}
.tt25dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}
.tt25n input:checked + .tt25b {
  background: #1e1e1e;
  color: #fff;
  border-bottom: 1px solid #1e1e1e;
  margin-bottom: -1px;
}
.tt25n input:checked + .tt25b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #4fc1ff;
}
.tt25n input:focus-visible + .tt25b {
  outline: 1px dashed #4fc1ff;
  outline-offset: -3px;
}
.tt25body {
  padding: 18px 20px;
}
.tt25p {
  display: none;
  font:
    12px/1.6 ui-monospace,
    monospace;
  color: #d4d4d4;
}
.tt25p:nth-of-type(1) {
  color: #569cd6;
}
.tt25:has(#tt25-r1:checked) .tt25p:nth-of-type(1),
.tt25:has(#tt25-r2:checked) .tt25p:nth-of-type(2),
.tt25:has(#tt25-r3:checked) .tt25p:nth-of-type(3) {
  display: block;
}
```

### 06. iOS Segmented

**Type:** CSS + JS
**Description:** Apple-style segmented control: gray track, white pill that physically slides between segments. JS measures positions live; resize-listener keeps the pill aligned at any width.

**HTML:**
```html
<div class="tt26">
  <nav class="tt26n">
    <span class="tt26pill" aria-hidden="true"></span>
    <button class="tt26b active" data-t>Day</button>
    <button class="tt26b" data-t>Week</button>
    <button class="tt26b" data-t>Month</button>
  </nav>
</div>
```

**CSS:**
```css
.tt26 {
  background: #f2f2f7;
  padding: 32px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt26n {
  position: relative;
  display: flex;
  background: rgba(120, 120, 128, 0.16);
  border-radius: 9px;
  padding: 2px;
  width: 100%;
  max-width: 380px;
  min-width: 0;
}
.tt26pill {
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  background: #fff;
  border-radius: 7px;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.06);
  transition:
    left 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.tt26b {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font: 600 13px/1 inherit;
  color: #1c1c1e;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.2s;
  white-space: nowrap;
}
.tt26b:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
  border-radius: 7px;
}
@media (prefers-reduced-motion: reduce) {
  .tt26pill {
    transition: none;
  }
}
```

**JS:**
```js
/* iOS Segmented — toggle .active and slide white pill between tabs.
   Re-positions on viewport resize so the pill stays locked to its segment. */
(function () {
  var nav = document.querySelector(".tt26n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var pill = nav.querySelector(".tt26pill");
  var current = null;

  function reposition() {
    if (!current || !pill) return;
    pill.style.left = current.offsetLeft + "px";
    pill.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 07. Bento Grid

**Type:** Pure CSS
**Description:** Three-column bento grid where the tabs themselves are the cards. The active card lifts, gains a colored top stripe, and the panel becomes the fourth bento cell underneath. Pure CSS.

**HTML:**
```html
<div class="tt27">
  <div class="tt27grid">
    <input type="radio" name="tt27" id="tt27-r1" checked />
    <label class="tt27card" for="tt27-r1">
      <span class="tt27ttl">Stats</span>
      <span class="tt27sub">Real-time data</span>
    </label>
    <input type="radio" name="tt27" id="tt27-r2" />
    <label class="tt27card" for="tt27-r2">
      <span class="tt27ttl">Inbox</span>
      <span class="tt27sub">12 new</span>
    </label>
    <input type="radio" name="tt27" id="tt27-r3" />
    <label class="tt27card" for="tt27-r3">
      <span class="tt27ttl">Tasks</span>
      <span class="tt27sub">3 pending</span>
    </label>
  </div>
  <div class="tt27p">Stats — daily and weekly metrics summary.</div>
  <div class="tt27p">Inbox — unread messages from your team.</div>
  <div class="tt27p">Tasks — items due in the next 7 days.</div>
</div>
```

**CSS:**
```css
.tt27 {
  background: #0a0a0e;
  padding: 18px 16px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt27grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-width: 0;
}
.tt27grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt27card {
  position: relative;
  padding: 18px 14px 14px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    transform 0.25s,
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.3s;
  min-width: 0;
}
.tt27card:hover {
  background: #1f1f28;
  border-color: rgba(255, 255, 255, 0.14);
}
.tt27ttl {
  font:
    700 13px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt27sub {
  font:
    11px/1 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt27grid input:checked + .tt27card {
  background: #1c1c26;
  border-color: #7c6cff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(124, 108, 255, 0.25);
}
.tt27grid input:focus-visible + .tt27card {
  outline: 2px dashed #7c6cff;
  outline-offset: 3px;
}
.tt27p {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  font:
    12px/1.55 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.7);
}
.tt27:has(#tt27-r1:checked) .tt27p:nth-of-type(1),
.tt27:has(#tt27-r2:checked) .tt27p:nth-of-type(2),
.tt27:has(#tt27-r3:checked) .tt27p:nth-of-type(3) {
  display: block;
}
```

### 08. Vertical Dots

**Type:** Pure CSS
**Description:** Sidebar nav with a connecting timeline rule. The active item's dot fills in solid teal with a soft outer glow; inactive dots stay hollow. Vertical layout. Pure CSS.

**HTML:**
```html
<div class="tt28">
  <nav class="tt28n">
    <input type="radio" name="tt28" id="tt28-r1" checked />
    <label class="tt28b" for="tt28-r1"><span class="tt28dot"></span>Profile</label>
    <input type="radio" name="tt28" id="tt28-r2" />
    <label class="tt28b" for="tt28-r2"><span class="tt28dot"></span>Account</label>
    <input type="radio" name="tt28" id="tt28-r3" />
    <label class="tt28b" for="tt28-r3"><span class="tt28dot"></span>Billing</label>
    <input type="radio" name="tt28" id="tt28-r4" />
    <label class="tt28b" for="tt28-r4"><span class="tt28dot"></span>Logs</label>
  </nav>
</div>
```

**CSS:**
```css
.tt28 {
  background: #0d1117;
  padding: 18px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
/* nav padding-left = 30px → that x defines a "rail column" centered at x=15.
   Both the timeline rule and the active dot center on x=15 so they sit on
   the same vertical axis regardless of dot size or label padding. */
.tt28n {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 30px;
  min-width: 0;
}
.tt28n::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: rgba(56, 189, 248, 0.18);
  border-radius: 1px;
}
.tt28n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt28b {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-radius: 4px;
  transition:
    color 0.22s,
    background 0.22s;
  white-space: nowrap;
}
.tt28dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  background: #0d1117;
  flex-shrink: 0;
  /* margin-left = -(button padding-left + dot half-width - line center)
     = -(8 + 6 - 15) = -(-1) ... actually: button starts at nav-padding-left
     (30px). Dot needs left edge at x=9 so center sits at x=15 (line center).
     Button content starts at x=38 (30 + 8 padding). To put dot's left edge
     at x=9, margin-left = 9 - 38 = -29px. */
  margin-left: -29px;
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.3s;
  position: relative;
  z-index: 1;
}
.tt28b:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(56, 189, 248, 0.06);
}
.tt28n input:checked + .tt28b {
  color: #7dd3fc;
}
.tt28n input:checked + .tt28b .tt28dot {
  background: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
}
.tt28n input:focus-visible + .tt28b {
  outline: 1px dashed #38bdf8;
  outline-offset: 3px;
}
```

### 09. CRT Terminal

**Type:** Pure CSS
**Description:** Vintage CRT terminal aesthetic: green phosphor text, scanline overlay, macOS traffic lights in the title bar. Active tab shows a blinking caret cursor. Pure CSS.

**HTML:**
```html
<div class="tt29">
  <div class="tt29win">
    <div class="tt29bar">
      <span class="tt29light tt29-r"></span>
      <span class="tt29light tt29-y"></span>
      <span class="tt29light tt29-g"></span>
      <span class="tt29ttl">terminal — bash</span>
    </div>
    <nav class="tt29n">
      <input type="radio" name="tt29" id="tt29-r1" checked />
      <label class="tt29b" for="tt29-r1">~/main</label>
      <input type="radio" name="tt29" id="tt29-r2" />
      <label class="tt29b" for="tt29-r2">~/logs</label>
      <input type="radio" name="tt29" id="tt29-r3" />
      <label class="tt29b" for="tt29-r3">~/cron</label>
    </nav>
    <div class="tt29body">
      <div class="tt29p">$ ls -la<br />drwxr-xr-x src/<br />-rw-r--r-- README.md</div>
      <div class="tt29p">$ tail -f app.log<br />[12:04] OK 200<br />[12:05] OK 200</div>
      <div class="tt29p">$ crontab -l<br />0 * * * * ./sync.sh<br />*/5 * * * * ./ping.sh</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tt29 {
  background: #0a0a0a;
  padding: 18px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt29win {
  background: #050505;
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.5);
}
.tt29bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #111;
  border-bottom: 1px solid rgba(74, 222, 128, 0.12);
}
.tt29light {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.tt29-r {
  background: #ff5f57;
}
.tt29-y {
  background: #febc2e;
}
.tt29-g {
  background: #28c840;
}
.tt29ttl {
  margin-left: 10px;
  font:
    11px/1 ui-monospace,
    monospace;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}
.tt29n {
  display: flex;
  gap: 0;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(74, 222, 128, 0.12);
  min-width: 0;
}
.tt29n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt29b {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font:
    11px/1 ui-monospace,
    monospace;
  color: rgba(74, 222, 128, 0.5);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.2s,
    background 0.2s;
  border-right: 1px solid rgba(74, 222, 128, 0.08);
}
.tt29b:last-of-type {
  border-right: 0;
}
.tt29b:hover {
  color: rgba(74, 222, 128, 0.85);
  background: rgba(74, 222, 128, 0.04);
}
.tt29n input:checked + .tt29b {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}
.tt29n input:focus-visible + .tt29b {
  outline: 1px dashed #4ade80;
  outline-offset: -3px;
}
.tt29body {
  position: relative;
  padding: 14px 14px;
  min-height: 90px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(74, 222, 128, 0.04) 2px,
    rgba(74, 222, 128, 0.04) 3px
  );
}
.tt29p {
  display: none;
  font:
    11px/1.7 ui-monospace,
    monospace;
  color: #4ade80;
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
}
.tt29:has(#tt29-r1:checked) .tt29p:nth-of-type(1),
.tt29:has(#tt29-r2:checked) .tt29p:nth-of-type(2),
.tt29:has(#tt29-r3:checked) .tt29p:nth-of-type(3) {
  display: block;
}
```

### 10. Morph Icon

**Type:** Pure CSS
**Description:** Compact icon-only tabs that expand on activation: the label morphs in via a max-width transition, smoothly widening the active tab inline. Pure CSS, no positional JS.

**HTML:**
```html
<div class="tt30">
  <nav class="tt30n">
    <input type="radio" name="tt30" id="tt30-r1" checked />
    <label class="tt30b" for="tt30-r1">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 12l9-9 9 9M5 10v10h14V10" />
      </svg>
      <span class="tt30l">Home</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r2" />
    <label class="tt30b" for="tt30-r2">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <path d="M21 21l-5-5" />
      </svg>
      <span class="tt30l">Search</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r3" />
    <label class="tt30b" for="tt30-r3">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 8h18M3 14h18M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
        />
      </svg>
      <span class="tt30l">Inbox</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r4" />
    <label class="tt30b" for="tt30-r4">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt30l">Profile</span>
    </label>
  </nav>
</div>
```

**CSS:**
```css
.tt30 {
  background: #fdf6e9;
  padding: 32px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt30n {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(212, 67, 127, 0.12);
  min-width: 0;
}
.tt30n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt30b {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #94748a;
  transition:
    background 0.3s,
    color 0.3s,
    gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
}
.tt30b:hover {
  color: #d4437f;
}
.tt30i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tt30l {
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s;
}
.tt30n input:checked + .tt30b {
  background: #d4437f;
  color: #fff;
  gap: 8px;
}
.tt30n input:checked + .tt30b .tt30l {
  max-width: 120px;
  opacity: 1;
}
.tt30n input:focus-visible + .tt30b {
  outline: 2px dashed #d4437f;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tt30b,
  .tt30l {
    transition: none;
  }
}
```

### 11. Typewriter

**Type:** Pure CSS
**Description:** Activating a tab triggers a typewriter animation on the panel: text reveals via max-width steps animation, with a blinking cursor at the end. Pure CSS via radio inputs and steps() timing.

**HTML:**
```html
<div class="tt31">
  <nav class="tt31n">
    <input type="radio" name="tt31" id="tt31-r1" checked />
    <label class="tt31b" for="tt31-r1">Greet</label>
    <input type="radio" name="tt31" id="tt31-r2" />
    <label class="tt31b" for="tt31-r2">Status</label>
    <input type="radio" name="tt31" id="tt31-r3" />
    <label class="tt31b" for="tt31-r3">Goodbye</label>
  </nav>
  <div class="tt31body">
    <div class="tt31p"><span class="tt31type">Hello, friend.</span></div>
    <div class="tt31p"><span class="tt31type">Systems nominal.</span></div>
    <div class="tt31p"><span class="tt31type">See you tomorrow.</span></div>
  </div>
</div>
```

**CSS:**
```css
.tt31 {
  background: #1a1625;
  padding: 22px 22px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt31n {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
  min-width: 0;
}
.tt31n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt31b {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font:
    600 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.2s,
    border-color 0.2s;
  white-space: nowrap;
}
.tt31b:hover {
  color: rgba(255, 255, 255, 0.85);
}
.tt31n input:checked + .tt31b {
  color: #fbbf24;
  border-bottom-color: #fbbf24;
}
.tt31n input:focus-visible + .tt31b {
  outline: 1px dashed #fbbf24;
  outline-offset: -3px;
}
.tt31body {
  padding: 6px 0;
}
.tt31p {
  display: none;
}
.tt31:has(#tt31-r1:checked) .tt31p:nth-of-type(1),
.tt31:has(#tt31-r2:checked) .tt31p:nth-of-type(2),
.tt31:has(#tt31-r3:checked) .tt31p:nth-of-type(3) {
  display: block;
}
.tt31type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font:
    14px/1.6 ui-monospace,
    monospace;
  color: #fbbf24;
  border-right: 2px solid #fbbf24;
  width: 0;
  animation:
    tt31-type 1.4s steps(20) forwards,
    tt31-blink 0.8s step-end infinite 1.4s;
}
@keyframes tt31-type {
  to {
    width: 100%;
  }
}
@keyframes tt31-blink {
  50% {
    border-right-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt31type {
    animation: none;
    width: 100%;
    border-right-color: transparent;
  }
}
```

### 12. Particle Burst

**Type:** CSS + JS
**Description:** Each tab click spawns 8 small color sparks that fly outward and fade. JS positions each particle at the click point; CSS animates trajectory + fade. The active tab is also highlighted with a coral underline.

**HTML:**
```html
<div class="tt32">
  <nav class="tt32n">
    <span class="tt32line" aria-hidden="true"></span>
    <button class="tt32b active" data-t>Spark</button>
    <button class="tt32b" data-t>Bloom</button>
    <button class="tt32b" data-t>Burst</button>
    <button class="tt32b" data-t>Flare</button>
  </nav>
</div>
```

**CSS:**
```css
.tt32 {
  background: #1c1424;
  padding: 36px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt32n {
  position: relative;
  display: flex;
  gap: 0;
  min-width: 0;
  width: 100%;
  max-width: 420px;
}
.tt32line {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: #ff6b6b;
  border-radius: 2px;
  transition:
    left 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.tt32b {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
  white-space: nowrap;
}
.tt32b:hover {
  color: rgba(255, 255, 255, 0.9);
}
.tt32b.active {
  color: #ff6b6b;
}
.tt32b:focus-visible {
  outline: 2px solid #ff6b6b;
  outline-offset: 2px;
  border-radius: 4px;
}
.tt32spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  animation: tt32-fly 0.6s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes tt32-fly {
  from {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.3);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt32line {
    transition: none;
  }
  .tt32spark {
    animation: none;
    opacity: 0;
  }
}
```

**JS:**
```js
/* Particle Burst — toggle .active, slide underline, spawn 8 color sparks
   on click. Re-positions the underline on viewport resize. */
(function () {
  var nav = document.querySelector(".tt32n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var line = nav.querySelector(".tt32line");
  var current = null;
  var COLORS = ["#ff6b6b", "#ffd166", "#06d6a0", "#118ab2", "#ef476f"];

  function reposition() {
    if (!current || !line) return;
    line.style.left = current.offsetLeft + "px";
    line.style.width = current.offsetWidth + "px";
  }
  function burst(btn) {
    var rect = btn.getBoundingClientRect();
    var navRect = nav.getBoundingClientRect();
    var cx = rect.left - navRect.left + rect.width / 2;
    var cy = rect.top - navRect.top + rect.height / 2;
    for (var i = 0; i < 8; i++) {
      var s = document.createElement("span");
      s.className = "tt32spark";
      s.style.left = cx + "px";
      s.style.top = cy + "px";
      s.style.background = COLORS[i % COLORS.length];
      var angle = (i / 8) * Math.PI * 2;
      var dist = 32 + Math.random() * 18;
      s.style.setProperty("--dx", Math.cos(angle) * dist + "px");
      s.style.setProperty("--dy", Math.sin(angle) * dist + "px");
      nav.appendChild(s);
      setTimeout(
        (function (n) {
          return function () {
            if (n.parentNode) n.parentNode.removeChild(n);
          };
        })(s),
        700,
      );
    }
  }
  function activate(btn, withBurst) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
    if (withBurst) burst(btn);
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b, true);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial, false);
})();
```

### 13. Specimen No.

**Type:** CSS + JS
**Description:** Tab labels read as letterpress specimen slugs. The active tab is announced by a 4-digit serial that flips digits on activation, and a mint underline draws under the active label.

**HTML:**
```html
<div class="tt01">
  <div class="tt01serial" data-tt01-serial>0317</div>
  <nav class="tt01n">
    <button class="tt01b active" data-t data-tt01="0317">Helvetica</button>
    <button class="tt01b" data-t data-tt01="0211">Bodoni</button>
    <button class="tt01b" data-t data-tt01="0489">Futura</button>
    <span class="tt01rule"> </span>
  </nav>
  <div class="tt01p active" data-p>Cut by Max Miedinger, 1957. Neo-grotesque sans.</div>
  <div class="tt01p" data-p>Cut by Giambattista Bodoni, 1798. Modern serif.</div>
  <div class="tt01p" data-p>Cut by Paul Renner, 1927. Geometric sans.</div>
</div>
```

**CSS:**
```css
.tt01 {
  background: #1f2326;
  padding: 18px 22px 16px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.tt01serial {
  font:
    800 36px/1 ui-monospace,
    monospace;
  color: #51d5c2;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  transition: opacity 0.15s;
}
.tt01serial.fade {
  opacity: 0.2;
}
.tt01n {
  position: relative;
  display: flex;
  gap: 0;
  border-top: 1.5px solid rgba(81, 213, 194, 0.25);
  border-bottom: 1px solid rgba(81, 213, 194, 0.12);
}
.tt01b {
  flex: 1;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 226, 208, 0.45);
  cursor: pointer;
  border-right: 1px solid rgba(81, 213, 194, 0.1);
  transition:
    color 0.25s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt01b:last-child {
  border-right: 0;
}
.tt01b:hover {
  color: rgba(232, 226, 208, 0.75);
}
.tt01b.active {
  color: #51d5c2;
  transform: translateY(-1px);
}
.tt01rule {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: #51d5c2;
  transition:
    left 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt01p {
  display: none;
  padding-top: 12px;
  font:
    italic 11px/1.6 ui-serif,
    Georgia;
  color: rgba(232, 226, 208, 0.7);
}
.tt01p.active {
  display: block;
}
```

**JS:**
```js
/* Specimen No. — toggle .active and update sliding rule + flip serial.
   Re-positions the sliding rule on viewport resize. */
(function () {
  var nav = document.querySelector(".tt01n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var serial = document.querySelector("[data-tt01-serial]");
  var rule = document.querySelector(".tt01rule");
  var pnls = document.querySelectorAll(".tt01p");
  var current = null;

  function reposition() {
    if (!current || !rule) return;
    rule.style.left = current.offsetLeft + "px";
    rule.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    var i = Array.prototype.indexOf.call(btns, btn);
    pnls.forEach(function (p, j) {
      p.classList.toggle("active", j === i);
    });
    reposition();
    if (serial && btn.dataset.tt01) {
      serial.classList.add("fade");
      setTimeout(function () {
        serial.textContent = btn.dataset.tt01;
        serial.classList.remove("fade");
      }, 150);
    }
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 14. Cropped Letter

**Type:** Pure CSS
**Description:** The active tab's first letter scales 14→32px, baseline-shifts down, and crops at the tab's right edge. Inactive labels stay at compact display size.

**HTML:**
```html
<div class="tt02">
  <nav class="tt02n">
    <input type="radio" name="tt02" id="tt02-r1" checked />
    <label class="tt02b" for="tt02-r1">
      <span class="tt02hd">Design</span>
    </label>
    <input type="radio" name="tt02" id="tt02-r2" />
    <label class="tt02b" for="tt02-r2">
      <span class="tt02hd">Code</span>
    </label>
    <input type="radio" name="tt02" id="tt02-r3" />
    <label class="tt02b" for="tt02-r3">
      <span class="tt02hd">Preview</span>
    </label>
  </nav>
  <div class="tt02p">Tokens, components, motion.</div>
  <div class="tt02p">Modern CSS, zero deps.</div>
  <div class="tt02p">Live with all states.</div>
</div>
```

**CSS:**
```css
.tt02 {
  background: #1a1a1a;
  padding: 14px 0 16px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt02n {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(232, 226, 208, 0.18);
  border-bottom: 1px solid rgba(232, 226, 208, 0.18);
}
.tt02n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt02b {
  flex: 1 1 0;
  min-width: 0;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(232, 226, 208, 0.12);
  display: block;
}
.tt02n label.tt02b:last-of-type {
  border-right: 0;
}
.tt02hd {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font:
    600 14px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.5);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition:
    color 0.25s,
    font-size 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt02b:hover .tt02hd {
  color: rgba(232, 226, 208, 0.85);
}
.tt02n input:checked + .tt02b .tt02hd {
  color: #e8e2d0;
  font-size: 28px;
  transform: translate(-50%, -50%);
}
.tt02p {
  display: none;
  padding: 10px 18px 0;
  font:
    11px/1.55 ui-monospace,
    monospace;
  color: rgba(232, 226, 208, 0.65);
  letter-spacing: 0.04em;
}
.tt02:has(#tt02-r1:checked) .tt02p:nth-of-type(1),
.tt02:has(#tt02-r2:checked) .tt02p:nth-of-type(2),
.tt02:has(#tt02-r3:checked) .tt02p:nth-of-type(3) {
  display: block;
}
```

### 15. Sidebar Nav

**Type:** CSS + JS
**Description:** Vertical icon-driven nav inspired by hand-built dashboard sidebars. Dusty olive accent bar slides between rows; the active icon shifts left and a label slides in from behind it.

**HTML:**
```html
<div class="tt03">
  <nav class="tt03n">
    <button class="tt03b active" data-t>
      <svg class="tt03i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" />
      </svg>
      <span class="tt03l">Home</span>
    </button>
    <button class="tt03b" data-t>
      <svg class="tt03i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M2 12h4l3-9 4 18 3-9h6" />
      </svg>
      <span class="tt03l">Activity</span>
    </button>
    <button class="tt03b" data-t>
      <svg class="tt03i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt03l">People</span>
    </button>
    <button class="tt03b" data-t>
      <svg class="tt03i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="12" r="3" />
        <path
          d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.5 1a7 7 0 0 0-2.1-1.2L14 3h-4l-.3 2.6a7 7 0 0 0-2.1 1.2l-2.5-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.5-1a7 7 0 0 0 2.1 1.2L10 21h4l.3-2.6a7 7 0 0 0 2.1-1.2l2.5 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2z"
        />
      </svg>
      <span class="tt03l">Settings</span>
    </button>
    <span class="tt03acc" aria-hidden="true"> </span>
  </nav>
</div>
```

**CSS:**
```css
.tt03 {
  background: #e8dac5;
  min-height: 240px;
  display: flex;
  align-items: stretch;
  padding: 12px 0 12px 12px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.tt03n {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.tt03b {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: 0;
  background: transparent;
  font:
    600 13px/1 ui-sans-serif,
    system-ui;
  color: rgba(58, 46, 30, 0.55);
  cursor: pointer;
  text-align: left;
  transition:
    color 0.25s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.25s;
}
.tt03b:hover {
  color: rgba(58, 46, 30, 0.85);
  background: rgba(107, 142, 84, 0.08);
}
.tt03i {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt03l {
  opacity: 0.7;
  transform: translateX(-4px);
  transition:
    opacity 0.3s,
    transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt03b.active {
  color: #4a6a3a;
  transform: translateX(4px);
}
.tt03b.active .tt03i {
  transform: scale(1.12);
}
.tt03b.active .tt03l {
  opacity: 1;
  transform: translateX(0);
}
.tt03acc {
  position: absolute;
  left: -12px;
  top: 0;
  width: 4px;
  height: 0;
  background: #6b8e54;
  border-radius: 0 4px 4px 0;
  transition:
    top 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
```

**JS:**
```js
/* Sidebar Nav — toggle .active and slide vertical accent bar.
   Re-positions the accent bar on viewport resize. */
(function () {
  var nav = document.querySelector(".tt03n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var acc = nav.querySelector(".tt03acc");
  var current = null;

  function reposition() {
    if (!current || !acc) return;
    acc.style.top = current.offsetTop + "px";
    acc.style.height = current.offsetHeight + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 16. Halo Tabs

**Type:** Pure CSS
**Description:** Mobile-style nav-bar tabs in a soft white pill. Inactive icons are line-only grey. Activating a tab tints the icon mint, blooms a soft pink halo behind it, and slides the label in to the right of the icon — no underline, just the color shift and the label appearance.

**HTML:**
```html
<div class="tt04">
  <nav class="tt04n">
    <input type="radio" name="tt04" id="tt04-r1" checked />
    <label class="tt04b" for="tt04-r1">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" />
      </svg>
      <span class="tt04l">Home</span>
    </label>
    <input type="radio" name="tt04" id="tt04-r2" />
    <label class="tt04b" for="tt04-r2">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5 8l7-5 7 5v3H5z" />
        <path d="M9 11h6v8H9z" />
        <path d="M3 19h18" />
      </svg>
      <span class="tt04l">Strategy</span>
    </label>
    <input type="radio" name="tt04" id="tt04-r3" />
    <label class="tt04b" for="tt04-r3">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M7 3h10v4l-3 5 3 5v4H7v-4l3-5-3-5z" />
        <line x1="9" y1="3" x2="9" y2="3" />
      </svg>
      <span class="tt04l">Period</span>
    </label>
    <input type="radio" name="tt04" id="tt04-r4" />
    <label class="tt04b" for="tt04-r4">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6z" />
        <polyline points="9 12 11 14 15 10" />
      </svg>
      <span class="tt04l">Security</span>
    </label>
    <input type="radio" name="tt04" id="tt04-r5" />
    <label class="tt04b" for="tt04-r5">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="12" r="3" />
        <path
          d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.5 1a7 7 0 0 0-2.1-1.2L14 3h-4l-.3 2.6a7 7 0 0 0-2.1 1.2l-2.5-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.5-1a7 7 0 0 0 2.1 1.2L10 21h4l.3-2.6a7 7 0 0 0 2.1-1.2l2.5 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2z"
        />
      </svg>
      <span class="tt04l">Settings</span>
    </label>
  </nav>
</div>
```

**CSS:**
```css
.tt04 {
  background: #f0f1f1;
  padding: 0;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.tt04n {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 18px 22px;
  background: #fefefe;
  border-radius: 999px;
  margin: 14px;
  flex: 1;
  max-width: 480px;
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.12);
  font-size: 1em;
}
.tt04n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt04b {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  color: #d5dadd;
  transition:
    flex 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s;
}
.tt04b:hover {
  color: #9aa0a4;
}
/* Soft pink halo behind the active icon, top-left offset like the reference */
.tt04halo {
  position: absolute;
  top: 14%;
  left: 22%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fde4ec;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.tt04i {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt04l {
  position: relative;
  z-index: 2;
  font:
    800 15px/1 "Nunito",
    ui-sans-serif,
    system-ui;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #2dd4bf;
  /* Hidden until active — slides in to the right of the icon */
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s 0.1s,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt04n input:checked + .tt04b {
  flex: 2.6;
  color: #2dd4bf;
}
.tt04n input:checked + .tt04b .tt04halo {
  transform: scale(1);
}
.tt04n input:checked + .tt04b .tt04l {
  max-width: 200px;
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .tt04halo,
  .tt04l,
  .tt04b {
    transition: none;
  }
}
```

### 17. Two Weights

**Type:** Pure CSS
**Description:** Pure type-weight contrast. Inactive sits at 200 hairline, active jumps to 900 black with a subtle scale lift. The brand violet underlines the active label.

**HTML:**
```html
<div class="tt05">
  <nav class="tt05n">
    <input type="radio" name="tt05" id="tt05-r1" checked />
    <label class="tt05b" for="tt05-r1">Overview</label>
    <input type="radio" name="tt05" id="tt05-r2" />
    <label class="tt05b" for="tt05-r2">Activity</label>
    <input type="radio" name="tt05" id="tt05-r3" />
    <label class="tt05b" for="tt05-r3">Settings</label>
  </nav>
  <div class="tt05p">A summary of the project, members, and recent decisions.</div>
  <div class="tt05p">Edits, comments, and team mentions over the last seven days.</div>
  <div class="tt05p">Permissions, integrations, and billing controls.</div>
</div>
```

**CSS:**
```css
.tt05 {
  background: #15151d;
  padding: 26px 22px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.tt05n {
  display: flex;
  gap: 28px;
}
.tt05n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt05b {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0 0 8px;
  font:
    200 26px/1 ui-sans-serif,
    system-ui;
  color: #e8e2d0;
  cursor: pointer;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 200;
  transform: scale(0.96);
  transform-origin: bottom left;
  transition:
    font-weight 0.45s,
    font-variation-settings 0.45s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt05b::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #7c5cff;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt05b:hover {
  font-variation-settings: "wght" 400;
}
.tt05n input:checked + .tt05b {
  font-weight: 900;
  font-variation-settings: "wght" 900;
  transform: scale(1);
}
.tt05n input:checked + .tt05b::after {
  transform: scaleX(1);
}
.tt05p {
  display: none;
  padding-top: 16px;
  font:
    12px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
  max-width: 360px;
}
.tt05:has(#tt05-r1:checked) .tt05p:nth-of-type(1),
.tt05:has(#tt05-r2:checked) .tt05p:nth-of-type(2),
.tt05:has(#tt05-r3:checked) .tt05p:nth-of-type(3) {
  display: block;
}
```

### 18. Underset Caps

**Type:** CSS + JS
**Description:** Tiny uppercase mono labels above a single thick rule. The rule slides under the active label — measured live, like a sliding bookmark on a typecase shelf.

**HTML:**
```html
<div class="tt06">
  <nav class="tt06n">
    <button class="tt06b active" data-t>Volume I</button>
    <button class="tt06b" data-t>Volume II</button>
    <button class="tt06b" data-t>Volume III</button>
    <button class="tt06b" data-t>Volume IV</button>
    <span class="tt06rule"> </span>
  </nav>
  <div class="tt06p active" data-p>The Origins, 1450–1600.</div>
  <div class="tt06p" data-p>The Reformation, 1600–1750.</div>
  <div class="tt06p" data-p>The Industrial Cut, 1750–1900.</div>
  <div class="tt06p" data-p>The Digital Era, 1980 onward.</div>
</div>
```

**CSS:**
```css
.tt06 {
  background: #1a1a1a;
  padding: 28px 22px 22px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.tt06n {
  position: relative;
  display: flex;
  gap: 24px;
  padding-bottom: 14px;
}
.tt06b {
  border: 0;
  background: transparent;
  padding: 0;
  font:
    700 9px/1 ui-monospace,
    monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232, 226, 208, 0.5);
  cursor: pointer;
  transition: color 0.25s;
}
.tt06b:hover {
  color: rgba(232, 226, 208, 0.85);
}
.tt06b.active {
  color: #e8e2d0;
}
.tt06rule {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 6px;
  background: #c43a32;
  transition:
    left 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt06p {
  display: none;
  padding-top: 18px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
}
.tt06p.active {
  display: block;
}
```

**JS:**
```js
/* Underset Caps — toggle .active and slide horizontal rule under active.
   Re-positions the sliding rule on viewport resize. */
(function () {
  var nav = document.querySelector(".tt06n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var rule = nav.querySelector(".tt06rule");
  var pnls = document.querySelectorAll(".tt06p");
  var current = null;

  function reposition() {
    if (!current || !rule) return;
    rule.style.left = current.offsetLeft + "px";
    rule.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    var i = Array.prototype.indexOf.call(btns, btn);
    pnls.forEach(function (p, j) {
      p.classList.toggle("active", j === i);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 19. Drop Cap

**Type:** Pure CSS
**Description:** Inactive tabs are mono single-letter initials. The active tab unfolds into a rotating-and-scaling serif drop cap followed by the rest of the word; tail unfolds left-to-right.

**HTML:**
```html
<div class="tt07">
  <nav class="tt07n">
    <input type="radio" name="tt07" id="tt07-r1" checked />
    <label class="tt07b" for="tt07-r1">
      <span class="tt07cap">A</span>
      <span class="tt07rest">rticle</span>
    </label>
    <input type="radio" name="tt07" id="tt07-r2" />
    <label class="tt07b" for="tt07-r2">
      <span class="tt07cap">G</span>
      <span class="tt07rest">allery</span>
    </label>
    <input type="radio" name="tt07" id="tt07-r3" />
    <label class="tt07b" for="tt07-r3">
      <span class="tt07cap">N</span>
      <span class="tt07rest">otes</span>
    </label>
  </nav>
  <div class="tt07p">The body copy of an editorial feature.</div>
  <div class="tt07p">A curated set of plates and engravings.</div>
  <div class="tt07p">Marginalia and footnote annotations.</div>
</div>
```

**CSS:**
```css
.tt07 {
  background: #e8dec8;
  padding: 22px 22px 18px;
  width: 100%;
}
.tt07n {
  display: flex;
  gap: 22px;
  align-items: baseline;
  border-bottom: 1px solid rgba(12, 85, 96, 0.22);
  padding-bottom: 14px;
}
.tt07n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt07b {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  color: #0c5560;
  transition: opacity 0.3s;
}
.tt07cap {
  font:
    900 26px/1 ui-serif,
    Georgia,
    serif;
  color: #0c5560;
  display: inline-block;
  transform-origin: center bottom;
  transition:
    color 0.35s,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt07rest {
  font:
    italic 16px/1 ui-serif,
    Georgia,
    serif;
  color: #0c5560;
  margin-left: 1px;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
  opacity: 0.7;
}
.tt07b {
  opacity: 0.4;
}
.tt07b:hover {
  opacity: 0.78;
}
.tt07n input:checked + .tt07b {
  opacity: 1;
}
.tt07n input:checked + .tt07b .tt07cap {
  color: #d44a2a;
  transform: rotate(-4deg) scale(1.15);
}
.tt07n input:checked + .tt07b .tt07rest {
  max-width: 200px;
}
.tt07p {
  display: none;
  padding-top: 14px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia,
    serif;
  color: #3a3a42;
}
.tt07:has(#tt07-r1:checked) .tt07p:nth-of-type(1),
.tt07:has(#tt07-r2:checked) .tt07p:nth-of-type(2),
.tt07:has(#tt07-r3:checked) .tt07p:nth-of-type(3) {
  display: block;
}
```

### 20. Stencil Cut

**Type:** Pure CSS
**Description:** Active tab is a solid safety-yellow plate stamped on ink. Pure two-color print — black ink on yellow for the active label, muted yellow on ink for inactive. The 2px upward translate gives the yellow plate a small physical lift over the surrounding stage.

**HTML:**
```html
<div class="tt08">
  <nav class="tt08n">
    <input type="radio" name="tt08" id="tt08-r1" />
    <label class="tt08b" for="tt08-r1">
      <span>READ</span>
    </label>
    <input type="radio" name="tt08" id="tt08-r2" checked />
    <label class="tt08b" for="tt08-r2">
      <span>WRITE</span>
    </label>
    <input type="radio" name="tt08" id="tt08-r3" />
    <label class="tt08b" for="tt08-r3">
      <span>SHIP</span>
    </label>
  </nav>
  <div class="tt08p">Drafts, archives, and reference material.</div>
  <div class="tt08p">The current notebook in active edit mode.</div>
  <div class="tt08p">Approvals, releases, and publication state.</div>
</div>
```

**CSS:**
```css
.tt08 {
  background: #1a1a1a;
  padding: 22px 22px 18px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.tt08n {
  display: flex;
  gap: 8px;
}
.tt08n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt08b {
  flex: 1;
  padding: 14px 12px;
  border: 0;
  background: transparent;
  font:
    900 14px/1 ui-monospace,
    monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 203, 26, 0.45);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.tt08b:hover {
  color: rgba(245, 203, 26, 0.8);
}
.tt08n input:checked + .tt08b {
  color: #1a1a1a;
  background: #f5cb1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.4);
}
.tt08p {
  display: none;
  padding-top: 14px;
  font:
    11px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
  font-style: italic;
}
.tt08:has(#tt08-r1:checked) .tt08p:nth-of-type(1),
.tt08:has(#tt08-r2:checked) .tt08p:nth-of-type(2),
.tt08:has(#tt08-r3:checked) .tt08p:nth-of-type(3) {
  display: block;
}
```

### 21. Bracket Marks

**Type:** CSS + JS
**Description:** The active tab is framed by typographic brackets — `[` on the left, `]` on the right — that physically slide between tabs. A single shared pair of pseudo-elements does the work.

**HTML:**
```html
<div class="tt09">
  <nav class="tt09n" data-tt09>
    <button class="tt09b active" data-t>One</button>
    <button class="tt09b" data-t>Two</button>
    <button class="tt09b" data-t>Three</button>
    <span class="tt09bL">[</span>
    <span class="tt09bR">]</span>
  </nav>
  <div class="tt09p active" data-p>The first marker.</div>
  <div class="tt09p" data-p>The second marker.</div>
  <div class="tt09p" data-p>The third marker.</div>
</div>
```

**CSS:**
```css
.tt09 {
  background: #25222e;
  padding: 24px 22px 18px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt09n {
  position: relative;
  display: flex;
  gap: 18px;
  justify-content: center;
}
.tt09b {
  border: 0;
  background: transparent;
  padding: 6px 8px;
  font:
    600 16px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.5);
  cursor: pointer;
  transition: color 0.3s;
}
.tt09b:hover {
  color: rgba(232, 226, 208, 0.85);
}
.tt09b.active {
  color: #e8e2d0;
}
.tt09bL,
.tt09bR {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font:
    200 36px/1 ui-serif,
    Georgia,
    serif;
  color: #dc1e3a;
  pointer-events: none;
  transition: left 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt09bL {
  left: 0;
}
.tt09bR {
  left: 0;
}
.tt09p {
  display: none;
  padding-top: 16px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
  text-align: center;
}
.tt09p.active {
  display: block;
}
```

**JS:**
```js
/* Bracket Marks — toggle .active and slide [ ] frame around active button.
   Re-positions the brackets on viewport resize. */
(function () {
  var nav = document.querySelector(".tt09n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var bL = nav.querySelector(".tt09bL");
  var bR = nav.querySelector(".tt09bR");
  var pnls = document.querySelectorAll(".tt09p");
  var current = null;

  function reposition() {
    if (!current || !bL || !bR) return;
    bL.style.left = current.offsetLeft - 20 + "px";
    bR.style.left = current.offsetLeft + current.offsetWidth + 4 + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    var i = Array.prototype.indexOf.call(btns, btn);
    pnls.forEach(function (p, j) {
      p.classList.toggle("active", j === i);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 22. Bauhaus Block

**Type:** Pure CSS
**Description:** Each tab is a distinct primary-color block. Active tab rises 6px and casts a hard offset shadow. Color and geometry as the entire indicator.

**HTML:**
```html
<div class="tt10">
  <nav class="tt10n">
    <input type="radio" name="tt10" id="tt10-r1" checked />
    <label class="tt10b tt10-1" for="tt10-r1">FORM</label>
    <input type="radio" name="tt10" id="tt10-r2" />
    <label class="tt10b tt10-2" for="tt10-r2">GRID</label>
    <input type="radio" name="tt10" id="tt10-r3" />
    <label class="tt10b tt10-3" for="tt10-r3">TYPE</label>
    <input type="radio" name="tt10" id="tt10-r4" />
    <label class="tt10b tt10-4" for="tt10-r4">HUE</label>
  </nav>
  <div class="tt10p">Composition, weight, balance.</div>
  <div class="tt10p">Modular columns and rows.</div>
  <div class="tt10p">Specimens and pairings.</div>
  <div class="tt10p">Limited primary palette.</div>
</div>
```

**CSS:**
```css
.tt10 {
  background: #f5ead0;
  padding: 22px 18px 16px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.tt10n {
  display: flex;
  gap: 6px;
}
.tt10n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt10b {
  flex: 1;
  padding: 16px 8px;
  border: 0;
  font:
    800 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.22em;
  cursor: pointer;
  text-align: center;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
}
.tt10-1 {
  background: #c43a32;
  color: #f5ead0;
}
.tt10-2 {
  background: #d4a017;
  color: #1a1a1a;
}
.tt10-3 {
  background: #1a1a1a;
  color: #e8e2d0;
}
.tt10-4 {
  background: #f5ead0;
  color: #1a1a1a;
  box-shadow: inset 0 0 0 1.5px #1a1a1a;
}
.tt10b:hover {
  transform: translateY(-2px);
}
.tt10n input:checked + .tt10b {
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #1a1a1a;
}
.tt10n input:checked + .tt10-4 {
  box-shadow:
    inset 0 0 0 1.5px #1a1a1a,
    0 6px 0 #1a1a1a;
}
.tt10p {
  display: none;
  padding-top: 14px;
  font:
    11px/1.6 ui-serif,
    Georgia,
    serif;
  color: #3a3a42;
  font-style: italic;
}
.tt10:has(#tt10-r1:checked) .tt10p:nth-of-type(1),
.tt10:has(#tt10-r2:checked) .tt10p:nth-of-type(2),
.tt10:has(#tt10-r3:checked) .tt10p:nth-of-type(3),
.tt10:has(#tt10-r4:checked) .tt10p:nth-of-type(4) {
  display: block;
}
```

### 23. Reverse Stamp

**Type:** Pure CSS
**Description:** The whole bar is cream-on-crimson. The active tab inverts — crimson ink stamped on cream. A single-frame impact shadow flashes on activation, like a rubber stamp pressing in.

**HTML:**
```html
<div class="tt11">
  <nav class="tt11n">
    <input type="radio" name="tt11" id="tt11-r1" checked />
    <label class="tt11b" for="tt11-r1">Recto</label>
    <input type="radio" name="tt11" id="tt11-r2" />
    <label class="tt11b" for="tt11-r2">Verso</label>
    <input type="radio" name="tt11" id="tt11-r3" />
    <label class="tt11b" for="tt11-r3">Folio</label>
  </nav>
  <div class="tt11p">The right-hand page, traditionally odd-numbered.</div>
  <div class="tt11p">The left-hand page, traditionally even.</div>
  <div class="tt11p">The full leaf — both sides counted as one.</div>
</div>
```

**CSS:**
```css
.tt11 {
  background: #dc1e3a;
  padding: 0;
  font-family: ui-monospace, monospace;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.tt11n {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}
.tt11n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt11b {
  flex: 1;
  padding: 18px 12px;
  border: 0;
  background: #dc1e3a;
  color: #f5ead0;
  font:
    800 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-right: 1px solid rgba(245, 234, 208, 0.25);
  transition:
    background 0.05s steps(1, end),
    color 0.05s steps(1, end),
    box-shadow 0.4s;
}
.tt11b:last-child {
  border-right: 0;
}
.tt11b:hover {
  background: rgba(245, 234, 208, 0.1);
}
.tt11n input:checked + .tt11b {
  background: #f5ead0;
  color: #dc1e3a;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.4);
  animation: tt11-impact 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes tt11-impact {
  0% {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.4);
  }
  20% {
    box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
.tt11p {
  display: none;
  padding: 14px 18px;
  background: #f5ead0;
  font:
    italic 11px/1.6 ui-serif,
    Georgia,
    serif;
  color: #3a3a42;
  flex: 1;
}
.tt11:has(#tt11-r1:checked) .tt11p:nth-of-type(1),
.tt11:has(#tt11-r2:checked) .tt11p:nth-of-type(2),
.tt11:has(#tt11-r3:checked) .tt11p:nth-of-type(3),
.tt11:has(#tt11-r4:checked) .tt11p:nth-of-type(4),
.tt11:has(#tt11-r5:checked) .tt11p:nth-of-type(5),
.tt11:has(#tt11-r6:checked) .tt11p:nth-of-type(6) {
  display: flex;
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .tt11n input:checked + .tt11b {
    animation: none;
  }
}
```

### 24. Hairline Frame

**Type:** Pure CSS
**Description:** Hairline-framed tabs in warm-white stock. Active tab's top edge thickens to 4px deep-navy AND four corner dots materialize at the frame's extremes — a Bodoni stroke-contrast move with editorial restraint.

**HTML:**
```html
<div class="tt12">
  <nav class="tt12n">
    <input type="radio" name="tt12" id="tt12-r1" checked />
    <label class="tt12b" for="tt12-r1">
      Drafts
      <span class="tt12tk tt12tk-1" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-2" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-3" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-4" aria-hidden="true"> </span>
    </label>
    <input type="radio" name="tt12" id="tt12-r2" />
    <label class="tt12b" for="tt12-r2">
      Proofs
      <span class="tt12tk tt12tk-1" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-2" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-3" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-4" aria-hidden="true"> </span>
    </label>
    <input type="radio" name="tt12" id="tt12-r3" />
    <label class="tt12b" for="tt12-r3">
      Final
      <span class="tt12tk tt12tk-1" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-2" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-3" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-4" aria-hidden="true"> </span>
    </label>
  </nav>
  <div class="tt12p">Working files in progress.</div>
  <div class="tt12p">Galleys ready for review.</div>
  <div class="tt12p">Approved and locked.</div>
</div>
```

**CSS:**
```css
.tt12 {
  background: #f5f1ea;
  padding: 26px 22px 22px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt12n {
  display: flex;
  gap: 14px;
}
.tt12n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt12b {
  position: relative;
  padding: 14px 24px 11px;
  border: 0.5px solid #1a2842;
  border-top: 4px solid transparent;
  background: transparent;
  font:
    600 13px/1 ui-serif,
    Georgia,
    serif;
  letter-spacing: 0.06em;
  color: rgba(26, 40, 66, 0.5);
  cursor: pointer;
  transition:
    color 0.3s,
    border-top-color 0.3s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt12b:hover {
  color: rgba(26, 40, 66, 0.85);
  transform: translateY(-1px);
}
.tt12n input:checked + .tt12b {
  color: #1a2842;
  border-top-color: #1a2842;
}
.tt12tk {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #1a2842;
  border-radius: 50%;
  opacity: 0;
  transition:
    opacity 0.25s 0.1s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.tt12tk-1 {
  top: -3.5px;
  left: -3.5px;
  transform: scale(0);
}
.tt12tk-2 {
  top: -3.5px;
  right: -3.5px;
  transform: scale(0);
}
.tt12tk-3 {
  bottom: -3.5px;
  left: -3.5px;
  transform: scale(0);
}
.tt12tk-4 {
  bottom: -3.5px;
  right: -3.5px;
  transform: scale(0);
}
.tt12n input:checked + .tt12b .tt12tk {
  opacity: 1;
  transform: scale(1);
}
.tt12p {
  display: none;
  padding-top: 16px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia;
  color: #3a3a42;
}
.tt12:has(#tt12-r1:checked) .tt12p:nth-of-type(1),
.tt12:has(#tt12-r2:checked) .tt12p:nth-of-type(2),
.tt12:has(#tt12-r3:checked) .tt12p:nth-of-type(3) {
  display: block;
}
```

### 25. Pill Nav

**Type:** Pure CSS
**Description:** Mobile-style bottom-nav with hot-pink active pill that grows around the active icon and label. Inactive items show only icons; activation adds the label inside the pill.

**HTML:**
```html
<div class="tt13">
  <nav class="tt13n">
    <input type="radio" name="tt13" id="tt13-r1" checked />
    <label class="tt13b" for="tt13-r1">
      <svg class="tt13i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" />
      </svg>
      <span class="tt13l">Home</span>
    </label>
    <input type="radio" name="tt13" id="tt13-r2" />
    <label class="tt13b" for="tt13-r2">
      <svg class="tt13i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <line x1="21" y1="21" x2="16" y2="16" />
      </svg>
      <span class="tt13l">Search</span>
    </label>
    <input type="radio" name="tt13" id="tt13-r3" />
    <label class="tt13b" for="tt13-r3">
      <svg class="tt13i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20 8h-3V5a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3v3H4l1 12h14z" />
      </svg>
      <span class="tt13l">Saved</span>
    </label>
    <input type="radio" name="tt13" id="tt13-r4" />
    <label class="tt13b" for="tt13-r4">
      <svg class="tt13i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt13l">Profile</span>
    </label>
  </nav>
</div>
```

**CSS:**
```css
.tt13 {
  background: #1f2326;
  min-height: 220px;
  display: flex;
  align-items: center;
  padding: 28px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.tt13n {
  flex: 1;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
.tt13n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt13b {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.04em;
  color: rgba(232, 226, 208, 0.55);
  cursor: pointer;
  border-radius: 999px;
  flex: 1;
  transition:
    flex 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
    background 0.25s,
    color 0.25s;
}
.tt13b:hover {
  color: rgba(232, 226, 208, 0.85);
}
.tt13i {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.tt13l {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.05s;
}
.tt13n input:checked + .tt13b {
  background: #ec4899;
  color: #1a1a1a;
  flex: 2.4;
}
.tt13n input:checked + .tt13b .tt13i {
  transform: scale(1.1);
}
.tt13n input:checked + .tt13b .tt13l {
  max-width: 120px;
}
```

### 26. Riso Misregistration

**Type:** Pure CSS
**Description:** Two-color riso print on charcoal stock. Active tab is a solid orange block with a cyan plate misregistered 4px below-left, like a zine pulled with the cyan plate slightly off the orange. No swashes, no icons; just two color plates and a typographic punch.

**HTML:**
```html
<div class="tt14">
  <nav class="tt14n">
    <input type="radio" name="tt14" id="tt14-r1" checked />
    <label class="tt14b" for="tt14-r1">
      <span class="tt14plate" aria-hidden="true"> </span>
      <span class="tt14lbl">Issue 01</span>
    </label>
    <input type="radio" name="tt14" id="tt14-r2" />
    <label class="tt14b" for="tt14-r2">
      <span class="tt14plate" aria-hidden="true"> </span>
      <span class="tt14lbl">Issue 02</span>
    </label>
    <input type="radio" name="tt14" id="tt14-r3" />
    <label class="tt14b" for="tt14-r3">
      <span class="tt14plate" aria-hidden="true"> </span>
      <span class="tt14lbl">Issue 03</span>
    </label>
    <input type="radio" name="tt14" id="tt14-r4" />
    <label class="tt14b" for="tt14-r4">
      <span class="tt14plate" aria-hidden="true"> </span>
      <span class="tt14lbl">Issue 04</span>
    </label>
  </nav>
</div>
```

**CSS:**
```css
.tt14 {
  background: #0e0f12;
  padding: 28px 22px;
  font-family: ui-monospace, monospace;
  min-height: 220px;
  display: flex;
  align-items: center;
  width: 100%;
}
.tt14n {
  display: flex;
  gap: 12px;
  flex: 1;
}
.tt14n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt14b {
  position: relative;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 18px 16px;
  font:
    800 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 226, 208, 0.55);
  cursor: pointer;
  isolation: isolate;
  transition: color 0.2s;
}
.tt14b:hover {
  color: rgba(232, 226, 208, 0.92);
}
.tt14n input:checked + .tt14b {
  color: #fdf6e9;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.tt14plate {
  position: absolute;
  inset: 0;
  background: #ff5e3a;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.05s steps(1, end);
}
.tt14plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #00a8c8;
  transform: translate(-4px, 4px);
  mix-blend-mode: multiply;
  opacity: 0;
}
.tt14n input:checked + .tt14b .tt14plate {
  opacity: 1;
}
.tt14n input:checked + .tt14b .tt14plate::before {
  opacity: 0.92;
  animation: tt14-plate-shift 0.32s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes tt14-plate-shift {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  55% {
    transform: translate(-7px, 7px);
    opacity: 0.92;
  }
  100% {
    transform: translate(-4px, 4px);
    opacity: 0.92;
  }
}
.tt14lbl {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tt14n input:checked + .tt14b .tt14plate::before {
    animation: none;
  }
}
```

### 27. Slab Serif Swash

**Type:** Pure CSS
**Description:** Italic slab-serif labels on warm-cream stock. The active tab gets a deep-emerald swash underline — a curved SVG stroke beneath the word, like a calligrapher's flourish on letterpress vellum.

**HTML:**
```html
<div class="tt15">
  <nav class="tt15n">
    <input type="radio" name="tt15" id="tt15-r1" checked />
    <label class="tt15b" for="tt15-r1">
      Manifesto
      <svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
        <path
          d="M 2 8 Q 20 2 40 6 T 78 8"
          fill="none"
          stroke="#0f4f3d"
          stroke-width="1.6"
          stroke-linecap="round"
        />
      </svg>
    </label>
    <input type="radio" name="tt15" id="tt15-r2" />
    <label class="tt15b" for="tt15-r2">
      Colophon
      <svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
        <path
          d="M 2 8 Q 20 2 40 6 T 78 8"
          fill="none"
          stroke="#0f4f3d"
          stroke-width="1.6"
          stroke-linecap="round"
        />
      </svg>
    </label>
    <input type="radio" name="tt15" id="tt15-r3" />
    <label class="tt15b" for="tt15-r3">
      Errata
      <svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
        <path
          d="M 2 8 Q 20 2 40 6 T 78 8"
          fill="none"
          stroke="#0f4f3d"
          stroke-width="1.6"
          stroke-linecap="round"
        />
      </svg>
    </label>
  </nav>
  <div class="tt15p">The founding statement of intent.</div>
  <div class="tt15p">The closing inscription, type & paper notes.</div>
  <div class="tt15p">Corrections issued after the first printing.</div>
</div>
```

**CSS:**
```css
.tt15 {
  background: #fdf4d6;
  padding: 22px 22px 26px;
  font-family: ui-serif, "Times New Roman", serif;
  width: 100%;
}
.tt15n {
  display: flex;
  gap: 28px;
  align-items: flex-end;
}
.tt15n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt15b {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0 0 4px;
  font:
    italic 700 18px/1 ui-serif,
    "Times New Roman",
    serif;
  color: rgba(15, 79, 61, 0.55);
  cursor: pointer;
  transition: color 0.25s;
}
.tt15b:hover {
  color: rgba(15, 79, 61, 0.9);
}
.tt15n input:checked + .tt15b {
  color: #0f4f3d;
}
.tt15s {
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  width: 100%;
  height: 12px;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition:
    opacity 0.2s,
    stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt15n input:checked + .tt15b .tt15s {
  opacity: 1;
  stroke-dashoffset: 0;
}
.tt15p {
  display: none;
  padding-top: 18px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia;
  color: #3a3a42;
}
.tt15:has(#tt15-r1:checked) .tt15p:nth-of-type(1),
.tt15:has(#tt15-r2:checked) .tt15p:nth-of-type(2),
.tt15:has(#tt15-r3:checked) .tt15p:nth-of-type(3) {
  display: block;
}
```

### 28. Specimen Card

**Type:** Pure CSS
**Description:** The whole bar reads as a foundry specimen card. Foundry name on the left in tiny mono; tabs on the right are large display glyph specimens. On activation the foundry name pulses a single beat.

**HTML:**
```html
<div class="tt16">
  <nav class="tt16n">
    <div class="tt16meta">
      <div class="tt16name">
        CodeFronts
        <br />Foundry
      </div>
      <div class="tt16id">SPEC · 2026</div>
    </div>
    <div class="tt16tabs">
      <input type="radio" name="tt16" id="tt16-r1" checked />
      <label class="tt16b" for="tt16-r1">Aa</label>
      <input type="radio" name="tt16" id="tt16-r2" />
      <label class="tt16b" for="tt16-r2">Bb</label>
      <input type="radio" name="tt16" id="tt16-r3" />
      <label class="tt16b" for="tt16-r3">Cc</label>
    </div>
  </nav>
  <div class="tt16p">Specimen of the upright Roman cut.</div>
  <div class="tt16p">Specimen of the bold cut.</div>
  <div class="tt16p">Specimen of the small caps cut.</div>
</div>
```

**CSS:**
```css
.tt16 {
  background: #1a1a1a;
  padding: 16px 22px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt16n {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(232, 226, 208, 0.18);
}
.tt16n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt16meta {
  padding-right: 22px;
  border-right: 1px solid rgba(232, 226, 208, 0.18);
  transition: opacity 0.4s;
}
.tt16name {
  font:
    800 11px/1.3 ui-monospace,
    monospace;
  color: #e8e2d0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tt16id {
  font:
    600 9px/1 ui-monospace,
    monospace;
  color: rgba(232, 226, 208, 0.5);
  margin-top: 6px;
  letter-spacing: 0.2em;
}
.tt16tabs {
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.tt16b {
  border: 0;
  background: transparent;
  padding: 0;
  font:
    700 28px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.4);
  cursor: pointer;
  transition:
    color 0.3s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt16b:hover {
  color: rgba(232, 226, 208, 0.8);
}
.tt16n input:checked + .tt16b {
  color: #c43a32;
  transform: scale(1.15);
}
.tt16p {
  display: none;
  padding-top: 12px;
  font:
    italic 11px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
}
.tt16:has(#tt16-r1:checked) .tt16p:nth-of-type(1),
.tt16:has(#tt16-r2:checked) .tt16p:nth-of-type(2),
.tt16:has(#tt16-r3:checked) .tt16p:nth-of-type(3) {
  display: block;
}
```

### 29. Sliding Pill

**Type:** CSS + JS
**Description:** Icon + label tabs on cream stock. A solid indigo pill is the indicator; it physically slides between tabs on click, with the active label inverting to cream.

**HTML:**
```html
<div class="tt17">
  <nav class="tt17n">
    <span class="tt17pill" aria-hidden="true"> </span>
    <button class="tt17b active" data-t>
      <svg class="tt17i" 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>
      <span class="tt17l">Grid</span>
    </button>
    <button class="tt17b" data-t>
      <svg class="tt17i" 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>
      <span class="tt17l">List</span>
    </button>
    <button class="tt17b" data-t>
      <svg class="tt17i" 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>
      <span class="tt17l">Cards</span>
    </button>
  </nav>
</div>
```

**CSS:**
```css
.tt17 {
  background: #f4f3ee;
  padding: 28px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  display: flex;
  align-items: center;
  width: 100%;
}
.tt17n {
  position: relative;
  display: flex;
  gap: 0;
  padding: 6px;
  background: rgba(59, 58, 140, 0.06);
  border-radius: 999px;
  flex: 1;
}
.tt17pill {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: 0;
  background: #3b3a8c;
  border-radius: 999px;
  transition:
    left 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}
.tt17b {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  font:
    600 13px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.02em;
  color: rgba(59, 58, 140, 0.65);
  cursor: pointer;
  transition: color 0.3s 0.05s;
}
.tt17b:hover {
  color: rgba(59, 58, 140, 0.95);
}
.tt17b.active {
  color: #f4f3ee;
}
.tt17i {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
```

**JS:**
```js
/* Sliding Pill — toggle .active and slide solid pill between tabs.
   Re-positions the pill on viewport resize. */
(function () {
  var nav = document.querySelector(".tt17n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var pill = nav.querySelector(".tt17pill");
  var current = null;

  function reposition() {
    if (!current || !pill) return;
    pill.style.left = current.offsetLeft + "px";
    pill.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 30. Folio Fold

**Type:** Pure CSS
**Description:** Inactive tabs are flat sand-colored rectangles on charcoal. The active tab's top-right corner physically folds down 18px via clip-path with a darker fold-underside triangle, lifts 4px above its siblings, and shows a small fold preview on hover. Inactive tabs preview an 8px fold on hover so the mechanic is discoverable.

**HTML:**
```html
<div class="tt18">
  <nav class="tt18n">
    <input type="radio" name="tt18" id="tt18-r1" checked />
    <label class="tt18b" for="tt18-r1">
      Page 1
      <span class="tt18fold" aria-hidden="true"> </span>
    </label>
    <input type="radio" name="tt18" id="tt18-r2" />
    <label class="tt18b" for="tt18-r2">
      Page 2
      <span class="tt18fold" aria-hidden="true"> </span>
    </label>
    <input type="radio" name="tt18" id="tt18-r3" />
    <label class="tt18b" for="tt18-r3">
      Page 3
      <span class="tt18fold" aria-hidden="true"> </span>
    </label>
  </nav>
  <div class="tt18p">The opening recto.</div>
  <div class="tt18p">The continuation.</div>
  <div class="tt18p">The closing leaf.</div>
</div>
```

**CSS:**
```css
.tt18 {
  background: #25222e;
  padding: 26px 22px 22px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt18n {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.tt18n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt18b {
  position: relative;
  flex: 1;
  padding: 16px 18px;
  border: 0;
  background: #d4a574;
  font:
    600 13px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(26, 26, 26, 0.55);
  cursor: pointer;
  text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:
    clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    color 0.25s,
    transform 0.3s,
    box-shadow 0.4s,
    background 0.25s;
}
.tt18b:hover {
  color: rgba(26, 26, 26, 0.9);
  background: #dcb084;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.tt18n input:checked + .tt18b {
  color: #1a1a1a;
  background: #e6c39c;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transform: translateY(-4px);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.45),
    0 -2px 0 rgba(255, 255, 255, 0.18) inset;
}
.tt18fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: #1c1a24;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition:
    opacity 0.25s 0.2s,
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt18b:hover .tt18fold {
  opacity: 0.85;
  width: 8px;
  height: 8px;
}
.tt18n input:checked + .tt18b .tt18fold {
  opacity: 1;
  width: 18px;
  height: 18px;
}
.tt18p {
  display: none;
  padding-top: 14px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia;
  color: rgba(212, 165, 116, 0.85);
}
.tt18:has(#tt18-r1:checked) .tt18p:nth-of-type(1),
.tt18:has(#tt18-r2:checked) .tt18p:nth-of-type(2),
.tt18:has(#tt18-r3:checked) .tt18p:nth-of-type(3) {
  display: block;
}
```

### 31. Velvet Ribbon

**Type:** CSS + JS
**Description:** Icon nav on warm-linen stock with a velvet aubergine ribbon trimmed in gilt. The ribbon hangs down from the top rail directly above the active icon — measured live so it stays perfectly aligned at any stage width. Jewel-toned, club-bookplate atmosphere.

**HTML:**
```html
<div class="tt19">
  <nav class="tt19n">
    <span class="tt19rail" aria-hidden="true"> </span>
    <span class="tt19ribbon" aria-hidden="true"> </span>
    <button class="tt19b active" data-t>
      <svg class="tt19i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" />
      </svg>
      <span class="tt19l">Home</span>
    </button>
    <button class="tt19b" data-t>
      <svg class="tt19i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <line x1="21" y1="21" x2="16" y2="16" />
      </svg>
      <span class="tt19l">Find</span>
    </button>
    <button class="tt19b" data-t>
      <svg class="tt19i" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M9 11h.01M15 11h.01M9.5 15a3.5 3.5 0 0 0 5 0M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0z"
        />
      </svg>
      <span class="tt19l">Help</span>
    </button>
    <button class="tt19b" data-t>
      <svg class="tt19i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt19l">Me</span>
    </button>
  </nav>
</div>
```

**CSS:**
```css
.tt19 {
  background: #f5efe0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.tt19n {
  position: relative;
  flex: 1;
  display: flex;
  padding: 28px 12px 24px;
  box-sizing: border-box;
  min-width: 0;
}
/* Top rail running edge-to-edge — the "shelf" the ribbon hangs from */
.tt19rail {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 3px;
  background: #3d1e4a;
  pointer-events: none;
}
/* The ribbon — JS positions it horizontally to track the active button.
   It hangs from the top rail and overlaps the icon column behind it.
   Height is sized so icon + label both sit comfortably inside it with
   breathing room above the triangular tail. */
.tt19ribbon {
  position: absolute;
  top: 28px;
  width: 56px;
  height: 84px;
  background: #3d1e4a;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
  filter: drop-shadow(0 4px 8px rgba(61, 30, 74, 0.4));
  pointer-events: none;
  transition: left 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Single gilt hem stripe across the ribbon, just below the label.
   Echoes the aubergine rail above and reads as a bookbinder's gilt edge. */
.tt19ribbon::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 14px;
  height: 1.5px;
  background: #e6c149;
  z-index: 2;
}
.tt19b {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 12px;
  min-width: 0;
  border: 0;
  background: transparent;
  font:
    700 10px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(61, 30, 74, 0.5);
  cursor: pointer;
  transition: color 0.3s;
}
.tt19b:hover {
  color: rgba(61, 30, 74, 0.85);
}
.tt19i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    stroke 0.3s;
}
.tt19l {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Active state: icon + label go cream on aubergine (both sit inside ribbon
   body, with the gilt hem stripe between the label and the triangular tail). */
.tt19b.active {
  color: #f5efe0;
}
.tt19b.active .tt19i {
  stroke: #f5efe0;
}
@media (prefers-reduced-motion: reduce) {
  .tt19ribbon {
    transition: none;
  }
}
```

**JS:**
```js
/* Velvet Ribbon — toggle .active and slide ribbon centered above active icon.
   Re-measures on viewport resize so the ribbon stays aligned at any width. */
(function () {
  var nav = document.querySelector(".tt19n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var ribbon = nav.querySelector(".tt19ribbon");
  var current = null;

  function position(btn) {
    if (!ribbon || !btn) return;
    var w = ribbon.offsetWidth || 56;
    ribbon.style.left = btn.offsetLeft + btn.offsetWidth / 2 - w / 2 + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    position(btn);
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", function () {
    position(current);
  });
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 32. Inset Type

**Type:** Pure CSS
**Description:** Active label sits inside a chiseled negative-space well. Inset shadow stack on a darker rectangle gives the impression letters are carved into brass-tinted slate. Pure CSS box-shadow, no images.

**HTML:**
```html
<div class="tt20">
  <nav class="tt20n">
    <input type="radio" name="tt20" id="tt20-r1" checked />
    <label class="tt20b" for="tt20-r1">Etch</label>
    <input type="radio" name="tt20" id="tt20-r2" />
    <label class="tt20b" for="tt20-r2">Engrave</label>
    <input type="radio" name="tt20" id="tt20-r3" />
    <label class="tt20b" for="tt20-r3">Emboss</label>
  </nav>
  <div class="tt20p">Acid bites the plate to print recessed lines.</div>
  <div class="tt20p">A burin cuts directly into the metal surface.</div>
  <div class="tt20p">Pressure raises the paper into a relief.</div>
</div>
```

**CSS:**
```css
.tt20 {
  background: #3a3a42;
  padding: 22px 22px 18px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.tt20n {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #2a2a30;
  border-radius: 4px;
}
.tt20n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt20b {
  flex: 1;
  padding: 14px 12px;
  border: 0;
  background: transparent;
  font:
    800 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 161, 94, 0.6);
  cursor: pointer;
  border-radius: 3px;
  transition:
    color 0.25s,
    background 0.3s,
    box-shadow 0.3s;
}
.tt20b:hover {
  color: rgba(201, 161, 94, 0.95);
}
.tt20n input:checked + .tt20b {
  background: #1f1f24;
  color: #c9a15e;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.55),
    inset -1px -1px 2px rgba(255, 255, 255, 0.08);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}
.tt20p {
  display: none;
  padding-top: 14px;
  font:
    italic 11px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(201, 161, 94, 0.8);
}
.tt20:has(#tt20-r1:checked) .tt20p:nth-of-type(1),
.tt20:has(#tt20-r2:checked) .tt20p:nth-of-type(2),
.tt20:has(#tt20-r3:checked) .tt20p:nth-of-type(3) {
  display: block;
}
```

---
## 20 CSS Tags & Chips Designs

URL: https://codefronts.com/snippets/css-tags-chips/
Description: 20 hand-coded CSS tags and chips designs — removable filter, autocomplete input, status pulse, drag-to-reorder, marquee, undo and more. Semantic HTML, copy-paste ready.
Demo count: 20

### 01. Removable Pill

**Type:** Pure CSS
**Description:** Three filter chips with × buttons that actually remove the chip — pure CSS via :has(:checked) hiding the parent. The canonical filter pattern, working without a single line of JS.

**HTML:**
```html
<div class="ctc-rem">
  <label class="ctc-rem-chip">
    <input type="checkbox" hidden />
    <span>React</span>
    <span class="ctc-rem-x" aria-hidden="true">×</span>
  </label>
  <label class="ctc-rem-chip">
    <input type="checkbox" hidden />
    <span>TypeScript</span>
    <span class="ctc-rem-x" aria-hidden="true">×</span>
  </label>
  <label class="ctc-rem-chip">
    <input type="checkbox" hidden />
    <span>Astro</span>
    <span class="ctc-rem-x" aria-hidden="true">×</span>
  </label>
</div>
```

**CSS:**
```css
.ctc-rem {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ctc-rem-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  background: rgba(124, 108, 255, 0.14);
  color: #c4b5fd;
  border: 1px solid rgba(124, 108, 255, 0.3);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.ctc-rem-chip:hover {
  background: rgba(124, 108, 255, 0.22);
}

.ctc-rem-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s;
}

.ctc-rem-chip:hover .ctc-rem-x {
  background: rgba(255, 255, 255, 0.18);
}

.ctc-rem-chip:has(:checked) {
  display: none;
}
```

### 02. Magnetic Hover

**Type:** Pure CSS
**Description:** On hover the chip text drifts toward the cursor edge via a CSS-only "magnet" trick — purely transition-based, no pointer math, no JS.

**HTML:**
```html
<div class="ctc-mag">
  <a href="#" class="ctc-mag-chip"><span>Hover me</span></a>
  <a href="#" class="ctc-mag-chip"><span>And me</span></a>
  <a href="#" class="ctc-mag-chip"><span>Try it</span></a>
</div>
```

**CSS:**
```css
.ctc-mag {
  display: flex;
  gap: 10px;
}

.ctc-mag-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #f0eeff;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.ctc-mag-chip span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

.ctc-mag-chip:hover {
  background: #2a2a3e;
  border-color: #7c6cff;
}

.ctc-mag-chip:hover span {
  transform: translateX(3px) scale(1.05);
}

.ctc-mag-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(124, 108, 255, 0.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s;
}

.ctc-mag-chip:hover::before {
  opacity: 1;
}
```

### 03. Sliding Border

**Type:** Pure CSS
**Description:** A real @property-animated conic gradient traces around the chip on hover — true CSS angle animation, not the keyframes-on-position hack everyone else uses.

**HTML:**
```html
<a href="#" class="ctc-slide">
  <span>Premium</span>
</a>
```

**CSS:**
```css
.ctc-slide {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: #15151d;
  color: #f0eeff;
  font:
    600 13px/1 system-ui,
    sans-serif;
  text-decoration: none;
  isolation: isolate;
}

.ctc-slide::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--ctc-angle), #7c6cff, #ff6c8a, #2eb88a, #7c6cff);
  z-index: -1;
}

.ctc-slide:hover {
  animation: ctc-slide-spin 2.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-slide-spin { to { --ctc-angle: 360deg; } }

```

### 04. Liquid Fill

**Type:** Pure CSS
**Description:** Outline chip whose interior fills with brand colour from left-to-right on hover. Text colour inverts at the fill boundary using mix-blend-mode: difference.

**HTML:**
```html
<a href="#" class="ctc-liquid"><span>FILTER</span></a>
```

**CSS:**
```css
.ctc-liquid {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: 1.5px solid #00e5ff;
  border-radius: 6px;
  font:
    700 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  color: #00e5ff;
  text-decoration: none;
  overflow: hidden;
  background: #0a0a18;
}

.ctc-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  right: auto;
  width: 0;
  background: #00e5ff;
  transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.ctc-liquid:hover::before {
  width: 100%;
}

.ctc-liquid span {
  position: relative;
  mix-blend-mode: difference;
  color: #fff;
}
```

### 05. Stack of Three

**Type:** Pure CSS
**Description:** Chip rendered as three stacked layers offset by 2px each — depth illusion. On hover the layers fan out diagonally. Pure CSS via two ::before/::after pseudo-elements.

**HTML:**
```html
<a href="#" class="ctc-stack">DESIGN</a>
```

**CSS:**
```css
.ctc-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: #ff6c8a;
  color: #0a0a0a;
  border-radius: 4px;
  font:
    700 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: transform 0.3s ease;
  z-index: 3;
}

.ctc-stack::before,
.ctc-stack::after {
  content: "DESIGN";
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  font: inherit;
  letter-spacing: inherit;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.ctc-stack::before {
  background: #f5a84a;
  transform: translate(2px, 2px);
  z-index: -1;
  color: transparent;
}

.ctc-stack::after {
  background: #2eb88a;
  transform: translate(4px, 4px);
  z-index: -2;
  color: transparent;
}

.ctc-stack:hover {
  transform: translate(-2px, -2px);
}

.ctc-stack:hover::before {
  transform: translate(4px, 4px);
}

.ctc-stack:hover::after {
  transform: translate(8px, 8px);
}
```

### 06. Notch Chip

**Type:** Pure CSS
**Description:** Chip with a triangular notch cut into the left edge using clip-path — a real shape, not a background trick. Reads as a luggage tag or boarding-pass entry.

**HTML:**
```html
<a href="#" class="ctc-notch">
  <span class="ctc-notch-hole" aria-hidden="true"></span>
  <span class="ctc-notch-text">FIRST CLASS</span>
</a>
```

**CSS:**
```css
.ctc-notch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 28px;
  background: #ffd479;
  color: #0a0a0a;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.16em;
  text-decoration: none;
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.ctc-notch-hole {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.ctc-notch:hover {
  transform: translateX(2px);
  background: #ffe4a3;
}
```

### 07. Glassmorphic

**Type:** Pure CSS
**Description:** Frosted-glass chip with backdrop-blur over a coloured page background. Translucent surface, white border, soft inner highlight.

**HTML:**
```html
<div class="ctc-glass-bg">
  <a href="#" class="ctc-glass">Glass</a>
  <a href="#" class="ctc-glass">Frosted</a>
  <a href="#" class="ctc-glass">Blur</a>
</div>
```

**CSS:**
```css
.ctc-glass-bg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
}

.ctc-glass {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  transition: background 0.2s;
}

.ctc-glass:hover {
  background: rgba(255, 255, 255, 0.28);
}
```

### 08. Aurora Outline

**Type:** Pure CSS
**Description:** Continuously rotating conic-gradient border (violet → pink → mint) using @property for true angle animation. The chip stays still, only the rim rotates. Honours prefers-reduced-motion.

**HTML:**
```html
<a href="#" class="ctc-aurora">
  <span>NEW</span>
</a>
```

**CSS:**
```css
.ctc-aurora {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: #0d0d16;
  color: #fff;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-decoration: none;
  isolation: isolate;
  --ctc-aurora-angle: 0deg;
  animation: ctc-aurora-rotate 6s linear infinite;
}

.ctc-aurora::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--ctc-aurora-angle), #7c6cff, #ff6c8a, #2eb88a, #7c6cff);
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-aurora-rotate { to { --ctc-aurora-angle: 360deg; } }

```

### 09. Pixel Grid

**Type:** Pure CSS
**Description:** Chip background is a tiny dotted CSS pattern reading as retro/print. On hover the dot density increases via background-size transition.

**HTML:**
```html
<a href="#" class="ctc-pixel">RETRO</a>
```

**CSS:**
```css
.ctc-pixel {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 2px solid #f5a84a;
  border-radius: 4px;
  background-color: #1a1410;
  background-image: radial-gradient(#f5a84a 1px, transparent 1px);
  background-size: 8px 8px;
  color: #f5a84a;
  font:
    700 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition:
    background-size 0.4s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.ctc-pixel:hover {
  background-size: 4px 4px;
  color: #ffd479;
  border-color: #ffd479;
}
```

### 10. Brutalist Stamp

**Type:** Pure CSS
**Description:** Hard-edged offset-shadow chip with mono font and a hot-pink shadow. Press collapses into the shadow on click. Brutalist design system fixture.

**HTML:**
```html
<a href="#" class="ctc-brut">SHIPPED</a>
```

**CSS:**
```css
.ctc-brut {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: #fff7ed;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  font:
    700 12px/1 "Courier New",
    monospace;
  letter-spacing: 0.14em;
  text-decoration: none;
  box-shadow: 5px 5px 0 #ff3d6e;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.ctc-brut:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #ff3d6e;
}

.ctc-brut:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 #ff3d6e;
}
```

### 11. Gradient Edge

**Type:** Pure CSS
**Description:** Solid dark chip whose only accent is a thin gradient line on the bottom edge — minimalism with a single unmistakable signal. Fades up on hover.

**HTML:**
```html
<div class="ctc-edge">
  <a href="#" class="ctc-edge-chip">Frontend</a>
  <a href="#" class="ctc-edge-chip">Backend</a>
  <a href="#" class="ctc-edge-chip">DevOps</a>
</div>
```

**CSS:**
```css
.ctc-edge {
  display: flex;
  gap: 8px;
}

.ctc-edge-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #15151d;
  color: #c4b5fd;
  border-radius: 4px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  overflow: hidden;
  transition:
    background 0.2s,
    color 0.2s;
}

.ctc-edge-chip::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.ctc-edge-chip:hover {
  background: #1f1f2e;
  color: #fff;
}

.ctc-edge-chip:hover::after {
  transform: scaleX(1);
}
```

### 12. Status Pulse

**Type:** Pure CSS
**Description:** Status chip with a coloured leading dot that pulses for live/active state. Different colours = different states (success, warning, error, info). The standard health-indicator pattern.

**HTML:**
```html
<div class="ctc-status">
  <span class="ctc-status-chip ctc-status-live">
    <span class="ctc-status-dot" aria-hidden="true"></span>Live
  </span>
  <span class="ctc-status-chip ctc-status-warn">
    <span class="ctc-status-dot" aria-hidden="true"></span>Degraded
  </span>
  <span class="ctc-status-chip ctc-status-err">
    <span class="ctc-status-dot" aria-hidden="true"></span>Down
  </span>
  <span class="ctc-status-chip ctc-status-info">
    <span class="ctc-status-dot" aria-hidden="true"></span>Maintenance
  </span>
</div>
```

**CSS:**
```css
.ctc-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ctc-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  font:
    600 11px/1 system-ui,
    sans-serif;
  border: 1px solid;
}

.ctc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: relative;
}

.ctc-status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: ctc-status-ping 1.6s ease-out infinite;
}

.ctc-status-live {
  background: rgba(46, 204, 138, 0.12);
  color: #2ecc8a;
  border-color: rgba(46, 204, 138, 0.35);
}

.ctc-status-live .ctc-status-dot {
  background: #2ecc8a;
}

.ctc-status-warn {
  background: rgba(245, 168, 74, 0.12);
  color: #f5a84a;
  border-color: rgba(245, 168, 74, 0.35);
}

.ctc-status-warn .ctc-status-dot {
  background: #f5a84a;
}

.ctc-status-err {
  background: rgba(255, 61, 110, 0.12);
  color: #ff6c8a;
  border-color: rgba(255, 61, 110, 0.35);
}

.ctc-status-err .ctc-status-dot {
  background: #ff3d6e;
}

.ctc-status-info {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.35);
}

.ctc-status-info .ctc-status-dot {
  background: #60a5fa;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-status-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0;   }
}

```

### 13. Drag to Reorder

**Type:** Light JS
**Description:** Three chips that can be drag-reordered with real pointer math — no library. Keyboard accessible: Tab to focus, ←/→ to swap with neighbour. The full reorder pattern.

**HTML:**
```html
<ul class="ctc-drag" role="listbox" aria-label="Reorder tags">
  <li class="ctc-drag-chip" tabindex="0" data-ctc-drag>Frontend</li>
  <li class="ctc-drag-chip" tabindex="0" data-ctc-drag>Backend</li>
  <li class="ctc-drag-chip" tabindex="0" data-ctc-drag>DevOps</li>
</ul>
```

**CSS:**
```css
.ctc-drag {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ctc-drag-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #1f1f2e;
  color: #c4b5fd;
  border: 1px solid rgba(124, 108, 255, 0.35);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition:
    transform 0.18s ease,
    background 0.2s;
}

.ctc-drag-chip:hover {
  background: rgba(124, 108, 255, 0.18);
}

.ctc-drag-chip.is-dragging {
  cursor: grabbing;
  background: #7c6cff;
  color: #fff;
  z-index: 2;
  transition: none;
}

.ctc-drag-chip:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".ctc-drag").forEach(function (list) {
    var dragged = null;
    list.querySelectorAll("[data-ctc-drag]").forEach(function (chip) {
      chip.addEventListener("pointerdown", function (e) {
        dragged = chip;
        chip.classList.add("is-dragging");
        chip.setPointerCapture(e.pointerId);
      });
      chip.addEventListener("pointermove", function (e) {
        if (dragged !== chip) return;
        var siblings = Array.from(list.children).filter(function (c) {
          return c !== chip;
        });
        for (var i = 0; i < siblings.length; i++) {
          var rect = siblings[i].getBoundingClientRect();
          if (e.clientX > rect.left && e.clientX < rect.right) {
            var dragRect = chip.getBoundingClientRect();
            if (e.clientX < rect.left + rect.width / 2) {
              list.insertBefore(chip, siblings[i]);
            } else {
              list.insertBefore(chip, siblings[i].nextSibling);
            }
            break;
          }
        }
      });
      chip.addEventListener("pointerup", function () {
        chip.classList.remove("is-dragging");
        dragged = null;
      });
      chip.addEventListener("keydown", function (e) {
        var siblings = Array.from(list.children);
        var idx = siblings.indexOf(chip);
        if (e.key === "ArrowLeft" && idx > 0) {
          e.preventDefault();
          list.insertBefore(chip, siblings[idx - 1]);
          chip.focus();
        } else if (e.key === "ArrowRight" && idx < siblings.length - 1) {
          e.preventDefault();
          list.insertBefore(chip, siblings[idx + 1].nextSibling);
          chip.focus();
        }
      });
    });
  });
})();
```

### 14. Tag Input

**Type:** Light JS
**Description:** Type to add a chip; Backspace on empty input removes the last chip. Real autocomplete dropdown filtered live by input — the full filter-input pattern with aria-controls/expanded.

**HTML:**
```html
<div class="ctc-input">
  <ul class="ctc-input-chips" role="list"></ul>
  <input
    type="text"
    class="ctc-input-field"
    placeholder="Type a language…"
    aria-label="Add a language tag"
    aria-controls="ctc-input-list"
    aria-expanded="false"
    autocomplete="off"
  />
  <ul class="ctc-input-list" id="ctc-input-list" role="listbox" hidden></ul>
</div>
```

**CSS:**
```css
.ctc-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  width: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.ctc-input:focus-within {
  border-color: #7c6cff;
}

.ctc-input-chips {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ctc-input-chips li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  background: rgba(124, 108, 255, 0.18);
  color: #c4b5fd;
  border-radius: 4px;
  font:
    600 11px/1 system-ui,
    sans-serif;
}

.ctc-input-chips button {
  background: transparent;
  border: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.ctc-input-field {
  flex: 1;
  min-width: 60px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font:
    500 12px/1 system-ui,
    sans-serif;
  padding: 4px 0;
}

.ctc-input-field::placeholder {
  color: #b8b6d4;
}

.ctc-input-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  z-index: 5;
  max-height: 160px;
  overflow: auto;
}

.ctc-input-list[hidden] {
  display: none;
}

.ctc-input-list li {
  padding: 6px 10px;
  border-radius: 4px;
  font:
    500 12px/1 system-ui,
    sans-serif;
  color: #c4b5fd;
  cursor: pointer;
}

.ctc-input-list li:hover,
.ctc-input-list li[aria-selected="true"] {
  background: rgba(124, 108, 255, 0.18);
  color: #fff;
}
```

**JS:**
```js
(function () {
  var SUGGESTIONS = [
    "JavaScript",
    "TypeScript",
    "Python",
    "Go",
    "Rust",
    "Ruby",
    "Swift",
    "Kotlin",
    "Java",
    "C++",
    "Elixir",
    "Haskell",
  ];
  document.querySelectorAll(".ctc-input").forEach(function (root) {
    var chipsEl = root.querySelector(".ctc-input-chips");
    var input = root.querySelector(".ctc-input-field");
    var listEl = root.querySelector(".ctc-input-list");
    var chips = [];
    function render() {
      chipsEl.innerHTML = "";
      chips.forEach(function (c, i) {
        var li = document.createElement("li");
        var txt = document.createElement("span");
        txt.textContent = c;
        var btn = document.createElement("button");
        btn.type = "button";
        btn.setAttribute("aria-label", "Remove " + c);
        btn.textContent = "×";
        btn.addEventListener("click", function () {
          chips.splice(i, 1);
          render();
        });
        li.appendChild(txt);
        li.appendChild(btn);
        chipsEl.appendChild(li);
      });
    }
    function showList(items) {
      if (!items.length) {
        listEl.setAttribute("hidden", "");
        input.setAttribute("aria-expanded", "false");
        return;
      }
      listEl.innerHTML = "";
      items.forEach(function (s) {
        var li = document.createElement("li");
        li.setAttribute("role", "option");
        li.textContent = s;
        li.addEventListener("mousedown", function (e) {
          e.preventDefault();
          if (chips.indexOf(s) === -1) chips.push(s);
          input.value = "";
          render();
          showList([]);
        });
        listEl.appendChild(li);
      });
      listEl.removeAttribute("hidden");
      input.setAttribute("aria-expanded", "true");
    }
    input.addEventListener("input", function () {
      var q = input.value.trim().toLowerCase();
      if (!q) {
        showList([]);
        return;
      }
      var matches = SUGGESTIONS.filter(function (s) {
        return s.toLowerCase().includes(q) && chips.indexOf(s) === -1;
      }).slice(0, 6);
      showList(matches);
    });
    input.addEventListener("keydown", function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        var v = input.value.trim();
        if (v && chips.indexOf(v) === -1) {
          chips.push(v);
          input.value = "";
          render();
          showList([]);
        }
      } else if (e.key === "Backspace" && !input.value && chips.length) {
        chips.pop();
        render();
      } else if (e.key === "Escape") {
        showList([]);
      }
    });
    input.addEventListener("blur", function () {
      setTimeout(function () {
        showList([]);
      }, 150);
    });
  });
})();
```

### 15. Remove with Undo

**Type:** Light JS
**Description:** Click × to remove a chip — but a small Undo toast appears for 4 seconds before deletion is final. The pattern Gmail and Linear made standard.

**HTML:**
```html
<div class="ctc-undo">
  <div class="ctc-undo-list">
    <span class="ctc-undo-chip" data-ctc-undo
      >Frontend<button type="button" aria-label="Remove Frontend">×</button></span
    >
    <span class="ctc-undo-chip" data-ctc-undo
      >Backend<button type="button" aria-label="Remove Backend">×</button></span
    >
    <span class="ctc-undo-chip" data-ctc-undo
      >DevOps<button type="button" aria-label="Remove DevOps">×</button></span
    >
  </div>
  <div class="ctc-undo-toast" role="status" aria-live="polite" hidden>
    <span class="ctc-undo-msg"></span>
    <button type="button" class="ctc-undo-btn">Undo</button>
  </div>
</div>
```

**CSS:**
```css
.ctc-undo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 70px;
}

.ctc-undo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ctc-undo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: #1f1f2e;
  color: #f0eeff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  transition:
    opacity 0.25s,
    transform 0.25s;
}

.ctc-undo-chip.is-removing {
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}

.ctc-undo-chip button {
  width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  color: #b8b6d4;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
}

.ctc-undo-chip button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ctc-undo-toast {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #15151d;
  border: 1px solid rgba(46, 204, 138, 0.4);
  border-radius: 8px;
  font:
    500 12px/1.2 system-ui,
    sans-serif;
  color: #c4b5fd;
  align-self: flex-start;
  animation: ctc-undo-in 0.2s ease;
}

.ctc-undo-toast[hidden] {
  display: none;
}

.ctc-undo-btn {
  background: transparent;
  border: 0;
  color: #2ecc8a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.ctc-undo-btn:hover {
  text-decoration: underline;
}

@keyframes ctc-undo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .ctc-undo-toast {
    animation: none !important;
  }
}

```

**JS:**
```js
(function () {
  document.querySelectorAll(".ctc-undo").forEach(function (root) {
    var toast = root.querySelector(".ctc-undo-toast");
    var msg = root.querySelector(".ctc-undo-msg");
    var btn = root.querySelector(".ctc-undo-btn");
    var pendingChip = null;
    var timer = null;
    function commit() {
      if (pendingChip && pendingChip.parentNode) pendingChip.parentNode.removeChild(pendingChip);
      pendingChip = null;
      toast.setAttribute("hidden", "");
      timer = null;
    }
    btn.addEventListener("click", function () {
      if (!pendingChip) return;
      pendingChip.classList.remove("is-removing");
      clearTimeout(timer);
      timer = null;
      pendingChip = null;
      toast.setAttribute("hidden", "");
    });
    root.querySelectorAll("[data-ctc-undo] button").forEach(function (x) {
      x.addEventListener("click", function () {
        if (timer) commit();
        var chip = x.closest("[data-ctc-undo]");
        chip.classList.add("is-removing");
        pendingChip = chip;
        msg.textContent = 'Removed "' + chip.firstChild.textContent.trim() + '"';
        toast.removeAttribute("hidden");
        timer = setTimeout(commit, 4000);
      });
    });
  });
})();
```

### 16. Counter Chip

**Type:** Light JS
**Description:** Chip with a number badge inside; click − / + to decrement/increment with aria-valuenow updated for screen readers. The Gmail label-count pattern.

**HTML:**
```html
<div class="ctc-counter">
  <span class="ctc-counter-chip" role="group" aria-label="Inbox count">
    <button type="button" data-ctc-cnt="-1" aria-label="Decrement">−</button>
    <span class="ctc-counter-label">Inbox</span>
    <span class="ctc-counter-num" aria-live="polite" aria-valuenow="12">12</span>
    <button type="button" data-ctc-cnt="+1" aria-label="Increment">+</button>
  </span>
</div>
```

**CSS:**
```css
.ctc-counter {
  display: flex;
}

.ctc-counter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  font:
    600 12px/1 system-ui,
    sans-serif;
  color: #f0eeff;
}

.ctc-counter-chip button {
  width: 26px;
  height: 28px;
  background: transparent;
  border: 0;
  color: #c4b5fd;
  font:
    700 14px/1 system-ui,
    sans-serif;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.ctc-counter-chip button:hover {
  background: rgba(124, 108, 255, 0.18);
  color: #fff;
}

.ctc-counter-label {
  padding: 0 6px 0 10px;
}

.ctc-counter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 18px;
  margin-right: 4px;
  padding: 0 6px;
  background: rgba(124, 108, 255, 0.22);
  color: #c4b5fd;
  border-radius: 999px;
  font:
    700 11px/1 ui-monospace,
    monospace;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".ctc-counter-chip").forEach(function (chip) {
    var num = chip.querySelector(".ctc-counter-num");
    chip.querySelectorAll("[data-ctc-cnt]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        var n = parseInt(num.textContent, 10) || 0;
        var inc = parseInt(btn.getAttribute("data-ctc-cnt"), 10);
        var v = Math.max(0, n + inc);
        num.textContent = v;
        num.setAttribute("aria-valuenow", v);
      });
    });
  });
})();
```

### 17. Marquee Chip

**Type:** Pure CSS
**Description:** When the chip text overflows its width, the text scrolls horizontally on hover like a stock ticker. Pause on focus. Pure CSS using a duplicated text trick.

**HTML:**
```html
<a href="#" class="ctc-marquee">
  <span class="ctc-marquee-track">
    <span>Senior Frontend Engineer @ TechCorp</span>
    <span aria-hidden="true">Senior Frontend Engineer @ TechCorp</span>
  </span>
</a>
```

**CSS:**
```css
.ctc-marquee {
  display: inline-flex;
  align-items: center;
  width: 200px;
  padding: 9px 14px;
  background: #1f1f2e;
  color: #f0eeff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 12px,
    #000 calc(100% - 12px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 12px,
    #000 calc(100% - 12px),
    transparent 100%
  );
}

.ctc-marquee-track {
  display: inline-flex;
  gap: 32px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ctc-marquee:hover .ctc-marquee-track,
.ctc-marquee:focus-visible .ctc-marquee-track {
  animation: ctc-marquee-roll 7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-marquee-roll { to { transform: translateX(calc(-50% - 16px)); } }

```

### 18. Expandable Detail

**Type:** Pure CSS
**Description:** Native <details>/<summary> chip that expands inline to reveal a description on click. Real semantic disclosure, not a tooltip — keyboard accessible by default.

**HTML:**
```html
<details class="ctc-exp">
  <summary>
    <span class="ctc-exp-tag">React</span>
    <svg viewBox="0 0 12 12" aria-hidden="true">
      <path
        d="M3 4.5l3 3 3-3"
        stroke="currentColor"
        stroke-width="1.6"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </summary>
  <p class="ctc-exp-body">
    A JavaScript library for building user interfaces with components and hooks.
  </p>
</details>
```

**CSS:**
```css
.ctc-exp {
  display: inline-block;
  background: #1f1f2e;
  border: 1px solid rgba(124, 108, 255, 0.3);
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui, sans-serif;
  max-width: 280px;
}

.ctc-exp summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: #c4b5fd;
  user-select: none;
}

.ctc-exp summary::-webkit-details-marker {
  display: none;
}

.ctc-exp summary svg {
  width: 11px;
  height: 11px;
  color: currentColor;
  transition: transform 0.2s ease;
}

.ctc-exp[open] summary svg {
  transform: rotate(180deg);
}

.ctc-exp[open] {
  display: block;
  border-radius: 14px;
}

.ctc-exp-body {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #b8b6d4;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ctc-exp summary:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}
```

### 19. Linked Group

**Type:** Pure CSS
**Description:** Three connected chips sharing a single border with hairline dividers — like a segmented breadcrumb of tags. Hover lights individual segments.

**HTML:**
```html
<div class="ctc-linked">
  <a href="#" class="ctc-linked-seg">Components</a>
  <a href="#" class="ctc-linked-seg">CSS</a>
  <a href="#" class="ctc-linked-seg">Buttons</a>
</div>
```

**CSS:**
```css
.ctc-linked {
  display: inline-flex;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.ctc-linked-seg {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  color: #c4b5fd;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background 0.15s,
    color 0.15s;
}

.ctc-linked-seg:last-child {
  border-right: 0;
}

.ctc-linked-seg:hover {
  background: rgba(124, 108, 255, 0.18);
  color: #fff;
}
```

### 20. Lifecycle Chip

**Type:** Light JS
**Description:** Animates through three states — Adding (slide in + spinner) → Active (settle + checkmark) → Removing (fade out + strikethrough). Click Run demo to replay the full add/remove dance.

**HTML:**
```html
<div class="ctc-life">
  <button type="button" class="ctc-life-run">▶ Run demo</button>
  <span class="ctc-life-chip" data-ctc-life data-state="idle">
    <span class="ctc-life-icon" aria-hidden="true"></span>
    <span class="ctc-life-text">React</span>
  </span>
</div>
```

**CSS:**
```css
.ctc-life {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ctc-life-run {
  padding: 6px 12px;
  background: rgba(124, 108, 255, 0.14);
  color: #c4b5fd;
  border: 1px solid rgba(124, 108, 255, 0.35);
  border-radius: 6px;
  font:
    600 11px/1 ui-monospace,
    monospace;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.ctc-life-run:hover {
  background: rgba(124, 108, 255, 0.26);
  color: #fff;
}

.ctc-life-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  background: #1f1f2e;
  color: #f0eeff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.ctc-life-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.ctc-life-chip[data-state="adding"] {
  background: rgba(124, 108, 255, 0.18);
  border-color: rgba(124, 108, 255, 0.4);
  color: #c4b5fd;
  transform: translateX(-12px);
  opacity: 0;
  animation: ctc-life-slide-in 0.45s ease forwards;
}

.ctc-life-chip[data-state="adding"] .ctc-life-icon {
  border: 2px solid rgba(124, 108, 255, 0.3);
  border-top-color: #7c6cff;
  background: transparent;
  animation: ctc-life-spin 0.7s linear infinite;
}

.ctc-life-chip[data-state="active"] {
  background: rgba(46, 204, 138, 0.14);
  border-color: rgba(46, 204, 138, 0.4);
  color: #2ecc8a;
}

.ctc-life-chip[data-state="active"] .ctc-life-icon {
  background: #2ecc8a;
  color: #0a0f0c;
  font-weight: 900;
}

.ctc-life-chip[data-state="active"] .ctc-life-icon::before {
  content: "✓";
}

.ctc-life-chip[data-state="removing"] {
  background: rgba(255, 61, 110, 0.1);
  border-color: rgba(255, 61, 110, 0.35);
  color: rgba(255, 108, 138, 0.7);
  text-decoration: line-through;
  opacity: 0;
  transform: scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-life-slide-in { to { transform: translateX(0); opacity: 1; } }

@keyframes ctc-life-spin { to { transform: rotate(360deg); } }

```

**JS:**
```js
(function () {
  document.querySelectorAll(".ctc-life").forEach(function (root) {
    var btn = root.querySelector(".ctc-life-run");
    var chip = root.querySelector("[data-ctc-life]");
    if (!btn || !chip) return;
    var running = false;
    btn.addEventListener("click", function () {
      if (running) return;
      running = true;
      chip.setAttribute("data-state", "adding");
      setTimeout(function () {
        chip.setAttribute("data-state", "active");
      }, 1100);
      setTimeout(function () {
        chip.setAttribute("data-state", "removing");
      }, 2400);
      setTimeout(function () {
        chip.setAttribute("data-state", "idle");
        running = false;
      }, 3200);
    });
  });
})();
```

---
## 15 CSS Testimonials & Reviews

URL: https://codefronts.com/components/css-testimonials-reviews/
Description: 15 hand-coded CSS testimonial layouts spanning editorial, brutalist, bento, neon, retro, minimal, crypto, edtech, luxury real estate, gaming, high fashion, fintech, SaaS minimal, horizontal profile, and portrait-led aesthetics. Copy-paste ready, accessible, mobile-first.
Demo count: 15

### 01. Obsidian Editorial

**Type:** Pure CSS
**Description:** A dark editorial spread with a featured testimonial spanning two rows and four secondary cards in a 3-column grid. Gold accent lines reveal on hover, large opacity-7% quote glyphs sit behind each quote, and pulsing "Verified" dots signal authenticity. Playfair Display for names + glyphs, Cormorant Garamond italic for the quotes — the magazine-cover treatment.

**HTML:**
```html
<section class="tm-obs" aria-label="Client testimonials">
  <header class="tm-obs-head">Client Testimonials &middot; 2024</header>
  <div class="tm-obs-grid">

    <article class="tm-obs-card tm-obs-featured">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-verified"><span class="tm-obs-vdot" aria-hidden="true"></span> Verified Purchase</div>
      <div class="tm-obs-stars" aria-label="5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        Working with them was unlike anything I'd experienced before. There's a rare quality in partners who can translate abstract vision into something that <em class="tm-obs-em">genuinely moves people</em>. Every deliverable exceeded what I thought was possible — not incrementally, but by an entirely different order of magnitude.
      </blockquote>
      <span class="tm-obs-rule" aria-hidden="true"></span>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">MV</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">Margaux Vellancourt</cite>
          <span class="tm-obs-role">Creative Director, Maison Cèdre</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">G2 &middot; Verified</span>
    </article>

    <article class="tm-obs-card">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-stars" aria-label="5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        The ROI was <em class="tm-obs-em">immediate and measurable</em>. Within three months our conversion rate doubled. I've never seen a team move that fast without sacrificing depth.
      </blockquote>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">JR</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">James Rothenberg</cite>
          <span class="tm-obs-role">VP Growth, Apex Capital</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">Trustpilot</span>
    </article>

    <article class="tm-obs-card">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-stars" aria-label="4.5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star tm-obs-star-half" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        Elegance is hard to teach and <em class="tm-obs-em">even harder to find</em>. They brought both craft and instinct. Our brand finally feels like it belongs in the rooms we're trying to enter.
      </blockquote>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">SL</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">Simone Laurent</cite>
          <span class="tm-obs-role">Founder, Studio Onyx</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">LinkedIn</span>
    </article>

    <article class="tm-obs-card">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-stars" aria-label="5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        I handed them a problem without a brief and they returned a <em class="tm-obs-em">solution with a point of view</em>. That intellectual generosity is rare and worth every penny.
      </blockquote>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">AT</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">Alistair Thornwood</cite>
          <span class="tm-obs-role">Partner, Thornwood &amp; Co.</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">Clutch</span>
    </article>

    <article class="tm-obs-card">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-stars" aria-label="5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        Six-figure decision, zero regret. The project paid for itself in <em class="tm-obs-em">sixty-four days</em>. I'm not sure what else there is to say.
      </blockquote>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">NB</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">Nadia Blumenfeld</cite>
          <span class="tm-obs-role">CEO, Helix Ventures</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">G2 &middot; Verified</span>
    </article>
  </div>
</section>
```

**CSS:**
```css
/* Obsidian Editorial — dark editorial spread. Self-contained: no body
   styles, no fixed positioning, all decoration lives inside .tm-obs.
   Each card is a real <article>, quote is a real <blockquote>, author
   is a real <figcaption> with <cite>. Hover reveals the gold accent
   line at the top of each card; the glyph quote-mark behind the quote
   gets slightly brighter. */
.tm-obs {
  --tm-obs-ink:       #0a0a0a;
  --tm-obs-paper:     #f5f0e8;
  --tm-obs-gold:      #b8962e;
  --tm-obs-gold-l:    #d4b253;
  --tm-obs-cream:     #ede8d8;
  --tm-obs-muted:     #5a5040;
  position: relative;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px);
  background: var(--tm-obs-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--tm-obs-cream);
  overflow: hidden;
  min-height: 520px;
}
/* Subtle film-grain overlay — pure SVG noise, no HTTP request. Adds
   tactile depth so the flat black surface reads as paper, not as a
   blank canvas. */
.tm-obs::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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.tm-obs-head {
  position: relative;
  z-index: 1;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tm-obs-gold);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tm-obs-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--tm-obs-gold), transparent);
  max-width: 200px;
}
.tm-obs-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  background: #1a1510;
}
.tm-obs-card {
  background: var(--tm-obs-ink);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: background 0.5s;
  display: flex;
  flex-direction: column;
}
.tm-obs-card:hover { background: #0f0d08; }
.tm-obs-featured {
  grid-row: 1 / 3;
  background: #0d0b06;
  border-right: 1px solid #1a1510;
}
.tm-obs-glyph {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 200px;
  line-height: 0.7;
  color: var(--tm-obs-gold);
  opacity: 0.08;
  position: absolute;
  top: 24px;
  left: 28px;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.5s;
}
.tm-obs-card:hover .tm-obs-glyph { opacity: 0.14; }
.tm-obs-featured .tm-obs-glyph {
  font-size: 280px;
  opacity: 0.06;
  top: 16px;
}
.tm-obs-featured:hover .tm-obs-glyph { opacity: 0.1; }
.tm-obs-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--tm-obs-gold), transparent);
  opacity: 0;
  transition: opacity 0.5s;
}
.tm-obs-card:hover .tm-obs-accent { opacity: 1; }
.tm-obs-featured .tm-obs-accent { opacity: 0.4; }
.tm-obs-featured:hover .tm-obs-accent { opacity: 1; }
.tm-obs-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tm-obs-gold);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.tm-obs-vdot {
  width: 5px;
  height: 5px;
  background: var(--tm-obs-gold);
  border-radius: 50%;
  animation: tm-obs-pulse 2s infinite;
}
@keyframes tm-obs-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}
.tm-obs-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.tm-obs-star {
  width: 10px;
  height: 10px;
  background: var(--tm-obs-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tm-obs-star-half {
  background: linear-gradient(to right, var(--tm-obs-gold) 50%, #2a2418 50%);
}
.tm-obs-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  color: var(--tm-obs-cream);
  line-height: 1.65;
  margin: 0 0 24px;
  font-size: 1.02rem;
  position: relative;
  z-index: 1;
  border: 0;
  padding: 0;
}
.tm-obs-featured .tm-obs-quote {
  font-size: 1.35rem;
  margin-bottom: 32px;
}
.tm-obs-em {
  color: var(--tm-obs-gold-l);
  font-style: normal;
  font-weight: 400;
}
.tm-obs-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--tm-obs-gold);
  margin: 20px 0;
  opacity: 0.5;
  position: relative;
  z-index: 1;
}
.tm-obs-author {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.tm-obs-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--tm-obs-gold);
  background: #1a1510;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  color: var(--tm-obs-gold);
  opacity: 0.85;
  flex-shrink: 0;
}
.tm-obs-featured .tm-obs-avatar {
  width: 52px;
  height: 52px;
}
.tm-obs-meta { display: flex; flex-direction: column; }
.tm-obs-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  font-style: normal;
  color: var(--tm-obs-paper);
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.tm-obs-role {
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tm-obs-muted);
}
.tm-obs-source {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tm-obs-muted);
  border: 1px solid #2a2418;
  padding: 3px 7px;
}
/* Mobile fallback — collapse 3 cols to a single stack so cards stay
   readable. Featured stops spanning two rows. */
@media (max-width: 720px) {
  .tm-obs-grid { grid-template-columns: 1fr; }
  .tm-obs-featured { grid-row: auto; border-right: none; }
  .tm-obs-glyph,
  .tm-obs-featured .tm-obs-glyph { font-size: 120px; top: 12px; left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-obs-vdot { animation: none; }
  .tm-obs-card { transition: none; }
}
```

### 02. Brutalist Press

**Type:** Pure CSS
**Description:** Newspaper-column layout with a bold pull quote, animated star-rating bars, red editor's stamp, and numbered micro-reviews. Use case: B2B software or enterprise product. IBM Plex Serif for headlines, Bebas Neue for big numbers, IBM Plex Mono for metadata.

**HTML:**
```html
<section class="tm-brp" aria-label="Client testimonials">
  <header class="tm-brp-mast">
    <div class="tm-brp-title">The Testimonial Record &middot; Reviews &amp; Verified Reports</div>
    <div class="tm-brp-count">Vol. XLII &middot; 1,248 Reviews</div>
  </header>

  <div class="tm-brp-grid">

    <article class="tm-brp-col">
      <div class="tm-brp-stamp" aria-hidden="true">&#9733; Editor's Pick</div>
      <blockquote class="tm-brp-pull">"Nothing short of transformative — our team has never been more aligned."</blockquote>
      <p class="tm-brp-attribution">Posted by</p>
      <p class="tm-brp-attr-name"><cite>Eleanor Ashcroft</cite> &middot; COO, Latitude Group</p>
      <div class="tm-brp-star-row" aria-label="5 out of 5 stars">
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
      </div>
      <p class="tm-brp-body">I've evaluated dozens of platforms in my career and few have combined this level of depth with genuine usability. The onboarding alone changed how we think about process. Six months in and the team still finds new capabilities worth talking about.</p>
    </article>

    <div class="tm-brp-divider" aria-hidden="true"></div>

    <div class="tm-brp-col">
      <div class="tm-brp-rating-box">
        <div class="tm-brp-rating-num">4.9</div>
        <div class="tm-brp-rating-sub">Out of 5.0 &middot; 1,248 reviews</div>
        <div class="tm-brp-bar-wrap">
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">5&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:89%"></div></div><span class="tm-brp-bar-cnt">1,112</span></div>
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">4&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:8%"></div></div><span class="tm-brp-bar-cnt">98</span></div>
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">3&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:2%"></div></div><span class="tm-brp-bar-cnt">24</span></div>
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">2&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:1%"></div></div><span class="tm-brp-bar-cnt">9</span></div>
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">1&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:0.4%"></div></div><span class="tm-brp-bar-cnt">5</span></div>
        </div>
      </div>
      <article class="tm-brp-tblock">
        <div class="tm-brp-bnum" aria-hidden="true">01</div>
        <div class="tm-brp-star-row" aria-label="5 out of 5 stars"><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span></div>
        <blockquote class="tm-brp-bq">"Doubled our output with half the friction. It's the tool I wish we'd found three years ago."</blockquote>
        <figcaption class="tm-brp-bmeta"><cite>D. Nakamura</cite> &middot; Head of Ops, Renova</figcaption>
      </article>
      <article class="tm-brp-tblock">
        <div class="tm-brp-bnum" aria-hidden="true">02</div>
        <div class="tm-brp-star-row" aria-label="5 out of 5 stars"><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span></div>
        <blockquote class="tm-brp-bq">"The support team alone is worth the subscription. Responsive, knowledgeable, human."</blockquote>
        <figcaption class="tm-brp-bmeta"><cite>F. Oberlin</cite> &middot; Founder, Plinth Studio</figcaption>
      </article>
    </div>

    <div class="tm-brp-divider" aria-hidden="true"></div>

    <div class="tm-brp-col">
      <div class="tm-brp-hblock">
        <blockquote>"I put my entire operations on this platform in 48 hours. That is not something I do lightly."</blockquote>
        <figcaption class="tm-brp-hmeta">— <cite>K. Bergström</cite>, CTO &middot; Kolverd Systems</figcaption>
      </div>
      <article class="tm-brp-tblock">
        <div class="tm-brp-bnum" aria-hidden="true">03</div>
        <div class="tm-brp-star-row" aria-label="4 out of 5 stars"><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s tm-brp-se">&#9733;</span></div>
        <blockquote class="tm-brp-bq">"Robust, opinionated in the right ways, and genuinely designed for real work rather than demos."</blockquote>
        <figcaption class="tm-brp-bmeta"><cite>P. Fontaine</cite> &middot; PM, Vex Collective</figcaption>
      </article>
      <article class="tm-brp-tblock">
        <div class="tm-brp-bnum" aria-hidden="true">04</div>
        <div class="tm-brp-star-row" aria-label="5 out of 5 stars"><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span></div>
        <blockquote class="tm-brp-bq">"Every competitor promised results. These people delivered — on time, under budget."</blockquote>
        <figcaption class="tm-brp-bmeta"><cite>M. Osei</cite> &middot; Director, Harven Capital</figcaption>
      </article>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* Brutalist Press — newsprint column layout. Self-contained: all
   styling lives under .tm-brp. Pull quote uses a heavy top + bottom
   border (the masthead-rule pattern). Rating bars animate from 0
   width on first paint. Red editor's stamp is rotated -1deg for a
   stuck-on feel. */
.tm-brp {
  --tm-brp-black:  #111010;
  --tm-brp-white:  #f2ede4;
  --tm-brp-yellow: #f5e642;
  --tm-brp-red:    #d63022;
  --tm-brp-gray:   #888070;
  --tm-brp-lgray:  #ddd8cc;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  background: var(--tm-brp-white);
  font-family: 'IBM Plex Serif', Georgia, serif;
  color: var(--tm-brp-black);
  min-height: 520px;
}
.tm-brp-mast {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  border-top: 6px solid var(--tm-brp-black);
  border-bottom: 2px solid var(--tm-brp-black);
  padding: 6px 0;
}
.tm-brp-title {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--tm-brp-black);
  flex: 1;
}
.tm-brp-count {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--tm-brp-gray);
  letter-spacing: 0.1em;
}
.tm-brp-grid {
  display: grid;
  grid-template-columns: 2fr 1px 1.2fr 1px 1.2fr;
  gap: 0;
  align-items: start;
}
.tm-brp-divider {
  background: var(--tm-brp-black);
  height: 100%;
  min-height: 280px;
  opacity: 0.15;
}
.tm-brp-col {
  padding: 0 22px;
}
.tm-brp-col:first-child { padding-left: 0; }
.tm-brp-col:last-child  { padding-right: 0; }
.tm-brp-pull {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 1.12;
  color: var(--tm-brp-black);
  border-top: 4px solid var(--tm-brp-black);
  border-bottom: 4px solid var(--tm-brp-black);
  padding: 18px 0;
  margin: 0 0 18px;
}
.tm-brp-stamp {
  display: inline-flex;
  background: var(--tm-brp-red);
  color: var(--tm-brp-white);
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  padding: 3px 8px;
  margin-bottom: 12px;
  transform: rotate(-1deg);
}
.tm-brp-attribution {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-brp-gray);
  margin: 0 0 4px;
}
.tm-brp-attr-name {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--tm-brp-black);
  margin: 0 0 8px;
}
.tm-brp-attr-name cite { font-style: normal; }
.tm-brp-body {
  font-size: 0.86rem;
  line-height: 1.7;
  color: #333;
  margin-top: 14px;
}
.tm-brp-rating-box {
  background: var(--tm-brp-black);
  color: var(--tm-brp-yellow);
  padding: 22px 20px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.tm-brp-rating-box::after {
  content: '\2605';
  position: absolute;
  right: -10px; top: -10px;
  font-size: 80px;
  opacity: 0.07;
  color: var(--tm-brp-yellow);
  line-height: 1;
}
.tm-brp-rating-num {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 56px;
  line-height: 1;
  color: var(--tm-brp-yellow);
}
.tm-brp-rating-sub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #888;
  text-transform: uppercase;
  margin-top: 4px;
}
.tm-brp-bar-wrap { margin-top: 16px; }
.tm-brp-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.tm-brp-bar-lbl {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8px;
  color: #888;
  width: 26px;
  text-align: right;
}
.tm-brp-bar-track {
  flex: 1;
  height: 4px;
  background: #222;
  overflow: hidden;
}
.tm-brp-bar-fill {
  height: 100%;
  background: var(--tm-brp-yellow);
  transform-origin: left;
  animation: tm-brp-barin 1s ease both;
}
.tm-brp-bar-row:nth-child(1) .tm-brp-bar-fill { animation-delay: 0.1s; }
.tm-brp-bar-row:nth-child(2) .tm-brp-bar-fill { animation-delay: 0.2s; }
.tm-brp-bar-row:nth-child(3) .tm-brp-bar-fill { animation-delay: 0.3s; }
.tm-brp-bar-row:nth-child(4) .tm-brp-bar-fill { animation-delay: 0.4s; }
.tm-brp-bar-row:nth-child(5) .tm-brp-bar-fill { animation-delay: 0.5s; }
@keyframes tm-brp-barin {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.tm-brp-bar-cnt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8px;
  color: #666;
  width: 22px;
}
.tm-brp-tblock {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--tm-brp-lgray);
  position: relative;
  transition: all 0.25s;
}
.tm-brp-tblock:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tm-brp-tblock:hover .tm-brp-bnum {
  color: var(--tm-brp-yellow);
  text-shadow: 2px 2px 0 var(--tm-brp-black);
}
.tm-brp-bnum {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--tm-brp-lgray);
  float: left;
  margin-right: 9px;
  margin-top: -5px;
  transition: color 0.25s, text-shadow 0.25s;
}
.tm-brp-bq {
  font-size: 0.87rem;
  line-height: 1.6;
  color: #333;
  margin: 0 0 10px;
  font-style: italic;
}
.tm-brp-bmeta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-brp-gray);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-brp-bmeta::before {
  content: '\2014';
  color: var(--tm-brp-red);
  font-size: 12px;
}
.tm-brp-bmeta cite { font-style: normal; color: var(--tm-brp-black); font-weight: 600; }
.tm-brp-star-row {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
}
.tm-brp-s {
  color: var(--tm-brp-black);
  font-size: 11px;
}
.tm-brp-se { color: var(--tm-brp-lgray); }
.tm-brp-hblock {
  background: var(--tm-brp-yellow);
  padding: 16px 18px;
  margin-bottom: 22px;
  border-left: 5px solid var(--tm-brp-black);
}
.tm-brp-hblock blockquote {
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tm-brp-black);
  margin: 0 0 8px;
}
.tm-brp-hmeta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #555;
}
.tm-brp-hmeta cite { font-style: normal; }
@media (max-width: 720px) {
  .tm-brp-grid { grid-template-columns: 1fr; gap: 24px; }
  .tm-brp-divider { display: none; }
  .tm-brp-col { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-brp-bar-fill { animation: none; transform: scaleX(1); }
  .tm-brp-tblock { transition: none; }
}
```

### 03. Blossom Bento

**Type:** Pure CSS
**Description:** 12-column bento grid with soft pastel cards, spring-bounce hover animations, and a stat panel. Use case: wellness, beauty, or lifestyle brand. Fraunces serif for the featured pull-quote, Instrument Sans for everything else, six color-coded star palettes per card slot.

**HTML:**
```html
<section class="tm-ben" aria-label="Customer testimonials">

  <article class="tm-ben-card tm-ben-ca">
    <span class="tm-ben-blob" aria-hidden="true"></span>
    <div class="tm-ben-inner">
      <div>
        <span class="tm-ben-tag"><span class="tm-ben-tdot" aria-hidden="true"></span> Top Review</span>
        <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <blockquote class="tm-ben-qlg"><span class="tm-ben-qmark" aria-hidden="true">&ldquo;</span>This completely changed how I approach my morning routine. I feel more present, more intentional — honestly more like myself than I have in years.</blockquote>
      </div>
      <figcaption class="tm-ben-ar">
        <span class="tm-ben-av" aria-hidden="true">SB</span>
        <span><cite class="tm-ben-an">Sasha Bloom</cite><span class="tm-ben-aro">Yoga instructor &middot; 6 months subscriber</span></span>
      </figcaption>
    </div>
  </article>

  <article class="tm-ben-card tm-ben-cb">
    <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <blockquote class="tm-ben-qsm">"Gentle on the system, remarkable on the results. I've recommended it to my entire wellness circle."</blockquote>
    <figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">OM</span><span><cite class="tm-ben-an">Olivia Marsh</cite><span class="tm-ben-aro">Nutritionist</span></span></figcaption>
  </article>

  <article class="tm-ben-card tm-ben-cc">
    <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <blockquote class="tm-ben-qsm">"Smells like a greenhouse in the best way. My skin has never been softer or more even-toned."</blockquote>
    <figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">PE</span><span><cite class="tm-ben-an">Priya Easton</cite><span class="tm-ben-aro">Skincare obsessive</span></span></figcaption>
  </article>

  <article class="tm-ben-card tm-ben-cd">
    <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <blockquote class="tm-ben-qsm">"Fell asleep faster than I have since I was a child. The lavender formula is genuinely magical."</blockquote>
    <figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">RC</span><span><cite class="tm-ben-an">Rafael Cruz</cite><span class="tm-ben-aro">Sleep coach</span></span></figcaption>
  </article>

  <article class="tm-ben-card tm-ben-ce">
    <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <blockquote class="tm-ben-qsm">"Finally a brand that doesn't lie about ingredients. Transparent, effective, beautiful packaging."</blockquote>
    <figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">ZN</span><span><cite class="tm-ben-an">Zoë Nakamura</cite><span class="tm-ben-aro">Clean beauty editor</span></span></figcaption>
  </article>

  <article class="tm-ben-card tm-ben-cf">
    <span class="tm-ben-ico" aria-hidden="true">&#127807;</span>
    <div class="tm-ben-content">
      <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-ben-qsm">"The ritual of it — the scent, the texture — has become the most grounding part of my day."</blockquote>
      <figcaption class="tm-ben-ar"><span class="tm-ben-av tm-ben-av-sm" aria-hidden="true">LW</span><span><cite class="tm-ben-an">Lena Ward &middot; Therapist</cite></span></figcaption>
    </div>
  </article>

  <article class="tm-ben-card tm-ben-cg">
    <div class="tm-ben-content">
      <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-ben-qsm">"Tried seventeen wellness products this year. This is the one I actually still use. Not even close."</blockquote>
      <figcaption class="tm-ben-ar"><span class="tm-ben-av tm-ben-av-sm" aria-hidden="true">MK</span><span><cite class="tm-ben-an">Maya Kim &middot; Wellness blogger</cite></span></figcaption>
    </div>
    <div class="tm-ben-right">
      <div class="tm-ben-snum">4.9</div>
      <div class="tm-ben-slbl">avg. rating<br>12,400+ reviews</div>
    </div>
  </article>

</section>
```

**CSS:**
```css
/* Blossom Bento — pastel 12-column bento grid. Self-contained. Cards
   spring-bounce in on load (staggered delays) and lift on hover with
   a soft shadow. Each card has its own accent color baked into the
   stars + avatar. The blob in card .ca is a subtle radial glow,
   contained inside the card via overflow:hidden. */
.tm-ben {
  --tm-ben-bg:    #f7f3ee;
  --tm-ben-c1:    #f9e8e0;
  --tm-ben-c2:    #e8eef5;
  --tm-ben-c3:    #e8f0e9;
  --tm-ben-c4:    #f3eaf7;
  --tm-ben-c5:    #fdf0d8;
  --tm-ben-c6:    #e5f0f0;
  --tm-ben-text:  #2a2420;
  --tm-ben-muted: #8a7e76;
  --tm-ben-a1:    #d4614a;
  --tm-ben-a2:    #4a6fa5;
  --tm-ben-a3:    #4a8a56;
  --tm-ben-a4:    #8a4ab5;
  --tm-ben-a5:    #c87c1e;
  --tm-ben-a6:    #2a8a8a;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 138px;
  gap: 11px;
  padding: clamp(20px, 3vw, 40px);
  background: var(--tm-ben-bg);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: var(--tm-ben-text);
  min-height: 500px;
}
.tm-ben-card {
  border-radius: 22px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 0.4s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  animation: tm-ben-fi 0.7s cubic-bezier(.34, 1.2, .64, 1) both;
}
.tm-ben-card:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.tm-ben-card:nth-child(1) { animation-delay: 0.05s; }
.tm-ben-card:nth-child(2) { animation-delay: 0.12s; }
.tm-ben-card:nth-child(3) { animation-delay: 0.18s; }
.tm-ben-card:nth-child(4) { animation-delay: 0.22s; }
.tm-ben-card:nth-child(5) { animation-delay: 0.28s; }
.tm-ben-card:nth-child(6) { animation-delay: 0.34s; }
.tm-ben-card:nth-child(7) { animation-delay: 0.40s; }
@keyframes tm-ben-fi {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tm-ben-ca { grid-column: 1 / 6;  grid-row: 1 / 3; background: var(--tm-ben-c1); }
.tm-ben-cb { grid-column: 6 / 9;  grid-row: 1 / 2; background: var(--tm-ben-c2); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cc { grid-column: 9 / 13; grid-row: 1 / 2; background: var(--tm-ben-c5); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cd { grid-column: 6 / 10; grid-row: 2 / 3; background: var(--tm-ben-c3); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-ce { grid-column: 10 / 13; grid-row: 2 / 3; background: var(--tm-ben-c4); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cf { grid-column: 1 / 5;  grid-row: 3 / 4; background: var(--tm-ben-c6); display: flex; flex-direction: row; align-items: center; gap: 18px; padding: 20px 24px; }
.tm-ben-cg { grid-column: 5 / 13; grid-row: 3 / 4; background: var(--tm-ben-c4); display: flex; flex-direction: row; align-items: center; gap: 18px; padding: 20px 24px; }
.tm-ben-blob {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tm-ben-a1) 0%, transparent 70%);
  opacity: 0.12;
  bottom: -40px;
  right: -40px;
  pointer-events: none;
}
.tm-ben-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 1px;
}
.tm-ben-ca .tm-ben-stars { color: var(--tm-ben-a1); }
.tm-ben-cb .tm-ben-stars { color: var(--tm-ben-a2); }
.tm-ben-cc .tm-ben-stars { color: var(--tm-ben-a5); }
.tm-ben-cd .tm-ben-stars { color: var(--tm-ben-a3); }
.tm-ben-ce .tm-ben-stars { color: var(--tm-ben-a4); }
.tm-ben-cf .tm-ben-stars { color: var(--tm-ben-a6); }
.tm-ben-cg .tm-ben-stars { color: var(--tm-ben-a4); }
.tm-ben-ca .tm-ben-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tm-ben-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-ben-a1);
  background: rgba(212, 97, 74, 0.1);
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 12px;
  width: fit-content;
}
.tm-ben-tdot {
  width: 5px;
  height: 5px;
  background: var(--tm-ben-a1);
  border-radius: 50%;
}
.tm-ben-qlg {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--tm-ben-text);
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.tm-ben-qmark {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.6rem;
  line-height: 0;
  color: var(--tm-ben-a1);
  opacity: 0.3;
  vertical-align: -0.4em;
  margin-right: 4px;
}
.tm-ben-ar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
}
.tm-ben-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.tm-ben-av-sm { width: 28px; height: 28px; font-size: 10px; }
.tm-ben-ca .tm-ben-av { background: rgba(212, 97, 74, 0.15);  color: var(--tm-ben-a1); }
.tm-ben-cb .tm-ben-av { background: rgba(74, 111, 165, 0.15); color: var(--tm-ben-a2); }
.tm-ben-cc .tm-ben-av { background: rgba(200, 124, 30, 0.15); color: var(--tm-ben-a5); }
.tm-ben-cd .tm-ben-av { background: rgba(74, 138, 86, 0.15);  color: var(--tm-ben-a3); }
.tm-ben-ce .tm-ben-av { background: rgba(138, 74, 181, 0.15); color: var(--tm-ben-a4); }
.tm-ben-cf .tm-ben-av { background: rgba(42, 138, 138, 0.15); color: var(--tm-ben-a6); }
.tm-ben-cg .tm-ben-av { background: rgba(138, 74, 181, 0.15); color: var(--tm-ben-a4); }
.tm-ben-an {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--tm-ben-text);
  line-height: 1.3;
  display: block;
}
.tm-ben-aro {
  font-size: 10px;
  color: var(--tm-ben-muted);
  line-height: 1.4;
}
.tm-ben-qsm {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--tm-ben-text);
  margin: 7px 0;
  flex: 1;
}
.tm-ben-cf .tm-ben-content,
.tm-ben-cg .tm-ben-content { flex: 1; }
.tm-ben-cf .tm-ben-ico {
  width: 44px;
  height: 44px;
  background: rgba(42, 138, 138, 0.1);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.tm-ben-cg .tm-ben-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.tm-ben-snum {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  color: var(--tm-ben-a4);
}
.tm-ben-slbl {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-ben-muted);
  text-align: right;
}
@media (max-width: 820px) {
  .tm-ben { grid-auto-rows: auto; }
  .tm-ben-ca, .tm-ben-cb, .tm-ben-cc, .tm-ben-cd,
  .tm-ben-ce, .tm-ben-cf, .tm-ben-cg {
    grid-column: 1 / -1; grid-row: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-ben-card { animation: none; transition: none; }
  .tm-ben-card:hover { transform: none; }
}
```

### 04. Neon Glass SaaS

**Type:** Pure CSS
**Description:** Dark glassmorphism with ambient orb drift, per-card neon accents, pulsing status dots, and a metrics strip. Use case: SaaS, developer tools, or tech platform. Syne for the metric numbers, JetBrains Mono for tags, four neon accent palettes (cyan/purple/green/orange).

**HTML:**
```html
<section class="tm-nsa" aria-label="Customer testimonials">
  <span class="tm-nsa-orb tm-nsa-o1" aria-hidden="true"></span>
  <span class="tm-nsa-orb tm-nsa-o2" aria-hidden="true"></span>
  <span class="tm-nsa-orb tm-nsa-o3" aria-hidden="true"></span>

  <div class="tm-nsa-metrics">
    <div class="tm-nsa-metric">
      <div class="tm-nsa-mnum">4.9&#9733;</div>
      <div class="tm-nsa-mlbl">Avg. Rating</div>
    </div>
    <div class="tm-nsa-metric">
      <div class="tm-nsa-mnum">98%</div>
      <div class="tm-nsa-mlbl">Recommend</div>
    </div>
    <div class="tm-nsa-metric">
      <div class="tm-nsa-mnum">14K+</div>
      <div class="tm-nsa-mlbl">Teams</div>
    </div>
    <div class="tm-nsa-metric">
      <div class="tm-nsa-mnum">3.2&times;</div>
      <div class="tm-nsa-mlbl">Avg. ROI</div>
    </div>
  </div>

  <div class="tm-nsa-grid">
    <article class="tm-nsa-card tm-nsa-c1">
      <span class="tm-nsa-ca-line" aria-hidden="true"></span>
      <span class="tm-nsa-gdot" aria-hidden="true"></span>
      <div class="tm-nsa-ctag">// productivity</div>
      <div class="tm-nsa-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-nsa-q">"We retired three separate tools the week we went live. The <strong>consolidation alone</strong> saved us 12 hours a week."</blockquote>
      <figcaption class="tm-nsa-author">
        <span class="tm-nsa-av" aria-hidden="true">TK</span>
        <span><cite class="tm-nsa-an">Takeshi Kato</cite><span class="tm-nsa-ar">Eng Lead &middot; Lattice AI</span></span>
      </figcaption>
    </article>

    <article class="tm-nsa-card tm-nsa-c2">
      <span class="tm-nsa-ca-line" aria-hidden="true"></span>
      <span class="tm-nsa-gdot" aria-hidden="true"></span>
      <div class="tm-nsa-ctag">// enterprise</div>
      <div class="tm-nsa-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-nsa-q">"SOC 2 compliance, <strong>multi-region failover</strong>, and still deployed faster than our last internal tool. Unreal."</blockquote>
      <figcaption class="tm-nsa-author">
        <span class="tm-nsa-av" aria-hidden="true">RN</span>
        <span><cite class="tm-nsa-an">Rachel Novak</cite><span class="tm-nsa-ar">CTO &middot; Vantage Systems</span></span>
      </figcaption>
    </article>

    <article class="tm-nsa-card tm-nsa-c3">
      <span class="tm-nsa-ca-line" aria-hidden="true"></span>
      <span class="tm-nsa-gdot" aria-hidden="true"></span>
      <div class="tm-nsa-ctag">// growth</div>
      <div class="tm-nsa-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-nsa-q">"Pipeline visibility went from gut feeling to <strong>real-time precision</strong>. We closed 30% more deals in Q3."</blockquote>
      <figcaption class="tm-nsa-author">
        <span class="tm-nsa-av" aria-hidden="true">LB</span>
        <span><cite class="tm-nsa-an">Luca Bianchi</cite><span class="tm-nsa-ar">VP Sales &middot; Corvis</span></span>
      </figcaption>
    </article>
  </div>

  <div class="tm-nsa-grid2">
    <article class="tm-nsa-card tm-nsa-c4">
      <span class="tm-nsa-ca-line" aria-hidden="true"></span>
      <span class="tm-nsa-gdot" aria-hidden="true"></span>
      <div class="tm-nsa-ctag">// devex</div>
      <div class="tm-nsa-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-nsa-q">"Setup took <strong>nine minutes</strong>. Not nine days. Nine minutes."</blockquote>
      <figcaption class="tm-nsa-author">
        <span class="tm-nsa-av" aria-hidden="true">AO</span>
        <span><cite class="tm-nsa-an">Amara Osei</cite><span class="tm-nsa-ar">Senior SRE &middot; Pulsar</span></span>
      </figcaption>
    </article>

    <article class="tm-nsa-card tm-nsa-c5 tm-nsa-wide">
      <span class="tm-nsa-ca-line" aria-hidden="true"></span>
      <span class="tm-nsa-gdot" aria-hidden="true"></span>
      <div class="tm-nsa-ctag">// platform &middot; featured</div>
      <div class="tm-nsa-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-nsa-q">"I've been in infrastructure for fifteen years. I've watched tools promise to change how teams work and I've watched most fail. This is the first platform where I saw my engineers <strong>actually excited</strong> to open a dashboard. That alone tells you everything."</blockquote>
      <figcaption class="tm-nsa-author">
        <span class="tm-nsa-av" aria-hidden="true">EM</span>
        <span><cite class="tm-nsa-an">Elisa Morrow</cite><span class="tm-nsa-ar">VP Infrastructure &middot; Aether Labs &middot; G2 Verified</span></span>
      </figcaption>
    </article>
  </div>
</section>
```

**CSS:**
```css
/* Neon Glass SaaS — dark glassmorphism with ambient orbs. The orbs are
   contained inside .tm-nsa via position:absolute + the wrapper's own
   overflow:hidden (NOT position:fixed like the original full-page mock).
   Cards use backdrop-filter for the frosted-glass effect over the orb
   bloom. Four neon accent palettes (cyan/purple/green/orange) cycle
   per card via .c1–.c5 modifiers. Pulsing status dots use a gentle
   blink animation that respects prefers-reduced-motion. */
.tm-nsa {
  --tm-nsa-bg:    #07070f;
  --tm-nsa-card:  rgba(255,255,255,0.04);
  --tm-nsa-cbr:   rgba(255,255,255,0.08);
  --tm-nsa-ch:    rgba(255,255,255,0.07);
  --tm-nsa-cy:    #00e5ff;
  --tm-nsa-cp:    #b44fff;
  --tm-nsa-cg:    #00ff9d;
  --tm-nsa-co:    #ff6b35;
  --tm-nsa-text:  #f0f0ff;
  --tm-nsa-muted: #6b6b8a;
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  background: var(--tm-nsa-bg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--tm-nsa-text);
  overflow: hidden;
  min-height: 520px;
}
.tm-nsa-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  opacity: 0.18;
  animation: tm-nsa-drift 12s ease-in-out infinite alternate;
}
.tm-nsa-o1 { width: 600px; height: 600px; background: var(--tm-nsa-cp); top: -200px; left: -200px; animation-delay: 0s; }
.tm-nsa-o2 { width: 500px; height: 500px; background: var(--tm-nsa-cy); bottom: -150px; right: -100px; animation-delay: -4s; }
.tm-nsa-o3 { width: 300px; height: 300px; background: var(--tm-nsa-cg); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -8s; opacity: 0.08; animation-name: tm-nsa-drift2; }
@keyframes tm-nsa-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.1); }
}
@keyframes tm-nsa-drift2 {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(calc(-50% + 20px), calc(-50% + 15px)) scale(1.08); }
}
.tm-nsa-metrics {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1px;
  background: var(--tm-nsa-cbr);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--tm-nsa-cbr);
}
.tm-nsa-metric {
  flex: 1;
  background: var(--tm-nsa-card);
  backdrop-filter: blur(20px);
  padding: 16px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tm-nsa-metric::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  transition: width 0.3s;
}
.tm-nsa-metric:hover::after { width: 70%; }
.tm-nsa-metric:nth-child(1)::after { background: var(--tm-nsa-cy); }
.tm-nsa-metric:nth-child(2)::after { background: var(--tm-nsa-cp); }
.tm-nsa-metric:nth-child(3)::after { background: var(--tm-nsa-cg); }
.tm-nsa-metric:nth-child(4)::after { background: var(--tm-nsa-co); }
.tm-nsa-mnum {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tm-nsa-metric:nth-child(1) .tm-nsa-mnum { color: var(--tm-nsa-cy); }
.tm-nsa-metric:nth-child(2) .tm-nsa-mnum { color: var(--tm-nsa-cp); }
.tm-nsa-metric:nth-child(3) .tm-nsa-mnum { color: var(--tm-nsa-cg); }
.tm-nsa-metric:nth-child(4) .tm-nsa-mnum { color: var(--tm-nsa-co); }
.tm-nsa-mlbl {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-nsa-muted);
  margin-top: 4px;
}
.tm-nsa-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.tm-nsa-grid2 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
}
.tm-nsa-card {
  background: var(--tm-nsa-card);
  border: 1px solid var(--tm-nsa-cbr);
  border-radius: 16px;
  padding: 24px 22px;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
  animation: tm-nsa-su 0.7s cubic-bezier(.22, 1, .36, 1) both;
}
.tm-nsa-card:hover {
  background: var(--tm-nsa-ch);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.tm-nsa-grid .tm-nsa-card:nth-child(1) { animation-delay: 0.05s; }
.tm-nsa-grid .tm-nsa-card:nth-child(2) { animation-delay: 0.12s; }
.tm-nsa-grid .tm-nsa-card:nth-child(3) { animation-delay: 0.19s; }
.tm-nsa-grid2 .tm-nsa-card:nth-child(1) { animation-delay: 0.26s; }
.tm-nsa-grid2 .tm-nsa-card:nth-child(2) { animation-delay: 0.33s; }
@keyframes tm-nsa-su {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tm-nsa-ca-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  opacity: 0.7;
  transition: opacity 0.35s, height 0.35s;
}
.tm-nsa-card:hover .tm-nsa-ca-line { opacity: 1; height: 2px; }
.tm-nsa-c1 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-cy), transparent); }
.tm-nsa-c2 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-cp), transparent); }
.tm-nsa-c3 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-cg), transparent); }
.tm-nsa-c4 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-co), transparent); }
.tm-nsa-c5 .tm-nsa-ca-line { background: linear-gradient(to right, var(--tm-nsa-cy), var(--tm-nsa-cp)); }
.tm-nsa-gdot {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: tm-nsa-blink 3s ease-in-out infinite;
}
.tm-nsa-c1 .tm-nsa-gdot { background: var(--tm-nsa-cy); box-shadow: 0 0 8px var(--tm-nsa-cy); }
.tm-nsa-c2 .tm-nsa-gdot { background: var(--tm-nsa-cp); box-shadow: 0 0 8px var(--tm-nsa-cp); }
.tm-nsa-c3 .tm-nsa-gdot { background: var(--tm-nsa-cg); box-shadow: 0 0 8px var(--tm-nsa-cg); }
.tm-nsa-c4 .tm-nsa-gdot { background: var(--tm-nsa-co); box-shadow: 0 0 8px var(--tm-nsa-co); }
.tm-nsa-c5 .tm-nsa-gdot { background: var(--tm-nsa-cy); box-shadow: 0 0 8px var(--tm-nsa-cy); }
@keyframes tm-nsa-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.tm-nsa-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 1px;
}
.tm-nsa-c1 .tm-nsa-stars { color: var(--tm-nsa-cy); }
.tm-nsa-c2 .tm-nsa-stars { color: var(--tm-nsa-cp); }
.tm-nsa-c3 .tm-nsa-stars { color: var(--tm-nsa-cg); }
.tm-nsa-c4 .tm-nsa-stars { color: var(--tm-nsa-co); }
.tm-nsa-c5 .tm-nsa-stars { color: var(--tm-nsa-cy); }
.tm-nsa-q {
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(240,240,255,0.78);
  margin: 0 0 18px;
  font-weight: 300;
  font-style: normal;
}
.tm-nsa-q strong { font-weight: 600; color: var(--tm-nsa-text); }
.tm-nsa-author {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.tm-nsa-av {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
}
.tm-nsa-c1 .tm-nsa-av { background: rgba(0,229,255,0.12);  color: var(--tm-nsa-cy); border: 1px solid rgba(0,229,255,0.2); }
.tm-nsa-c2 .tm-nsa-av { background: rgba(180,79,255,0.12); color: var(--tm-nsa-cp); border: 1px solid rgba(180,79,255,0.2); }
.tm-nsa-c3 .tm-nsa-av { background: rgba(0,255,157,0.12);  color: var(--tm-nsa-cg); border: 1px solid rgba(0,255,157,0.2); }
.tm-nsa-c4 .tm-nsa-av { background: rgba(255,107,53,0.12); color: var(--tm-nsa-co); border: 1px solid rgba(255,107,53,0.2); }
.tm-nsa-c5 .tm-nsa-av { background: rgba(0,229,255,0.12);  color: var(--tm-nsa-cy); border: 1px solid rgba(0,229,255,0.2); }
.tm-nsa-an {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--tm-nsa-text);
  line-height: 1.3;
  display: block;
}
.tm-nsa-ar {
  font-size: 9px;
  color: var(--tm-nsa-muted);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.tm-nsa-ctag {
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
  margin-bottom: 10px;
  display: inline-block;
}
.tm-nsa-c1 .tm-nsa-ctag { background: rgba(0,229,255,0.1);  color: var(--tm-nsa-cy); }
.tm-nsa-c2 .tm-nsa-ctag { background: rgba(180,79,255,0.1); color: var(--tm-nsa-cp); }
.tm-nsa-c3 .tm-nsa-ctag { background: rgba(0,255,157,0.1);  color: var(--tm-nsa-cg); }
.tm-nsa-c4 .tm-nsa-ctag { background: rgba(255,107,53,0.1); color: var(--tm-nsa-co); }
.tm-nsa-c5 .tm-nsa-ctag { background: rgba(0,229,255,0.1);  color: var(--tm-nsa-cy); }
.tm-nsa-wide .tm-nsa-q { font-size: 1rem; }
@media (max-width: 820px) {
  .tm-nsa-grid  { grid-template-columns: 1fr; }
  .tm-nsa-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-nsa-orb, .tm-nsa-gdot, .tm-nsa-card { animation: none; }
  .tm-nsa-card:hover { transform: none; }
}
```

### 05. Retro Food Review

**Type:** Pure CSS
**Description:** Graph-paper background, terracotta/olive/mustard palette, fork ratings, a stamped score box, and vintage editorial layout. Use case: restaurant, food brand, or hospitality. Abril Fatface for the pull quote, Courier Prime for stamps and monospace meta.

**HTML:**
```html
<section class="tm-ret" aria-label="Diner reviews">
  <header class="tm-ret-stripe">
    <div class="tm-ret-stripe-title">DINER'S DIGEST — VERIFIED REVIEWS</div>
    <div class="tm-ret-stripe-sub">EST. 1971 &middot; 4,820 VERIFIED DINERS</div>
  </header>

  <div class="tm-ret-layout">

    <article class="tm-ret-cell tm-ret-big">
      <span class="tm-ret-deco-circle" aria-hidden="true"></span>
      <div class="tm-ret-dish-stamp">&#9733; Review of the Month</div>
      <div class="tm-ret-fork-row" aria-label="5 out of 5 forks">
        <span class="tm-ret-fork" aria-hidden="true">&#9733;</span>
        <span class="tm-ret-fork" aria-hidden="true">&#9733;</span>
        <span class="tm-ret-fork" aria-hidden="true">&#9733;</span>
        <span class="tm-ret-fork" aria-hidden="true">&#9733;</span>
        <span class="tm-ret-fork" aria-hidden="true">&#9733;</span>
      </div>
      <blockquote class="tm-ret-big-pull">The truffle risotto alone is worth the trip from another city.</blockquote>
      <p class="tm-ret-body-text">I've dined at three Michelin-starred restaurants this year and this kitchen competes with every one of them. The <em>risotto</em> has a depth of flavor that only comes from someone who has cooked it a thousand times and still cares. The service is unhurried. The lighting is exactly right. Come here for a birthday, an anniversary, or an ordinary Tuesday that deserves to feel extraordinary.</p>
      <figcaption class="tm-ret-chef-tag">
        <span class="tm-ret-chef-icon" aria-hidden="true">GH</span>
        <span><cite class="tm-ret-chef-name">Gideon Harlow</cite><span class="tm-ret-chef-role">Food critic &middot; The Table Magazine</span></span>
      </figcaption>
    </article>

    <div class="tm-ret-cell tm-ret-tall">
      <span class="tm-ret-vert-label" aria-hidden="true">Guest Reviews</span>
      <div class="tm-ret-score-box">
        <div class="tm-ret-score-num">9.4</div>
        <div class="tm-ret-score-lbl">/ 10 &middot; 4,820 diners</div>
      </div>
      <article>
        <div class="tm-ret-fork-row" aria-label="5 out of 5 forks">
          <span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span>
        </div>
        <blockquote class="tm-ret-sm-quote">"The pasta is handmade. You can taste it."</blockquote>
        <figcaption class="tm-ret-chef-tag">
          <span class="tm-ret-chef-icon tm-ret-icon-olive" aria-hidden="true">ML</span>
          <span><cite class="tm-ret-chef-name">Mira Laszlo</cite><span class="tm-ret-chef-role">Regular diner</span></span>
        </figcaption>
      </article>
      <article>
        <div class="tm-ret-fork-row" aria-label="4 out of 5 forks">
          <span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork tm-ret-fork-empty">&#9733;</span>
        </div>
        <blockquote class="tm-ret-sm-quote">"Best wood-fired bread in the neighbourhood. Period."</blockquote>
        <figcaption class="tm-ret-chef-tag">
          <span class="tm-ret-chef-icon tm-ret-icon-mustard" aria-hidden="true">PO</span>
          <span><cite class="tm-ret-chef-name">Pablo Ortega</cite><span class="tm-ret-chef-role">Weekend regular</span></span>
        </figcaption>
      </article>
    </div>

    <article class="tm-ret-cell tm-ret-bot">
      <div class="tm-ret-fork-row" aria-label="5 out of 5 forks">
        <span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span><span class="tm-ret-fork">&#9733;</span>
      </div>
      <blockquote class="tm-ret-sm-quote">"I don't usually write reviews. I am writing this one."</blockquote>
      <p class="tm-ret-body-text">Three courses, two hours, zero regrets. The panna cotta changed my mind about panna cotta.</p>
      <figcaption class="tm-ret-chef-tag">
        <span class="tm-ret-chef-icon" aria-hidden="true">SA</span>
        <span><cite class="tm-ret-chef-name">Sofía Arenas</cite><span class="tm-ret-chef-role">First-time visitor</span></span>
      </figcaption>
    </article>

  </div>
</section>
```

**CSS:**
```css
/* Retro Food Review — graph-paper background contained inside the
   wrapper (NOT body-level like the original mock). Terracotta /
   olive / mustard palette evokes 1970s editorial food magazines.
   Hover tints each cell to a slightly warmer cream. */
.tm-ret {
  --tm-ret-bg:         #f0e6c8;
  --tm-ret-terracotta: #c4522a;
  --tm-ret-olive:      #5c6b2e;
  --tm-ret-mustard:    #d4a017;
  --tm-ret-cream:      #faf4e1;
  --tm-ret-dark:       #1e1a12;
  --tm-ret-rust:       #a83820;
  --tm-ret-sage:       #7a8c5a;
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  background: var(--tm-ret-bg);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,0.04) 39px, rgba(0,0,0,0.04) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,0.04) 39px, rgba(0,0,0,0.04) 40px);
  font-family: 'Karla', system-ui, sans-serif;
  color: var(--tm-ret-dark);
  min-height: 500px;
}
.tm-ret-stripe {
  background: var(--tm-ret-terracotta);
  color: var(--tm-ret-cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  margin-bottom: 30px;
  border: 2px solid var(--tm-ret-dark);
}
.tm-ret-stripe-title {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}
.tm-ret-stripe-sub {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.tm-ret-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  border: 2px solid var(--tm-ret-dark);
}
.tm-ret-cell {
  border: 1px solid var(--tm-ret-dark);
  padding: 26px 22px;
  position: relative;
  background: var(--tm-ret-cream);
  transition: background 0.2s;
}
.tm-ret-cell:hover { background: var(--tm-ret-bg); }
.tm-ret-big {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  border-right: 2px solid var(--tm-ret-dark);
}
.tm-ret-tall {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  border-left: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tm-ret-deco-circle {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px dashed var(--tm-ret-terracotta);
  opacity: 0.2;
  top: -20px;
  right: -20px;
  pointer-events: none;
}
.tm-ret-dish-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tm-ret-olive);
  color: var(--tm-ret-cream);
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.tm-ret-big-pull {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.15;
  color: var(--tm-ret-dark);
  margin: 0 0 18px;
  position: relative;
}
.tm-ret-big-pull::before {
  content: '"';
  font-size: 4.5rem;
  color: var(--tm-ret-terracotta);
  opacity: 0.15;
  position: absolute;
  top: -20px;
  left: -10px;
  line-height: 1;
  pointer-events: none;
}
.tm-ret-fork-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}
.tm-ret-fork {
  font-size: 14px;
  color: var(--tm-ret-terracotta);
}
.tm-ret-fork-empty { color: #ccc; }
.tm-ret-body-text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #3a3020;
  font-style: italic;
  margin: 0 0 18px;
}
.tm-ret-body-text em {
  font-style: normal;
  color: var(--tm-ret-terracotta);
  font-weight: 700;
}
.tm-ret-chef-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.tm-ret-chef-icon {
  width: 40px;
  height: 40px;
  background: var(--tm-ret-terracotta);
  color: var(--tm-ret-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: 14px;
  flex-shrink: 0;
}
.tm-ret-icon-olive   { background: var(--tm-ret-olive); }
.tm-ret-icon-mustard { background: var(--tm-ret-mustard); color: var(--tm-ret-dark); }
.tm-ret-chef-name {
  font-weight: 700;
  font-size: 13px;
  font-style: normal;
  color: var(--tm-ret-dark);
  line-height: 1.3;
  display: block;
}
.tm-ret-chef-role {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 10px;
  color: var(--tm-ret-sage);
  letter-spacing: 0.08em;
}
.tm-ret-sm-quote {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--tm-ret-dark);
  margin: 0 0 14px;
  position: relative;
}
.tm-ret-sm-quote::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: var(--tm-ret-mustard);
  margin-top: 10px;
}
.tm-ret-vert-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tm-ret-terracotta);
  opacity: 0.5;
  position: absolute;
  right: 10px;
  top: 50%;
}
.tm-ret-score-box {
  background: var(--tm-ret-mustard);
  border: 2px solid var(--tm-ret-dark);
  padding: 12px 14px;
  text-align: center;
}
.tm-ret-score-num {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: 2.4rem;
  color: var(--tm-ret-dark);
  line-height: 1;
}
.tm-ret-score-lbl {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--tm-ret-rust);
  text-transform: uppercase;
  margin-top: 2px;
}
.tm-ret-bot {
  background: var(--tm-ret-olive);
  border-top: 2px solid var(--tm-ret-dark);
}
.tm-ret-bot:hover { background: #6c7b3e; }
.tm-ret-bot .tm-ret-sm-quote { color: var(--tm-ret-cream); }
.tm-ret-bot .tm-ret-sm-quote::after { background: var(--tm-ret-mustard); }
.tm-ret-bot .tm-ret-body-text { color: rgba(250,244,225,0.75); }
.tm-ret-bot .tm-ret-chef-icon { background: var(--tm-ret-cream); color: var(--tm-ret-olive); }
.tm-ret-bot .tm-ret-chef-name { color: var(--tm-ret-cream); }
.tm-ret-bot .tm-ret-chef-role { color: var(--tm-ret-sage); }
.tm-ret-bot .tm-ret-fork { color: var(--tm-ret-mustard); }
.tm-ret-bot .tm-ret-fork-empty { color: rgba(255,255,255,0.2); }
@media (max-width: 720px) {
  .tm-ret-layout { grid-template-columns: 1fr; }
  .tm-ret-big, .tm-ret-tall, .tm-ret-bot { grid-column: 1; grid-row: auto; }
  .tm-ret-big { border-right: 1px solid var(--tm-ret-dark); }
}
```

### 06. Agency Minimal

**Type:** Pure CSS
**Description:** Clean 5-column table-style list with full-bleed hover, slide-in row animations, a live-pulse "reviews this week" indicator, and a summary stat bar. Use case: design / consulting agency or professional services. Libre Baskerville italic for the pull quotes, Space Mono for metadata.

**HTML:**
```html
<section class="tm-min" aria-label="Client testimonials">
  <header class="tm-min-topbar">
    <div class="tm-min-topbar-l">Client testimonials &middot; Verified &middot; 2024</div>
    <div class="tm-min-topbar-r">
      <span class="tm-min-live-dot" aria-hidden="true"></span>
      <span class="tm-min-live-text">Live &middot; 348 reviews this week</span>
    </div>
  </header>

  <div class="tm-min-list">

    <article class="tm-min-row">
      <div class="tm-min-idx" aria-hidden="true">01</div>
      <div class="tm-min-author-col">
        <span class="tm-min-av" aria-hidden="true">EL</span>
        <cite class="tm-min-an">Elena Lowe</cite>
        <span class="tm-min-ar">CPO<br>Meridian Labs</span>
      </div>
      <div class="tm-min-quote-col">
        <blockquote class="tm-min-q-main">"The kind of clarity we'd been trying to manufacture for two years — they delivered in six weeks."</blockquote>
        <p class="tm-min-q-body">Product strategy, design system, and go-to-market narrative all aligned for the first time. I didn't think that was achievable in a single engagement.</p>
      </div>
      <div class="tm-min-meta-col">
        <div class="tm-min-meta-label">Service</div>
        <div class="tm-min-meta-val">Brand Strategy</div>
        <div class="tm-min-meta-label">Duration</div>
        <div class="tm-min-meta-val">6 weeks</div>
      </div>
      <div class="tm-min-stars-col">
        <div class="tm-min-star-num">5.0</div>
        <div class="tm-min-star-sub">out of 5</div>
        <div class="tm-min-pip-row" aria-label="5 out of 5">
          <span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span>
        </div>
      </div>
    </article>

    <article class="tm-min-row">
      <div class="tm-min-idx" aria-hidden="true">02</div>
      <div class="tm-min-author-col">
        <span class="tm-min-av" aria-hidden="true">DS</span>
        <cite class="tm-min-an">David Soo</cite>
        <span class="tm-min-ar">Founder<br>Arclight Ventures</span>
      </div>
      <div class="tm-min-quote-col">
        <blockquote class="tm-min-q-main">"Our fundraise closed at 140% of target. I trace a meaningful portion of that to the narrative work they did."</blockquote>
        <p class="tm-min-q-body">Investors kept commenting on how clear and compelling our pitch was. That clarity came from this team.</p>
      </div>
      <div class="tm-min-meta-col">
        <div class="tm-min-meta-label">Service</div>
        <div class="tm-min-meta-val">Pitch Design</div>
        <div class="tm-min-meta-label">Duration</div>
        <div class="tm-min-meta-val">3 weeks</div>
      </div>
      <div class="tm-min-stars-col">
        <div class="tm-min-star-num">5.0</div>
        <div class="tm-min-star-sub">out of 5</div>
        <div class="tm-min-pip-row" aria-label="5 out of 5">
          <span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span>
        </div>
      </div>
    </article>

    <article class="tm-min-row">
      <div class="tm-min-idx" aria-hidden="true">03</div>
      <div class="tm-min-author-col">
        <span class="tm-min-av" aria-hidden="true">NH</span>
        <cite class="tm-min-an">Nour Hassan</cite>
        <span class="tm-min-ar">Head of Design<br>Forma Studio</span>
      </div>
      <div class="tm-min-quote-col">
        <blockquote class="tm-min-q-main">"They didn't just execute the brief. They improved it."</blockquote>
        <p class="tm-min-q-body">Every design handoff came with a rationale I could explain to my stakeholders. That saved me hours of back-and-forth every single week.</p>
      </div>
      <div class="tm-min-meta-col">
        <div class="tm-min-meta-label">Service</div>
        <div class="tm-min-meta-val">UI / Design</div>
        <div class="tm-min-meta-label">Duration</div>
        <div class="tm-min-meta-val">Ongoing</div>
      </div>
      <div class="tm-min-stars-col">
        <div class="tm-min-star-num">4.9</div>
        <div class="tm-min-star-sub">out of 5</div>
        <div class="tm-min-pip-row" aria-label="4.9 out of 5">
          <span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip tm-min-pip-half"></span>
        </div>
      </div>
    </article>

    <article class="tm-min-row">
      <div class="tm-min-idx" aria-hidden="true">04</div>
      <div class="tm-min-author-col">
        <span class="tm-min-av" aria-hidden="true">KW</span>
        <cite class="tm-min-an">Kate Wynne</cite>
        <span class="tm-min-ar">CEO<br>Ovation Health</span>
      </div>
      <div class="tm-min-quote-col">
        <blockquote class="tm-min-q-main">"We rebranded during our most critical growth phase. It was bold and it was right."</blockquote>
        <p class="tm-min-q-body">Our NPS jumped 18 points in the quarter following launch. Coincidence? Our team doesn't think so.</p>
      </div>
      <div class="tm-min-meta-col">
        <div class="tm-min-meta-label">Service</div>
        <div class="tm-min-meta-val">Rebrand</div>
        <div class="tm-min-meta-label">Duration</div>
        <div class="tm-min-meta-val">12 weeks</div>
      </div>
      <div class="tm-min-stars-col">
        <div class="tm-min-star-num">5.0</div>
        <div class="tm-min-star-sub">out of 5</div>
        <div class="tm-min-pip-row" aria-label="5 out of 5">
          <span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span><span class="tm-min-pip"></span>
        </div>
      </div>
    </article>

  </div>

  <footer class="tm-min-sum-row">
    <div class="tm-min-sum-stat"><div class="tm-min-sum-num">4.98</div><div class="tm-min-sum-lbl">Avg. score</div></div>
    <div class="tm-min-sum-divider" aria-hidden="true"></div>
    <div class="tm-min-sum-stat"><div class="tm-min-sum-num">348</div><div class="tm-min-sum-lbl">Reviews / week</div></div>
    <div class="tm-min-sum-divider" aria-hidden="true"></div>
    <div class="tm-min-sum-stat"><div class="tm-min-sum-num">100%</div><div class="tm-min-sum-lbl">Verified clients</div></div>
    <div class="tm-min-sum-divider" aria-hidden="true"></div>
    <div class="tm-min-sum-stat"><div class="tm-min-sum-num">96%</div><div class="tm-min-sum-lbl">Recommend</div></div>
  </footer>
</section>
```

**CSS:**
```css
/* Agency Minimal — clean 5-col table list. Each .tm-min-row is a
   semantic <article>. On hover the row gets a warm tint and "bleeds"
   visually full-width via negative margin. The live-pulse dot signals
   freshness. Library Baskerville italic for the pull quote distinguishes
   it from the body copy; Space Mono drives every uppercase metadata. */
.tm-min {
  --tm-min-bg:     #f8f7f4;
  --tm-min-ink:    #111111;
  --tm-min-border: #e0ddd6;
  --tm-min-accent: #2563eb;
  --tm-min-muted:  #888880;
  --tm-min-warm:   #f0ece4;
  position: relative;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 40px);
  background: var(--tm-min-bg);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--tm-min-ink);
  min-height: 520px;
}
.tm-min-topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--tm-min-border);
  padding-bottom: 16px;
  margin-bottom: 36px;
}
.tm-min-topbar-l {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-min-muted);
}
.tm-min-topbar-r {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tm-min-live-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: tm-min-livepulse 2s infinite;
}
@keyframes tm-min-livepulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
.tm-min-live-text {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #22c55e;
}
.tm-min-list {
  display: flex;
  flex-direction: column;
}
.tm-min-row {
  display: grid;
  grid-template-columns: 40px 1fr 2.5fr 1.2fr 120px;
  align-items: start;
  gap: 0;
  border-bottom: 1px solid var(--tm-min-border);
  padding: 24px 0;
  transition: background 0.2s, padding 0.2s, margin 0.2s;
  animation: tm-min-rowin 0.6s ease both;
}
.tm-min-row:first-child { border-top: 1px solid var(--tm-min-border); }
.tm-min-row:hover {
  background: var(--tm-min-warm);
  margin: 0 calc(-1 * clamp(20px, 3vw, 40px));
  padding-left: clamp(20px, 3vw, 40px);
  padding-right: clamp(20px, 3vw, 40px);
}
.tm-min-row:nth-child(1) { animation-delay: 0.04s; }
.tm-min-row:nth-child(2) { animation-delay: 0.10s; }
.tm-min-row:nth-child(3) { animation-delay: 0.16s; }
.tm-min-row:nth-child(4) { animation-delay: 0.22s; }
@keyframes tm-min-rowin {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tm-min-idx {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--tm-min-muted);
  padding-top: 4px;
}
.tm-min-author-col { padding-right: 24px; }
.tm-min-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tm-min-ink);
  color: var(--tm-min-bg);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  margin-bottom: 8px;
}
.tm-min-an {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--tm-min-ink);
  line-height: 1.3;
}
.tm-min-ar {
  font-size: 10px;
  color: var(--tm-min-muted);
  margin-top: 2px;
  line-height: 1.4;
  display: block;
}
.tm-min-quote-col { padding-right: 32px; }
.tm-min-q-main {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--tm-min-ink);
  margin: 0 0 12px;
}
.tm-min-q-body {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #555;
  font-weight: 300;
  margin: 0;
}
.tm-min-meta-col { padding-right: 16px; }
.tm-min-meta-label {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-min-muted);
  margin-bottom: 6px;
}
.tm-min-meta-val {
  font-size: 12px;
  color: var(--tm-min-ink);
  font-weight: 500;
  margin-bottom: 12px;
}
.tm-min-stars-col { text-align: right; }
.tm-min-star-num {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.7rem;
  color: var(--tm-min-ink);
  line-height: 1;
}
.tm-min-star-sub {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-min-muted);
  margin-top: 4px;
}
.tm-min-pip-row {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  margin-top: 8px;
}
.tm-min-pip {
  width: 16px;
  height: 3px;
  background: var(--tm-min-ink);
  border-radius: 2px;
}
.tm-min-pip-half {
  background: linear-gradient(to right, var(--tm-min-ink) 80%, var(--tm-min-border) 80%);
}
.tm-min-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 2px solid var(--tm-min-ink);
}
.tm-min-sum-stat {
  text-align: center;
  flex: 1;
}
.tm-min-sum-num {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.8rem;
  color: var(--tm-min-ink);
}
.tm-min-sum-lbl {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-min-muted);
  margin-top: 4px;
}
.tm-min-sum-divider {
  width: 1px;
  height: 40px;
  background: var(--tm-min-border);
  flex-shrink: 0;
}
@media (max-width: 820px) {
  .tm-min-row {
    grid-template-columns: 30px 1fr;
    gap: 12px 8px;
  }
  .tm-min-quote-col, .tm-min-meta-col, .tm-min-stars-col {
    grid-column: 2;
    padding-right: 0;
    margin-top: 12px;
    text-align: left;
  }
  .tm-min-pip-row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-min-row { animation: none; transition: none; }
  .tm-min-row:hover { margin: 0; padding-left: 0; padding-right: 0; }
  .tm-min-live-dot { animation: none; }
}
```

### 07. Crypto Aurora

**Type:** Pure CSS
**Description:** Deep-space aurora mesh background with animated gradient bands, hexagon clip-path avatars, holographic shimmer card borders on hover, volume bars, on-chain wallet hashes, and neon-per-chain color accents. Use case: DeFi / Web3 protocol. Oxanium for headings, Space Mono for hash addresses.

**HTML:**
```html
<section class="tm-cau" aria-label="On-chain reviews">
  <span class="tm-cau-aurora" aria-hidden="true">
    <span class="tm-cau-band tm-cau-ab1"></span>
    <span class="tm-cau-band tm-cau-ab2"></span>
    <span class="tm-cau-band tm-cau-ab3"></span>
    <span class="tm-cau-band tm-cau-ab4"></span>
  </span>

  <header class="tm-cau-header">
    <div class="tm-cau-logo-text">ChainVerify &middot; On-Chain Reviews</div>
    <div class="tm-cau-header-stat">
      <div class="tm-cau-hstat-num">$2.4B</div>
      <div class="tm-cau-hstat-lbl">volume protected &middot; 48,220 reviews</div>
    </div>
  </header>

  <div class="tm-cau-grid">
    <article class="tm-cau-card tm-cau-c1 tm-cau-feat">
      <span class="tm-cau-al" aria-hidden="true"></span>
      <span class="tm-cau-qm" aria-hidden="true">&ldquo;</span>
      <div class="tm-cau-token">&#9670; DeFi &middot; Verified Trader</div>
      <div class="tm-cau-vol-bar" aria-hidden="true">
        <span class="tm-cau-vb" style="height:8px"></span>
        <span class="tm-cau-vb" style="height:14px"></span>
        <span class="tm-cau-vb" style="height:10px"></span>
        <span class="tm-cau-vb" style="height:18px"></span>
        <span class="tm-cau-vb" style="height:12px"></span>
        <span class="tm-cau-vb" style="height:20px"></span>
        <span class="tm-cau-vb" style="height:8px"></span>
      </div>
      <div class="tm-cau-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-cau-q">I've used six DeFi protocols in three years. The <b>gas optimization alone</b> paid for itself in a single month of active trading. No rug, no drama — just protocol doing exactly what it promised, on-chain, auditable, forever. That kind of integrity is rare in this space.</blockquote>
      <figcaption class="tm-cau-author">
        <span class="tm-cau-av" aria-hidden="true">0x</span>
        <span><cite class="tm-cau-an">0xVelvet.eth</cite><span class="tm-cau-ar">DeFi power user &middot; 3y holder</span></span>
      </figcaption>
      <span class="tm-cau-wallet" aria-hidden="true">0x7f4a...c3b2</span>
    </article>

    <article class="tm-cau-card tm-cau-c2">
      <span class="tm-cau-al" aria-hidden="true"></span>
      <div class="tm-cau-token">&#9670; NFT &middot; Verified Collector</div>
      <div class="tm-cau-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-cau-q">Minted on day one. Floor is <b>14&times; entry</b>. The roadmap delivered every milestone. This is what web3 was supposed to feel like.</blockquote>
      <figcaption class="tm-cau-author">
        <span class="tm-cau-av" aria-hidden="true">NK</span>
        <span><cite class="tm-cau-an">NeonKoi.eth</cite><span class="tm-cau-ar">NFT collector &middot; Top 0.1%</span></span>
      </figcaption>
      <span class="tm-cau-wallet" aria-hidden="true">0x2a9f...81de</span>
    </article>

    <article class="tm-cau-card tm-cau-c3">
      <span class="tm-cau-al" aria-hidden="true"></span>
      <div class="tm-cau-token">&#9670; DAO &middot; Core Contributor</div>
      <div class="tm-cau-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-cau-q">Governance is <b>actually governable</b>. Voted on 40+ proposals. My voice moved the protocol. That's not something I can say about many DAOs.</blockquote>
      <figcaption class="tm-cau-author">
        <span class="tm-cau-av" aria-hidden="true">PR</span>
        <span><cite class="tm-cau-an">ProtocolRaven</cite><span class="tm-cau-ar">DAO core contributor</span></span>
      </figcaption>
      <span class="tm-cau-wallet" aria-hidden="true">0xb3d1...59ac</span>
    </article>

    <article class="tm-cau-card tm-cau-c4">
      <span class="tm-cau-al" aria-hidden="true"></span>
      <div class="tm-cau-token">&#9670; Yield &middot; Verified</div>
      <div class="tm-cau-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-cau-q"><b>38% APY</b>, zero impermanent loss surprises. The risk dashboard is the most honest I've seen in DeFi. Period.</blockquote>
      <figcaption class="tm-cau-author">
        <span class="tm-cau-av" aria-hidden="true">AL</span>
        <span><cite class="tm-cau-an">AlphaSatoshi</cite><span class="tm-cau-ar">Yield farmer &middot; 2y</span></span>
      </figcaption>
      <span class="tm-cau-wallet" aria-hidden="true">0x4e8c...f12a</span>
    </article>

    <article class="tm-cau-card tm-cau-c5">
      <span class="tm-cau-al" aria-hidden="true"></span>
      <div class="tm-cau-token">&#9670; Bridge &middot; Verified</div>
      <div class="tm-cau-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-cau-q">Bridged <b>$400K across chains</b> last quarter. Zero failed transactions. Settlement was faster than CEX withdrawals. Genuinely shocked.</blockquote>
      <figcaption class="tm-cau-author">
        <span class="tm-cau-av" aria-hidden="true">WX</span>
        <span><cite class="tm-cau-an">WhalexBTC</cite><span class="tm-cau-ar">Multi-chain trader</span></span>
      </figcaption>
      <span class="tm-cau-wallet" aria-hidden="true">0x9c2b...7e34</span>
    </article>
  </div>
</section>
```

**CSS:**
```css
/* Crypto Aurora — animated aurora mesh background. The aurora layer
   is contained inside .tm-cau via overflow:hidden + position:absolute
   (not viewport-fixed). Holographic shimmer borders fire on card hover
   via a gradient inset + mask trick. Hexagon avatars use clip-path. */
.tm-cau {
  --tm-cau-bg:     #04040f;
  --tm-cau-s1:     #7b2fff;
  --tm-cau-s2:     #00d4ff;
  --tm-cau-s3:     #ff2d9b;
  --tm-cau-s4:     #39ff7a;
  --tm-cau-card:   rgba(255,255,255,0.035);
  --tm-cau-border: rgba(255,255,255,0.07);
  --tm-cau-text:   #e8e8ff;
  --tm-cau-muted:  #6060a0;
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  background: var(--tm-cau-bg);
  font-family: 'Oxanium', system-ui, sans-serif;
  color: var(--tm-cau-text);
  overflow: hidden;
  min-height: 520px;
}
.tm-cau-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.tm-cau-band {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: tm-cau-float 10s ease-in-out infinite alternate;
}
.tm-cau-ab1 { width: 700px; height: 350px; background: linear-gradient(135deg, var(--tm-cau-s1), transparent); top: -100px; left: -100px; opacity: 0.25; animation-delay: 0s; }
.tm-cau-ab2 { width: 600px; height: 300px; background: linear-gradient(45deg, var(--tm-cau-s2), transparent); top: 100px; right: -150px; opacity: 0.2; animation-delay: -3s; }
.tm-cau-ab3 { width: 500px; height: 250px; background: linear-gradient(225deg, var(--tm-cau-s3), transparent); bottom: -80px; left: 200px; opacity: 0.18; animation-delay: -6s; }
.tm-cau-ab4 { width: 400px; height: 200px; background: linear-gradient(315deg, var(--tm-cau-s4), transparent); bottom: 50px; right: 100px; opacity: 0.14; animation-delay: -9s; }
@keyframes tm-cau-float {
  from { transform: translate(0,0) scale(1) rotate(0deg); }
  to   { transform: translate(30px,20px) scale(1.12) rotate(8deg); }
}
.tm-cau-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.tm-cau-logo-text {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tm-cau-s2);
}
.tm-cau-header-stat { text-align: right; }
.tm-cau-hstat-num {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--tm-cau-s1), var(--tm-cau-s2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.tm-cau-hstat-lbl {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tm-cau-muted);
  margin-top: 3px;
}
.tm-cau-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2px;
}
.tm-cau-card {
  background: var(--tm-cau-card);
  border: 1px solid var(--tm-cau-border);
  backdrop-filter: blur(24px);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  animation: tm-cau-in 0.7s cubic-bezier(.22, 1, .36, 1) both;
  display: flex;
  flex-direction: column;
}
.tm-cau-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-2px);
}
.tm-cau-card:nth-child(1) { animation-delay: 0.05s; }
.tm-cau-card:nth-child(2) { animation-delay: 0.12s; }
.tm-cau-card:nth-child(3) { animation-delay: 0.19s; }
.tm-cau-card:nth-child(4) { animation-delay: 0.26s; }
.tm-cau-card:nth-child(5) { animation-delay: 0.33s; }
@keyframes tm-cau-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tm-cau-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--tm-cau-s1), var(--tm-cau-s2), var(--tm-cau-s3), var(--tm-cau-s4));
  opacity: 0;
  transition: opacity 0.4s;
  z-index: -1;
}
.tm-cau-card:hover::before { opacity: 0.5; }
.tm-cau-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tm-cau-bg);
  opacity: 0.97;
  z-index: -1;
  transition: opacity 0.4s;
}
.tm-cau-card:hover::after { opacity: 0.94; }
.tm-cau-feat {
  grid-row: 1 / 3;
}
.tm-cau-al {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.tm-cau-c1 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s1), var(--tm-cau-s2)); }
.tm-cau-c2 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s2), var(--tm-cau-s4)); }
.tm-cau-c3 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s3), var(--tm-cau-s1)); }
.tm-cau-c4 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s4), var(--tm-cau-s2)); }
.tm-cau-c5 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s1), var(--tm-cau-s3)); }
.tm-cau-qm {
  font-size: 5rem;
  line-height: 0.8;
  font-weight: 800;
  opacity: 0.07;
  position: absolute;
  top: 16px;
  left: 20px;
  pointer-events: none;
  font-family: 'Oxanium', serif;
}
.tm-cau-c1 .tm-cau-qm { color: var(--tm-cau-s1); }
.tm-cau-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 14px;
  width: fit-content;
}
.tm-cau-c1 .tm-cau-token { background: rgba(123,47,255,0.15);  color: var(--tm-cau-s1); border: 1px solid rgba(123,47,255,0.3); }
.tm-cau-c2 .tm-cau-token { background: rgba(0,212,255,0.12);   color: var(--tm-cau-s2); border: 1px solid rgba(0,212,255,0.25); }
.tm-cau-c3 .tm-cau-token { background: rgba(255,45,155,0.12);  color: var(--tm-cau-s3); border: 1px solid rgba(255,45,155,0.25); }
.tm-cau-c4 .tm-cau-token { background: rgba(57,255,122,0.12);  color: var(--tm-cau-s4); border: 1px solid rgba(57,255,122,0.25); }
.tm-cau-c5 .tm-cau-token { background: rgba(123,47,255,0.15);  color: var(--tm-cau-s1); border: 1px solid rgba(123,47,255,0.3); }
.tm-cau-vol-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  margin-bottom: 12px;
}
.tm-cau-vb {
  width: 4px;
  background: currentColor;
  border-radius: 2px 2px 0 0;
  animation: tm-cau-vbanim 1.2s ease-in-out infinite alternate;
}
.tm-cau-c1 .tm-cau-vol-bar { color: rgba(123,47,255,0.6); }
.tm-cau-vb:nth-child(1) { animation-delay: 0s; }
.tm-cau-vb:nth-child(2) { animation-delay: 0.15s; }
.tm-cau-vb:nth-child(3) { animation-delay: 0.3s; }
.tm-cau-vb:nth-child(4) { animation-delay: 0.45s; }
.tm-cau-vb:nth-child(5) { animation-delay: 0.6s; }
.tm-cau-vb:nth-child(6) { animation-delay: 0.75s; }
.tm-cau-vb:nth-child(7) { animation-delay: 0.9s; }
@keyframes tm-cau-vbanim {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
.tm-cau-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
  font-size: 12px;
}
.tm-cau-c1 .tm-cau-stars, .tm-cau-c5 .tm-cau-stars { color: var(--tm-cau-s1); }
.tm-cau-c2 .tm-cau-stars { color: var(--tm-cau-s2); }
.tm-cau-c3 .tm-cau-stars { color: var(--tm-cau-s3); }
.tm-cau-c4 .tm-cau-stars { color: var(--tm-cau-s4); }
.tm-cau-q {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(232,232,255,0.78);
  font-weight: 300;
  margin: 0 0 20px;
  font-style: normal;
  flex: 1;
}
.tm-cau-q b { font-weight: 700; color: var(--tm-cau-text); }
.tm-cau-feat .tm-cau-q { font-size: 1.05rem; }
.tm-cau-author {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 14px;
  margin-top: auto;
}
.tm-cau-av {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Space Mono', ui-monospace, monospace;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  flex-shrink: 0;
}
.tm-cau-c1 .tm-cau-av, .tm-cau-c5 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s1), rgba(123,47,255,0.5)); color: #fff; }
.tm-cau-c2 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s2), rgba(0,212,255,0.5)); color: #000; }
.tm-cau-c3 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s3), rgba(255,45,155,0.5)); color: #fff; }
.tm-cau-c4 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s4), rgba(57,255,122,0.5)); color: #000; }
.tm-cau-an {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--tm-cau-text);
  line-height: 1.3;
  display: block;
}
.tm-cau-ar {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--tm-cau-muted);
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.tm-cau-wallet {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 8px;
  color: rgba(255,255,255,0.2);
  position: absolute;
  bottom: 10px;
  right: 12px;
  letter-spacing: 0.05em;
}
@media (max-width: 820px) {
  .tm-cau-grid { grid-template-columns: 1fr; }
  .tm-cau-feat { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-cau-band, .tm-cau-vb, .tm-cau-card { animation: none; }
  .tm-cau-card:hover { transform: none; }
}
```

### 08. EdTech Bright

**Type:** Pure CSS
**Description:** Confetti-dot background, SVG circular progress rings per card, spring-bounce hover, color-coded subject badges (math/code/bio/design/psych), achievement chips, and a dark "career switch" featured card. Use case: online learning platform. Nunito for headings, DM Sans for body.

**HTML:**
```html
<section class="tm-edu" aria-label="Learner testimonials">
  <header class="tm-edu-hdr">
    <div class="tm-edu-hdr-brand">
      <span class="tm-edu-brand-icon" aria-hidden="true">&#x1F393;</span>
      <div>
        <div class="tm-edu-brand-name">LearnSpark</div>
        <div class="tm-edu-brand-sub">Adaptive learning platform</div>
      </div>
    </div>
    <div class="tm-edu-hdr-stats">
      <div class="tm-edu-hstat tm-edu-sun"><div class="tm-edu-hstat-n">94%</div><div class="tm-edu-hstat-l">Completion rate</div></div>
      <div class="tm-edu-hstat tm-edu-sky"><div class="tm-edu-hstat-n">2.1M</div><div class="tm-edu-hstat-l">Learners</div></div>
      <div class="tm-edu-hstat tm-edu-mint"><div class="tm-edu-hstat-n">4.97&#9733;</div><div class="tm-edu-hstat-l">Avg rating</div></div>
    </div>
  </header>

  <div class="tm-edu-layout">

    <article class="tm-edu-card tm-edu-sun-card">
      <div class="tm-edu-ring-wrap" aria-hidden="true">
        <svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
          <circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
          <circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#f59e0b" stroke-dashoffset="13"></circle>
        </svg>
      </div>
      <div class="tm-edu-badge tm-edu-sun-badge">Mathematics</div>
      <div class="tm-edu-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-edu-q">"Failed calculus twice in college. Came to LearnSpark. Passed my <em>actuarial exam</em> on the first try. The adaptive pacing changed everything."</blockquote>
      <figcaption class="tm-edu-author">
        <span class="tm-edu-av tm-edu-sun-av" aria-hidden="true">TM</span>
        <span><cite class="tm-edu-an">Tobias Müller</cite><span class="tm-edu-ar">Actuarial student &middot; Germany</span></span>
      </figcaption>
      <span class="tm-edu-achiev" aria-hidden="true">Course completer</span>
    </article>

    <article class="tm-edu-card tm-edu-sky-card">
      <div class="tm-edu-ring-wrap" aria-hidden="true">
        <svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
          <circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
          <circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#2563eb" stroke-dashoffset="6"></circle>
        </svg>
      </div>
      <div class="tm-edu-badge tm-edu-sky-badge">Coding</div>
      <div class="tm-edu-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-edu-q">"Landed my <em>first dev job</em> six months after starting the Web Dev track. The project-based learning is genuinely how it should be taught."</blockquote>
      <figcaption class="tm-edu-author">
        <span class="tm-edu-av tm-edu-sky-av" aria-hidden="true">PA</span>
        <span><cite class="tm-edu-an">Priscilla Adom</cite><span class="tm-edu-ar">Junior developer &middot; Ghana</span></span>
      </figcaption>
    </article>

    <article class="tm-edu-card tm-edu-mint-card">
      <div class="tm-edu-ring-wrap" aria-hidden="true">
        <svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
          <circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
          <circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#10b981" stroke-dashoffset="19"></circle>
        </svg>
      </div>
      <div class="tm-edu-badge tm-edu-mint-badge">Biology</div>
      <div class="tm-edu-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-edu-q">"Got into medical school. My LearnSpark <em>MCAT biology</em> score was in the 98th percentile. Coincidence? I don't think so."</blockquote>
      <figcaption class="tm-edu-author">
        <span class="tm-edu-av tm-edu-mint-av" aria-hidden="true">SC</span>
        <span><cite class="tm-edu-an">Seo-Yeon Choi</cite><span class="tm-edu-ar">Med school applicant &middot; Korea</span></span>
      </figcaption>
      <span class="tm-edu-achiev" aria-hidden="true">Top 1% learner</span>
    </article>

    <article class="tm-edu-card tm-edu-coral-card">
      <div class="tm-edu-badge tm-edu-coral-badge">Design</div>
      <div class="tm-edu-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-edu-q">"The design thinking curriculum is <em>better than my $40K degree</em>. I mean that without exaggeration. Hired at a top-5 agency within 3 months."</blockquote>
      <figcaption class="tm-edu-author">
        <span class="tm-edu-av tm-edu-coral-av" aria-hidden="true">LR</span>
        <span><cite class="tm-edu-an">Lucia Romero</cite><span class="tm-edu-ar">UI designer &middot; Spain</span></span>
      </figcaption>
    </article>

    <article class="tm-edu-card tm-edu-lavender-card">
      <div class="tm-edu-badge tm-edu-lavender-badge">Psychology</div>
      <div class="tm-edu-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-edu-q">"The AI tutor remembered <em>where I struggled</em> three weeks ago and revisited it unprompted. That's better than most human tutors I've had."</blockquote>
      <figcaption class="tm-edu-author">
        <span class="tm-edu-av tm-edu-lavender-av" aria-hidden="true">NW</span>
        <span><cite class="tm-edu-an">Nia Williams</cite><span class="tm-edu-ar">PhD student &middot; UK</span></span>
      </figcaption>
    </article>

    <article class="tm-edu-card tm-edu-ink-card tm-edu-feat">
      <div class="tm-edu-badge tm-edu-white-badge">Career switch &middot; Featured</div>
      <div class="tm-edu-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-edu-q">"I was a high school PE teacher for 12 years. Not unhappy — just curious whether I could do more with my life. I finished the Data Science bootcamp in nine months, evenings only. Within two weeks of finishing, I had <em>three offers</em>. Accepted a senior analyst role at 2.4&times; my old salary."</blockquote>
      <figcaption class="tm-edu-author">
        <span class="tm-edu-av tm-edu-ink-av" aria-hidden="true">DK</span>
        <span><cite class="tm-edu-an">Damien Kowalski</cite><span class="tm-edu-ar">Former PE teacher &rarr; Data analyst &middot; Poland</span></span>
      </figcaption>
    </article>

  </div>
</section>
```

**CSS:**
```css
/* EdTech Bright — confetti-dot background contained in the wrapper.
   Six color families (sun/sky/mint/coral/lavender/ink) cycle through
   subject badges + avatar tints. SVG progress rings use stroke-dasharray
   to render a fillable circular arc. */
.tm-edu {
  --tm-edu-bg:       #fdf9f3;
  --tm-edu-ink:      #1a1a2e;
  --tm-edu-sun:      #ffb700;
  --tm-edu-sky:      #2563eb;
  --tm-edu-mint:     #10b981;
  --tm-edu-coral:    #f43f5e;
  --tm-edu-lavender: #8b5cf6;
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  background: var(--tm-edu-bg);
  background-image:
    radial-gradient(circle, rgba(255,183,0,0.15) 1px, transparent 1px),
    radial-gradient(circle, rgba(37,99,235,0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(16,185,129,0.1) 1px, transparent 1px);
  background-size: 60px 60px, 90px 90px, 120px 120px;
  background-position: 0 0, 30px 45px, 60px 15px;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--tm-edu-ink);
  min-height: 520px;
}
.tm-edu-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 18px;
}
.tm-edu-hdr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm-edu-brand-icon {
  width: 40px;
  height: 40px;
  background: var(--tm-edu-sun);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(255,183,0,0.4);
}
.tm-edu-brand-name {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--tm-edu-ink);
}
.tm-edu-brand-sub {
  font-size: 10px;
  color: #888;
  margin-top: -2px;
  font-weight: 400;
}
.tm-edu-hdr-stats { display: flex; gap: 22px; }
.tm-edu-hstat { text-align: center; }
.tm-edu-hstat-n {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--tm-edu-ink);
}
.tm-edu-hstat-l { font-size: 10px; color: #888; margin-top: 1px; }
.tm-edu-sun .tm-edu-hstat-n  { color: var(--tm-edu-sun); }
.tm-edu-sky .tm-edu-hstat-n  { color: var(--tm-edu-sky); }
.tm-edu-mint .tm-edu-hstat-n { color: var(--tm-edu-mint); }
.tm-edu-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tm-edu-card {
  border-radius: 20px;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 0.35s;
  animation: tm-edu-pop 0.65s cubic-bezier(.34, 1.2, .64, 1) both;
}
.tm-edu-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.tm-edu-card:nth-child(1) { animation-delay: 0.04s; }
.tm-edu-card:nth-child(2) { animation-delay: 0.10s; }
.tm-edu-card:nth-child(3) { animation-delay: 0.16s; }
.tm-edu-card:nth-child(4) { animation-delay: 0.22s; }
.tm-edu-card:nth-child(5) { animation-delay: 0.28s; }
.tm-edu-card:nth-child(6) { animation-delay: 0.34s; }
@keyframes tm-edu-pop {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tm-edu-sun-card      { background: linear-gradient(135deg, #fff8dc, #fff3ba); border: 2px solid rgba(255,183,0,0.2); }
.tm-edu-sky-card      { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid rgba(37,99,235,0.15); }
.tm-edu-mint-card     { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 2px solid rgba(16,185,129,0.15); }
.tm-edu-coral-card    { background: linear-gradient(135deg, #fff1f2, #ffe4e6); border: 2px solid rgba(244,63,94,0.15); }
.tm-edu-lavender-card { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 2px solid rgba(139,92,246,0.15); }
.tm-edu-ink-card      { background: var(--tm-edu-ink); border: 2px solid transparent; }
.tm-edu-feat          { grid-column: span 2; }
.tm-edu-ring-wrap {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
}
.tm-edu-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.tm-edu-ring-track {
  fill: none;
  stroke: rgba(0,0,0,0.08);
  stroke-width: 4;
}
.tm-edu-ring-prog {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 126;
}
.tm-edu-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.tm-edu-sun-badge      { background: rgba(255,183,0,0.2);  color: #b45309; }
.tm-edu-sky-badge      { background: rgba(37,99,235,0.12); color: var(--tm-edu-sky); }
.tm-edu-mint-badge     { background: rgba(16,185,129,0.15); color: #059669; }
.tm-edu-coral-badge    { background: rgba(244,63,94,0.12); color: var(--tm-edu-coral); }
.tm-edu-lavender-badge { background: rgba(139,92,246,0.15); color: var(--tm-edu-lavender); }
.tm-edu-white-badge    { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.tm-edu-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  font-size: 13px;
}
.tm-edu-sun-card .tm-edu-stars      { color: var(--tm-edu-sun); }
.tm-edu-sky-card .tm-edu-stars      { color: var(--tm-edu-sky); }
.tm-edu-mint-card .tm-edu-stars     { color: var(--tm-edu-mint); }
.tm-edu-coral-card .tm-edu-stars    { color: var(--tm-edu-coral); }
.tm-edu-lavender-card .tm-edu-stars { color: var(--tm-edu-lavender); }
.tm-edu-ink-card .tm-edu-stars      { color: var(--tm-edu-sun); }
.tm-edu-q {
  font-size: 0.88rem;
  line-height: 1.65;
  font-weight: 400;
  margin: 0 0 16px;
  color: #333;
  font-style: normal;
}
.tm-edu-ink-card .tm-edu-q { color: rgba(255,255,255,0.75); }
.tm-edu-q em { font-style: normal; font-weight: 700; }
.tm-edu-sun-card .tm-edu-q em      { color: #b45309; }
.tm-edu-sky-card .tm-edu-q em      { color: var(--tm-edu-sky); }
.tm-edu-mint-card .tm-edu-q em     { color: #059669; }
.tm-edu-coral-card .tm-edu-q em    { color: var(--tm-edu-coral); }
.tm-edu-lavender-card .tm-edu-q em { color: var(--tm-edu-lavender); }
.tm-edu-ink-card .tm-edu-q em      { color: var(--tm-edu-sun); }
.tm-edu-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm-edu-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.tm-edu-sun-av      { background: var(--tm-edu-sun); color: #7c5000; }
.tm-edu-sky-av      { background: var(--tm-edu-sky); color: #fff; }
.tm-edu-mint-av     { background: var(--tm-edu-mint); color: #fff; }
.tm-edu-coral-av    { background: var(--tm-edu-coral); color: #fff; }
.tm-edu-lavender-av { background: var(--tm-edu-lavender); color: #fff; }
.tm-edu-ink-av      { background: rgba(255,255,255,0.15); color: #fff; }
.tm-edu-an {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.3;
  display: block;
}
.tm-edu-ink-card .tm-edu-an { color: #fff; }
.tm-edu-ar { font-size: 10px; color: #888; margin-top: 2px; }
.tm-edu-ink-card .tm-edu-ar { color: rgba(255,255,255,0.4); }
.tm-edu-achiev {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: rgba(255,183,0,0.9);
  color: #7c5000;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}
@media (max-width: 820px) {
  .tm-edu-layout { grid-template-columns: 1fr; }
  .tm-edu-feat   { grid-column: 1; }
  .tm-edu-hdr-stats { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-edu-card { animation: none; transition: none; }
  .tm-edu-card:hover { transform: none; }
}
```

### 09. Luxury Real Estate

**Type:** Pure CSS
**Description:** Ultra-refined with 1px seam grid, Cormorant Garamond serif quotes, gold dash ratings instead of stars, property transaction values, corner triangle decorations, and a warm hover wash. Use case: premium property agency.

**HTML:**
```html
<section class="tm-lux" aria-label="Client experiences">
  <header class="tm-lux-prop-bar">
    <div class="tm-lux-pb-brand">Meridian Estates &middot; Verified Reviews</div>
    <div class="tm-lux-pb-meta">
      <div class="tm-lux-pb-item">Rating <span>9.8 / 10</span></div>
      <div class="tm-lux-pb-item">Transactions <span>4,200+</span></div>
      <div class="tm-lux-pb-item">Avg. value <span>$3.4M</span></div>
    </div>
  </header>

  <div class="tm-lux-section">
    <div class="tm-lux-slabel"><span class="tm-lux-slabel-line"></span><span class="tm-lux-slabel-text">Client Experiences</span><span class="tm-lux-slabel-line2"></span></div>

    <div class="tm-lux-layout">

      <article class="tm-lux-cell tm-lux-dark">
        <span class="tm-lux-corner-deco" aria-hidden="true"></span>
        <div class="tm-lux-pstat"><div class="tm-lux-pstat-num">$8.2M</div><div class="tm-lux-pstat-lbl">Transaction value</div></div>
        <div class="tm-lux-prop-tag">Penthouse &middot; Upper East Side</div>
        <div class="tm-lux-star-row" aria-label="5 out of 5">
          <span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span>
        </div>
        <blockquote class="tm-lux-bq">"We told them what we wanted. Three weeks later, we were signing contracts on a property we didn't know existed — and it was <em>exactly right</em>."</blockquote>
        <span class="tm-lux-grule" aria-hidden="true"></span>
        <figcaption class="tm-lux-author">
          <span class="tm-lux-av-rect" aria-hidden="true">CH</span>
          <span><cite class="tm-lux-an">Charles &amp; Helena Voss</cite><span class="tm-lux-ar">Buyers &middot; New York, NY</span></span>
        </figcaption>
        <span class="tm-lux-big-score" aria-hidden="true">9.8</span>
      </article>

      <article class="tm-lux-cell">
        <span class="tm-lux-corner-deco" aria-hidden="true"></span>
        <div class="tm-lux-pstat"><div class="tm-lux-pstat-num">$2.7M</div><div class="tm-lux-pstat-lbl">Sale price</div></div>
        <div class="tm-lux-prop-tag">Villa &middot; Malibu</div>
        <div class="tm-lux-star-row" aria-label="5 out of 5">
          <span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span>
        </div>
        <blockquote class="tm-lux-bq">"Listed on a Friday. Received <em>eleven offers</em> by Sunday. Above asking. The market intelligence this team brings is extraordinary."</blockquote>
        <span class="tm-lux-grule" aria-hidden="true"></span>
        <figcaption class="tm-lux-author">
          <span class="tm-lux-av-rect" aria-hidden="true">AP</span>
          <span><cite class="tm-lux-an">Anastasia Park</cite><span class="tm-lux-ar">Seller &middot; Malibu, CA</span></span>
        </figcaption>
      </article>

      <article class="tm-lux-cell">
        <span class="tm-lux-corner-deco" aria-hidden="true"></span>
        <div class="tm-lux-prop-tag">Estate &middot; Greenwich</div>
        <div class="tm-lux-star-row" aria-label="5 out of 5">
          <span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span>
        </div>
        <blockquote class="tm-lux-sq">"Represented us across <em>four simultaneous transactions</em> without a single breakdown in communication or timeline. Genuinely elite service."</blockquote>
        <p class="tm-lux-bt">International relocation with five properties in play at once. The coordination alone would have broken a lesser team.</p>
        <figcaption class="tm-lux-author">
          <span class="tm-lux-av-rect" aria-hidden="true">RT</span>
          <span><cite class="tm-lux-an">Reza &amp; Tamar Hashemi</cite><span class="tm-lux-ar">Portfolio buyers</span></span>
        </figcaption>
      </article>

      <article class="tm-lux-cell tm-lux-tan">
        <div class="tm-lux-prop-tag">Condo &middot; Tribeca</div>
        <div class="tm-lux-star-row" aria-label="5 out of 5">
          <span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span><span class="tm-lux-sdash"></span>
        </div>
        <blockquote class="tm-lux-sq">"First-time buyer. They made the process feel <em>entirely manageable</em>. No condescension, just genuine guidance."</blockquote>
        <span class="tm-lux-grule" aria-hidden="true"></span>
        <figcaption class="tm-lux-author">
          <span class="tm-lux-av-rect" aria-hidden="true">MO</span>
          <span><cite class="tm-lux-an">Maya Okonkwo</cite><span class="tm-lux-ar">Buyer &middot; Brooklyn, NY</span></span>
        </figcaption>
      </article>

      <div class="tm-lux-cell tm-lux-score">
        <div class="tm-lux-score-num">9.8</div>
        <div class="tm-lux-score-lbl">Client score</div>
        <div class="tm-lux-score-line" aria-hidden="true"></div>
        <div class="tm-lux-score-count">4,200 + verified transactions</div>
      </div>

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

**CSS:**
```css
/* Luxury Real Estate — 1px seam grid (the gap between cells is the
   underlying line color, cells override with their own background).
   Dash ratings replace stars for a more editorial / less commercial
   feel. Gold corner triangle on hover. Cormorant Garamond italic
   pull quotes do the heavy aesthetic lifting. */
.tm-lux {
  --tm-lux-bg:     #f9f7f4;
  --tm-lux-ink:    #1c1917;
  --tm-lux-warm:   #f0ebe2;
  --tm-lux-gold:   #c9a84c;
  --tm-lux-gold-l: #e2c97e;
  --tm-lux-tan:    #e8e0d0;
  --tm-lux-stone:  #8a8278;
  --tm-lux-line:   #e0d8cc;
  background: var(--tm-lux-bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--tm-lux-ink);
  min-height: 520px;
}
.tm-lux-prop-bar {
  background: var(--tm-lux-ink);
  color: rgba(255,255,255,0.6);
  padding: 12px clamp(20px, 4vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.tm-lux-pb-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tm-lux-gold-l);
}
.tm-lux-pb-meta { display: flex; gap: 24px; }
.tm-lux-pb-item {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tm-lux-pb-item span { color: rgba(255,255,255,0.9); font-weight: 500; }
.tm-lux-section { padding: clamp(28px, 4vw, 48px); }
.tm-lux-slabel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}
.tm-lux-slabel-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--tm-lux-line), transparent);
  max-width: 60px;
}
.tm-lux-slabel-text {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tm-lux-stone);
}
.tm-lux-slabel-line2 {
  flex: 1;
  height: 1px;
  background: var(--tm-lux-line);
}
.tm-lux-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  background: var(--tm-lux-line);
}
.tm-lux-cell {
  background: var(--tm-lux-bg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: background 0.4s;
  display: flex;
  flex-direction: column;
}
.tm-lux-cell:hover { background: var(--tm-lux-warm); }
.tm-lux-dark { background: var(--tm-lux-ink); grid-column: 1 / -1; }
.tm-lux-dark:hover { background: #26231e; }
.tm-lux-tan { background: var(--tm-lux-tan); }
.tm-lux-tan:hover { background: #ddd5c5; }
.tm-lux-corner-deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 36px 36px 0;
  border-color: transparent var(--tm-lux-gold) transparent transparent;
  opacity: 0.2;
  transition: opacity 0.4s;
}
.tm-lux-cell:hover .tm-lux-corner-deco { opacity: 0.5; }
.tm-lux-dark .tm-lux-corner-deco {
  border-color: transparent var(--tm-lux-gold-l) transparent transparent;
}
.tm-lux-pstat {
  position: absolute;
  top: 24px;
  right: 28px;
  text-align: right;
}
.tm-lux-pstat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--tm-lux-gold);
  line-height: 1;
}
.tm-lux-pstat-lbl {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tm-lux-stone);
  margin-top: 4px;
}
.tm-lux-dark .tm-lux-pstat-lbl { color: rgba(249,247,244,0.4); }
.tm-lux-prop-tag {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tm-lux-gold);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-lux-prop-tag::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--tm-lux-gold);
}
.tm-lux-dark .tm-lux-prop-tag { color: var(--tm-lux-gold-l); }
.tm-lux-star-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  align-items: center;
}
.tm-lux-sdash {
  width: 14px;
  height: 1.5px;
  background: var(--tm-lux-gold);
}
.tm-lux-dark .tm-lux-sdash { background: var(--tm-lux-gold-l); }
.tm-lux-bq {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.4;
  color: var(--tm-lux-ink);
  margin: 0;
}
.tm-lux-bq em { font-style: normal; color: var(--tm-lux-gold); font-weight: 400; }
.tm-lux-dark .tm-lux-bq { color: rgba(249,247,244,0.9); }
.tm-lux-dark .tm-lux-bq em { color: var(--tm-lux-gold-l); }
.tm-lux-sq {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--tm-lux-ink);
  margin: 0;
}
.tm-lux-sq em { font-style: normal; color: var(--tm-lux-gold); }
.tm-lux-bt {
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--tm-lux-stone);
  font-weight: 300;
  margin: 14px 0 0;
}
.tm-lux-grule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--tm-lux-gold);
  margin: 20px 0;
  opacity: 0.6;
}
.tm-lux-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.tm-lux-av-rect {
  width: 36px;
  height: 44px;
  background: var(--tm-lux-tan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  color: var(--tm-lux-stone);
  flex-shrink: 0;
}
.tm-lux-dark .tm-lux-av-rect { background: rgba(255,255,255,0.08); color: rgba(249,247,244,0.5); }
.tm-lux-tan .tm-lux-av-rect { background: rgba(0,0,0,0.06); }
.tm-lux-an {
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  color: var(--tm-lux-ink);
  line-height: 1.4;
  letter-spacing: 0.02em;
  display: block;
}
.tm-lux-dark .tm-lux-an { color: rgba(249,247,244,0.9); }
.tm-lux-ar {
  font-size: 10px;
  color: var(--tm-lux-stone);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.tm-lux-dark .tm-lux-ar { color: rgba(249,247,244,0.4); }
.tm-lux-big-score {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 4.5rem;
  font-weight: 300;
  color: var(--tm-lux-gold-l);
  line-height: 1;
  opacity: 0.18;
  position: absolute;
  bottom: 8px;
  right: 24px;
  pointer-events: none;
}
.tm-lux-score {
  background: var(--tm-lux-warm);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tm-lux-score-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3rem;
  font-weight: 300;
  color: var(--tm-lux-gold);
  line-height: 1;
}
.tm-lux-score-lbl {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tm-lux-stone);
  margin-top: 8px;
}
.tm-lux-score-line {
  width: 48px;
  height: 1px;
  background: var(--tm-lux-gold);
  opacity: 0.4;
  margin: 16px auto;
}
.tm-lux-score-count {
  font-size: 10px;
  color: var(--tm-lux-stone);
  letter-spacing: 0.08em;
}
@media (max-width: 720px) {
  .tm-lux-layout { grid-template-columns: 1fr; }
  .tm-lux-dark { grid-column: 1; }
}
```

### 10. Gaming Esports

**Type:** Pure CSS
**Description:** Black with lime/cyan/pink/orange neon per rank, angular clip-path cards with blade-in entrance animation, scanline overlay, KD ratio / win rate stats, scoreboard-style score card, and rank badges. Use case: gaming coaching / esports platform. Barlow Condensed for headlines, Share Tech Mono for stats.

**HTML:**
```html
<section class="tm-gam" aria-label="Player reviews">
  <header class="tm-gam-hdr">
    <div class="tm-gam-game-logo"><span class="tm-gam-g1">APEX</span><span class="tm-gam-g2">REVIEWS</span></div>
    <div class="tm-gam-live-badge">
      <span class="tm-gam-lb-dot" aria-hidden="true"></span>
      <span>Live &middot; 3,420 online</span>
    </div>
  </header>

  <div class="tm-gam-grid">
    <article class="tm-gam-card tm-gam-cl tm-gam-feat">
      <span class="tm-gam-aline" aria-hidden="true"></span>
      <span class="tm-gam-card-glow" aria-hidden="true"></span>
      <div class="tm-gam-rank">&#9670; Legendary &middot; MVP</div>
      <div class="tm-gam-kd-row">
        <div class="tm-gam-kd-item"><div class="tm-gam-kd-val">4.2</div><div class="tm-gam-kd-lbl">K/D ratio</div></div>
        <div class="tm-gam-kd-item"><div class="tm-gam-kd-val">94%</div><div class="tm-gam-kd-lbl">Win rate</div></div>
        <div class="tm-gam-kd-item"><div class="tm-gam-kd-val">3,800</div><div class="tm-gam-kd-lbl">Hours played</div></div>
      </div>
      <div class="tm-gam-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-gam-q">I've been competing for seven years across four different titles. The coaching subscription changed my fundamentals in <b>eight sessions</b>. Got to Champion rank for the first time ever. My duo still doesn't believe I'm the same player. Neither do I, honestly.</blockquote>
      <figcaption class="tm-gam-author">
        <span class="tm-gam-av" aria-hidden="true">GR</span>
        <span><cite class="tm-gam-an">GhostRaze</cite><span class="tm-gam-ar">Top 500 &middot; NA Server</span></span>
      </figcaption>
    </article>

    <div class="tm-gam-col">
      <article class="tm-gam-card tm-gam-cc">
        <span class="tm-gam-aline" aria-hidden="true"></span>
        <span class="tm-gam-card-glow" aria-hidden="true"></span>
        <div class="tm-gam-rank">&#9670; Diamond</div>
        <div class="tm-gam-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <blockquote class="tm-gam-q">The ping optimization guide alone dropped me from <b>74ms to 18ms</b>. Games feel completely different.</blockquote>
        <figcaption class="tm-gam-author">
          <span class="tm-gam-av" aria-hidden="true">VX</span>
          <span><cite class="tm-gam-an">VoidShift.exe</cite><span class="tm-gam-ar">Diamond I &middot; EU</span></span>
        </figcaption>
      </article>

      <div class="tm-gam-score-card">
        <div class="tm-gam-sc-big">9.9</div>
        <div class="tm-gam-sc-sub">Platform score &middot; 42K reviews</div>
        <div class="tm-gam-sc-row">
          <div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">42K</div><div class="tm-gam-sc-lbl">Reviews</div></div>
          <div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">98%</div><div class="tm-gam-sc-lbl">Recommend</div></div>
          <div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">3.2M</div><div class="tm-gam-sc-lbl">Players</div></div>
        </div>
      </div>
    </div>
  </div>

  <div class="tm-gam-grid2">
    <article class="tm-gam-card tm-gam-cp">
      <span class="tm-gam-aline" aria-hidden="true"></span>
      <span class="tm-gam-card-glow" aria-hidden="true"></span>
      <div class="tm-gam-rank">&#9670; Platinum</div>
      <div class="tm-gam-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-gam-q">Went from Silver to <b>Platinum in 30 days</b>. The ranked roadmap is the most structured improvement plan I've seen outside of pro orgs.</blockquote>
      <figcaption class="tm-gam-author">
        <span class="tm-gam-av" aria-hidden="true">NK</span>
        <span><cite class="tm-gam-an">NightKitsune</cite><span class="tm-gam-ar">Platinum III &middot; APAC</span></span>
      </figcaption>
    </article>

    <article class="tm-gam-card tm-gam-co">
      <span class="tm-gam-aline" aria-hidden="true"></span>
      <span class="tm-gam-card-glow" aria-hidden="true"></span>
      <div class="tm-gam-rank">&#9670; Gold</div>
      <div class="tm-gam-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-gam-q">Hardware recommendations boosted my FPS by <b>140 frames</b>. My reaction time measurably improved in a week. Actual game changer.</blockquote>
      <figcaption class="tm-gam-author">
        <span class="tm-gam-av" aria-hidden="true">BB</span>
        <span><cite class="tm-gam-an">ByteBomber</cite><span class="tm-gam-ar">Gold I &rarr; Diamond</span></span>
      </figcaption>
    </article>

    <article class="tm-gam-card tm-gam-cl">
      <span class="tm-gam-aline" aria-hidden="true"></span>
      <span class="tm-gam-card-glow" aria-hidden="true"></span>
      <div class="tm-gam-rank">&#9670; Champion</div>
      <div class="tm-gam-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-gam-q">Just signed my first <b>semi-pro contract</b>. The mental coaching section was the piece I didn't know I needed. Clutch factor went through the roof.</blockquote>
      <figcaption class="tm-gam-author">
        <span class="tm-gam-av" aria-hidden="true">TR</span>
        <span><cite class="tm-gam-an">TitanRise</cite><span class="tm-gam-ar">Pro contender &middot; NA</span></span>
      </figcaption>
    </article>
  </div>
</section>
```

**CSS:**
```css
/* Gaming Esports — angled clip-path cards with blade-in entrance.
   Scanline overlay sits on each card via ::before. Four neon palette
   modifiers (cl=lime, cc=cyan, cp=pink, co=orange) drive accents per
   rank tier. Hexagon avatars via clip-path. */
.tm-gam {
  --tm-gam-bg:     #0a0a0f;
  --tm-gam-card:   #0e0e16;
  --tm-gam-lime:   #c8ff00;
  --tm-gam-cyan:   #00ffee;
  --tm-gam-pink:   #ff0055;
  --tm-gam-orange: #ff6a00;
  --tm-gam-white:  #e8e8f0;
  --tm-gam-muted:  #5a5a78;
  --tm-gam-border: rgba(200,255,0,0.12);
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  background: var(--tm-gam-bg);
  background-image:
    linear-gradient(rgba(200,255,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,255,0,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  font-family: 'Rajdhani', system-ui, sans-serif;
  color: var(--tm-gam-white);
  min-height: 520px;
  overflow: hidden;
}
.tm-gam-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--tm-gam-border);
  padding-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.tm-gam-game-logo {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tm-gam-g1 { color: var(--tm-gam-lime); }
.tm-gam-g2 { color: var(--tm-gam-white); }
.tm-gam-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--tm-gam-pink);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid rgba(255,0,85,0.3);
  padding: 5px 12px;
}
.tm-gam-lb-dot {
  width: 6px;
  height: 6px;
  background: var(--tm-gam-pink);
  border-radius: 50%;
  animation: tm-gam-glow 1.2s ease-in-out infinite alternate;
}
@keyframes tm-gam-glow {
  from { box-shadow: 0 0 4px var(--tm-gam-pink); }
  to   { box-shadow: 0 0 12px var(--tm-gam-pink), 0 0 20px var(--tm-gam-pink); }
}
.tm-gam-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3px;
  margin-bottom: 3px;
}
.tm-gam-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tm-gam-grid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.tm-gam-card {
  background: var(--tm-gam-card);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: all 0.3s ease;
  animation: tm-gam-bladein 0.6s ease both;
  display: flex;
  flex-direction: column;
}
.tm-gam-card:hover {
  background: #12121e;
  border-color: rgba(200,255,0,0.2);
  transform: translateY(-2px);
}
.tm-gam-card:hover .tm-gam-card-glow { opacity: 1; }
.tm-gam-card:nth-child(1) { animation-delay: 0.04s; }
.tm-gam-card:nth-child(2) { animation-delay: 0.10s; }
.tm-gam-card:nth-child(3) { animation-delay: 0.16s; }
@keyframes tm-gam-bladein {
  from {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 16px, 0 100%, 0 100%);
  }
  to {
    opacity: 1;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  }
}
.tm-gam-card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.tm-gam-cl .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(200,255,0,0.08), transparent 60%); }
.tm-gam-cc .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(0,255,238,0.06), transparent 60%); }
.tm-gam-cp .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(255,0,85,0.06),  transparent 60%); }
.tm-gam-co .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(255,106,0,0.06), transparent 60%); }
.tm-gam-aline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.tm-gam-cl .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-lime),   transparent); }
.tm-gam-cc .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-cyan),   transparent); }
.tm-gam-cp .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-pink),   transparent); }
.tm-gam-co .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-orange), transparent); }
.tm-gam-rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 3px 10px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  width: fit-content;
}
.tm-gam-cl .tm-gam-rank { background: rgba(200,255,0,0.12);  color: var(--tm-gam-lime);   border: 1px solid rgba(200,255,0,0.25); }
.tm-gam-cc .tm-gam-rank { background: rgba(0,255,238,0.08);  color: var(--tm-gam-cyan);   border: 1px solid rgba(0,255,238,0.2); }
.tm-gam-cp .tm-gam-rank { background: rgba(255,0,85,0.1);    color: var(--tm-gam-pink);   border: 1px solid rgba(255,0,85,0.25); }
.tm-gam-co .tm-gam-rank { background: rgba(255,106,0,0.1);   color: var(--tm-gam-orange); border: 1px solid rgba(255,106,0,0.25); }
.tm-gam-kd-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.tm-gam-kd-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tm-gam-kd-val {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
}
.tm-gam-cl .tm-gam-kd-val { color: var(--tm-gam-lime); }
.tm-gam-cc .tm-gam-kd-val { color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-kd-val { color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-kd-val { color: var(--tm-gam-orange); }
.tm-gam-kd-lbl {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 8px;
  color: var(--tm-gam-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tm-gam-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
  font-size: 13px;
}
.tm-gam-cl .tm-gam-stars { color: var(--tm-gam-lime); }
.tm-gam-cc .tm-gam-stars { color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-stars { color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-stars { color: var(--tm-gam-orange); }
.tm-gam-q {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(232,232,240,0.7);
  font-weight: 400;
  margin: 0 0 18px;
  font-style: normal;
  flex: 1;
}
.tm-gam-feat .tm-gam-q { font-size: 1.02rem; }
.tm-gam-q b { font-weight: 700; color: var(--tm-gam-white); }
.tm-gam-author {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 14px;
}
.tm-gam-av {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.tm-gam-cl .tm-gam-av { background: rgba(200,255,0,0.15);  color: var(--tm-gam-lime); border: 1px solid rgba(200,255,0,0.3); }
.tm-gam-cc .tm-gam-av { background: rgba(0,255,238,0.1);   color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-av { background: rgba(255,0,85,0.15);   color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-av { background: rgba(255,106,0,0.12);  color: var(--tm-gam-orange); }
.tm-gam-an {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--tm-gam-white);
  line-height: 1.2;
  display: block;
}
.tm-gam-ar {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--tm-gam-muted);
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.tm-gam-score-card {
  background: linear-gradient(135deg, #0e0e16, #141420);
  border: 1px solid rgba(200,255,0,0.2);
  padding: 24px 22px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  animation: tm-gam-bladein 0.6s ease 0.34s both;
}
.tm-gam-sc-big {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 900;
  font-size: 3.4rem;
  color: var(--tm-gam-lime);
  line-height: 1;
  text-shadow: 0 0 30px rgba(200,255,0,0.4);
}
.tm-gam-sc-sub {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--tm-gam-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 6px;
}
.tm-gam-sc-row {
  display: flex;
  gap: 22px;
  margin-top: 18px;
}
.tm-gam-sc-val {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--tm-gam-white);
  line-height: 1;
}
.tm-gam-sc-lbl {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 8px;
  color: var(--tm-gam-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.tm-gam-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 820px) {
  .tm-gam-grid  { grid-template-columns: 1fr; }
  .tm-gam-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-gam-card, .tm-gam-score-card { animation: none; }
  .tm-gam-lb-dot { animation: none; }
  .tm-gam-card:hover { transform: none; }
}
```

### 11. High Fashion

**Type:** Pure CSS
**Description:** Bodoni Moda editorial serif, marquee season ticker, ghost watermark numbers, 5-dot rating instead of stars, seam-line borders, alternating dark/warm/white cells, minimal Montserrat body text. Use case: luxury fashion house.

**HTML:**
```html
<section class="tm-fas" aria-label="Client archive">
  <header class="tm-fas-season-bar">
    <div class="tm-fas-sb-brand">Maison Noir &middot; Client Archive</div>
    <div class="tm-fas-sb-meta">Est. MMXII &middot; 8,400 Patrons</div>
  </header>

  <div class="tm-fas-top-row">
    <article class="tm-fas-cell tm-fas-dark">
      <div class="tm-fas-coll-label">A/W Collection &middot; Maison</div>
      <blockquote class="tm-fas-bq">"I wore the coat to the opening and three people asked me who designed it before I even reached the bar. <em>That is the effect.</em>"</blockquote>
      <span class="tm-fas-deco-num" aria-hidden="true">01</span>
      <figcaption class="tm-fas-author-area">
        <div><cite class="tm-fas-an">Isabella Fontaine</cite><span class="tm-fas-ar">Paris &middot; 12-year patron</span></div>
        <div class="tm-fas-dots" aria-label="5 out of 5">
          <span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
        </div>
      </figcaption>
    </article>
    <article class="tm-fas-cell">
      <div class="tm-fas-coll-label">S/S Collection &middot; Resort</div>
      <blockquote class="tm-fas-bq">"The tailoring is so precise it feels <em>custom</em>, even off the rack. I've stopped buying anything else."</blockquote>
      <span class="tm-fas-deco-num" aria-hidden="true">02</span>
      <figcaption class="tm-fas-author-area">
        <div><cite class="tm-fas-an">Mireille Auclair</cite><span class="tm-fas-ar">Montréal &middot; Stylist</span></div>
        <div class="tm-fas-dots" aria-label="5 out of 5">
          <span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
        </div>
      </figcaption>
    </article>
  </div>

  <div class="tm-fas-mid-row">
    <article class="tm-fas-cell tm-fas-warm">
      <div class="tm-fas-coll-label">Accessories</div>
      <blockquote class="tm-fas-sq">"The bag is three seasons old and strangers still stop me to ask about it. <em>Timeless</em> is an overused word. Here it's accurate."</blockquote>
      <span class="tm-fas-deco-num" aria-hidden="true">03</span>
      <figcaption class="tm-fas-author-area">
        <div><cite class="tm-fas-an">Yuki Tanaka</cite><span class="tm-fas-ar">Tokyo &middot; Editor</span></div>
        <div class="tm-fas-dots" aria-label="5 out of 5">
          <span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
        </div>
      </figcaption>
    </article>
    <article class="tm-fas-cell">
      <div class="tm-fas-coll-label">Ready-to-wear</div>
      <blockquote class="tm-fas-sq">"Every single piece I've bought has survived five seasons of heavy wear without losing its shape. <em>Engineering dressed as fashion.</em>"</blockquote>
      <span class="tm-fas-deco-num" aria-hidden="true">04</span>
      <figcaption class="tm-fas-author-area">
        <div><cite class="tm-fas-an">Dominique Peres</cite><span class="tm-fas-ar">São Paulo &middot; Architect</span></div>
        <div class="tm-fas-dots" aria-label="5 out of 5">
          <span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
        </div>
      </figcaption>
    </article>
    <article class="tm-fas-cell tm-fas-dark">
      <div class="tm-fas-coll-label">Bespoke</div>
      <blockquote class="tm-fas-sq">"Three fittings, infinite patience. The result was a suit <em>nothing else in my wardrobe could compete with.</em>"</blockquote>
      <span class="tm-fas-deco-num" aria-hidden="true">05</span>
      <figcaption class="tm-fas-author-area">
        <div><cite class="tm-fas-an">Raj Mehra</cite><span class="tm-fas-ar">London &middot; Barrister</span></div>
        <div class="tm-fas-dots" aria-label="5 out of 5">
          <span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
        </div>
      </figcaption>
    </article>
  </div>

  <div class="tm-fas-bot-row">
    <article class="tm-fas-cell tm-fas-feat">
      <div class="tm-fas-coll-label">Couture &middot; Featured</div>
      <blockquote class="tm-fas-bq">"I've dressed from the top maisons for thirty years. What separates <em>Maison Noir</em> is that every garment has a point of view — and the confidence not to explain it."</blockquote>
      <figcaption class="tm-fas-author-area">
        <div><cite class="tm-fas-an">Countess Vera Ostrovsky</cite><span class="tm-fas-ar">Moscow &middot; Geneva &middot; 30-year patron</span></div>
        <div class="tm-fas-dots" aria-label="5 out of 5">
          <span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span><span class="tm-fas-dot"></span>
        </div>
      </figcaption>
    </article>
    <div class="tm-fas-score-panel">
      <div class="tm-fas-sp-num">9.9</div>
      <div class="tm-fas-sp-sub">Patron score</div>
      <span class="tm-fas-sp-line" aria-hidden="true"></span>
      <div class="tm-fas-sp-count">8,400 verified patrons</div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* High Fashion — Bodoni Moda editorial. The season-bar ticker uses
   ::after marquee animation to scroll season tags behind the brand
   name. Ghost watermark numbers (01-05) sit at 4% opacity bottom-right.
   Five-dot rating system replaces stars for editorial restraint. */
.tm-fas {
  --tm-fas-white:    #fafafa;
  --tm-fas-black:    #0a0a0a;
  --tm-fas-warm:     #f5f2ee;
  --tm-fas-offblack: #1a1a1a;
  --tm-fas-gray:     #888;
  --tm-fas-lgray:    #d8d5d0;
  --tm-fas-text:     #1a1a1a;
  background: var(--tm-fas-white);
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--tm-fas-text);
  min-height: 520px;
  overflow: hidden;
}
.tm-fas-season-bar {
  background: var(--tm-fas-black);
  color: rgba(255,255,255,0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px clamp(20px, 4vw, 48px);
  overflow: hidden;
  position: relative;
}
.tm-fas-season-bar::after {
  content: 'S/S 25  A/W 25  S/S 25  A/W 25  S/S 25  A/W 25  S/S 25  A/W 25  S/S 25  A/W 25';
  position: absolute;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.12);
  white-space: nowrap;
  width: 200%;
  animation: tm-fas-ticker 14s linear infinite;
}
@keyframes tm-fas-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tm-fas-sb-brand {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  position: relative;
  z-index: 1;
}
.tm-fas-sb-meta {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.tm-fas-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
}
.tm-fas-mid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--tm-fas-lgray);
}
.tm-fas-bot-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-top: 1px solid var(--tm-fas-lgray);
}
.tm-fas-cell {
  padding: clamp(28px, 4vw, 44px);
  border-right: 1px solid var(--tm-fas-lgray);
  position: relative;
  overflow: hidden;
  transition: background 0.4s;
  display: flex;
  flex-direction: column;
}
.tm-fas-cell:last-child { border-right: none; }
.tm-fas-dark { background: var(--tm-fas-black); }
.tm-fas-warm { background: var(--tm-fas-warm); }
.tm-fas-cell:not(.tm-fas-dark):hover { background: var(--tm-fas-warm); }
.tm-fas-dark:hover { background: #111; }
.tm-fas-bq {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.35;
  color: var(--tm-fas-text);
  margin: 0;
  flex: 1;
}
.tm-fas-bq em { font-style: normal; font-weight: 700; }
.tm-fas-dark .tm-fas-bq { color: rgba(250,250,250,0.9); }
.tm-fas-dark .tm-fas-bq em { color: rgba(250,250,250,0.5); }
.tm-fas-sq {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tm-fas-text);
  margin: 0;
  flex: 1;
}
.tm-fas-sq em { font-style: normal; font-weight: 700; }
.tm-fas-dark .tm-fas-sq { color: rgba(250,250,250,0.85); }
.tm-fas-deco-num {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-size: 6.5rem;
  font-weight: 700;
  color: var(--tm-fas-text);
  opacity: 0.04;
  position: absolute;
  bottom: -10px;
  right: 20px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.tm-fas-dark .tm-fas-deco-num { color: #fff; opacity: 0.05; }
.tm-fas-author-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 28px;
  position: relative;
  z-index: 1;
}
.tm-fas-an {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-fas-text);
  line-height: 1.4;
  display: block;
}
.tm-fas-dark .tm-fas-an { color: rgba(250,250,250,0.8); }
.tm-fas-ar {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-fas-gray);
  margin-top: 4px;
  font-weight: 300;
  display: block;
}
.tm-fas-dark .tm-fas-ar { color: rgba(250,250,250,0.3); }
.tm-fas-dots {
  display: flex;
  gap: 5px;
}
.tm-fas-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tm-fas-text);
}
.tm-fas-dark .tm-fas-dot { background: rgba(250,250,250,0.6); }
.tm-fas-coll-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tm-fas-gray);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm-fas-coll-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tm-fas-lgray);
}
.tm-fas-dark .tm-fas-coll-label { color: rgba(250,250,250,0.3); }
.tm-fas-dark .tm-fas-coll-label::after { background: rgba(255,255,255,0.08); }
.tm-fas-feat .tm-fas-bq { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.tm-fas-score-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  background: var(--tm-fas-black);
  text-align: center;
}
.tm-fas-sp-num {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-size: 3.8rem;
  font-weight: 400;
  color: rgba(250,250,250,0.9);
  line-height: 1;
}
.tm-fas-sp-sub {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.3);
  margin-top: 8px;
}
.tm-fas-sp-line {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(250,250,250,0.15);
  margin: 18px auto;
}
.tm-fas-sp-count {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.4);
}
@media (max-width: 820px) {
  .tm-fas-top-row,
  .tm-fas-mid-row,
  .tm-fas-bot-row { grid-template-columns: 1fr; }
  .tm-fas-cell { border-right: none; border-bottom: 1px solid var(--tm-fas-lgray); }
  .tm-fas-deco-num { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-fas-season-bar::after { animation: none; }
}
```

### 12. Fintech Trust

**Type:** Pure CSS
**Description:** Navy trust banner with KYC-verified badges, pulsing live status dot, ROI callout box, FCA/FSCS compliance strip, product-tagged reviews (investment/loan/savings/trading), and a trust-score footer. Use case: regulated fintech / banking. Instrument Serif for italic pull quotes, Inter for UI.

**HTML:**
```html
<section class="tm-fin" aria-label="Verified client reviews">
  <header class="tm-fin-bank-header">
    <div class="tm-fin-bh-logo">
      <span class="tm-fin-bh-icon" aria-hidden="true">&#x1F3E6;</span>
      <div>
        <div class="tm-fin-bh-name">ClearBank</div>
        <div class="tm-fin-bh-tagline">Regulated &middot; Audited &middot; Insured</div>
      </div>
    </div>
    <div class="tm-fin-bh-trust">
      <span class="tm-fin-bh-trust-dot" aria-hidden="true"></span>
      <span>FCA Regulated &middot; FSCS Protected &middot; 256-bit Encrypted</span>
    </div>
  </header>

  <div class="tm-fin-section">
    <div class="tm-fin-trust-banner">
      <div class="tm-fin-tb-left">
        <span class="tm-fin-tb-shield" aria-hidden="true">&#x1F6E1;</span>
        <div>
          <div class="tm-fin-tb-title">Verified Client Reviews</div>
          <div class="tm-fin-tb-sub">All reviews authenticated via KYC &amp; account data</div>
        </div>
      </div>
      <div class="tm-fin-tb-stats">
        <div class="tm-fin-tb-stat tm-fin-green"><div class="tm-fin-tb-val">4.97</div><div class="tm-fin-tb-lbl">Trust score</div></div>
        <div class="tm-fin-tb-stat tm-fin-blue"><div class="tm-fin-tb-val">286K</div><div class="tm-fin-tb-lbl">Accounts</div></div>
        <div class="tm-fin-tb-stat tm-fin-amber"><div class="tm-fin-tb-val">£4.2B</div><div class="tm-fin-tb-lbl">AUM</div></div>
      </div>
    </div>

    <div class="tm-fin-grid">
      <article class="tm-fin-card tm-fin-feat">
        <span class="tm-fin-verified"><span class="tm-fin-v-dot" aria-hidden="true"></span> KYC verified</span>
        <div class="tm-fin-prod-tag tm-fin-tag-invest">Investment portfolio</div>
        <div class="tm-fin-roi-box">
          <div><div class="tm-fin-roi-num">+34.2%</div><div class="tm-fin-roi-lbl">12-month return</div></div>
          <div class="tm-fin-roi-bench">vs. 8.1% FTSE 100 benchmark</div>
        </div>
        <div class="tm-fin-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <blockquote class="tm-fin-q">"I transferred my pension after <em>eighteen months of hesitation</em>. That hesitation cost me returns I'll never recover. The transparency, the fee structure, the dashboards — none of it was what I expected from a financial institution. All of it was better."</blockquote>
        <figcaption class="tm-fin-author">
          <span class="tm-fin-av tm-fin-av-t" aria-hidden="true">PH</span>
          <span><cite class="tm-fin-an">Peter Hartmann</cite><span class="tm-fin-ar">Pension holder &middot; 3yr customer</span></span>
        </figcaption>
      </article>

      <div class="tm-fin-col">
        <article class="tm-fin-card">
          <span class="tm-fin-verified"><span class="tm-fin-v-dot" aria-hidden="true"></span> Verified</span>
          <div class="tm-fin-prod-tag tm-fin-tag-loan">Business loan</div>
          <div class="tm-fin-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
          <blockquote class="tm-fin-q">"Approved in <em>4 hours</em>. Funded same day. No collateral theatre. Used it to hire two engineers. Revenue doubled in Q2."</blockquote>
          <figcaption class="tm-fin-author">
            <span class="tm-fin-av tm-fin-av-b" aria-hidden="true">SK</span>
            <span><cite class="tm-fin-an">Sadia Khan</cite><span class="tm-fin-ar">Founder &middot; ScaleUp Ltd</span></span>
          </figcaption>
        </article>

        <article class="tm-fin-card">
          <div class="tm-fin-prod-tag tm-fin-tag-save">High-yield savings</div>
          <div class="tm-fin-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
          <blockquote class="tm-fin-q">"<em>5.3% AER</em>, instant access. My high-street bank offers 0.5%. This should be illegal by comparison."</blockquote>
          <figcaption class="tm-fin-author">
            <span class="tm-fin-av tm-fin-av-g" aria-hidden="true">MN</span>
            <span><cite class="tm-fin-an">Marcus Nwosu</cite><span class="tm-fin-ar">Personal savings</span></span>
          </figcaption>
        </article>
      </div>
    </div>

    <div class="tm-fin-grid2">
      <article class="tm-fin-card">
        <span class="tm-fin-verified"><span class="tm-fin-v-dot" aria-hidden="true"></span> Verified</span>
        <div class="tm-fin-prod-tag tm-fin-tag-trade">Stock trading</div>
        <div class="tm-fin-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <blockquote class="tm-fin-q">"Zero commission, real-time execution, fractional shares. Everything I've wanted from a broker for <em>fifteen years</em>."</blockquote>
        <figcaption class="tm-fin-author">
          <span class="tm-fin-av tm-fin-av-a" aria-hidden="true">LD</span>
          <span><cite class="tm-fin-an">Lena Dubois</cite><span class="tm-fin-ar">Active trader &middot; Paris</span></span>
        </figcaption>
      </article>

      <article class="tm-fin-card">
        <div class="tm-fin-prod-tag tm-fin-tag-invest">Global ETFs</div>
        <div class="tm-fin-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <blockquote class="tm-fin-q">"Auto-invest, auto-rebalance, <em>zero decision fatigue</em>. My portfolio grows while I sleep. That's the deal I always wanted."</blockquote>
        <figcaption class="tm-fin-author">
          <span class="tm-fin-av tm-fin-av-t" aria-hidden="true">RO</span>
          <span><cite class="tm-fin-an">Remi Okafor</cite><span class="tm-fin-ar">Passive investor</span></span>
        </figcaption>
      </article>

      <div class="tm-fin-trust-score-card">
        <div class="tm-fin-tsc-num">4.97</div>
        <div class="tm-fin-tsc-lbl">Trust score</div>
        <span class="tm-fin-tsc-line" aria-hidden="true"></span>
        <div class="tm-fin-tsc-count">286,000 verified accounts</div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* Fintech Trust — navy compliance header on top, blue-toned card grid
   below, ROI callout in the featured card animates in numerically via
   a static gradient backdrop (no JS counter here — the visible number
   is pre-rendered). Pulsing trust dot in the header signals "live
   monitoring". */
.tm-fin {
  --tm-fin-bg:     #f0f4fa;
  --tm-fin-white:  #ffffff;
  --tm-fin-navy:   #0f1f3d;
  --tm-fin-blue:   #1d4ed8;
  --tm-fin-teal:   #0d9488;
  --tm-fin-green:  #16a34a;
  --tm-fin-amber:  #d97706;
  --tm-fin-red:    #dc2626;
  --tm-fin-text:   #0f1f3d;
  --tm-fin-muted:  #64748b;
  --tm-fin-border: #e2e8f0;
  background: var(--tm-fin-bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--tm-fin-text);
  min-height: 520px;
}
.tm-fin-bank-header {
  background: var(--tm-fin-navy);
  padding: 14px clamp(20px, 4vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.tm-fin-bh-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tm-fin-bh-icon {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.tm-fin-bh-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #fff;
}
.tm-fin-bh-tagline {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
.tm-fin-bh-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.tm-fin-bh-trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: tm-fin-trustpulse 2.5s infinite;
}
@keyframes tm-fin-trustpulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.tm-fin-section { padding: clamp(28px, 4vw, 44px); }
.tm-fin-trust-banner {
  background: var(--tm-fin-navy);
  border-radius: 8px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 16px;
}
.tm-fin-tb-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tm-fin-tb-shield {
  width: 44px;
  height: 44px;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.tm-fin-tb-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.2;
}
.tm-fin-tb-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: 3px;
}
.tm-fin-tb-stats { display: flex; gap: 26px; }
.tm-fin-tb-stat { text-align: center; }
.tm-fin-tb-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}
.tm-fin-tb-lbl {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
}
.tm-fin-green .tm-fin-tb-val { color: #22c55e; }
.tm-fin-blue .tm-fin-tb-val  { color: #60a5fa; }
.tm-fin-amber .tm-fin-tb-val { color: #fbbf24; }
.tm-fin-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.tm-fin-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tm-fin-grid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tm-fin-card {
  background: var(--tm-fin-white);
  border: 1px solid var(--tm-fin-border);
  border-radius: 8px;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  animation: tm-fin-risein 0.7s ease both;
  display: flex;
  flex-direction: column;
}
.tm-fin-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 8px 24px rgba(29,78,216,0.08);
  transform: translateY(-2px);
}
.tm-fin-card:nth-child(1) { animation-delay: 0.04s; }
.tm-fin-card:nth-child(2) { animation-delay: 0.10s; }
.tm-fin-card:nth-child(3) { animation-delay: 0.16s; }
@keyframes tm-fin-risein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tm-fin-feat .tm-fin-q { font-size: 1.1rem; flex: 1; }
.tm-fin-prod-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
  width: fit-content;
}
.tm-fin-tag-invest { background: rgba(13,148,136,0.1);  color: var(--tm-fin-teal);  border: 1px solid rgba(13,148,136,0.2); }
.tm-fin-tag-loan   { background: rgba(29,78,216,0.08);  color: var(--tm-fin-blue);  border: 1px solid rgba(29,78,216,0.15); }
.tm-fin-tag-save   { background: rgba(22,163,74,0.08);  color: var(--tm-fin-green); border: 1px solid rgba(22,163,74,0.15); }
.tm-fin-tag-trade  { background: rgba(217,119,6,0.08);  color: var(--tm-fin-amber); border: 1px solid rgba(217,119,6,0.15); }
.tm-fin-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--tm-fin-amber);
}
.tm-fin-q {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--tm-fin-text);
  margin: 0 0 18px;
}
.tm-fin-q em { font-style: normal; font-weight: 400; color: var(--tm-fin-blue); }
.tm-fin-author {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--tm-fin-border);
  padding-top: 14px;
  margin-top: auto;
}
.tm-fin-av {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.tm-fin-av-t { background: rgba(13,148,136,0.1);  color: var(--tm-fin-teal); }
.tm-fin-av-b { background: rgba(29,78,216,0.1);   color: var(--tm-fin-blue); }
.tm-fin-av-g { background: rgba(22,163,74,0.1);   color: var(--tm-fin-green); }
.tm-fin-av-a { background: rgba(217,119,6,0.1);   color: var(--tm-fin-amber); }
.tm-fin-an {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--tm-fin-text);
  line-height: 1.3;
  display: block;
}
.tm-fin-ar { font-size: 10px; color: var(--tm-fin-muted); margin-top: 2px; }
.tm-fin-roi-box {
  background: linear-gradient(135deg, rgba(13,148,136,0.06), rgba(22,163,74,0.06));
  border: 1px solid rgba(13,148,136,0.15);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tm-fin-roi-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--tm-fin-teal);
  line-height: 1;
}
.tm-fin-roi-lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-fin-muted);
  margin-top: 2px;
}
.tm-fin-roi-bench {
  font-size: 0.75rem;
  color: var(--tm-fin-muted);
  font-weight: 300;
}
.tm-fin-verified {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-fin-green);
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.2);
  padding: 3px 7px;
  border-radius: 20px;
}
.tm-fin-v-dot {
  width: 5px;
  height: 5px;
  background: var(--tm-fin-green);
  border-radius: 50%;
}
.tm-fin-trust-score-card {
  background: var(--tm-fin-navy);
  border-color: transparent;
  border-radius: 8px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: tm-fin-risein 0.7s ease 0.22s both;
}
.tm-fin-tsc-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 2.4rem;
  font-weight: 500;
  color: #60a5fa;
  line-height: 1;
}
.tm-fin-tsc-lbl {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-top: 8px;
}
.tm-fin-tsc-line {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 14px auto;
}
.tm-fin-tsc-count {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
}
@media (max-width: 820px) {
  .tm-fin-grid  { grid-template-columns: 1fr; }
  .tm-fin-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-fin-card, .tm-fin-trust-score-card { animation: none; }
  .tm-fin-card:hover { transform: none; }
  .tm-fin-bh-trust-dot { animation: none; }
}
```

### 13. Minimal White Cards

**Type:** Pure CSS
**Description:** Clean 3-column card grid on a soft grey background. Each card has a circular portrait at the top, a Lora italic serif quote with blue emphasis, and an author row with a smaller portrait + name + role. One dark navy featured card breaks the rhythm. Lora + Inter typography. Use case: SaaS / B2B platform.

**HTML:**
```html
<section class="tm-mwc" aria-label="Customer testimonials">
  <header class="tm-mwc-section-label">
    <span class="tm-mwc-sl-text">What our customers say</span>
    <span class="tm-mwc-sl-line" aria-hidden="true"></span>
  </header>
  <h2 class="tm-mwc-section-title">Trusted by thousands of teams worldwide</h2>

  <div class="tm-mwc-grid">

    <article class="tm-mwc-card">
      <div class="tm-mwc-portrait tm-mwc-portrait-blue" aria-hidden="true">
        <span class="tm-mwc-initials">SC</span>
      </div>
      <div class="tm-mwc-rating-block">
        <span class="tm-mwc-rating-num">5.0</span>
        <span class="tm-mwc-stars" aria-label="5 out of 5 stars">
          <span class="tm-mwc-star" aria-hidden="true">&#9733;</span>
          <span class="tm-mwc-star" aria-hidden="true">&#9733;</span>
          <span class="tm-mwc-star" aria-hidden="true">&#9733;</span>
          <span class="tm-mwc-star" aria-hidden="true">&#9733;</span>
          <span class="tm-mwc-star" aria-hidden="true">&#9733;</span>
        </span>
        <span class="tm-mwc-rating-ct">&middot; Verified</span>
      </div>
      <blockquote class="tm-mwc-quote">"The onboarding was so smooth I had my whole team up and running in <em>a single afternoon</em>. That never happens."</blockquote>
      <figcaption class="tm-mwc-author-row">
        <span class="tm-mwc-author-portrait tm-mwc-portrait-blue" aria-hidden="true">SC</span>
        <span><cite class="tm-mwc-author-name">Sarah Chen</cite><span class="tm-mwc-author-role">Head of Product, Relay</span></span>
      </figcaption>
    </article>

    <article class="tm-mwc-card">
      <div class="tm-mwc-portrait tm-mwc-portrait-teal" aria-hidden="true">
        <span class="tm-mwc-initials">MW</span>
      </div>
      <div class="tm-mwc-rating-block">
        <span class="tm-mwc-rating-num">5.0</span>
        <span class="tm-mwc-stars" aria-label="5 out of 5 stars">
          <span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span>
        </span>
        <span class="tm-mwc-rating-ct">&middot; Verified</span>
      </div>
      <blockquote class="tm-mwc-quote">"Replaced three different tools and <em>cut our monthly spend by 40%</em>. The ROI was visible in week one."</blockquote>
      <figcaption class="tm-mwc-author-row">
        <span class="tm-mwc-author-portrait tm-mwc-portrait-teal" aria-hidden="true">MW</span>
        <span><cite class="tm-mwc-author-name">Marcus Williams</cite><span class="tm-mwc-author-role">CTO, Stackframe</span></span>
      </figcaption>
    </article>

    <article class="tm-mwc-card">
      <div class="tm-mwc-portrait tm-mwc-portrait-amber" aria-hidden="true">
        <span class="tm-mwc-initials">IM</span>
      </div>
      <div class="tm-mwc-rating-block">
        <span class="tm-mwc-rating-num">5.0</span>
        <span class="tm-mwc-stars" aria-label="5 out of 5 stars">
          <span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span>
        </span>
        <span class="tm-mwc-rating-ct">&middot; Verified</span>
      </div>
      <blockquote class="tm-mwc-quote">"Customer support replied in <em>four minutes</em> on a Sunday. I didn't even know that was possible from a SaaS company."</blockquote>
      <figcaption class="tm-mwc-author-row">
        <span class="tm-mwc-author-portrait tm-mwc-portrait-amber" aria-hidden="true">IM</span>
        <span><cite class="tm-mwc-author-name">Isabelle Morel</cite><span class="tm-mwc-author-role">VP Operations, Cove</span></span>
      </figcaption>
    </article>

  </div>

  <div class="tm-mwc-grid2">

    <article class="tm-mwc-card tm-mwc-feat">
      <div class="tm-mwc-portrait tm-mwc-portrait-indigo" aria-hidden="true">
        <span class="tm-mwc-initials">DP</span>
      </div>
      <div class="tm-mwc-rating-block">
        <span class="tm-mwc-rating-num">5.0</span>
        <span class="tm-mwc-stars" aria-label="5 out of 5 stars">
          <span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span>
        </span>
        <span class="tm-mwc-rating-ct">&middot; Verified</span>
      </div>
      <blockquote class="tm-mwc-quote">"We evaluated six platforms over three months. This one wasn't just the best — it was <em>in a different category</em> from the rest. The depth of integrations, the API quality, the docs — nothing else came close."</blockquote>
      <figcaption class="tm-mwc-author-row">
        <span class="tm-mwc-author-portrait tm-mwc-portrait-indigo" aria-hidden="true">DP</span>
        <span><cite class="tm-mwc-author-name">Daniel Park</cite><span class="tm-mwc-author-role">Engineering Lead, Meridian Cloud</span></span>
      </figcaption>
    </article>

    <article class="tm-mwc-card">
      <div class="tm-mwc-portrait tm-mwc-portrait-green" aria-hidden="true">
        <span class="tm-mwc-initials">AO</span>
      </div>
      <span class="tm-mwc-verified-chip">
        <span class="tm-mwc-vc-dot" aria-hidden="true"></span> Verified customer
      </span>
      <div class="tm-mwc-stars" aria-label="5 out of 5 stars" style="margin-bottom:14px">
        <span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span><span class="tm-mwc-star">&#9733;</span>
      </div>
      <blockquote class="tm-mwc-quote">"Shipped faster in the first month than the entire previous quarter. The <em>workflow automation</em> alone saved us 15 hours a week."</blockquote>
      <figcaption class="tm-mwc-author-row">
        <span class="tm-mwc-author-portrait tm-mwc-portrait-green" aria-hidden="true">AO</span>
        <span><cite class="tm-mwc-author-name">Amara Osei</cite><span class="tm-mwc-author-role">Founder, Lumen Analytics</span></span>
      </figcaption>
    </article>

  </div>
</section>
```

**CSS:**
```css
/* Minimal White Cards — clean 3-col grid + 2-col bottom row. The
   featured card flips to a dark navy panel for contrast. Portraits
   use colored initial-circles instead of stock photos so the demo
   stays slim and self-contained (no external image dependency). */
.tm-mwc {
  --tm-mwc-bg:     #f6f7f9;
  --tm-mwc-white:  #ffffff;
  --tm-mwc-ink:    #111827;
  --tm-mwc-muted:  #6b7280;
  --tm-mwc-border: #e5e7eb;
  --tm-mwc-blue:   #2563eb;
  position: relative;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 52px);
  background: var(--tm-mwc-bg);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 520px;
}
.tm-mwc-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tm-mwc-sl-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tm-mwc-muted);
}
.tm-mwc-sl-line {
  flex: 1;
  height: 1px;
  background: var(--tm-mwc-border);
}
.tm-mwc-section-title {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 500;
  color: var(--tm-mwc-ink);
  margin: 0 0 36px;
  max-width: 480px;
  line-height: 1.3;
}
.tm-mwc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.tm-mwc-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.tm-mwc-card {
  background: var(--tm-mwc-white);
  border: 1px solid var(--tm-mwc-border);
  border-radius: 12px;
  padding: 30px 26px;
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  animation: tm-mwc-fadeup 0.6s ease both;
  display: flex;
  flex-direction: column;
}
.tm-mwc-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}
.tm-mwc-grid .tm-mwc-card:nth-child(1) { animation-delay: 0.05s; }
.tm-mwc-grid .tm-mwc-card:nth-child(2) { animation-delay: 0.12s; }
.tm-mwc-grid .tm-mwc-card:nth-child(3) { animation-delay: 0.19s; }
.tm-mwc-grid2 .tm-mwc-card:nth-child(1) { animation-delay: 0.26s; }
.tm-mwc-grid2 .tm-mwc-card:nth-child(2) { animation-delay: 0.32s; }
@keyframes tm-mwc-fadeup {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tm-mwc-portrait {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 18px;
  border: 2px solid var(--tm-mwc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tm-mwc-initials {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.tm-mwc-portrait-blue   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.tm-mwc-portrait-teal   { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.tm-mwc-portrait-amber  { background: linear-gradient(135deg, #f59e0b, #b45309); }
.tm-mwc-portrait-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.tm-mwc-portrait-green  { background: linear-gradient(135deg, #22c55e, #15803d); }
.tm-mwc-rating-block {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tm-mwc-rating-num {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tm-mwc-ink);
}
.tm-mwc-stars {
  display: inline-flex;
  gap: 2px;
}
.tm-mwc-star {
  color: #f59e0b;
  font-size: 13px;
}
.tm-mwc-rating-ct {
  font-size: 11px;
  color: var(--tm-mwc-muted);
}
.tm-mwc-quote {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  margin: 0 0 20px;
  flex: 1;
}
.tm-mwc-quote em {
  font-style: normal;
  color: var(--tm-mwc-blue);
  font-weight: 500;
}
.tm-mwc-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--tm-mwc-border);
}
.tm-mwc-author-portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--tm-mwc-border);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.tm-mwc-author-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  color: var(--tm-mwc-ink);
  line-height: 1.3;
}
.tm-mwc-author-role {
  font-size: 11px;
  color: var(--tm-mwc-muted);
  margin-top: 2px;
  display: block;
}
.tm-mwc-verified-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 14px;
  width: fit-content;
}
.tm-mwc-vc-dot {
  width: 5px;
  height: 5px;
  background: #16a34a;
  border-radius: 50%;
}
/* Dark featured card */
.tm-mwc-feat {
  background: var(--tm-mwc-ink);
  border-color: transparent;
}
.tm-mwc-feat .tm-mwc-quote { color: rgba(255,255,255,0.8); }
.tm-mwc-feat .tm-mwc-quote em { color: #93c5fd; }
.tm-mwc-feat .tm-mwc-author-name { color: #fff; }
.tm-mwc-feat .tm-mwc-author-role { color: rgba(255,255,255,0.5); }
.tm-mwc-feat .tm-mwc-author-row { border-top-color: rgba(255,255,255,0.1); }
.tm-mwc-feat .tm-mwc-rating-num { color: #fff; }
.tm-mwc-feat .tm-mwc-rating-ct { color: rgba(255,255,255,0.4); }
.tm-mwc-feat .tm-mwc-portrait,
.tm-mwc-feat .tm-mwc-author-portrait { border-color: rgba(255,255,255,0.15); }
@media (max-width: 820px) {
  .tm-mwc-grid, .tm-mwc-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-mwc-card { animation: none; transition: none; }
  .tm-mwc-card:hover { transform: none; }
}
```

### 14. Horizontal Cards

**Type:** Pure CSS
**Description:** Full-width stacked horizontal cards split into a sand-toned portrait panel (left) and a quote + meta panel (right). Each reviewer has a verified SVG checkmark badge, portrait, name, title, company, and a source tag (G2, Capterra, etc). The featured card flips to a deep forest green. Playfair Display + Mulish. Use case: consulting / agency / professional services.

**HTML:**
```html
<section class="tm-hc" aria-label="Client stories">
  <div class="tm-hc-eyebrow">Client Stories</div>
  <h2 class="tm-hc-section-title">Real results from real people</h2>

  <article class="tm-hc-card tm-hc-feat">
    <div class="tm-hc-portrait-panel">
      <div class="tm-hc-portrait-wrap">
        <span class="tm-hc-portrait tm-hc-p-purple" aria-hidden="true"><span class="tm-hc-initials">NB</span></span>
        <span class="tm-hc-verified-ring" aria-label="Verified">
          <svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
        </span>
      </div>
      <div class="tm-hc-portrait-name">Natalie Brooks</div>
      <div class="tm-hc-portrait-role">Chief Marketing Officer</div>
      <div class="tm-hc-portrait-company">Arcfield Digital</div>
    </div>
    <div class="tm-hc-content">
      <div class="tm-hc-stars" aria-label="5 out of 5 stars">
        <span class="tm-hc-star" aria-hidden="true">&#9733;</span>
        <span class="tm-hc-star" aria-hidden="true">&#9733;</span>
        <span class="tm-hc-star" aria-hidden="true">&#9733;</span>
        <span class="tm-hc-star" aria-hidden="true">&#9733;</span>
        <span class="tm-hc-star" aria-hidden="true">&#9733;</span>
      </div>
      <blockquote class="tm-hc-quote">"We ran a 90-day trial against our previous solution. The results were <em>not even close</em>. Conversion up 62%, churn down 18%, and our team actually enjoys using it. I don't say this lightly — it was the best vendor decision I've made in five years."</blockquote>
      <div class="tm-hc-meta-row">
        <span class="tm-hc-meta-item">90-day evaluation</span>
        <span class="tm-hc-meta-dot" aria-hidden="true"></span>
        <span class="tm-hc-meta-item">Enterprise plan</span>
        <span class="tm-hc-source-tag">G2 &middot; Verified</span>
      </div>
    </div>
  </article>

  <article class="tm-hc-card">
    <div class="tm-hc-portrait-panel">
      <div class="tm-hc-portrait-wrap">
        <span class="tm-hc-portrait tm-hc-p-rose" aria-hidden="true"><span class="tm-hc-initials">HY</span></span>
        <span class="tm-hc-verified-ring" aria-label="Verified">
          <svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
        </span>
      </div>
      <div class="tm-hc-portrait-name">Hiroshi Yamada</div>
      <div class="tm-hc-portrait-role">Director of Engineering</div>
      <div class="tm-hc-portrait-company">Synth Systems</div>
    </div>
    <div class="tm-hc-content">
      <div class="tm-hc-stars" aria-label="5 out of 5 stars">
        <span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span>
      </div>
      <blockquote class="tm-hc-quote">"The API documentation is the <em>best I've ever read</em>. I gave it to three junior devs with no briefing. They were productive in two hours."</blockquote>
      <div class="tm-hc-meta-row">
        <span class="tm-hc-meta-item">Developer plan</span>
        <span class="tm-hc-meta-dot" aria-hidden="true"></span>
        <span class="tm-hc-meta-item">14 months active</span>
        <span class="tm-hc-source-tag">Capterra</span>
      </div>
    </div>
  </article>

  <article class="tm-hc-card">
    <div class="tm-hc-portrait-panel">
      <div class="tm-hc-portrait-wrap">
        <span class="tm-hc-portrait tm-hc-p-slate" aria-hidden="true"><span class="tm-hc-initials">PS</span></span>
        <span class="tm-hc-verified-ring" aria-label="Verified">
          <svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
        </span>
      </div>
      <div class="tm-hc-portrait-name">Priya Sharma</div>
      <div class="tm-hc-portrait-role">Founder &amp; CEO</div>
      <div class="tm-hc-portrait-company">Kova Studio</div>
    </div>
    <div class="tm-hc-content">
      <div class="tm-hc-stars" aria-label="5 out of 5 stars">
        <span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span>
      </div>
      <blockquote class="tm-hc-quote">"As a solo founder, I needed something I could operate without a team behind it. This is <em>genuinely that product</em>. Everything just works."</blockquote>
      <div class="tm-hc-meta-row">
        <span class="tm-hc-meta-item">Solo plan</span>
        <span class="tm-hc-meta-dot" aria-hidden="true"></span>
        <span class="tm-hc-meta-item">2 years active</span>
        <span class="tm-hc-source-tag">Trustpilot</span>
      </div>
    </div>
  </article>

  <article class="tm-hc-card">
    <div class="tm-hc-portrait-panel">
      <div class="tm-hc-portrait-wrap">
        <span class="tm-hc-portrait tm-hc-p-cyan" aria-hidden="true"><span class="tm-hc-initials">LF</span></span>
        <span class="tm-hc-verified-ring" aria-label="Verified">
          <svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>
        </span>
      </div>
      <div class="tm-hc-portrait-name">Leon Fischer</div>
      <div class="tm-hc-portrait-role">Head of Data</div>
      <div class="tm-hc-portrait-company">Veldtwerk GmbH</div>
    </div>
    <div class="tm-hc-content">
      <div class="tm-hc-stars" aria-label="5 out of 5 stars">
        <span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span><span class="tm-hc-star">&#9733;</span>
      </div>
      <blockquote class="tm-hc-quote">"The analytics dashboard gives me <em>answers I didn't know to ask for</em>. Every Monday I discover something new about our users that changes how we prioritize."</blockquote>
      <div class="tm-hc-meta-row">
        <span class="tm-hc-meta-item">Growth plan</span>
        <span class="tm-hc-meta-dot" aria-hidden="true"></span>
        <span class="tm-hc-meta-item">18 months active</span>
        <span class="tm-hc-source-tag">LinkedIn</span>
      </div>
    </div>
  </article>
</section>
```

**CSS:**
```css
/* Horizontal Cards — 2-col split: sand portrait panel | quote panel.
   Featured card swaps sand for accent (deep forest green). Verified
   ring badge sits at the corner of the portrait. Slide-in entrance
   from the left for a directional, list-like reveal. */
.tm-hc {
  --tm-hc-bg:      #fafaf8;
  --tm-hc-white:   #ffffff;
  --tm-hc-ink:     #18181b;
  --tm-hc-muted:   #71717a;
  --tm-hc-line:    #e4e4e7;
  --tm-hc-accent:  #1c4a3f;
  --tm-hc-accent-l: #d1f0e8;
  --tm-hc-warm:    #f9f6f1;
  padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 56px);
  background: var(--tm-hc-bg);
  font-family: 'Mulish', system-ui, sans-serif;
  min-height: 520px;
}
.tm-hc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tm-hc-accent);
  margin-bottom: 10px;
}
.tm-hc-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  color: var(--tm-hc-ink);
  margin: 0 0 32px;
  line-height: 1.25;
}
.tm-hc-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  background: var(--tm-hc-white);
  border: 1px solid var(--tm-hc-line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  animation: tm-hc-slidein 0.6s ease both;
}
.tm-hc-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}
.tm-hc-card:nth-child(1) { animation-delay: 0.04s; }
.tm-hc-card:nth-child(2) { animation-delay: 0.12s; }
.tm-hc-card:nth-child(3) { animation-delay: 0.20s; }
.tm-hc-card:nth-child(4) { animation-delay: 0.28s; }
.tm-hc-card:nth-child(5) { animation-delay: 0.36s; }
@keyframes tm-hc-slidein {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tm-hc-portrait-panel {
  background: var(--tm-hc-warm);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 1px solid var(--tm-hc-line);
  text-align: center;
}
.tm-hc-portrait-wrap { position: relative; }
.tm-hc-portrait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--tm-hc-white);
  box-shadow: 0 0 0 2px var(--tm-hc-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-hc-p-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.tm-hc-p-rose   { background: linear-gradient(135deg, #f472b6, #be185d); }
.tm-hc-p-slate  { background: linear-gradient(135deg, #64748b, #334155); }
.tm-hc-p-cyan   { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.tm-hc-initials {
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.tm-hc-verified-ring {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: var(--tm-hc-accent);
  border-radius: 50%;
  border: 2px solid var(--tm-hc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.tm-hc-verified-ring svg { width: 8px; height: 8px; }
.tm-hc-portrait-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--tm-hc-ink);
  line-height: 1.3;
}
.tm-hc-portrait-role {
  font-size: 10px;
  color: var(--tm-hc-muted);
  line-height: 1.4;
  font-weight: 400;
}
.tm-hc-portrait-company {
  font-size: 10px;
  font-weight: 600;
  color: var(--tm-hc-accent);
  margin-top: 2px;
}
.tm-hc-content {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tm-hc-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}
.tm-hc-star {
  color: #f59e0b;
  font-size: 12px;
}
.tm-hc-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #3f3f46;
  margin: 0 0 14px;
}
.tm-hc-quote em {
  font-style: normal;
  color: var(--tm-hc-accent);
  font-weight: 600;
}
.tm-hc-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tm-hc-meta-item {
  font-size: 10px;
  color: var(--tm-hc-muted);
  display: flex;
  align-items: center;
}
.tm-hc-meta-dot {
  width: 3px;
  height: 3px;
  background: var(--tm-hc-line);
  border-radius: 50%;
}
.tm-hc-source-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tm-hc-muted);
  background: var(--tm-hc-warm);
  border: 1px solid var(--tm-hc-line);
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: auto;
}
/* Featured: deep forest green panel */
.tm-hc-feat { border-color: var(--tm-hc-accent); }
.tm-hc-feat .tm-hc-portrait-panel {
  background: var(--tm-hc-accent);
  border-right-color: rgba(255,255,255,0.15);
}
.tm-hc-feat .tm-hc-portrait-name { color: #fff; }
.tm-hc-feat .tm-hc-portrait-role { color: rgba(255,255,255,0.6); }
.tm-hc-feat .tm-hc-portrait-company { color: rgba(255,255,255,0.8); }
.tm-hc-feat .tm-hc-portrait { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.tm-hc-feat .tm-hc-verified-ring { background: #fff; color: var(--tm-hc-accent); }
@media (max-width: 720px) {
  .tm-hc-card { grid-template-columns: 1fr; }
  .tm-hc-portrait-panel { border-right: none; border-bottom: 1px solid var(--tm-hc-line); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-hc-card { animation: none; transition: none; }
  .tm-hc-card:hover { transform: none; }
}
```

### 15. Portrait Grid

**Type:** Pure CSS
**Description:** 3-column masonry-style grid where a full square portrait leads each card. Stars float directly on the portrait with a gradient overlay. On hover the portrait subtly zooms. Alternates between white, dark navy, and warm sand backgrounds for visual rhythm. DM Serif Display + DM Sans. Use case: product / startup / general-purpose.

**HTML:**
```html
<section class="tm-pg" aria-label="Customer testimonials">
  <header class="tm-pg-top-bar">
    <h2 class="tm-pg-top-title">Hear it from the people who matter most</h2>
    <div class="tm-pg-top-stat">
      <div class="tm-pg-ts-num">4.9 &#9733;</div>
      <div class="tm-pg-ts-lbl">Average across 9,200+ reviews</div>
    </div>
  </header>

  <div class="tm-pg-grid">

    <article class="tm-pg-card">
      <div class="tm-pg-card-photo tm-pg-photo-blue" aria-hidden="true">
        <span class="tm-pg-photo-initials">EL</span>
        <div class="tm-pg-photo-stars" aria-label="5 out of 5 stars">
          <span aria-hidden="true">&#9733;</span><span aria-hidden="true">&#9733;</span><span aria-hidden="true">&#9733;</span><span aria-hidden="true">&#9733;</span><span aria-hidden="true">&#9733;</span>
        </div>
      </div>
      <div class="tm-pg-card-body">
        <blockquote class="tm-pg-quote">"I've recommended this to every founder I know. The time I've saved is <em>genuinely hard to quantify.</em>"</blockquote>
        <figcaption class="tm-pg-author-strip">
          <span class="tm-pg-a-photo tm-pg-photo-blue" aria-hidden="true"><span class="tm-pg-a-initials">EL</span></span>
          <span><cite class="tm-pg-a-name">Emma Larson</cite><span class="tm-pg-a-role">Founder, Northfield</span></span>
          <span class="tm-pg-a-badge">Pro</span>
        </figcaption>
      </div>
    </article>

    <article class="tm-pg-card tm-pg-dark">
      <div class="tm-pg-card-photo tm-pg-photo-teal" aria-hidden="true">
        <span class="tm-pg-photo-initials">JO</span>
        <div class="tm-pg-photo-stars" aria-label="5 out of 5 stars">
          <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
        </div>
      </div>
      <div class="tm-pg-card-body">
        <blockquote class="tm-pg-quote">"Our sales cycle shortened by <em>three weeks</em> after switching. The clarity in our pitch improved the moment we had the right data."</blockquote>
        <figcaption class="tm-pg-author-strip">
          <span class="tm-pg-a-photo tm-pg-photo-teal" aria-hidden="true"><span class="tm-pg-a-initials">JO</span></span>
          <span><cite class="tm-pg-a-name">James Owusu</cite><span class="tm-pg-a-role">VP Sales, Bridgemark</span></span>
          <span class="tm-pg-a-badge">Enterprise</span>
        </figcaption>
      </div>
    </article>

    <article class="tm-pg-card">
      <div class="tm-pg-card-photo tm-pg-photo-amber" aria-hidden="true">
        <span class="tm-pg-photo-initials">MZ</span>
        <div class="tm-pg-photo-stars" aria-label="5 out of 5 stars">
          <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
        </div>
      </div>
      <div class="tm-pg-card-body">
        <blockquote class="tm-pg-quote">"Simple enough that my non-technical co-founder uses it daily. Powerful enough that I rely on it for <em>every strategic decision.</em>"</blockquote>
        <figcaption class="tm-pg-author-strip">
          <span class="tm-pg-a-photo tm-pg-photo-amber" aria-hidden="true"><span class="tm-pg-a-initials">MZ</span></span>
          <span><cite class="tm-pg-a-name">Mei Zhang</cite><span class="tm-pg-a-role">Co-founder, Fenix Labs</span></span>
          <span class="tm-pg-a-badge">Growth</span>
        </figcaption>
      </div>
    </article>

    <article class="tm-pg-card tm-pg-sand">
      <div class="tm-pg-card-photo tm-pg-photo-indigo" aria-hidden="true">
        <span class="tm-pg-photo-initials">TR</span>
        <div class="tm-pg-photo-stars" aria-label="5 out of 5 stars">
          <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
        </div>
      </div>
      <div class="tm-pg-card-body">
        <blockquote class="tm-pg-quote">"Migrated our entire workflow in a weekend. Monday morning the team didn't miss a beat. <em>Zero disruption, full adoption.</em>"</blockquote>
        <figcaption class="tm-pg-author-strip">
          <span class="tm-pg-a-photo tm-pg-photo-indigo" aria-hidden="true"><span class="tm-pg-a-initials">TR</span></span>
          <span><cite class="tm-pg-a-name">Thomas Reeves</cite><span class="tm-pg-a-role">Ops Lead, Slate Co.</span></span>
          <span class="tm-pg-a-badge">Team</span>
        </figcaption>
      </div>
    </article>

    <article class="tm-pg-card">
      <div class="tm-pg-card-photo tm-pg-photo-green" aria-hidden="true">
        <span class="tm-pg-photo-initials">AP</span>
        <div class="tm-pg-photo-stars" aria-label="5 out of 5 stars">
          <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
        </div>
      </div>
      <div class="tm-pg-card-body">
        <blockquote class="tm-pg-quote">"The reporting alone is worth the subscription. I present to investors every quarter and the <em>visuals do half the work.</em>"</blockquote>
        <figcaption class="tm-pg-author-strip">
          <span class="tm-pg-a-photo tm-pg-photo-green" aria-hidden="true"><span class="tm-pg-a-initials">AP</span></span>
          <span><cite class="tm-pg-a-name">Aisha Patel</cite><span class="tm-pg-a-role">CEO, Vantage Health</span></span>
          <span class="tm-pg-a-badge">Enterprise</span>
        </figcaption>
      </div>
    </article>

    <article class="tm-pg-card tm-pg-dark">
      <div class="tm-pg-card-photo tm-pg-photo-purple" aria-hidden="true">
        <span class="tm-pg-photo-initials">CM</span>
        <div class="tm-pg-photo-stars" aria-label="5 out of 5 stars">
          <span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
        </div>
      </div>
      <div class="tm-pg-card-body">
        <blockquote class="tm-pg-quote">"We've tried four competitors. None had this level of <em>attention to the details</em> that slow teams down. It shows in the product."</blockquote>
        <figcaption class="tm-pg-author-strip">
          <span class="tm-pg-a-photo tm-pg-photo-purple" aria-hidden="true"><span class="tm-pg-a-initials">CM</span></span>
          <span><cite class="tm-pg-a-name">Carlos Mendes</cite><span class="tm-pg-a-role">CPO, Ironhaven</span></span>
          <span class="tm-pg-a-badge">Pro</span>
        </figcaption>
      </div>
    </article>

  </div>
</section>
```

**CSS:**
```css
/* Portrait Grid — 3-col masonry-feel grid where a 1:1 portrait
   leads each card. Cards alternate background (white / dark navy /
   warm sand) for visual rhythm. Portrait subtly zooms on card hover.
   The photo-stars badge sits on the bottom-left of the portrait above
   a gradient overlay for legibility. */
.tm-pg {
  --tm-pg-bg:    #ffffff;
  --tm-pg-ink:   #0d0d0d;
  --tm-pg-muted: #8c8c8c;
  --tm-pg-line:  #efefef;
  --tm-pg-sand:  #f5f2ed;
  --tm-pg-navy:  #0f2d4a;
  --tm-pg-blue:  #1a56db;
  padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 56px);
  background: var(--tm-pg-bg);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 520px;
}
.tm-pg-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tm-pg-line);
  flex-wrap: wrap;
  gap: 18px;
}
.tm-pg-top-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--tm-pg-ink);
  line-height: 1.2;
  max-width: 400px;
  margin: 0;
  font-weight: 400;
}
.tm-pg-top-stat { text-align: right; }
.tm-pg-ts-num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 2rem;
  color: var(--tm-pg-navy);
  line-height: 1;
}
.tm-pg-ts-lbl {
  font-size: 11px;
  color: var(--tm-pg-muted);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.tm-pg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.tm-pg-card {
  background: var(--tm-pg-bg);
  border: 1px solid var(--tm-pg-line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
  animation: tm-pg-appear 0.65s ease both;
}
.tm-pg-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  transform: translateY(-3px);
}
.tm-pg-card:nth-child(1) { animation-delay: 0.04s; }
.tm-pg-card:nth-child(2) { animation-delay: 0.10s; }
.tm-pg-card:nth-child(3) { animation-delay: 0.16s; }
.tm-pg-card:nth-child(4) { animation-delay: 0.22s; }
.tm-pg-card:nth-child(5) { animation-delay: 0.28s; }
.tm-pg-card:nth-child(6) { animation-delay: 0.34s; }
@keyframes tm-pg-appear {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
.tm-pg-card-photo {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.5s ease;
  transform: scale(1.05);
}
.tm-pg-card:hover .tm-pg-card-photo {
  transform: scale(1.1);
}
.tm-pg-photo-initials {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em;
}
.tm-pg-photo-blue   { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.tm-pg-photo-teal   { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.tm-pg-photo-amber  { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.tm-pg-photo-indigo { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
.tm-pg-photo-green  { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.tm-pg-photo-purple { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }
.tm-pg-card-photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.25));
  pointer-events: none;
}
.tm-pg-photo-stars {
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: flex;
  gap: 2px;
  z-index: 1;
}
.tm-pg-photo-stars span {
  color: #f5c518;
  font-size: 11px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.tm-pg-card-body {
  padding: 22px 20px 20px;
}
.tm-pg-quote {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tm-pg-ink);
  margin: 0 0 16px;
}
.tm-pg-quote em {
  font-style: normal;
  color: var(--tm-pg-blue);
}
.tm-pg-author-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tm-pg-line);
}
.tm-pg-a-photo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--tm-pg-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-pg-a-initials {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.tm-pg-a-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--tm-pg-ink);
  line-height: 1.3;
}
.tm-pg-a-role {
  font-size: 10px;
  color: var(--tm-pg-muted);
  margin-top: 1px;
}
.tm-pg-a-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-pg-blue);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
/* Dark variant */
.tm-pg-dark {
  background: var(--tm-pg-navy);
  border-color: var(--tm-pg-navy);
}
.tm-pg-dark .tm-pg-card-body { background: var(--tm-pg-navy); }
.tm-pg-dark .tm-pg-quote { color: rgba(255,255,255,0.88); }
.tm-pg-dark .tm-pg-quote em { color: #93c5fd; }
.tm-pg-dark .tm-pg-author-strip { border-top-color: rgba(255,255,255,0.1); }
.tm-pg-dark .tm-pg-a-name { color: #fff; }
.tm-pg-dark .tm-pg-a-role { color: rgba(255,255,255,0.45); }
.tm-pg-dark .tm-pg-a-photo { border-color: rgba(255,255,255,0.15); }
.tm-pg-dark .tm-pg-a-badge {
  background: rgba(147,197,253,0.1);
  border-color: rgba(147,197,253,0.3);
  color: #93c5fd;
}
/* Sand variant */
.tm-pg-sand { background: var(--tm-pg-sand); border-color: rgba(0,0,0,0.06); }
.tm-pg-sand .tm-pg-card-body { background: var(--tm-pg-sand); }
.tm-pg-sand .tm-pg-author-strip { border-top-color: rgba(0,0,0,0.08); }
@media (max-width: 820px) {
  .tm-pg-grid { grid-template-columns: 1fr; }
}
@media (hover: none) {
  .tm-pg-card-photo { transform: scale(1); }
  .tm-pg-card:hover .tm-pg-card-photo { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-pg-card { animation: none; transition: none; }
  .tm-pg-card:hover { transform: none; }
  .tm-pg-card-photo, .tm-pg-card:hover .tm-pg-card-photo { transform: scale(1); transition: none; }
}
```

---
## 25 CSS Text Animations

URL: https://codefronts.com/motion/css-text-animations/
Description: 25 hand-coded CSS text animations with live demos — typewriter, gradient text, glitch, neon glow, clip-path reveal, letter spacing, wave, shimmer, fade-up stagger, 3D flip, SVG stroke draw, bouncing letters, blur reveal, perspective rotation, text-shadow pulse, morphing text, liquid fill, word scramble, split-text explosion, holographic chrome, decryption, elastic bounce, cursor blink, mask wipe, and kinetic typography. 16 pure CSS (no JavaScript) + 9 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + variable-font techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.
Demo count: 25

### 01. CSS Typewriter Text Animation

**Type:** Pure CSS
**Description:** A classic monospaced typewriter effect driven entirely by CSS steps() timing and a blinking cursor pseudo-element — no JavaScript required.

**HTML:**
```html
<div class="ta-01">
  <div class="ta-01__stage">
    <p class="ta-01__text ta-01__text--line1">Hello, World.</p>
    <p class="ta-01__text ta-01__text--line2">I'm a typewriter.</p>
    <p class="ta-01__text ta-01__text--line3">Pure CSS. No JS.</p>
  </div>
</div>
```

**CSS:**
```css
.ta-01, .ta-01 *, .ta-01 *::before, .ta-01 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-01 ::selection { background: #a78bfa; color: #fff; }

.ta-01 {
  --bg: #0d0d1a;
  --green: #00ff9f;
  --cursor: #00ff9f;
  --muted: #4ade80;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
  padding: 2rem;
}

.ta-01__stage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.ta-01__text {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 3px solid transparent;
}

/* Line 1 */
.ta-01__text--line1 {
  animation:
    ta-01-type1 1.6s steps(13) 0.3s forwards,
    ta-01-blink 0.75s steps(1) infinite;
}
/* Line 2 */
.ta-01__text--line2 {
  animation:
    ta-01-type2 1.4s steps(19) 2.2s forwards,
    ta-01-blink2 0.75s steps(1) 2.2s infinite;
  opacity: 0;
  animation-fill-mode: forwards;
}
/* Line 3 */
.ta-01__text--line3 {
  animation:
    ta-01-type3 1.2s steps(18) 3.8s forwards,
    ta-01-blink3 0.75s steps(1) 3.8s infinite;
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes ta-01-type1 {
  0%   { width: 0; border-right-color: var(--cursor); opacity: 1; }
  99%  { border-right-color: var(--cursor); }
  100% { width: 13ch; border-right-color: transparent; }
}
@keyframes ta-01-type2 {
  0%   { width: 0; border-right-color: var(--cursor); opacity: 1; }
  99%  { border-right-color: var(--cursor); }
  100% { width: 19ch; border-right-color: transparent; }
}
@keyframes ta-01-type3 {
  0%   { width: 0; border-right-color: var(--cursor); opacity: 1; }
  100% { width: 18ch; border-right-color: var(--cursor); }
}
@keyframes ta-01-blink  { 50% { border-right-color: transparent; } }
@keyframes ta-01-blink2 { 50% { border-right-color: transparent; } }
@keyframes ta-01-blink3 { 50% { border-right-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .ta-01__text {
    width: auto !important;
    opacity: 1 !important;
    animation: none !important;
    border-right-color: transparent !important;
  }
}
```

### 02. CSS Gradient Text Animation

**Type:** Pure CSS
**Description:** Flowing rainbow gradient text using background-clip: text and an animated background-position shift — a striking modern headline technique.

**HTML:**
```html
<div class="ta-02">
  <div class="ta-02__stage">
    <p class="ta-02__eyebrow">Premium Collection</p>
    <h2 class="ta-02__title">Gradient Text<br>Animation</h2>
    <p class="ta-02__sub">background-clip: text · animated background-position</p>
  </div>
</div>
```

**CSS:**
```css
.ta-02, .ta-02 *, .ta-02 *::before, .ta-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-02 ::selection { background: #818cf8; color: #fff; }

.ta-02 {
  --bg: #05050f;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Segoe UI', sans-serif;
}

.ta-02__stage { text-align: center; }

.ta-02__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 0.75rem;
}

.ta-02__title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background-image: linear-gradient(90deg,
    #f43f5e 0%, #a855f7 20%, #3b82f6 40%,
    #06b6d4 60%, #10b981 80%, #f43f5e 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ta-02-flow 4s linear infinite;
}

.ta-02__sub {
  font-size: 0.75rem;
  color: #444;
  margin-top: 1rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}

@keyframes ta-02-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-02__title { animation: none; background-position: 0% center; }
}
```

### 03. CSS Glitch Text Effect Animation

**Type:** Pure CSS
**Description:** A cyberpunk-style glitch animation using CSS pseudo-elements with clip-path and transform skewing to simulate corrupted display artifacts.

**HTML:**
```html
<div class="ta-03">
  <div class="ta-03__stage">
    <h2 class="ta-03__glitch" data-text="GLITCH">GLITCH</h2>
    <p class="ta-03__sub">clip-path · pseudo-elements · RGB offset</p>
  </div>
</div>
```

**CSS:**
```css
.ta-03, .ta-03 *, .ta-03 *::before, .ta-03 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-03 ::selection { background: #f43f5e; color: #fff; }

.ta-03 {
  --bg: #050510;
  --white: #e2e8f0;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Orbitron', 'Courier New', monospace;
}

.ta-03__stage { text-align: center; }

.ta-03__glitch {
  position: relative;
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: ta-03-main 6s infinite;
}

.ta-03__glitch::before,
.ta-03__glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.ta-03__glitch::before {
  color: #ff003c;
  animation: ta-03-glitch-r 3s infinite linear alternate-reverse;
}

.ta-03__glitch::after {
  color: #00ffe7;
  animation: ta-03-glitch-b 2.5s infinite linear alternate-reverse;
}

.ta-03__sub {
  font-size: 0.68rem;
  color: #334155;
  margin-top: 1.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
}

@keyframes ta-03-main {
  0%, 90%, 100% { transform: none; opacity: 1; }
  92% { transform: skewX(-2deg); opacity: 0.9; }
  94% { transform: skewX(1deg); }
  96% { transform: none; }
  98% { transform: skewX(-1deg) scaleY(1.02); }
}

@keyframes ta-03-glitch-r {
  0%   { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);   transform: translate(-2px, 0); }
  10%  { clip-path: polygon(0 15%, 100% 15%, 100% 18%, 0 18%); transform: translate(2px, 0); }
  25%  { clip-path: polygon(0 40%, 100% 40%, 100% 44%, 0 44%); transform: translate(-1px, 0); }
  40%  { clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%); transform: translate(3px, 0); }
  55%  { clip-path: polygon(0 75%, 100% 75%, 100% 80%, 0 80%); transform: translate(-2px, 0); }
  70%  { clip-path: polygon(0 88%, 100% 88%, 100% 93%, 0 93%); transform: translate(1px, 0); }
  100% { clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%); transform: translate(0, 0); }
}

@keyframes ta-03-glitch-b {
  0%   { clip-path: polygon(0 55%, 100% 55%, 100% 58%, 0 58%); transform: translate(2px, 0); }
  15%  { clip-path: polygon(0 10%, 100% 10%, 100% 14%, 0 14%); transform: translate(-3px, 0); }
  30%  { clip-path: polygon(0 70%, 100% 70%, 100% 74%, 0 74%); transform: translate(1px, 0); }
  50%  { clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); transform: translate(-2px, 0); }
  70%  { clip-path: polygon(0 85%, 100% 85%, 100% 90%, 0 90%); transform: translate(3px, 0); }
  100% { clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); transform: translate(-1px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ta-03__glitch, .ta-03__glitch::before, .ta-03__glitch::after {
    animation: none;
    transform: none;
    clip-path: none;
  }
  .ta-03__glitch::before, .ta-03__glitch::after { display: none; }
}
```

### 04. CSS Neon Glow Text Animation

**Type:** Pure CSS
**Description:** Layered multi-colour text-shadow stacks create a pulsing neon sign effect with realistic flicker and electric glow spread.

**HTML:**
```html
<div class="ta-04">
  <div class="ta-04__stage">
    <p class="ta-04__label">Open</p>
    <h2 class="ta-04__sign">
      <span class="ta-04__s1">N</span><span class="ta-04__s2">E</span><span
       class="ta-04__s3">O</span><span class="ta-04__s4">N</span>
    </h2>
    <p class="ta-04__sub">text-shadow stacking · flicker keyframes</p>
  </div>
</div>
```

**CSS:**
```css
.ta-04, .ta-04 *, .ta-04 *::before, .ta-04 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-04 ::selection { background: #fb7185; color: #fff; }

.ta-04 {
  --bg: #030309;
  --pink: #ff2d78;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', sans-serif;
}

.ta-04__stage { text-align: center; }

.ta-04__label {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #ff2d78;
  text-shadow:
    0 0 4px #ff2d78,
    0 0 12px #ff2d78;
  margin-bottom: 0.5rem;
}

.ta-04__sign {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  display: flex;
  gap: 0.05em;
}

.ta-04__sign span {
  display: inline-block;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px var(--pink),
    0 0 40px var(--pink),
    0 0 80px var(--pink),
    0 0 90px var(--pink);
}

.ta-04__s1 { animation: ta-04-flicker1 4.5s infinite; }
.ta-04__s2 { animation: ta-04-flicker2 3.8s infinite; color: #ff8fab; text-shadow:
  0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff8fab, 0 0 40px #ff8fab, 0 0 80px #ff8fab; }
.ta-04__s3 { animation: ta-04-flicker1 5.2s 0.6s infinite; }
.ta-04__s4 { animation: ta-04-flicker2 4.1s 1.2s infinite; }

.ta-04__sub {
  font-size: 0.68rem;
  color: #2d1f2a;
  margin-top: 1.2rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@keyframes ta-04-flicker1 {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow:
      0 0 5px #fff, 0 0 10px #fff,
      0 0 20px var(--pink), 0 0 40px var(--pink),
      0 0 80px var(--pink), 0 0 90px var(--pink);
  }
  20%, 24%, 55% {
    opacity: 0.4;
    text-shadow: none;
  }
}

@keyframes ta-04-flicker2 {
  0%, 30%, 32%, 80%, 82%, 100% {
    opacity: 1;
    text-shadow:
      0 0 5px #fff, 0 0 10px #fff,
      0 0 20px var(--pink), 0 0 40px var(--pink),
      0 0 80px var(--pink), 0 0 90px var(--pink);
  }
  31%, 81% {
    opacity: 0.3;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-04__sign span, .ta-04__label { animation: none; }
}
```

### 05. CSS Text Reveal Clip Animation

**Type:** Pure CSS
**Description:** A premium editorial text reveal using clip-path inset() to wipe text into view from behind an invisible mask — elegant, production-ready.

**HTML:**
```html
<div class="ta-05">
  <div class="ta-05__stage">
    <div class="ta-05__line-wrap"><p class="ta-05__line ta-05__line--1">Crafted</p></div>
    <div class="ta-05__line-wrap"><p class="ta-05__line ta-05__line--2">for the</p></div>
    <div class="ta-05__line-wrap ta-05__line-wrap--accent">
      <p class="ta-05__line ta-05__line--3">discerning eye.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ta-05, .ta-05 *, .ta-05 *::before, .ta-05 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-05 ::selection { background: #e2e8f0; color: #0f172a; }

.ta-05 {
  --bg: #0f0f0f;
  --gold: #c9a84c;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Playfair Display', Georgia, serif;
}

.ta-05__stage { text-align: left; }

.ta-05__line-wrap {
  overflow: hidden;
  line-height: 1.15;
}

.ta-05__line {
  font-size: clamp(1.8rem, 5.5vw, 3.2rem);
  font-weight: 700;
  color: #e2e8f0;
  display: block;
  transform: translateY(110%);
  animation: ta-05-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ta-05__line--1 { animation-delay: 0.1s; }
.ta-05__line--2 { animation-delay: 0.3s; font-style: italic; font-weight: 400; color: #94a3b8; }
.ta-05__line--3 { animation-delay: 0.55s; color: var(--gold); }

.ta-05__line-wrap--accent .ta-05__line {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.1em;
}

@keyframes ta-05-rise {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ta-05__line { animation: none; transform: none; }
}
```

### 06. CSS Letter Spacing Animation

**Type:** Pure CSS
**Description:** Dramatic letter-spacing expansion and contraction paired with opacity and blur transitions creates an airy, editorial headline entrance.

**HTML:**
```html
<div class="ta-06">
  <div class="ta-06__stage">
    <h2 class="ta-06__word ta-06__word--1">EXPAND</h2>
    <h2 class="ta-06__word ta-06__word--2">YOUR</h2>
    <h2 class="ta-06__word ta-06__word--3">HORIZON</h2>
  </div>
</div>
```

**CSS:**
```css
.ta-06, .ta-06 *, .ta-06 *::before, .ta-06 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-06 ::selection { background: #7c3aed; color: #fff; }

.ta-06 {
  --bg: #09090b;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

.ta-06__stage {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ta-06__word {
  font-size: clamp(1.4rem, 4.5vw, 2.8rem);
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0;
  animation: ta-06-expand 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ta-06__word--1 { color: #e2e8f0; animation-delay: 0.1s; }
.ta-06__word--2 { color: #7c3aed; animation-delay: 0.4s; letter-spacing: 0.3em; font-weight: 300; }
.ta-06__word--3 { color: #e2e8f0; animation-delay: 0.7s; }

@keyframes ta-06-expand {
  0% {
    opacity: 0;
    letter-spacing: -0.4em;
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0.15em;
  }
}

.ta-06__word--2 {
  animation-name: ta-06-expand2;
}

@keyframes ta-06-expand2 {
  0% {
    opacity: 0;
    letter-spacing: -0.2em;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0.4em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-06__word {
    animation: none;
    opacity: 1;
    filter: none;
    letter-spacing: 0.1em;
  }
}
```

### 07. CSS Wave Text Animation

**Type:** Pure CSS
**Description:** A sinusoidal wave ripples through individual letters using staggered translateY keyframes, each letter becoming a wave oscillator.

**HTML:**
```html
<div class="ta-07">
  <div class="ta-07__stage">
    <p class="ta-07__label">Riding the wave</p>
    <h2 class="ta-07__text">
      <span style="--i:0">W</span><span style="--i:1">A</span><span style="--i:2">V</span><span
       style="--i:3">E</span><span style="--i:4">&nbsp;</span><span style="--i:5">T</span><span
       style="--i:6">E</span><span style="--i:7">X</span><span style="--i:8">T</span>
    </h2>
  </div>
</div>
```

**CSS:**
```css
.ta-07, .ta-07 *, .ta-07 *::before, .ta-07 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-07 ::selection { background: #0ea5e9; color: #fff; }

.ta-07 {
  --bg: linear-gradient(135deg, #0c1a2e 0%, #0a0f1e 100%);
  --wave: #38bdf8;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

.ta-07__stage { text-align: center; }

.ta-07__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1e4060;
  margin-bottom: 0.75rem;
}

.ta-07__text {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 800;
  color: var(--wave);
  display: flex;
  letter-spacing: 0.05em;
}

.ta-07__text span {
  display: inline-block;
  animation: ta-07-wave 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.07s);
}

@keyframes ta-07-wave {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-14px); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-07__text span { animation: none; transform: none; }
}
```

### 08. CSS Shimmer Text Animation

**Type:** Pure CSS
**Description:** A sweeping metallic shimmer passes across text using a moving conic or linear gradient highlight — the gold-foil effect of premium design.

**HTML:**
```html
<div class="ta-08">
  <div class="ta-08__stage">
    <p class="ta-08__eyebrow">Limited Edition</p>
    <h2 class="ta-08__title">Golden Hour</h2>
    <p class="ta-08__sub">background-clip: text · animated shimmer gradient</p>
  </div>
</div>
```

**CSS:**
```css
.ta-08, .ta-08 *, .ta-08 *::before, .ta-08 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-08 ::selection { background: #92400e; color: #fef3c7; }

.ta-08 {
  --bg: #0a0806;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Playfair Display', Georgia, serif;
}

.ta-08__stage { text-align: center; }

.ta-08__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #78350f;
  margin-bottom: 0.6rem;
}

.ta-08__title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  background-image: linear-gradient(
    105deg,
    #92400e 0%,
    #b45309 20%,
    #d97706 35%,
    #fbbf24 43%,
    #fef9c3 50%,
    #fbbf24 57%,
    #d97706 65%,
    #b45309 80%,
    #92400e 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-position: 0% center;
  animation: ta-08-shimmer 2.8s linear infinite;
}

.ta-08__sub {
  font-size: 0.65rem;
  color: #3f2a10;
  margin-top: 1rem;
  letter-spacing: 0.08em;
  font-family: 'Courier New', monospace;
}

@keyframes ta-08-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 250% center; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-08__title { animation: none; background-position: 0% center; }
}
```

### 09. CSS Fade Up Stagger Text Animation

**Type:** Pure CSS
**Description:** Words cascade upward one after another with staggered opacity and translateY transitions — the signature micro-animation of modern landing pages.

**HTML:**
```html
<div class="ta-09">
  <div class="ta-09__stage">
    <p class="ta-09__label ta-09__item" style="--d:0">The future of</p>
    <h2 class="ta-09__headline">
      <span class="ta-09__item" style="--d:1">Design</span>
      <span class="ta-09__item ta-09__accent" style="--d:2">is</span>
      <span class="ta-09__item" style="--d:3">Motion.</span>
    </h2>
    <p class="ta-09__body ta-09__item" style="--d:4">Staggered entrances create perceived momentum and guide the eye through content hierarchies with purpose.</p>
  </div>
</div>
```

**CSS:**
```css
.ta-09, .ta-09 *, .ta-09 *::before, .ta-09 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-09 ::selection { background: #6d28d9; color: #fff; }

.ta-09 {
  --bg: #f8f7ff;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

.ta-09__stage {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ta-09__item {
  opacity: 0;
  transform: translateY(24px);
  animation: ta-09-fadeup 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--d) * 0.12s);
}

.ta-09__label {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7c3aed;
}

.ta-09__headline {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 800;
  color: #1e1b4b;
  line-height: 1.1;
  display: flex;
  gap: 0.3em;
  flex-wrap: wrap;
}

.ta-09__accent {
  color: #7c3aed;
  font-style: italic;
  font-weight: 400;
}

.ta-09__body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #64748b;
  max-width: 380px;
}

@keyframes ta-09-fadeup {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ta-09__item { animation: none; opacity: 1; transform: none; }
}
```

### 10. CSS 3D Text Flip Animation

**Type:** Pure CSS
**Description:** Words rotate in 3D on the Y-axis using CSS perspective and backface-visibility to flip between two text faces like a rotating sign.

**HTML:**
```html
<div class="ta-10">
  <div class="ta-10__stage">
    <p class="ta-10__label">Rotating between</p>
    <div class="ta-10__scene">
      <div class="ta-10__flipper">
        <div class="ta-10__face ta-10__face--front">Design</div>
        <div class="ta-10__face ta-10__face--back">Motion</div>
      </div>
    </div>
    <p class="ta-10__sub">perspective · rotateY · backface-visibility</p>
  </div>
</div>
```

**CSS:**
```css
.ta-10, .ta-10 *, .ta-10 *::before, .ta-10 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-10 ::selection { background: #0f766e; color: #fff; }

.ta-10 {
  --bg: #05120f;
  --teal: #2dd4bf;
  --gold: #fbbf24;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
}

.ta-10__stage { text-align: center; }

.ta-10__label {
  font-size: 0.72rem;
  color: #1f4040;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.ta-10__scene {
  perspective: 600px;
  display: inline-block;
  height: clamp(3rem, 9vw, 5.5rem);
  overflow: visible;
}

.ta-10__flipper {
  position: relative;
  transform-style: preserve-3d;
  animation: ta-10-flip 4s ease-in-out infinite;
  height: 100%;
  display: flex;
  align-items: center;
}

.ta-10__face {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  position: absolute;
  width: 100%;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ta-10__face--front { color: var(--teal); }
.ta-10__face--back  { color: var(--gold); transform: rotateY(180deg); }

.ta-10__sub {
  font-size: 0.65rem;
  color: #1a3030;
  margin-top: 1rem;
  letter-spacing: 0.08em;
  font-family: 'Courier New', monospace;
}

@keyframes ta-10-flip {
  0%   { transform: rotateY(0deg); }
  35%  { transform: rotateY(0deg); }
  50%  { transform: rotateY(-180deg); }
  85%  { transform: rotateY(-180deg); }
  100% { transform: rotateY(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ta-10__flipper { animation: none; }
  .ta-10__face--back { display: none; }
}
```

### 11. CSS Text Stroke Draw Animation

**Type:** Pure CSS
**Description:** SVG stroke-dashoffset animation draws each letter outline progressively as if a pen is writing the text in real time.

**HTML:**
```html
<div class="ta-11">
  <div class="ta-11__stage">
    <svg class="ta-11__svg" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Draw">
      <text class="ta-11__text" x="50%" y="88" text-anchor="middle">DRAW</text>
    </svg>
    <p class="ta-11__sub">SVG stroke-dashoffset · path length animation</p>
  </div>
</div>
```

**CSS:**
```css
.ta-11, .ta-11 *, .ta-11 *::before, .ta-11 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-11 ::selection { background: #7c3aed; color: #fff; }

.ta-11 {
  --bg: #08050f;
  --stroke: #a78bfa;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', sans-serif;
}

.ta-11__stage { text-align: center; width: 100%; max-width: 420px; }

.ta-11__svg {
  width: 100%;
  overflow: visible;
}

.ta-11__text {
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
  font-size: 88px;
  font-weight: 900;
  fill: transparent;
  stroke: var(--stroke);
  stroke-width: 1.8;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  letter-spacing: 6px;
  animation:
    ta-11-draw 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards,
    ta-11-fill 0.6s ease 2.4s forwards;
}

@keyframes ta-11-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes ta-11-fill {
  to { fill: rgba(167, 139, 250, 0.15); }
}

.ta-11__sub {
  font-size: 0.65rem;
  color: #2d1a4a;
  margin-top: 0.75rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  .ta-11__text {
    animation: none;
    stroke-dashoffset: 0;
    fill: rgba(167, 139, 250, 0.15);
  }
}
```

### 12. CSS Bouncing Letters Animation

**Type:** Pure CSS
**Description:** Individual letters bounce with elastic spring physics using cubic-bezier overshoot easing and staggered delays for a playful, energetic effect.

**HTML:**
```html
<div class="ta-12">
  <div class="ta-12__stage">
    <div class="ta-12__text">
      <span style="--i:0">B</span><span style="--i:1">O</span><span style="--i:2">U</span><span
       style="--i:3">N</span><span style="--i:4">C</span><span style="--i:5">E</span>
      <span style="--i:6">&nbsp;</span>
      <span style="--i:7">!</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ta-12, .ta-12 *, .ta-12 *::before, .ta-12 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-12 ::selection { background: #f59e0b; color: #fff; }

.ta-12 {
  --bg: linear-gradient(160deg, #1a0a2e, #0d1117);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
}

.ta-12__stage { text-align: center; }

.ta-12__text {
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: center;
}

.ta-12__text span {
  display: inline-block;
  color: #fbbf24;
  animation: ta-12-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
  animation-delay: calc(var(--i) * 0.09s);
  text-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

.ta-12__text span:nth-child(even) { color: #f43f5e; text-shadow: 0 6px 20px rgba(244, 63, 94, 0.4); }

@keyframes ta-12-bounce {
  0% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
  60% {
    transform: translateY(-28px) scaleX(0.9) scaleY(1.1);
  }
  80% {
    transform: translateY(-22px) scaleX(0.95) scaleY(1.05);
  }
  100% {
    transform: translateY(-28px) scaleX(0.9) scaleY(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-12__text span { animation: none; transform: none; }
}
```

### 13. CSS Blur Reveal Text Animation

**Type:** Pure CSS
**Description:** Text materialises from a hazy blur using filter:blur() transitioning to sharp focus — an atmospheric entrance effect for editorial headlines.

**HTML:**
```html
<div class="ta-13">
  <div class="ta-13__stage">
    <span class="ta-13__word ta-13__word--1">Clarity</span>
    <span class="ta-13__word ta-13__word--2">emerges</span>
    <span class="ta-13__word ta-13__word--3">from</span>
    <span class="ta-13__word ta-13__word--4">chaos.</span>
  </div>
</div>
```

**CSS:**
```css
.ta-13, .ta-13 *, .ta-13 *::before, .ta-13 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-13 ::selection { background: #1e40af; color: #dbeafe; }

.ta-13 {
  --bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Playfair Display', Georgia, serif;
}

.ta-13__stage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  justify-content: center;
  align-items: baseline;
}

.ta-13__stage { max-width: 90%; }
.ta-13__word {
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  font-weight: 700;
  color: #e0e7ff;
  opacity: 0;
  filter: blur(18px);
  transform: scale(1.05);
  animation: ta-13-focus 1s ease-out forwards;
}

.ta-13__word--1 { animation-delay: 0.1s; }
.ta-13__word--2 { animation-delay: 0.45s; color: #818cf8; font-style: italic; font-weight: 400; }
.ta-13__word--3 { animation-delay: 0.8s; }
.ta-13__word--4 { animation-delay: 1.15s; color: #c7d2fe; }

@keyframes ta-13-focus {
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-13__word { animation: none; opacity: 1; filter: none; transform: none; }
}
```

### 14. CSS Perspective Text Rotation Animation

**Type:** Pure CSS
**Description:** Text rotates continuously around its X-axis in 3D perspective space, creating a rolling barrel or tumbling-through-space headline effect.

**HTML:**
```html
<div class="ta-14">
  <div class="ta-14__stage">
    <p class="ta-14__eyebrow">Into the</p>
    <div class="ta-14__scene">
      <h2 class="ta-14__text">VOID</h2>
    </div>
    <p class="ta-14__sub">perspective · rotateX · 3D depth</p>
  </div>
</div>
```

**CSS:**
```css
.ta-14, .ta-14 *, .ta-14 *::before, .ta-14 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-14 ::selection { background: #4f46e5; color: #fff; }

.ta-14 {
  --bg: radial-gradient(ellipse at center, #0d0d2e 0%, #050510 100%);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

.ta-14__stage { text-align: center; }

.ta-14__eyebrow {
  font-size: 0.72rem;
  color: #3730a3;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.ta-14__scene {
  perspective: 400px;
  display: inline-block;
}

.ta-14__text {
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  background-image: linear-gradient(0deg, #4f46e5, #a78bfa, #c4b5fd, #e0e7ff, #a78bfa, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ta-14-spin 6s linear infinite;
  transform-origin: center center;
  display: block;
}

@keyframes ta-14-spin {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(360deg); }
}

.ta-14__sub {
  font-size: 0.65rem;
  color: #1e1b4b;
  margin-top: 1rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  .ta-14__text { animation: none; transform: rotateX(0deg); color: #a78bfa; }
}
```

### 15. CSS Text Shadow Pulse Animation

**Type:** Pure CSS
**Description:** A rhythmic pulsing text-shadow corona breathes in and out around text using multi-layer shadow animation — a hypnotic, ambient display effect.

**HTML:**
```html
<div class="ta-15">
  <div class="ta-15__stage">
    <h2 class="ta-15__text">PULSE</h2>
    <p class="ta-15__sub">text-shadow multi-layer · ease-in-out pulse</p>
  </div>
</div>
```

**CSS:**
```css
.ta-15, .ta-15 *, .ta-15 *::before, .ta-15 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-15 ::selection { background: #0891b2; color: #fff; }

.ta-15 {
  --bg: #020d12;
  --core: #67e8f9;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Orbitron', 'Courier New', monospace;
}

.ta-15__stage { text-align: center; }

.ta-15__text {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--core);
  animation: ta-15-pulse 2s ease-in-out infinite alternate;
}

.ta-15__sub {
  font-size: 0.65rem;
  color: #0c3040;
  margin-top: 1rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@keyframes ta-15-pulse {
  0% {
    text-shadow:
      0 0 2px var(--core),
      0 0 4px var(--core),
      0 0 6px #0891b2;
  }
  100% {
    text-shadow:
      0 0 8px #fff,
      0 0 20px var(--core),
      0 0 40px var(--core),
      0 0 80px #0891b2,
      0 0 120px #0c4a6e;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-15__text {
    animation: none;
    text-shadow: 0 0 10px var(--core), 0 0 30px #0891b2;
  }
}
```

### 16. CSS Morphing Text Animation

**Type:** CSS + JS
**Description:** Two text strings dissolve into each other with a blurred crossfade using CSS filter and opacity — JavaScript cycles through a word list on a timer.

**HTML:**
```html
<div class="ta-16">
  <div class="ta-16__stage">
    <p class="ta-16__label">We build</p>
    <div class="ta-16__morph-wrap" id="ta-16-wrap">
      <span class="ta-16__word ta-16__word--a" id="ta-16-a">Experiences</span>
      <span class="ta-16__word ta-16__word--b" id="ta-16-b">Products</span>
    </div>
    <p class="ta-16__sub">filter:blur crossfade · JS word cycling</p>
  </div>
</div>
```

**CSS:**
```css
.ta-16, .ta-16 *, .ta-16 *::before, .ta-16 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-16 ::selection { background: #db2777; color: #fff; }

.ta-16 {
  --bg: #0a0015;
  --pink: #f472b6;
  --purple: #a855f7;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
}

.ta-16__stage { text-align: center; }

.ta-16__label {
  font-size: 0.78rem;
  color: #6b21a8;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.ta-16__morph-wrap {
  position: relative;
  height: clamp(3.5rem, 9vw, 6rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ta-16__word {
  position: absolute;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 900;
  white-space: nowrap;
  transition: opacity 0.6s ease, filter 0.6s ease;
}

.ta-16__word--a {
  background: linear-gradient(90deg, var(--pink), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ta-16__word--b {
  background: linear-gradient(90deg, var(--purple), #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: blur(12px);
}

.ta-16__word.ta-16--out {
  opacity: 0;
  filter: blur(16px);
}

.ta-16__word.ta-16--in {
  opacity: 1;
  filter: blur(0);
}

.ta-16__sub {
  font-size: 0.65rem;
  color: #2d0a40;
  margin-top: 0.8rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  .ta-16__word { transition: none; filter: none; }
}
```

**JS:**
```js
(function() {
  const words = ['Experiences', 'Products', 'Futures', 'Stories', 'Journeys'];
  const elA = document.getElementById('ta-16-a');
  const elB = document.getElementById('ta-16-b');
  if (!elA || !elB) return;

  let idx = 0;
  let showingA = true;

  function morph() {
    idx = (idx + 1) % words.length;
    const incoming = showingA ? elB : elA;
    const outgoing  = showingA ? elA : elB;

    incoming.textContent = words[idx];
    outgoing.classList.add('ta-16--out');
    outgoing.classList.remove('ta-16--in');
    incoming.classList.add('ta-16--in');
    incoming.classList.remove('ta-16--out');
    incoming.style.opacity = '1';
    incoming.style.filter  = 'blur(0)';
    outgoing.style.opacity = '0';
    outgoing.style.filter  = 'blur(16px)';

    showingA = !showingA;
  }

  setInterval(morph, 2400);
})();
```

### 17. CSS Liquid Fill Text Animation

**Type:** Pure CSS
**Description:** Text appears to fill with liquid from bottom to top using a moving gradient mask and clip-path — a striking progress-indicator text technique.

**HTML:**
```html
<div class="ta-17">
  <div class="ta-17__stage">
    <div class="ta-17__container">
      <h2 class="ta-17__outline">FILL</h2>
      <h2 class="ta-17__liquid">FILL</h2>
    </div>
    <p class="ta-17__sub">clip-path inset · -webkit-text-stroke · liquid rise</p>
  </div>
</div>
```

**CSS:**
```css
.ta-17, .ta-17 *, .ta-17 *::before, .ta-17 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-17 ::selection { background: #0369a1; color: #e0f2fe; }

.ta-17 {
  --bg: #020c18;
  --water: #0ea5e9;
  --deep: #0369a1;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
}

.ta-17__stage { text-align: center; }

.ta-17__container {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.ta-17__outline,
.ta-17__liquid {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1;
}

.ta-17__outline {
  -webkit-text-stroke: 2px rgba(14, 165, 233, 0.35);
  color: transparent;
}

.ta-17__liquid {
  position: absolute;
  top: 0; left: 0;
  background: linear-gradient(to top, var(--deep) 0%, var(--water) 60%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  clip-path: inset(100% 0 0 0);
  animation: ta-17-rise 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

@keyframes ta-17-rise {
  to { clip-path: inset(0% 0 0 0); }
}

.ta-17__sub {
  font-size: 0.65rem;
  color: #0c2a40;
  margin-top: 0.6rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  .ta-17__liquid { animation: none; clip-path: inset(0% 0 0 0); }
}
```

### 18. CSS Word Scramble Animation

**Type:** CSS + JS
**Description:** Characters rapidly cycle through random glyphs before locking into the final letter — a hacker/terminal decryption effect powered by JavaScript.

**HTML:**
```html
<div class="ta-18">
  <div class="ta-18__stage">
    <p class="ta-18__label">Decrypting</p>
    <h2 class="ta-18__text" id="ta-18-text" aria-label="ACCESS GRANTED"></h2>
    <p class="ta-18__sub">JS character cycling · random glyph pool · staggered resolve</p>
  </div>
</div>
```

**CSS:**
```css
.ta-18, .ta-18 *, .ta-18 *::before, .ta-18 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-18 ::selection { background: #065f46; color: #d1fae5; }

.ta-18 {
  --bg: #030d06;
  --green: #4ade80;
  --dim: #166534;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.ta-18__stage { text-align: center; }

.ta-18__label {
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.5rem;
}

.ta-18__text {
  font-size: clamp(1.8rem, 5.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.05em;
  min-height: 1.2em;
}

.ta-18__char {
  display: inline-block;
  color: var(--dim);
  transition: color 0.1s;
}

.ta-18__char.resolved {
  color: var(--green);
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.ta-18__sub {
  font-size: 0.65rem;
  color: #052010;
  margin-top: 0.8rem;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .ta-18__char { transition: none; }
}
```

**JS:**
```js
(function() {
  const el = document.getElementById('ta-18-text');
  if (!el) return;

  const finalText = 'ACCESS GRANTED';
  const chars = '!@#$%^&*<>?/|\\[]{}ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const resolveDelay = 6;

  function scramble() {
    el.innerHTML = '';
    const spans = [];
    [...finalText].forEach((ch) => {
      const span = document.createElement('span');
      span.className = 'ta-18__char';
      span.textContent = ch === ' ' ? ' ' : chars[Math.floor(Math.random() * chars.length)];
      el.appendChild(span);
      spans.push({ el: span, final: ch, cycles: 0, resolved: false });
    });

    let tick = 0;
    const id = setInterval(() => {
      tick++;
      let allDone = true;
      spans.forEach((s, i) => {
        if (s.resolved) return;
        if (tick >= resolveDelay + i * 3) {
          s.el.textContent = s.final === ' ' ? ' ' : s.final;
          s.el.classList.add('resolved');
          s.resolved = true;
        } else {
          s.el.textContent = s.final === ' ' ? ' ' : chars[Math.floor(Math.random() * chars.length)];
          allDone = false;
        }
      });
      if (allDone) {
        clearInterval(id);
        setTimeout(scramble, 2200);
      }
    }, 65);
  }

  scramble();
})();
```

### 19. CSS Split Text Explosion Animation

**Type:** CSS + JS
**Description:** Letters fly in from random off-screen positions and converge to form a word — a dramatic entrance with JS-randomised transform origins.

**HTML:**
```html
<div class="ta-19">
  <div class="ta-19__stage">
    <h2 class="ta-19__text" id="ta-19-text" aria-label="IMPACT">IMPACT</h2>
    <button class="ta-19__btn" id="ta-19-replay">↺ Replay</button>
  </div>
</div>
```

**CSS:**
```css
.ta-19, .ta-19 *, .ta-19 *::before, .ta-19 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-19 ::selection { background: #9f1239; color: #fff; }

.ta-19 {
  --bg: radial-gradient(ellipse at 50% 60%, #1c0020, #050008);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

.ta-19__text {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: center;
  gap: 0.02em;
}

.ta-19__char {
  display: inline-block;
  background: linear-gradient(135deg, #f43f5e, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: ta-19-fly 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes ta-19-fly {
  from {
    opacity: 0;
    transform: translate(var(--tx, 0px), var(--ty, -60px)) rotate(var(--r, 0deg));
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

.ta-19__btn {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid #4a0a20;
  color: #9f1239;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.ta-19__btn:hover { border-color: #f43f5e; color: #f43f5e; }

@media (prefers-reduced-motion: reduce) {
  .ta-19__char { animation: none; opacity: 1; transform: none; }
}
```

**JS:**
```js
(function() {
  const wrap = document.getElementById('ta-19-text');
  const btn  = document.getElementById('ta-19-replay');
  if (!wrap) return;

  function explode() {
    const word = wrap.getAttribute('aria-label') || wrap.textContent;
    wrap.innerHTML = '';
    [...word].forEach((ch, i) => {
      const span = document.createElement('span');
      span.className = 'ta-19__char';
      span.textContent = ch;
      const angle = Math.random() * Math.PI * 2;
      const dist  = 120 + Math.random() * 180;
      span.style.setProperty('--tx', Math.cos(angle) * dist + 'px');
      span.style.setProperty('--ty', Math.sin(angle) * dist + 'px');
      span.style.setProperty('--r',  (Math.random() * 60 - 30) + 'deg');
      span.style.animationDelay = (i * 0.06) + 's';
      wrap.appendChild(span);
    });
  }

  explode();
  if (btn) btn.addEventListener('click', explode);
})();
```

### 20. CSS Holographic Text Animation

**Type:** Pure CSS
**Description:** A rotating hue-shift conic gradient combined with animated background-position creates a holographic foil shimmer on display text.

**HTML:**
```html
<div class="ta-20">
  <div class="ta-20__stage">
    <h2 class="ta-20__title">HOLO</h2>
    <p class="ta-20__sub">conic-gradient · background-clip: text · hue rotation</p>
  </div>
</div>
```

**CSS:**
```css
.ta-20, .ta-20 *, .ta-20 *::before, .ta-20 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-20 ::selection { background: rgba(255,255,255,0.3); color: #000; }

.ta-20 {
  --bg: #080808;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
}

.ta-20__stage { text-align: center; }

.ta-20__title {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  background-image: conic-gradient(
    from 0deg,
    hsl(0,100%,65%),
    hsl(60,100%,65%),
    hsl(120,100%,65%),
    hsl(180,100%,65%),
    hsl(240,100%,65%),
    hsl(300,100%,65%),
    hsl(360,100%,65%)
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-origin: padding-box;
  animation:
    ta-20-holo 3s linear infinite,
    ta-20-drift 7s ease-in-out infinite alternate;
  filter: saturate(1.3) contrast(1.1);
}

@keyframes ta-20-holo {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes ta-20-drift {
  from { background-position-y: 20%; }
  to   { background-position-y: 80%; }
}

.ta-20__sub {
  font-size: 0.65rem;
  color: #222;
  margin-top: 0.8rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  .ta-20__title { animation: none; background-position: 50% 50%; }
}
```

### 21. CSS Text Decryption Animation

**Type:** CSS + JS
**Description:** A sophisticated matrix-style decryption where columns of binary rain resolve into readable text — more structured than scramble, more cinematic than typewriter.

**HTML:**
```html
<div class="ta-21">
  <div class="ta-21__stage">
    <p class="ta-21__label">System Boot</p>
    <div class="ta-21__output" id="ta-21-output" aria-label="CLASSIFIED DATA"></div>
    <p class="ta-21__sub">binary rain columns · staggered column resolve · JS timer</p>
  </div>
</div>
```

**CSS:**
```css
.ta-21, .ta-21 *, .ta-21 *::before, .ta-21 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-21 ::selection { background: #14532d; color: #bbf7d0; }

.ta-21 {
  --bg: #010a04;
  --rain: #15803d;
  --bright: #4ade80;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.ta-21__stage { text-align: center; width: 100%; }

.ta-21__label {
  font-size: 0.68rem;
  color: var(--rain);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.ta-21__output {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  display: flex;
  justify-content: center;
  gap: 0.05em;
  min-height: 1.2em;
}

.ta-21__col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ta-21__char {
  display: inline-block;
  color: var(--rain);
  animation: ta-21-rain 0.08s linear infinite;
  opacity: 0.7;
}

.ta-21__char.decoded {
  color: var(--bright);
  animation: ta-21-flash 0.3s ease-out forwards;
  text-shadow: 0 0 12px var(--bright), 0 0 30px rgba(74,222,128,0.4);
}

.ta-21__sub {
  font-size: 0.65rem;
  color: #052010;
  margin-top: 0.8rem;
  letter-spacing: 0.08em;
}

@keyframes ta-21-rain {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 0.4; }
}

@keyframes ta-21-flash {
  0%   { opacity: 0; transform: scaleY(1.3); }
  60%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ta-21__column, .ta-21__char { animation: none !important; transition: none; }
}
```

**JS:**
```js
(function() {
  const el = document.getElementById('ta-21-output');
  if (!el) return;

  const finalText = 'CLASSIFIED DATA';
  const bits = '01';
  const columnDelay = 180;

  function decode() {
    el.innerHTML = '';
    const intervals = [];

    [...finalText].forEach((ch, i) => {
      const charEl = document.createElement('span');
      charEl.className = 'ta-21__char';
      charEl.textContent = ch === ' ' ? ' ' : bits[Math.floor(Math.random() * 2)];
      el.appendChild(charEl);

      if (ch === ' ') return;

      const iv = setInterval(() => {
        charEl.textContent = bits[Math.floor(Math.random() * 2)];
      }, 80);
      intervals.push(iv);

      setTimeout(() => {
        clearInterval(iv);
        charEl.textContent = ch;
        charEl.classList.add('decoded');
      }, 500 + i * columnDelay);
    });

    setTimeout(() => {
      intervals.forEach(clearInterval);
      setTimeout(decode, 2800);
    }, 500 + finalText.length * columnDelay + 400);
  }

  decode();
})();
```

### 22. CSS Elastic Bounce Text Animation

**Type:** CSS + JS
**Description:** A headline drops in with exaggerated squash-and-stretch physics — JavaScript assigns custom spring parameters per letter for natural variance.

**HTML:**
```html
<div class="ta-22">
  <div class="ta-22__stage">
    <h2 class="ta-22__text" id="ta-22-text" aria-label="BOUNCE">BOUNCE</h2>
    <button class="ta-22__btn" id="ta-22-replay">↺ Drop again</button>
  </div>
</div>
```

**CSS:**
```css
.ta-22, .ta-22 *, .ta-22 *::before, .ta-22 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-22 ::selection { background: #b45309; color: #fff; }

.ta-22 {
  --bg: linear-gradient(180deg, #0f0a00, #1a0f00);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

.ta-22__text {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: center;
}

.ta-22__char {
  display: inline-block;
  color: #fbbf24;
  text-shadow: 0 4px 16px rgba(251,191,36,0.35);
  opacity: 0;
  animation: ta-22-drop 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  animation-delay: var(--delay, 0s);
  transform-origin: center bottom;
}

@keyframes ta-22-drop {
  0%   { opacity: 1; transform: translateY(var(--fall, -80px)) scaleX(1) scaleY(1); }
  55%  { transform: translateY(0) scaleX(1.25) scaleY(0.72); }
  70%  { transform: translateY(-18px) scaleX(0.92) scaleY(1.1); }
  83%  { transform: translateY(0) scaleX(1.1) scaleY(0.9); }
  92%  { transform: translateY(-6px) scaleX(0.97) scaleY(1.04); }
  100% { opacity: 1; transform: translateY(0) scaleX(1) scaleY(1); }
}

.ta-22__btn {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid #451a03;
  color: #92400e;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ta-22__btn:hover { border-color: #fbbf24; color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
  .ta-22__char { animation: none; opacity: 1; transform: none; }
}
```

**JS:**
```js
(function() {
  const wrap = document.getElementById('ta-22-text');
  const btn  = document.getElementById('ta-22-replay');
  if (!wrap) return;

  const word = wrap.getAttribute('aria-label') || 'BOUNCE';

  function build() {
    wrap.innerHTML = '';
    [...word].forEach((ch, i) => {
      const span = document.createElement('span');
      span.className = 'ta-22__char';
      span.textContent = ch;
      const fall  = -(60 + Math.random() * 80);
      const delay = i * 0.07 + Math.random() * 0.04;
      span.style.setProperty('--fall',  fall + 'px');
      span.style.setProperty('--delay', delay + 's');
      wrap.appendChild(span);
    });
  }

  function replay() {
    wrap.querySelectorAll('.ta-22__char').forEach(s => {
      s.style.animation = 'none';
      void s.offsetWidth;
      s.style.animation = '';
    });
    build();
  }

  build();
  if (btn) btn.addEventListener('click', replay);
})();
```

### 23. CSS Cursor Typewriter Blink Animation

**Type:** CSS + JS
**Description:** A JavaScript-driven typewriter that cycles through multiple phrases with cursor blink, delete speed, and per-phrase pause — a classic hero animation.

**HTML:**
```html
<div class="ta-23">
  <div class="ta-23__stage">
    <p class="ta-23__prefix">We design</p>
    <div class="ta-23__line">
      <span class="ta-23__typed" id="ta-23-typed"></span><span class="ta-23__cursor" id="ta-23-cursor">▋</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ta-23, .ta-23 *, .ta-23 *::before, .ta-23 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-23 ::selection { background: #7c3aed; color: #fff; }

.ta-23 {
  --bg: #f5f3ff;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

.ta-23__stage { text-align: left; }

.ta-23__prefix {
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  color: #a78bfa;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.ta-23__line {
  display: flex;
  align-items: center;
  min-height: 1.2em;
}

.ta-23__typed {
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 800;
  color: #1e1b4b;
  white-space: nowrap;
}

.ta-23__cursor {
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 400;
  color: #7c3aed;
  animation: ta-23-blink 0.85s steps(1) infinite;
  margin-left: 2px;
  line-height: 1;
}

.ta-23__cursor.typing {
  animation-play-state: paused;
}

@keyframes ta-23-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-23__cursor { animation: none; opacity: 1; }
}
```

**JS:**
```js
(function() {
  const typedEl  = document.getElementById('ta-23-typed');
  const cursorEl = document.getElementById('ta-23-cursor');
  if (!typedEl || !cursorEl) return;

  const phrases       = ['Experiences', 'Systems', 'Interfaces', 'Futures', 'Stories'];
  const typeSpeed     = 75;
  const deleteSpeed   = 38;
  const pauseDuration = 1600;

  let phraseIdx = 0;
  let charIdx   = 0;
  let deleting  = false;

  function tick() {
    const current = phrases[phraseIdx];

    if (!deleting) {
      charIdx++;
      typedEl.textContent = current.slice(0, charIdx);
      cursorEl.classList.add('typing');

      if (charIdx === current.length) {
        cursorEl.classList.remove('typing');
        setTimeout(() => { deleting = true; tick(); }, pauseDuration);
        return;
      }
      setTimeout(tick, typeSpeed);
    } else {
      charIdx--;
      typedEl.textContent = current.slice(0, charIdx);
      cursorEl.classList.add('typing');

      if (charIdx === 0) {
        cursorEl.classList.remove('typing');
        deleting = false;
        phraseIdx = (phraseIdx + 1) % phrases.length;
        setTimeout(tick, 300);
        return;
      }
      setTimeout(tick, deleteSpeed);
    }
  }

  tick();
})();
```

### 24. CSS Mask Wipe Text Reveal Animation

**Type:** CSS + JS
**Description:** A sharp-edged mask wipes across text to reveal it — using CSS mask-image with a gradient that hard-transitions at a moving boundary.

**HTML:**
```html
<div class="ta-24">
  <div class="ta-24__stage">
    <p class="ta-24__eyebrow">Revealing</p>
    <h2 class="ta-24__title" id="ta-24-title">The Future</h2>
    <h2 class="ta-24__title ta-24__title--2" id="ta-24-title2">Is Now</h2>
    <button class="ta-24__btn" id="ta-24-replay">↺ Replay wipe</button>
  </div>
</div>
```

**CSS:**
```css
.ta-24, .ta-24 *, .ta-24 *::before, .ta-24 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-24 ::selection { background: #0f766e; color: #fff; }

.ta-24 {
  --bg: #030d0b;
  --teal: #2dd4bf;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
}

.ta-24__stage { text-align: left; }

.ta-24__eyebrow {
  font-size: 0.7rem;
  color: #134e4a;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.ta-24__title {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--teal);
  line-height: 1.05;
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 50%);
  mask-image: linear-gradient(to right, #000 50%, transparent 50%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: -100% 0;
  mask-position: -100% 0;
}

.ta-24__title--2 {
  color: #e2e8f0;
  -webkit-mask-position: -100% 0;
  mask-position: -100% 0;
}

.ta-24__title.wipe-in {
  animation: ta-24-wipe 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.ta-24__title--2.wipe-in {
  animation: ta-24-wipe 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
}

@keyframes ta-24-wipe {
  from { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
  to   { -webkit-mask-position:    0% 0; mask-position:    0% 0; }
}

.ta-24__btn {
  margin-top: 1.2rem;
  display: block;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid #134e4a;
  color: #0f766e;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ta-24__btn:hover { border-color: #2dd4bf; color: #2dd4bf; }

@media (prefers-reduced-motion: reduce) {
  .ta-24__title { -webkit-mask-image: none; mask-image: none; animation: none !important; }
}
```

**JS:**
```js
(function() {
  const t1  = document.getElementById('ta-24-title');
  const t2  = document.getElementById('ta-24-title2');
  const btn = document.getElementById('ta-24-replay');
  if (!t1 || !t2) return;

  function play() {
    [t1, t2].forEach(el => {
      el.classList.remove('wipe-in');
      void el.offsetWidth;
      el.classList.add('wipe-in');
    });
  }

  play();
  if (btn) btn.addEventListener('click', play);
})();
```

### 25. CSS Kinetic Typography Animation

**Type:** CSS + JS
**Description:** Words animate as independent kinetic objects — each with unique scale, rotation, and velocity — echoing the motion graphics discipline of kinetic type design.

**HTML:**
```html
<div class="ta-25">
  <div class="ta-25__stage" id="ta-25-stage">
    <div class="ta-25__word-wrap" id="ta-25-wrap" aria-label="Design that Moves"></div>
    <p class="ta-25__sub">JS kinetic entry · micro-oscillation · per-word custom properties</p>
  </div>
</div>
```

**CSS:**
```css
.ta-25, .ta-25 *, .ta-25 *::before, .ta-25 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-25 ::selection { background: #4f46e5; color: #fff; }

.ta-25 {
  --bg: #f8fafc;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

.ta-25__stage { text-align: center; width: 100%; }

.ta-25__word-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.2em 0.35em;
  min-height: 80px;
}

.ta-25__word {
  display: inline-block;
  font-size: clamp(1.8rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1e1b4b;
  opacity: 0;
  animation:
    ta-25-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    ta-25-float var(--float-dur, 4s) ease-in-out var(--float-delay, 0s) infinite alternate;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 0.85s);
}

.ta-25__word:nth-child(even) { color: #4f46e5; }
.ta-25__word:nth-child(3n)   { color: #7c3aed; }

@keyframes ta-25-enter {
  from {
    opacity: 0;
    transform:
      translate(var(--sx, 0px), var(--sy, -40px))
      rotate(var(--sr, 0deg))
      scale(var(--ss, 0.8));
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes ta-25-float {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(var(--fy, -6px)) rotate(var(--fr, 1deg)); }
}

.ta-25__sub {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-top: 1rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  .ta-25__word { animation: none !important; opacity: 1; transform: none; }
}
```

**JS:**
```js
(function() {
  const wrap = document.getElementById('ta-25-wrap');
  if (!wrap) return;

  const text  = wrap.getAttribute('aria-label') || 'Design that Moves';
  const words = text.split(' ');

  words.forEach((word, i) => {
    const el = document.createElement('span');
    el.className = 'ta-25__word';
    el.textContent = word;

    const angle = Math.random() * Math.PI * 2;
    const dist  = 80 + Math.random() * 120;
    el.style.setProperty('--sx',         Math.cos(angle) * dist + 'px');
    el.style.setProperty('--sy',         Math.sin(angle) * dist + 'px');
    el.style.setProperty('--sr',         (Math.random() * 40 - 20) + 'deg');
    el.style.setProperty('--ss',         (0.6 + Math.random() * 0.4).toFixed(2));
    el.style.setProperty('--delay',      (i * 0.1 + Math.random() * 0.05) + 's');
    el.style.setProperty('--float-dur',  (3 + Math.random() * 2).toFixed(1) + 's');
    el.style.setProperty('--float-delay', (Math.random() * 1.5).toFixed(2) + 's');
    el.style.setProperty('--fy',         (-(4 + Math.random() * 6)).toFixed(1) + 'px');
    el.style.setProperty('--fr',         ((Math.random() * 2 - 1) * 1.5).toFixed(2) + 'deg');

    wrap.appendChild(el);
  });
})();
```

---
## 20 CSS Text Gradient Effects

URL: https://codefronts.com/motion/css-text-gradient-effect/
Description: 20 hand-coded CSS text gradient effects with live demos — hero title, Web3 neon glow, corporate logo, bold minimalist, hover transition, gradient button, active nav link, animated moving gradient, cyberpunk neon, metallic gold, glassmorphism contrast, pastel soft, vertical gradient, radial gradient, rainbow multi-colour, text stroke outline, @supports fallback pattern, Tailwind utility recipe, multiline paragraph, and dark-mode vs light-mode gradient swap via light-dark(). 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + light-dark() techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.
Demo count: 20

### 01. CSS Text Gradient Landing Page Hero Title

**Type:** Pure CSS
**Description:** A sophisticated dark-mode hero section demonstrating the core background-clip text gradient technique for high-impact H1 headlines.

**HTML:**
```html
<div class="tg-01">
  <div class="tg-01__hero">
    <div class="tg-01__badge">NOW AVAILABLE</div>
    <h1 class="tg-01__title">Build Products<br><span class="tg-01__grad">Users Love</span></h1>
    <p class="tg-01__sub">Design systems, prototypes, and production-grade components—all in one collaborative workspace.</p>
    <div class="tg-01__cta-row">
      <button class="tg-01__btn tg-01__btn--primary">Start for free</button>
      <button class="tg-01__btn tg-01__btn--ghost">View demo →</button>
    </div>
    <div class="tg-01__stats">
      <div class="tg-01__stat"><strong>50K+</strong><span>Developers</span></div>
      <div class="tg-01__stat"><strong>4.9★</strong><span>Rating</span></div>
      <div class="tg-01__stat"><strong>99.9%</strong><span>Uptime</span></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-01, .tg-01 *, .tg-01 *::before, .tg-01 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-01 ::selection { background:#6c3fe4; color:#fff; }

.tg-01 {
  --g-from: #a855f7;
  --g-via: #6366f1;
  --g-to: #06b6d4;
  --bg: #080b14;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: rgba(255,255,255,.08);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tg-01__hero {
  max-width: 680px;
  text-align: center;
}

.tg-01__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--g-from);
  border: 1px solid rgba(168,85,247,.35);
  background: rgba(168,85,247,.08);
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 24px;
}

.tg-01__title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -.03em;
}

/* The gradient text technique: background-clip + transparent text */
.tg-01__grad {
  background: linear-gradient(135deg, var(--g-from) 0%, var(--g-via) 50%, var(--g-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-01__sub {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px;
}

.tg-01__cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.tg-01__btn {
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 28px;
  border: none;
  transition: opacity .2s, transform .15s;
}
.tg-01__btn:hover { opacity:.85; transform: translateY(-1px); }
.tg-01__btn--primary {
  background: linear-gradient(135deg, var(--g-from), var(--g-via));
  color: #fff;
}
.tg-01__btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.tg-01__stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}
.tg-01__stat { display: flex; flex-direction: column; gap: 3px; }
.tg-01__stat strong { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.tg-01__stat span { font-size: .8125rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .tg-01__btn { transition: none; }
}
```

### 02. Web3 Glowing Gradient Text CSS

**Type:** Pure CSS
**Description:** A cyberpunk-inspired Web3 card where a blurred duplicate element creates a neon glow bloom effect behind the gradient text.

**HTML:**
```html
<div class="tg-02">
  <div class="tg-02__card">
    <div class="tg-02__eyebrow">⬡ Decentralized Protocol</div>
    <h2 class="tg-02__title">Own Your<br><span class="tg-02__glow-wrap"><span class="tg-02__glow-text">Digital Future</span><span class="tg-02__glow-bloom" aria-hidden="true">Digital Future</span></span></h2>
    <p class="tg-02__desc">Stake, earn, and govern—powered by transparent on-chain contracts.</p>
    <div class="tg-02__pill-row">
      <span class="tg-02__pill">Polygon</span>
      <span class="tg-02__pill">Solana</span>
      <span class="tg-02__pill">Ethereum</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-02, .tg-02 *, .tg-02 *::before, .tg-02 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-02 ::selection { background:#0ff2; color:#fff; }

.tg-02 {
  --neon-a: #00f0ff;
  --neon-b: #a855f7;
  --neon-c: #ff2d78;
  --bg: #040714;
  --card-bg: rgba(255,255,255,.03);
  --border: rgba(0,240,255,.12);
  --text: #e2e8f0;
  --muted: #7dd3fc;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tg-02__card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 560px;
  text-align: center;
  backdrop-filter: blur(12px);
}

.tg-02__eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--neon-a);
  margin-bottom: 20px;
}

.tg-02__title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -.03em;
  margin-bottom: 20px;
}

/* Glow technique: gradient text + absolute blurred copy for bloom */
.tg-02__glow-wrap {
  position: relative;
  display: inline-block;
}

.tg-02__glow-text {
  background: linear-gradient(90deg, var(--neon-a) 0%, var(--neon-b) 55%, var(--neon-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  z-index: 1;
}

/* Blurred duplicate creates the neon glow bloom */
.tg-02__glow-bloom {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--neon-a) 0%, var(--neon-b) 55%, var(--neon-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: blur(18px);
  opacity: .55;
  z-index: 0;
  animation: tg-02-pulse 3s ease-in-out infinite;
}

@keyframes tg-02-pulse {
  0%, 100% { opacity: .4; filter: blur(18px); }
  50%       { opacity: .75; filter: blur(22px); }
}

.tg-02__desc {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.7;
  margin-bottom: 28px;
}

.tg-02__pill-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tg-02__pill {
  font-size: .8125rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid rgba(0,240,255,.25);
  color: var(--neon-a);
  background: rgba(0,240,255,.06);
}

@media (prefers-reduced-motion: reduce) {
  .tg-02__glow-bloom { animation: none; opacity: .5; }
}
```

### 03. CSS Text Gradient Corporate Logo Text

**Type:** Pure CSS
**Description:** An image-free corporate navbar logo using gradient text that scales infinitely at any DPI with zero HTTP requests.

**HTML:**
```html
<div class="tg-03">
  <div class="tg-03__wrapper">
    <nav class="tg-03__nav">
      <div class="tg-03__logo">
        <span class="tg-03__logo-icon">◈</span>
        <span class="tg-03__logo-text">Spectr<span class="tg-03__grad">um</span></span>
      </div>
      <div class="tg-03__nav-links">
        <a href="#" class="tg-03__link">Product</a>
        <a href="#" class="tg-03__link">Pricing</a>
        <a href="#" class="tg-03__link">About</a>
      </div>
      <button class="tg-03__cta">Get started</button>
    </nav>
    <div class="tg-03__showcase">
      <p class="tg-03__label">LOGO SIZES</p>
      <div class="tg-03__size-row">
        <span class="tg-03__logo-display tg-03__logo-display--sm">Spectr<span class="tg-03__grad">um</span></span>
        <span class="tg-03__logo-display tg-03__logo-display--md">Spectr<span class="tg-03__grad">um</span></span>
        <span class="tg-03__logo-display tg-03__logo-display--lg">Spectr<span class="tg-03__grad">um</span></span>
      </div>
      <p class="tg-03__note">Gradient text is image-free — scales infinitely, renders crisply on all DPI screens, and requires zero HTTP requests.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-03, .tg-03 *, .tg-03 *::before, .tg-03 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-03 ::selection { background:#6366f1; color:#fff; }

.tg-03 {
  --g-a: #6366f1;
  --g-b: #a855f7;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 0;
}

/* Gradient reusable */
.tg-03__grad {
  background: linear-gradient(120deg, var(--g-a) 0%, var(--g-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-03__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 24px;
}

.tg-03__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tg-03__logo-icon {
  background: linear-gradient(120deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4rem;
}
.tg-03__logo-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
}

.tg-03__nav-links {
  display: flex;
  gap: 24px;
}
.tg-03__link {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .2s;
}
.tg-03__link:hover { color: var(--text); }

.tg-03__cta {
  font-size: .875rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 7px;
  border: none;
  background: linear-gradient(120deg, var(--g-a), var(--g-b));
  color: #fff;
  cursor: pointer;
}

.tg-03__showcase {
  padding: 40px 32px;
  max-width: 700px;
  margin: 0 auto;
}
.tg-03__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 24px;
}
.tg-03__size-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.tg-03__logo-display {
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}
.tg-03__logo-display--sm { font-size: 1.25rem; }
.tg-03__logo-display--md { font-size: 2rem; }
.tg-03__logo-display--lg { font-size: 3.25rem; }

.tg-03__note {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 560px;
  border-left: 3px solid;
  border-image: linear-gradient(to bottom, var(--g-a), var(--g-b)) 1;
  padding-left: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .tg-03__cta, .tg-03__link { transition: none; }
}
```

### 04. Minimalist Bold Text Gradient CSS

**Type:** Pure CSS
**Description:** An editorial type specimen showcasing dual-tone gradients on heavy 900-weight fonts at multiple sizes for maximum impact.

**HTML:**
```html
<div class="tg-04">
  <div class="tg-04__inner">
    <p class="tg-04__kicker">TYPE SCALE SPECIMEN</p>
    <h1 class="tg-04__word" data-text="Clarity">Clarity</h1>
    <h2 class="tg-04__word tg-04__word--two" data-text="Purpose">Purpose</h2>
    <h3 class="tg-04__word tg-04__word--three" data-text="Impact">Impact</h3>
    <div class="tg-04__rule"></div>
    <p class="tg-04__caption">Dual-tone linear gradients on heavy weights create editorial impact without imagery. The gradient stop travels left-to-right, producing a colour shift that reads clearly at every size.</p>
  </div>
</div>
```

**CSS:**
```css
.tg-04, .tg-04 *, .tg-04 *::before, .tg-04 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-04 ::selection { background:#1e1b4b; color:#e0e7ff; }

.tg-04 {
  --g-a: #1e1b4b;
  --g-b: #6366f1;
  --g-a2: #312e81;
  --g-b2: #a21caf;
  --g-a3: #0f172a;
  --g-b3: #0ea5e9;
  --bg: #ffffff;
  --muted: #64748b;
  --rule: #e2e8f0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.tg-04__inner { max-width: 640px; width: 100%; }

.tg-04__kicker {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Shared gradient text mixin pattern. Use inline-block so the
   element's box width equals its glyph width — combined with
   background-clip:text this guarantees the gradient paints inside
   the glyph shape (not as a full-width bar across the block). */
.tg-04__word {
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  padding: 0 .05em .1em; /* prevents descender clipping in Firefox */
}
.tg-04__inner > .tg-04__word { display: block; }
.tg-04__inner > .tg-04__word + .tg-04__word { margin-top: 4px; }

.tg-04__word { font-size: clamp(4rem, 14vw, 7.5rem); background-image: linear-gradient(90deg, var(--g-a) 0%, var(--g-b) 100%); }
.tg-04__word--two { font-size: clamp(3rem, 10vw, 5.5rem); background-image: linear-gradient(90deg, var(--g-a2) 0%, var(--g-b2) 100%); }
.tg-04__word--three { font-size: clamp(2rem, 7vw, 3.75rem); background-image: linear-gradient(90deg, var(--g-a3) 0%, var(--g-b3) 100%); }

.tg-04__rule {
  height: 1px;
  background: var(--rule);
  margin: 28px 0;
}

.tg-04__caption {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 520px;
}

@media (prefers-reduced-motion: reduce) {}
```

### 05. CSS Hover Transition Text Gradient Effect

**Type:** Pure CSS
**Description:** A navigation and card component that transitions solid text into a gradient on hover using -webkit-text-fill-color transition.

**HTML:**
```html
<div class="tg-05">
  <div class="tg-05__card">
    <p class="tg-05__hint">Hover over any link</p>
    <nav class="tg-05__nav">
      <a href="#" class="tg-05__link">Home</a>
      <a href="#" class="tg-05__link">Features</a>
      <a href="#" class="tg-05__link">Pricing</a>
      <a href="#" class="tg-05__link">Blog</a>
      <a href="#" class="tg-05__link">Contact</a>
    </nav>
    <div class="tg-05__divider"></div>
    <div class="tg-05__cards">
      <div class="tg-05__tile">
        <h3 class="tg-05__tile-h">Analytics <span class="tg-05__arrow">→</span></h3>
        <p>Real-time dashboards for every metric your team cares about.</p>
      </div>
      <div class="tg-05__tile">
        <h3 class="tg-05__tile-h">Integrations <span class="tg-05__arrow">→</span></h3>
        <p>Connect to 200+ tools with one-click OAuth flows.</p>
      </div>
      <div class="tg-05__tile">
        <h3 class="tg-05__tile-h">Collaboration <span class="tg-05__arrow">→</span></h3>
        <p>Shared workspaces with granular permission controls.</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-05, .tg-05 *, .tg-05 *::before, .tg-05 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-05 ::selection { background:#7c3aed; color:#fff; }

.tg-05 {
  --g-a: #7c3aed;
  --g-b: #ec4899;
  --bg: #0f0f14;
  --surface: #17171f;
  --text: #e2e8f0;
  --muted: #64748b;
  --solid: #94a3b8;
  --border: rgba(255,255,255,.07);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.tg-05__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 580px;
}

.tg-05__hint {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 20px;
}

.tg-05__nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* 
  Hover gradient technique:
  Gradient sits on ::before; opacity transitions from 0→1.
  -webkit-text-fill-color can't transition, so we use a pseudo-element
  trick: normal color fades out, gradient fades in via opacity on ::before.
  We achieve the gradient-on-hover by toggling background-clip on the element itself.
*/
.tg-05__link {
  position: relative;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  color: var(--solid);
  transition: color .3s;
  display: inline-block;
}

.tg-05__link::before {
  content: attr(data-hover, '');
  position: absolute;
  inset: 0;
  padding: 8px 18px;
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.tg-05__link::after {
  content: attr(href, '');
  position: absolute;
  inset: 8px 18px;
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  transition: opacity .3s;
}

/* Simpler approach: fade out the solid text colour, overlay gradient clone */
.tg-05__link span { /* We'll use a direct CSS trick on the element */ }

.tg-05__link:hover {
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Smooth fade: CSS can't tween background-clip text, so we fade background colour instead */
.tg-05__link {
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--solid);
  transition: -webkit-text-fill-color .25s;
}
.tg-05__link:hover {
  -webkit-text-fill-color: transparent;
}

.tg-05__divider { height: 1px; background: var(--border); margin-bottom: 28px; }

.tg-05__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.tg-05__tile {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.tg-05__tile p { font-size: .8rem; color: var(--muted); line-height: 1.55; margin-top: 6px; }

.tg-05__tile-h {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tg-05__arrow { color: var(--muted); font-weight: 400; }
.tg-05__tile:hover .tg-05__tile-h {
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .tg-05__link, .tg-05__tile { transition: none; }
}
```

### 06. Gradient Text Button Link CSS

**Type:** Pure CSS
**Description:** Three button patterns — ghost with gradient label, gradient border via mask, and filled gradient — demonstrating every CTA gradient variant.

**HTML:**
```html
<div class="tg-06">
  <div class="tg-06__panel">
    <h2 class="tg-06__heading">Ready to launch?</h2>
    <p class="tg-06__sub">Pick the interaction pattern that fits your design system.</p>
    <div class="tg-06__grid">
      <div class="tg-06__col">
        <p class="tg-06__tag">Ghost with gradient label</p>
        <a href="#" class="tg-06__btn tg-06__btn--ghost">
          <span class="tg-06__label">Get started free</span>
        </a>
        <a href="#" class="tg-06__btn tg-06__btn--ghost">
          <span class="tg-06__label">View documentation →</span>
        </a>
      </div>
      <div class="tg-06__col">
        <p class="tg-06__tag">Solid gradient border</p>
        <a href="#" class="tg-06__btn tg-06__btn--border">
          <span class="tg-06__label">Start building</span>
        </a>
        <a href="#" class="tg-06__btn tg-06__btn--border">
          <span class="tg-06__label">Talk to sales</span>
        </a>
      </div>
      <div class="tg-06__col">
        <p class="tg-06__tag">Filled gradient</p>
        <a href="#" class="tg-06__btn tg-06__btn--filled">Upgrade to Pro</a>
        <a href="#" class="tg-06__btn tg-06__btn--filled tg-06__btn--sm">Learn more</a>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-06, .tg-06 *, .tg-06 *::before, .tg-06 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-06 ::selection { background:#7c3aed; color:#fff; }

.tg-06 {
  --g-a: #f59e0b;
  --g-b: #ef4444;
  --g-c: #ec4899;
  --bg: #0c0c10;
  --surface: #15151d;
  --text: #f1f5f9;
  --muted: #64748b;
  --border: rgba(255,255,255,.09);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tg-06__panel {
  max-width: 640px;
  width: 100%;
}

.tg-06__heading {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  margin-bottom: 10px;
}

.tg-06__sub {
  color: var(--muted);
  font-size: .9375rem;
  margin-bottom: 36px;
}

.tg-06__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
}

.tg-06__col { display: flex; flex-direction: column; gap: 12px; }
.tg-06__tag { font-size: .72rem; font-weight: 600; letter-spacing: .09em; color: var(--muted); margin-bottom: 4px; }

/* Base button */
.tg-06__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 9px;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  cursor: pointer;
}
.tg-06__btn:hover { transform: translateY(-2px); }

/* Ghost: transparent bg, gradient text label */
.tg-06__btn--ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
}
.tg-06__btn--ghost .tg-06__label {
  background: linear-gradient(90deg, var(--g-a), var(--g-c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tg-06__btn--ghost:hover { border-color: rgba(239,68,68,.4); }

/* Border gradient: pseudo-element creates gradient border, inner bg clips it */
.tg-06__btn--border {
  position: relative;
  background: var(--surface);
  border: none;
  padding: 12px 23px; /* +1 for pseudo border */
  isolation: isolate;
}
.tg-06__btn--border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, var(--g-a), var(--g-c));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}
.tg-06__btn--border .tg-06__label {
  background: linear-gradient(90deg, var(--g-a), var(--g-c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Filled */
.tg-06__btn--filled {
  background: linear-gradient(90deg, var(--g-a), var(--g-b), var(--g-c));
  color: #fff;
}
.tg-06__btn--filled:hover { box-shadow: 0 8px 24px rgba(239,68,68,.35); opacity: .9; }
.tg-06__btn--sm { font-size: .8rem; padding: 8px 18px; }

@media (prefers-reduced-motion: reduce) {
  .tg-06__btn { transition: none; }
}
```

### 07. CSS Text Gradient on Active Navigation Link

**Type:** CSS + JS
**Description:** A full-page header with a clickable nav where the active page link renders a gradient colour with an animated underline indicator.

**HTML:**
```html
<div class="tg-07">
  <div class="tg-07__wrapper">
    <header class="tg-07__header">
      <div class="tg-07__logo">⬡ Nexus</div>
      <nav class="tg-07__nav" role="navigation">
        <a href="#" class="tg-07__link">Dashboard</a>
        <a href="#" class="tg-07__link tg-07__link--active" aria-current="page">Analytics</a>
        <a href="#" class="tg-07__link">Projects</a>
        <a href="#" class="tg-07__link">Settings</a>
      </nav>
      <div class="tg-07__avatar">AK</div>
    </header>
    <main class="tg-07__content">
      <div class="tg-07__page-title">
        <h1>Analytics <span class="tg-07__grad">Overview</span></h1>
        <p>Your performance at a glance for the last 30 days.</p>
      </div>
      <div class="tg-07__kpis">
        <div class="tg-07__kpi"><span class="tg-07__kpi-val">$124K</span><span class="tg-07__kpi-lbl">Revenue</span></div>
        <div class="tg-07__kpi"><span class="tg-07__kpi-val">8,432</span><span class="tg-07__kpi-lbl">Sessions</span></div>
        <div class="tg-07__kpi"><span class="tg-07__kpi-val">3.4%</span><span class="tg-07__kpi-lbl">Conversion</span></div>
      </div>
      <p class="tg-07__hint">Click any nav item to see gradient active state</p>
    </main>
  </div>
</div>
```

**CSS:**
```css
.tg-07, .tg-07 *, .tg-07 *::before, .tg-07 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-07 ::selection { background:#2563eb; color:#fff; }

.tg-07 {
  --g-a: #3b82f6;
  --g-b: #8b5cf6;
  --bg: #f8fafc;
  --header-bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --active-bg: rgba(59,130,246,.08);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
}

.tg-07__wrapper { overflow: hidden; }

.tg-07__header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.tg-07__logo {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  flex-shrink: 0;
}

.tg-07__nav { display: flex; gap: 2px; flex: 1; }

.tg-07__link {
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 7px;
  transition: color .2s, background .2s;
  position: relative;
}
.tg-07__link:hover { color: var(--text); background: rgba(0,0,0,.04); }

/* Active state: gradient text + subtle bg tint + bottom indicator */
.tg-07__link--active {
  background: var(--active-bg);
  font-weight: 700;
}
.tg-07__link--active {
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Re-apply bg separately — background-clip:text consumes background */
}

/* We need two backgrounds: tint + gradient for clip. Use ::after for the tint */
.tg-07__link--active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--active-bg);
  border-radius: 7px;
  z-index: -1;
}
/* Underline indicator */
.tg-07__link--active::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  border-radius: 2px 2px 0 0;
}

.tg-07__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g-a), var(--g-b));
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tg-07__content { padding: 36px 28px; }

.tg-07__page-title h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  margin-bottom: 6px;
}
.tg-07__page-title p { color: var(--muted); font-size: .9rem; margin-bottom: 32px; }

.tg-07__grad {
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tg-07__kpis { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.tg-07__kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.tg-07__kpi-val { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.tg-07__kpi-lbl { font-size: .8rem; color: var(--muted); }

.tg-07__hint { font-size: .8rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .tg-07__link { transition: none; }
}
```

**JS:**
```js
(function(){
  const links = document.querySelectorAll('.tg-07__link');
  links.forEach(l => {
    l.addEventListener('click', function(e){
      e.preventDefault();
      links.forEach(x => x.classList.remove('tg-07__link--active'));
      this.classList.add('tg-07__link--active');
    });
  });
})();
```

### 08. Animated Moving Text Gradient Background CSS

**Type:** Pure CSS
**Description:** A hero section where the gradient background-position animates continuously across a 300%-wide gradient, creating a shifting colour sweep through the text.

**HTML:**
```html
<div class="tg-08">
  <div class="tg-08__hero">
    <div class="tg-08__tag">✦ New — Season 3</div>
    <h1 class="tg-08__title">The Future<br>of <span class="tg-08__anim-grad">Interface</span><br>Design</h1>
    <p class="tg-08__sub">Shifting gradients create motion and energy without a single line of JavaScript.</p>
  </div>
</div>
```

**CSS:**
```css
.tg-08, .tg-08 *, .tg-08 *::before, .tg-08 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-08 ::selection { background:#7c3aed55; color:#fff; }

.tg-08 {
  --c1: #f0abfc;
  --c2: #818cf8;
  --c3: #38bdf8;
  --c4: #34d399;
  --bg: #0a0a12;
  --text: #f8fafc;
  --muted: #94a3b8;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tg-08__hero { text-align: center; max-width: 600px; }

.tg-08__tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 24px;
}

.tg-08__title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--text);
  margin-bottom: 20px;
}

/*
  Moving gradient: background-size is 300% wide so the 
  gradient has room to travel. background-position animates
  from 0% to 100%, which pans across the extended gradient.
  background-clip:text exposes it through the letterforms.
*/
.tg-08__anim-grad {
  background: linear-gradient(
    90deg,
    var(--c1) 0%,
    var(--c2) 25%,
    var(--c3) 50%,
    var(--c4) 75%,
    var(--c1) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tg-08-shift 4s linear infinite;
}

@keyframes tg-08-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.tg-08__sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .tg-08__anim-grad {
    animation: none;
    background-position: 0% 50%;
  }
}
```

### 09. Cyberpunk Neon Text Gradient CSS

**Type:** Pure CSS
**Description:** A CRT-scanline terminal UI with electric pink, cyan, and purple neon gradients amplified by CSS drop-shadow filters for a glow effect.

**HTML:**
```html
<div class="tg-09">
  <div class="tg-09__scene">
    <div class="tg-09__scanlines" aria-hidden="true"></div>
    <div class="tg-09__content">
      <p class="tg-09__sys">SYS://NEXUS_2077 — USER AUTHENTICATED</p>
      <h1 class="tg-09__title"><span class="tg-09__g1">CYBER</span><span class="tg-09__g2">PUNK</span></h1>
      <h2 class="tg-09__sub-title"><span class="tg-09__g3">NEON</span> <span class="tg-09__g4">INTERFACE</span></h2>
      <div class="tg-09__row">
        <div class="tg-09__stat"><span class="tg-09__stat-v tg-09__g1">78%</span><span>THREAT</span></div>
        <div class="tg-09__stat"><span class="tg-09__stat-v tg-09__g3">4096</span><span>CREDITS</span></div>
        <div class="tg-09__stat"><span class="tg-09__stat-v tg-09__g2">LEVEL 9</span><span>CLEARANCE</span></div>
      </div>
      <div class="tg-09__bar-wrap">
        <span class="tg-09__bar-lbl">NEURAL SYNC</span>
        <div class="tg-09__bar"><div class="tg-09__bar-fill"></div></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-09, .tg-09 *, .tg-09 *::before, .tg-09 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-09 ::selection { background:#ff2d78; color:#000; }

.tg-09 {
  --pink: #ff2d78;
  --cyan: #00f0ff;
  --purple: #bc00ff;
  --yellow: #ffe600;
  --bg: #05020d;
  --text: #e0d7f0;
  --muted: #4a3f6a;
  font-family: 'Courier New', monospace;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.tg-09__scene {
  position: relative;
  width: 100%;
  max-width: 620px;
  border: 1px solid rgba(0,240,255,.2);
  border-radius: 4px;
  overflow: hidden;
  padding: 36px 32px;
  background: rgba(5,2,13,.9);
}

/* CRT scanlines overlay */
.tg-09__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,240,255,.025) 2px,
    rgba(0,240,255,.025) 4px
  );
  pointer-events: none;
  z-index: 10;
}

.tg-09__content { position: relative; z-index: 1; }

.tg-09__sys {
  font-size: .65rem;
  letter-spacing: .12em;
  color: rgba(0,240,255,.5);
  margin-bottom: 20px;
  animation: tg-09-blink 2s step-end infinite;
}
@keyframes tg-09-blink {
  50% { opacity: .4; }
}

/* Shared gradient text helpers */
.tg-09__g1 {
  background: linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 8px var(--pink));
}
.tg-09__g2 {
  background: linear-gradient(90deg, var(--cyan) 0%, #0088ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 8px var(--cyan));
}
.tg-09__g3 {
  background: linear-gradient(90deg, var(--yellow) 0%, #ff8c00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 6px var(--yellow));
}
.tg-09__g4 {
  background: linear-gradient(90deg, var(--purple) 0%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.tg-09__title {
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
  display: flex;
  gap: .2em;
}
.tg-09__sub-title {
  font-size: clamp(1.1rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: .15em;
  margin: 8px 0 28px;
}

.tg-09__row { display: flex; gap: 28px; margin-bottom: 24px; flex-wrap: wrap; }
.tg-09__stat { display: flex; flex-direction: column; gap: 3px; }
.tg-09__stat-v { font-size: 1.4rem; font-weight: 700; }
.tg-09__stat span:last-child { font-size: .6rem; letter-spacing: .12em; color: var(--muted); }

.tg-09__bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.tg-09__bar-lbl { font-size: .65rem; letter-spacing: .12em; color: var(--muted); }
.tg-09__bar {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.tg-09__bar-fill {
  height: 100%;
  width: 73%;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
  background-size: 200%;
  animation: tg-09-scan 2s linear infinite;
}
@keyframes tg-09-scan {
  0%   { background-position: 0%; }
  100% { background-position: 200%; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-09__sys, .tg-09__bar-fill { animation: none; }
}
```

### 10. Metallic Gold Text Gradient Effect CSS

**Type:** Pure CSS
**Description:** A luxury membership card with a multi-stop metallic gold gradient simulating light reflection, animated via background-position shift.

**HTML:**
```html
<div class="tg-10">
  <div class="tg-10__card">
    <div class="tg-10__crown">✦</div>
    <p class="tg-10__tier">PREMIER MEMBERSHIP</p>
    <h2 class="tg-10__name"><span class="tg-10__gold">Aurum</span></h2>
    <p class="tg-10__tagline">Excellence, redefined.</p>
    <ul class="tg-10__perks">
      <li><span class="tg-10__check">✦</span> Priority concierge access</li>
      <li><span class="tg-10__check">✦</span> Curated portfolio management</li>
      <li><span class="tg-10__check">✦</span> Exclusive event invitations</li>
    </ul>
    <div class="tg-10__divider"></div>
    <div class="tg-10__price"><span class="tg-10__amount tg-10__gold">$2,500</span><span class="tg-10__cycle">/year</span></div>
    <button class="tg-10__cta">Request access</button>
  </div>
</div>
```

**CSS:**
```css
.tg-10, .tg-10 *, .tg-10 *::before, .tg-10 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-10 ::selection { background:#b45309; color:#fef3c7; }

.tg-10 {
  /* Multi-stop metallic gold: dark → mid-gold → highlight → dark → shimmer */
  --gold-grad: linear-gradient(
    135deg,
    #92400e 0%,
    #b45309 15%,
    #d97706 30%,
    #fbbf24 45%,
    #fef3c7 55%,
    #fbbf24 65%,
    #d97706 80%,
    #92400e 100%
  );
  --bg: #080604;
  --surface: #0e0b07;
  --border: rgba(251,191,36,.18);
  --text: #fef9ee;
  --muted: #92816a;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tg-10__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px 36px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 60px rgba(251,191,36,.06);
}

.tg-10__crown {
  font-size: 1.6rem;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(251,191,36,.35));
  margin-bottom: 12px;
}

.tg-10__tier {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 16px;
}

/* The metallic effect uses many gradient stops to simulate light reflection */
.tg-10__gold {
  background: var(--gold-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tg-10-shimmer 4s ease-in-out infinite;
}

@keyframes tg-10-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

.tg-10__name {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.tg-10__tagline {
  font-style: italic;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 28px;
}

.tg-10__perks {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  font-family: system-ui, sans-serif;
}
.tg-10__perks li { font-size: .875rem; color: var(--text); display: flex; align-items: center; gap: 10px; }
.tg-10__check {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: .7rem;
}

.tg-10__divider { height: 1px; background: var(--border); margin-bottom: 20px; }
.tg-10__price { display: flex; align-items: baseline; gap: 4px; justify-content: center; margin-bottom: 22px; }
.tg-10__amount { font-size: 2rem; font-weight: 700; font-family: system-ui, sans-serif; }
.tg-10__cycle { font-size: .85rem; color: var(--muted); font-family: system-ui, sans-serif; }

.tg-10__cta {
  width: 100%;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid rgba(251,191,36,.4);
  background: transparent;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: #fbbf24;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.tg-10__cta:hover { background: rgba(251,191,36,.1); }

@media (prefers-reduced-motion: reduce) {
  .tg-10__gold { animation: none; background-position: 0% 50%; }
}
```

### 11. Glassmorphism Text Gradient Contrast

**Type:** Pure CSS
**Description:** A backdrop-filter glass card over coloured blobs, with gradient text reinforced by drop-shadow to maintain legibility through the blur.

**HTML:**
```html
<div class="tg-11">
  <!-- Colourful blobs behind glass -->
  <div class="tg-11__blob tg-11__blob--a" aria-hidden="true"></div>
  <div class="tg-11__blob tg-11__blob--b" aria-hidden="true"></div>
  <div class="tg-11__blob tg-11__blob--c" aria-hidden="true"></div>
  <div class="tg-11__glass">
    <p class="tg-11__eyebrow">— Featured Article</p>
    <h2 class="tg-11__title">Design <span class="tg-11__grad">Systems</span><br>That Scale</h2>
    <p class="tg-11__body">Gradient text on translucent surfaces needs careful colour management. The <code>background-clip: text</code> gradient must maintain ≥4.5:1 contrast against any colour that bleeds through the blur.</p>
    <div class="tg-11__meta">
      <span class="tg-11__avatar">JL</span>
      <div>
        <strong class="tg-11__author">Julia Lam</strong>
        <span class="tg-11__date">Jun 12 · 5 min read</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-11, .tg-11 *, .tg-11 *::before, .tg-11 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-11 ::selection { background:rgba(168,85,247,.6); color:#fff; }

.tg-11 {
  --g-a: #e879f9;
  --g-b: #818cf8;
  --g-c: #38bdf8;
  --blob-a: #a855f7;
  --blob-b: #ec4899;
  --blob-c: #06b6d4;
  --bg: #06030f;
  --glass: rgba(255,255,255,.07);
  --text: #f0e7ff;
  --muted: rgba(240,231,255,.55);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
}

/* Background colour blobs */
.tg-11__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
}
.tg-11__blob--a { width: 320px; height: 320px; background: var(--blob-a); top: -80px; left: -60px; }
.tg-11__blob--b { width: 280px; height: 280px; background: var(--blob-b); bottom: -60px; right: -40px; }
.tg-11__blob--c { width: 200px; height: 200px; background: var(--blob-c); top: 50%; left: 55%; transform: translate(-50%,-50%); }

/* Glass card */
.tg-11__glass {
  position: relative;
  z-index: 1;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 40px 36px;
  max-width: 500px;
  width: 100%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.tg-11__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 16px;
}

.tg-11__title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 16px;
}

/*
  Contrast strategy: on a blurred translucent surface the background colours
  behind the card bleed through. We use a high-saturation gradient and apply
  a subtle text-shadow on the wrapper to ensure the gradient text reads clearly.
  The gradient direction is angled to maximise the perceived brightness range.
*/
.tg-11__grad {
  background: linear-gradient(110deg, var(--g-a) 0%, var(--g-b) 50%, var(--g-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 8px rgba(232,121,249,.4));
}

.tg-11__body {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.tg-11__body code {
  font-size: .8em;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--g-c);
}

.tg-11__meta { display: flex; align-items: center; gap: 12px; }
.tg-11__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g-a), var(--g-b));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.tg-11__author { display: block; font-size: .875rem; font-weight: 700; color: var(--text); }
.tg-11__date { font-size: .775rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {}
```

### 12. Pastel Soft Color Text Gradient CSS

**Type:** Pure CSS
**Description:** A lifestyle blog layout with warm pastel gradients in the 60–90% lightness range across headings and article card titles.

**HTML:**
```html
<div class="tg-12">
  <div class="tg-12__container">
    <div class="tg-12__blog-header">
      <div class="tg-12__chip">Lifestyle · 4 min</div>
      <h1 class="tg-12__title">The art of<br><span class="tg-12__soft">slow mornings</span></h1>
      <p class="tg-12__intro">Gentle routines and intentional starts that reshape how you work, rest, and create throughout the day.</p>
    </div>
    <div class="tg-12__card-row">
      <article class="tg-12__card">
        <h3 class="tg-12__card-title tg-12__g-rose">Mindful journaling</h3>
        <p>Five minutes of unstructured writing before checking any screen.</p>
      </article>
      <article class="tg-12__card">
        <h3 class="tg-12__card-title tg-12__g-sky">Herbal rituals</h3>
        <p>Brewing tea as a meditative practice — warmth, aroma, presence.</p>
      </article>
      <article class="tg-12__card">
        <h3 class="tg-12__card-title tg-12__g-mint">Gentle movement</h3>
        <p>Ten minutes of stretching outdoors to anchor the body in the day.</p>
      </article>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-12, .tg-12 *, .tg-12 *::before, .tg-12 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-12 ::selection { background:#fbcfe8; color:#831843; }

.tg-12 {
  --rose-a: #fda4af;
  --rose-b: #f9a8d4;
  --sky-a:  #7dd3fc;
  --sky-b:  #a5b4fc;
  --mint-a: #86efac;
  --mint-b: #6ee7b7;
  --bg: #fdf8f6;
  --surface: #ffffff;
  --text: #1e1b1a;
  --muted: #7c6f67;
  --border: #f0e8e4;
  font-family: 'Georgia', serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 0;
}

.tg-12__container { padding: 44px 32px; max-width: 700px; margin: 0 auto; }

.tg-12__chip {
  font-family: system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 18px;
}

.tg-12__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

/*
  Pastel gradients: use soft, desaturated-leaning colours in the 60–90%
  lightness range. The key is to keep both gradient stops within the same 
  warm/cool family so the blend stays harmonious and never muddy.
*/
.tg-12__soft {
  background: linear-gradient(110deg, var(--rose-a) 0%, var(--sky-a) 50%, var(--mint-a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-12__intro {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 36px;
}

.tg-12__card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 16px;
}
.tg-12__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
}
.tg-12__card p {
  font-family: system-ui, sans-serif;
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 8px;
}
.tg-12__card-title {
  font-size: 1.1rem;
  font-weight: 700;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  padding: 0 .05em .1em;
}
/* CRITICAL: use background-image (not the shorthand 'background')
   because the shorthand resets background-clip to its initial
   border-box value, breaking the text clipping above. */
.tg-12__g-rose { background-image: linear-gradient(90deg, var(--rose-a), var(--rose-b)); }
.tg-12__g-sky  { background-image: linear-gradient(90deg, var(--sky-a),  var(--sky-b)); }
.tg-12__g-mint { background-image: linear-gradient(90deg, var(--mint-a), var(--mint-b)); }

@media (prefers-reduced-motion: reduce) {}
```

### 13. Vertical Linear Gradient Text CSS

**Type:** Pure CSS
**Description:** A split-layout demo contrasting horizontal and vertical gradient directions, including writing-mode: vertical-rl sidebar labels.

**HTML:**
```html
<div class="tg-13">
  <div class="tg-13__layout">
    <aside class="tg-13__sidebar">
      <h2 class="tg-13__section-word tg-13__v1">Build</h2>
      <h2 class="tg-13__section-word tg-13__v2">Ship</h2>
      <h2 class="tg-13__section-word tg-13__v3">Grow</h2>
    </aside>
    <main class="tg-13__body">
      <p class="tg-13__kicker">VERTICAL GRADIENT TEXT</p>
      <p class="tg-13__explain">A top-to-bottom <code>linear-gradient</code> fades from a vivid top colour to a lighter or contrasting shade at the bottom, reinforcing visual hierarchy — brighter at the top catches the eye, the fade draws it downward.</p>
      <div class="tg-13__demo-block">
        <h1 class="tg-13__hero-word tg-13__fade-down">Framework</h1>
        <h1 class="tg-13__hero-word tg-13__fade-up">Platform</h1>
      </div>
    </main>
  </div>
</div>
```

**CSS:**
```css
.tg-13, .tg-13 *, .tg-13 *::before, .tg-13 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-13 ::selection { background:#1d4ed8; color:#e0f2fe; }

.tg-13 {
  --top-a: #1d4ed8;
  --bot-a: #60a5fa;
  --top-b: #9333ea;
  --bot-b: #f472b6;
  --top-c: #0284c7;
  --bot-c: #38bdf8;
  --top-h: #f59e0b;
  --bot-h: rgba(245,158,11,.2);
  --top-p: #7c3aed;
  --bot-p: rgba(124,58,237,.25);
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
}

.tg-13__layout {
  display: flex;
  min-height: 100vh;
}

.tg-13__sidebar {
  background: #0f172a;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 24px 0;
}

/* Vertical gradients on sidebar words */
.tg-13__section-word {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* background-image (not shorthand) — shorthand resets background-clip
   to border-box and the text clipping above silently fails. */
.tg-13__v1 { background-image: linear-gradient(180deg, var(--top-a), var(--bot-a)); }
.tg-13__v2 { background-image: linear-gradient(180deg, var(--top-b), var(--bot-b)); }
.tg-13__v3 { background-image: linear-gradient(180deg, var(--top-c), var(--bot-c)); }

.tg-13__body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.tg-13__kicker {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 14px;
}

.tg-13__explain {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 28px;
}
.tg-13__explain code {
  background: var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .8em;
  color: var(--top-b);
}

.tg-13__demo-block { display: flex; gap: 12px; flex-wrap: wrap; }

/*
  Vertical (top→bottom) gradients: use `to bottom` direction.
  The lighter/transparent end at the bottom simulates a gentle fade-out.
*/
.tg-13__hero-word {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* inline-block + padding ensure the gradient clips to the glyph
     shape (block-level <h1> with background-image would otherwise
     paint the gradient on the full row width even when text content
     is narrow). */
  display: inline-block;
  padding: 0 .05em .1em;
}
.tg-13__fade-down {
  background-image: linear-gradient(to bottom, var(--top-h) 0%, var(--bot-h) 100%);
}
.tg-13__fade-up {
  background-image: linear-gradient(to top, var(--top-p) 0%, var(--bot-p) 100%);
}

@media (prefers-reduced-motion: reduce) {}
```

### 14. Radial Gradient Text Effect CSS

**Type:** Pure CSS
**Description:** Four radial-gradient text examples where the brightest colour radiates from the centre of each character, fading toward the edges.

**HTML:**
```html
<div class="tg-14">
  <div class="tg-14__wrapper">
    <h1 class="tg-14__big tg-14__radial-a">Radiate</h1>
    <h2 class="tg-14__med tg-14__radial-b">Energy outward</h2>
    <div class="tg-14__card-row">
      <div class="tg-14__card">
        <h3 class="tg-14__card-h tg-14__radial-c">Expand</h3>
        <p>Radial gradients grow from a central point, making text feel like it emanates light.</p>
      </div>
      <div class="tg-14__card">
        <h3 class="tg-14__card-h tg-14__radial-d">Focus</h3>
        <p>A darker perimeter naturally draws the eye to the bright centre of the letterforms.</p>
      </div>
    </div>
    <p class="tg-14__code-hint"><code>radial-gradient(circle at 50% 50%, …)</code></p>
  </div>
</div>
```

**CSS:**
```css
.tg-14, .tg-14 *, .tg-14 *::before, .tg-14 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-14 ::selection { background:#7c3aed44; color:#fff; }

.tg-14 {
  --center-a: #fde68a;
  --edge-a: #f59e0b;
  --center-b: #c4b5fd;
  --edge-b: #7c3aed;
  --center-c: #7dd3fc;
  --edge-c: #1d4ed8;
  --center-d: #fbcfe8;
  --edge-d: #be185d;
  --bg: #09080f;
  --surface: rgba(255,255,255,.04);
  --text: #e2e8f0;
  --muted: #64748b;
  --border: rgba(255,255,255,.07);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 24px;
}

.tg-14__wrapper { max-width: 620px; width: 100%; text-align: center; }

/*
  Radial gradient text: circle at 50% 50% places the brightest colour at
  the exact centre of the element's bounding box. As the gradient clips
  to the text, the middle of each character glows and edges fade.
  Adjust the first stop percentage to control the glow spread.
*/
.tg-14__radial-a {
  background: radial-gradient(circle at 50% 50%, var(--center-a) 0%, var(--edge-a) 65%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tg-14__radial-b {
  background: radial-gradient(ellipse at 40% 60%, var(--center-b) 0%, var(--edge-b) 75%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tg-14__radial-c {
  background: radial-gradient(circle at 50% 40%, var(--center-c) 0%, var(--edge-c) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tg-14__radial-d {
  background: radial-gradient(circle at 50% 40%, var(--center-d) 0%, var(--edge-d) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.tg-14__big {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 8px;
}
.tg-14__med {
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 32px;
}
.tg-14__card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
  text-align: left;
}
.tg-14__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.tg-14__card-h { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; }
.tg-14__card p { font-size: .825rem; color: var(--muted); line-height: 1.6; }

.tg-14__code-hint { font-size: .8rem; color: var(--muted); }
.tg-14__code-hint code {
  background: rgba(255,255,255,.06);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: .78rem;
  color: #c4b5fd;
}

@media (prefers-reduced-motion: reduce) {}
```

### 15. Multi Color Rainbow Text Gradient CSS

**Type:** Pure CSS
**Description:** A six-stop HSL hue-wheel gradient cycling 0°→320°, with a continuously animated version driven by background-position shifting.

**HTML:**
```html
<div class="tg-15">
  <div class="tg-15__scene">
    <h1 class="tg-15__rainbow">Spectacular</h1>
    <h2 class="tg-15__rainbow tg-15__anim">Iridescent</h2>
    <div class="tg-15__tag-cloud">
      <span class="tg-15__tag tg-15__t1">Design</span>
      <span class="tg-15__tag tg-15__t2">Colour</span>
      <span class="tg-15__tag tg-15__t3">Motion</span>
      <span class="tg-15__tag tg-15__t4">Type</span>
      <span class="tg-15__tag tg-15__t5">Play</span>
    </div>
    <p class="tg-15__note">4+ colour stops in a <code>linear-gradient</code> create a true rainbow spectrum. Keep saturation high and transition through the full hue wheel (0°→360°) for the most vivid result.</p>
  </div>
</div>
```

**CSS:**
```css
.tg-15, .tg-15 *, .tg-15 *::before, .tg-15 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-15 ::selection { background:#ec4899; color:#fff; }

.tg-15 {
  --bg: #06030c;
  --text: #e2e8f0;
  --muted: #64748b;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.tg-15__scene { max-width: 640px; width: 100%; text-align: center; }

/* Full-spectrum rainbow: 6 stops cycling through hsl hues */
.tg-15__rainbow {
  background: linear-gradient(
    90deg,
    hsl(0,   100%, 60%) 0%,
    hsl(45,  100%, 60%) 20%,
    hsl(120, 100%, 45%) 40%,
    hsl(200, 100%, 55%) 60%,
    hsl(270, 100%, 65%) 80%,
    hsl(320, 100%, 60%) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  display: block;
}

.tg-15__rainbow:first-child { font-size: clamp(3rem, 10vw, 5.5rem); margin-bottom: 6px; }
.tg-15__rainbow.tg-15__anim {
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  background: linear-gradient(
    90deg,
    hsl(200, 100%, 60%) 0%,
    hsl(270, 100%, 65%) 16%,
    hsl(320, 100%, 60%) 33%,
    hsl(0,   100%, 60%) 50%,
    hsl(45,  100%, 60%) 66%,
    hsl(120, 100%, 45%) 83%,
    hsl(200, 100%, 60%) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tg-15-shift 3s linear infinite;
  margin-bottom: 32px;
}

@keyframes tg-15-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.tg-15__tag-cloud { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.tg-15__tag {
  font-size: .85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 99px;
  border: 1.5px solid transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
}
.tg-15__tag::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 99px;
  border: 1.5px solid currentColor;
  opacity: .3;
}

/* background-image (not shorthand) — shorthand resets background-clip
   to border-box and the .tg-15__tag text clipping silently fails. */
.tg-15__t1 { background-image: linear-gradient(90deg,hsl(0,90%,60%),hsl(30,90%,60%)); }
.tg-15__t2 { background-image: linear-gradient(90deg,hsl(60,90%,50%),hsl(120,90%,45%)); }
.tg-15__t3 { background-image: linear-gradient(90deg,hsl(160,90%,45%),hsl(200,90%,55%)); }
.tg-15__t4 { background-image: linear-gradient(90deg,hsl(240,90%,65%),hsl(280,90%,65%)); }
.tg-15__t5 { background-image: linear-gradient(90deg,hsl(300,90%,60%),hsl(340,90%,60%)); }

.tg-15__note {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.65;
}
.tg-15__note code {
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  padding: 1px 5px;
  color: hsl(200,90%,65%);
}

@media (prefers-reduced-motion: reduce) {
  .tg-15__anim { animation: none; background-position: 0% 0%; }
}
```

### 16. CSS Text Gradient with Text Stroke Outline

**Type:** Pure CSS
**Description:** Combines -webkit-text-stroke with background-clip gradient fill, demonstrating stroke-only, fill-only, and stroke-plus-fill patterns side by side.

**HTML:**
```html
<div class="tg-16">
  <div class="tg-16__wrapper">
    <p class="tg-16__label">COMBINING STROKE + GRADIENT FILL</p>
    <h1 class="tg-16__outlined">OUTLINE</h1>
    <h2 class="tg-16__stroked">Gradient Fill + Stroke</h2>
    <div class="tg-16__grid">
      <div class="tg-16__example">
        <span class="tg-16__ex-lbl">Stroke only</span>
        <span class="tg-16__stroke-only">Type</span>
      </div>
      <div class="tg-16__example">
        <span class="tg-16__ex-lbl">Fill only</span>
        <span class="tg-16__fill-only">Type</span>
      </div>
      <div class="tg-16__example">
        <span class="tg-16__ex-lbl">Stroke + Fill</span>
        <span class="tg-16__both">Type</span>
      </div>
    </div>
    <p class="tg-16__note">Apply <code>-webkit-text-stroke</code> first, then layer gradient via <code>background-clip: text</code>. The stroke paints on top of the clipped gradient fill.</p>
  </div>
</div>
```

**CSS:**
```css
.tg-16, .tg-16 *, .tg-16 *::before, .tg-16 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-16 ::selection { background:#0f172a; color:#e0f2fe; }

.tg-16 {
  --g-a: #38bdf8;
  --g-b: #818cf8;
  --g-c: #e879f9;
  --bg: #030609;
  --text: #f1f5f9;
  --muted: #475569;
  --border: rgba(255,255,255,.07);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 24px;
}

.tg-16__wrapper { max-width: 640px; width: 100%; }

.tg-16__label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 16px;
}

/*
  Outlined text: -webkit-text-stroke sets a stroke colour/width,
  and -webkit-text-fill-color: transparent makes the fill invisible,
  leaving only the outline. We can layer a gradient behind via background-clip
  to colour the visible stroke area.
*/
.tg-16__outlined {
  font-size: clamp(3.5rem, 12vw, 6.5rem);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  -webkit-text-stroke: 2px transparent;
  /* Use background + clip to colour the stroke itself */
  background: linear-gradient(90deg, var(--g-a), var(--g-b), var(--g-c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Add stroke on top via paint-order if supported */
  paint-order: stroke fill;
  -webkit-text-stroke: 2px rgba(56,189,248,.6);
  margin-bottom: 8px;
  display: block;
}

/*
  Fill + stroke combined: gradient fill is applied through background-clip,
  then -webkit-text-stroke paints over it. Use a semi-transparent or
  complementary stroke colour to preserve the gradient beneath.
*/
.tg-16__stroked {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--g-a) 0%, var(--g-b) 50%, var(--g-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(232,121,249,.45);
  display: block;
  margin-bottom: 32px;
}

.tg-16__grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tg-16__example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tg-16__ex-lbl {
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .06em;
}

.tg-16__stroke-only {
  font-size: 3rem;
  font-weight: 900;
  -webkit-text-stroke: 2px var(--g-a);
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tg-16__fill-only {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(90deg, var(--g-b), var(--g-c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tg-16__both {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(90deg, var(--g-a), var(--g-b), var(--g-c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.35);
}

.tg-16__note {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.65;
}
.tg-16__note code {
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--g-a);
  font-size: .78em;
}

@media (prefers-reduced-motion: reduce) {}
```

### 17. CSS Text Gradient Fallback for Older Browsers

**Type:** Pure CSS
**Description:** A layered fallback reference with three tiers: plain color, @supports-guarded gradient, and the complete pattern for cross-browser safety.

**HTML:**
```html
<div class="tg-17">
  <div class="tg-17__doc">
    <h2 class="tg-17__h">Browser Compatibility Strategy</h2>
    <p class="tg-17__intro">A layered fallback ensures gradient text looks great in modern browsers and degrades gracefully in older ones — no JavaScript required.</p>

    <div class="tg-17__layer-list">
      <div class="tg-17__layer">
        <span class="tg-17__badge tg-17__badge--1">Layer 1</span>
        <div>
          <strong>Solid color fallback</strong>
          <p>Set a plain <code>color</code> first. Browsers that don't support <code>background-clip: text</code> will render this.</p>
          <span class="tg-17__demo-text tg-17__solid">Solid Fallback</span>
        </div>
      </div>
      <div class="tg-17__layer">
        <span class="tg-17__badge tg-17__badge--2">Layer 2</span>
        <div>
          <strong>@supports guard</strong>
          <p>Wrap gradient text rules in <code>@supports (-webkit-background-clip: text)</code> to scope them to capable browsers only.</p>
          <span class="tg-17__demo-text tg-17__guarded">Guarded Gradient</span>
        </div>
      </div>
      <div class="tg-17__layer">
        <span class="tg-17__badge tg-17__badge--3">Layer 3</span>
        <div>
          <strong>Result in all engines</strong>
          <p>Modern browsers get the gradient; IE/old Android fall back to the solid <code>color</code> — readable in both cases.</p>
          <span class="tg-17__demo-text tg-17__final">Final Output</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-17, .tg-17 *, .tg-17 *::before, .tg-17 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-17 ::selection { background:#3b82f6; color:#fff; }

.tg-17 {
  /* Picked endpoints far apart on the spectrum (cobalt → magenta) so
     the gradient transition is obvious — adjacent-hue gradients
     (e.g. blue→violet) read as a flat colour at smaller sizes. */
  --g-a: #2563eb;
  --g-b: #ec4899;
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --surface: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 44px 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tg-17__doc { max-width: 640px; width: 100%; }

.tg-17__h {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.tg-17__intro {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 540px;
}

.tg-17__layer-list { display: flex; flex-direction: column; gap: 14px; }
.tg-17__layer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 20px 20px 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tg-17__layer strong { display: block; font-size: .9375rem; color: var(--text); margin-bottom: 4px; }
.tg-17__layer p { font-size: .8125rem; color: var(--muted); line-height: 1.55; margin-bottom: 10px; }
.tg-17__layer code {
  background: #f1f5f9;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .78em;
  color: var(--g-b);
}

.tg-17__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 6px;
  padding: 4px 8px;
  flex-shrink: 0;
  margin-top: 2px;
  white-space: nowrap;
}
.tg-17__badge--1 { background: #fef9c3; color: #854d0e; }
.tg-17__badge--2 { background: #dbeafe; color: #1e40af; }
.tg-17__badge--3 { background: #f3e8ff; color: #6b21a8; }

/* Demo text: Layer 1 — solid fallback colour only */
.tg-17__solid {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--g-a); /* Fallback: plain colour */
  display: block;
  letter-spacing: -.02em;
}

/* Layer 2 — @supports guard */
.tg-17__guarded {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--g-b); /* Fallback */
  display: block;
  letter-spacing: -.02em;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .tg-17__guarded {
    /* Use background-image (not the shorthand) so background-clip
       below survives. The shorthand would reset background-clip to
       border-box. */
    background-image: linear-gradient(90deg, var(--g-a), var(--g-b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding: 0 .05em .1em;
  }
}

/* Layer 3 — complete pattern with @supports */
.tg-17__final {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--g-a);
  display: block;
  letter-spacing: -.02em;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .tg-17__final {
    background-image: linear-gradient(90deg, var(--g-a) 0%, var(--g-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding: 0 .05em .1em;
  }
}

@media (prefers-reduced-motion: reduce) {}
```

### 18. Tailwind CSS Text Gradient Utility Classes

**Type:** Pure CSS
**Description:** A mapping table and live recreation of Tailwind's bg-clip-text, bg-gradient-to-*, from-*, and text-transparent utility patterns using native CSS.

**HTML:**
```html
<div class="tg-18">
  <div class="tg-18__doc">
    <h2 class="tg-18__heading">Tailwind CSS Text Gradient<br><span class="tg-18__grad">Utility Classes</span></h2>
    <p class="tg-18__sub">Tailwind achieves gradient text by composing three utility classes. Here's how the framework classes map to raw CSS properties.</p>

    <div class="tg-18__table-wrap">
      <table class="tg-18__table">
        <thead><tr><th>Tailwind Class</th><th>CSS Property</th></tr></thead>
        <tbody>
          <tr><td><code>bg-gradient-to-r</code></td><td><code>background-image: linear-gradient(to right, …)</code></td></tr>
          <tr><td><code>from-indigo-500</code></td><td><code>--tw-gradient-from: #6366f1</code></td></tr>
          <tr><td><code>to-purple-600</code></td><td><code>--tw-gradient-to: #9333ea</code></td></tr>
          <tr><td><code>bg-clip-text</code></td><td><code>-webkit-background-clip: text; background-clip: text</code></td></tr>
          <tr><td><code>text-transparent</code></td><td><code>color: transparent; -webkit-text-fill-color: transparent</code></td></tr>
        </tbody>
      </table>
    </div>

    <div class="tg-18__preview">
      <p class="tg-18__prev-lbl">Result — native CSS recreation of the Tailwind output:</p>
      <h3 class="tg-18__demo-a">bg-gradient-to-r from-cyan-400 to-blue-600</h3>
      <h3 class="tg-18__demo-b">bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500</h3>
      <h3 class="tg-18__demo-c">bg-gradient-to-r from-emerald-400 to-teal-600</h3>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tg-18, .tg-18 *, .tg-18 *::before, .tg-18 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-18 ::selection { background:#6366f1; color:#fff; }

.tg-18 {
  --g-a: #6366f1;
  --g-b: #9333ea;
  --bg: #ffffff;
  --surface: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --head-bg: #f1f5f9;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  display: flex;
  justify-content: center;
}

.tg-18__doc { max-width: 660px; width: 100%; }

.tg-18__heading {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.tg-18__grad {
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-18__sub {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 520px;
}

.tg-18__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 24px;
}
.tg-18__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .825rem;
}
.tg-18__table thead { background: var(--head-bg); }
.tg-18__table th {
  text-align: left;
  padding: 10px 16px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.tg-18__table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.tg-18__table tr:last-child td { border-bottom: none; }
.tg-18__table code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .775em;
  color: var(--g-a);
  white-space: nowrap;
}

.tg-18__preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.tg-18__prev-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .09em; color: var(--muted); margin-bottom: 12px; }

/* Native CSS recreating Tailwind gradient-text utilities */
.tg-18__demo-a {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(to right, #22d3ee, #2563eb);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 4px;
}
.tg-18__demo-b {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(to bottom right, #fb7185, #d946ef, #6366f1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 4px;
}
.tg-18__demo-c {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(to right, #34d399, #0d9488);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (prefers-reduced-motion: reduce) {}
```

### 19. CSS Text Gradient on Multiline Paragraph

**Type:** Pure CSS
**Description:** An editorial article demonstrating how background-clip text gradients behave across line-wrapped headings and multiline blockquote elements.

**HTML:**
```html
<div class="tg-19">
  <div class="tg-19__article">
    <p class="tg-19__kicker">TECHNIQUE SPOTLIGHT</p>
    <h1 class="tg-19__headline tg-19__grad">Design is not just<br>what it looks like—<br>it's how it works.</h1>
    <p class="tg-19__body">When a gradient is applied to a multiline element, the <code>background-size</code> covers the full bounding box of the element. This means each line samples a different horizontal section of the gradient, creating a natural shift from top to bottom.</p>
    <blockquote class="tg-19__quote tg-19__grad-para">
      The bounding box of a multiline element spans all its lines. A <code>linear-gradient(to right)</code> stretches across the full width of the widest line — narrower lines sample only part of it, which is why short lines at the end appear different in hue.
    </blockquote>
    <p class="tg-19__note">Tip: Use <code>display: block</code> or <code>display: inline-block</code> rather than <code>display: inline</code> to ensure the bounding box wraps all lines uniformly.</p>
  </div>
</div>
```

**CSS:**
```css
.tg-19, .tg-19 *, .tg-19 *::before, .tg-19 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-19 ::selection { background:#4338ca; color:#e0e7ff; }

.tg-19 {
  --g-a: #4338ca;
  --g-b: #7c3aed;
  --g-c: #a21caf;
  --bg: #fafaf9;
  --text: #1c1917;
  --muted: #78716c;
  --border: #e7e5e4;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tg-19__article { max-width: 660px; width: 100%; padding: 44px 28px; }

.tg-19__kicker {
  font-family: system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 16px;
}

/*
  Multiline gradient headline: `display: block` is key — it ensures the
  bounding box spans the full container width. The gradient then stretches
  across that box and clips to each character.
*/
.tg-19__grad {
  display: block;
  background: linear-gradient(110deg, var(--g-a) 0%, var(--g-b) 50%, var(--g-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-19__headline {
  font-size: clamp(1.8rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}

.tg-19__body {
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 20px;
}
.tg-19__body code, .tg-19__note code {
  font-family: monospace;
  font-size: .82em;
  background: #f0eee8;
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--g-b);
}

/* Paragraph-level gradient: works well on body text when used sparingly */
.tg-19__grad-para {
  display: block;
  background: linear-gradient(110deg, var(--g-a) 0%, var(--g-b) 60%, var(--g-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-19__quote {
  font-size: 1.05rem;
  line-height: 1.7;
  border-left: 3px solid;
  border-image: linear-gradient(to bottom, var(--g-a), var(--g-c)) 1;
  padding-left: 20px;
  margin: 0 0 20px;
  font-style: italic;
}
.tg-19__quote code {
  font-family: monospace;
  font-size: .82em;
  background: rgba(67,56,202,.08);
  border-radius: 3px;
  padding: 1px 5px;
  -webkit-text-fill-color: var(--g-b);
  font-style: normal;
}

.tg-19__note {
  font-family: system-ui, sans-serif;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {}
```

### 20. Dark Mode vs Light Mode CSS Text Gradient

**Type:** CSS + JS
**Description:** A toggle-enabled card that switches between vivid neon gradients (dark) and rich jewel-tone gradients (light) via CSS variables and a JS class swap.

**HTML:**
```html
<div class="tg-20" id="tg-20-root">
  <div class="tg-20__card">
    <div class="tg-20__header">
      <div class="tg-20__brand">
        <span class="tg-20__icon">◈</span>
        <span class="tg-20__brand-name"><span class="tg-20__grad">Lumis</span></span>
      </div>
      <button class="tg-20__toggle" id="tg-20-toggle" aria-label="Toggle colour scheme">
        <span class="tg-20__toggle-icon tg-20__moon">☾</span>
        <span class="tg-20__toggle-icon tg-20__sun">☀</span>
      </button>
    </div>
    <h1 class="tg-20__title">Adaptive <span class="tg-20__grad">Colour</span><br>for Every Context</h1>
    <p class="tg-20__body">Gradient variables swap automatically between light and dark schemes via <code>prefers-color-scheme</code> and a JS toggle. Vivid saturated gradients work on dark backgrounds; softer, deeper tones on light.</p>
    <div class="tg-20__chips">
      <span class="tg-20__chip tg-20__grad-text">Dark: vivid neon</span>
      <span class="tg-20__chip tg-20__grad-text-alt">Light: rich jewel</span>
    </div>
  </div>
</div>
```

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

/* Dark defaults */
.tg-20 {
  /* Dark-mode gradient: vivid, high-saturation */
  --grad: linear-gradient(110deg, #f0abfc 0%, #818cf8 50%, #38bdf8 100%);
  --grad-alt: linear-gradient(110deg, #34d399 0%, #06b6d4 100%);
  --bg: #06030f;
  --surface: #10101a;
  --text: #f0e7ff;
  --muted: rgba(240,231,255,.5);
  --border: rgba(255,255,255,.08);
  --toggle-bg: rgba(255,255,255,.07);
  --moon-op: 1;
  --sun-op: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 24px;
  transition: background .3s, color .3s;
}

/* Light-mode override via media query */
@media (prefers-color-scheme: light) {
  .tg-20:not(.tg-20--force-dark) {
    --grad: linear-gradient(110deg, #4f46e5 0%, #7c3aed 55%, #a21caf 100%);
    --grad-alt: linear-gradient(110deg, #0f766e 0%, #0284c7 100%);
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --toggle-bg: #e2e8f0;
    --moon-op: 0;
    --sun-op: 1;
  }
}

/* JS-toggled light class */
.tg-20--light {
  --grad: linear-gradient(110deg, #4f46e5 0%, #7c3aed 55%, #a21caf 100%);
  --grad-alt: linear-gradient(110deg, #0f766e 0%, #0284c7 100%);
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --toggle-bg: #e2e8f0;
  --moon-op: 0;
  --sun-op: 1;
}

.tg-20__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 32px;
  max-width: 520px;
  width: 100%;
  transition: background .3s, border-color .3s;
}

.tg-20__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.tg-20__brand { display: flex; align-items: center; gap: 8px; }
.tg-20__icon {
  font-size: 1.3rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tg-20__brand-name { font-size: 1.25rem; font-weight: 800; }

/* Reusable gradient text — driven by --grad variable */
.tg-20__grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tg-20__grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tg-20__grad-text-alt {
  background: var(--grad-alt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tg-20__toggle {
  background: var(--toggle-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .2s;
  position: relative;
  width: 44px;
  height: 36px;
}
.tg-20__toggle-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 1rem;
  transition: opacity .25s;
}
.tg-20__moon { opacity: var(--moon-op); }
.tg-20__sun  { opacity: var(--sun-op); }

.tg-20__title {
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 16px;
  transition: color .3s;
}

.tg-20__body {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 22px;
  transition: color .3s;
}
.tg-20__body code {
  font-size: .8em;
  background: var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: inherit;
  filter: brightness(1.5);
}

.tg-20__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.tg-20__chip {
  font-size: .8rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .tg-20, .tg-20__card, .tg-20__title, .tg-20__body, .tg-20__toggle { transition: none; }
}
```

**JS:**
```js
(function(){
  var root = document.getElementById('tg-20-root');
  var btn  = document.getElementById('tg-20-toggle');
  var light = false;
  btn.addEventListener('click', function(){
    light = !light;
    root.classList.toggle('tg-20--light', light);
    root.classList.toggle('tg-20--force-dark', !light);
  });
})();
```

---
## 24 CSS Timeline Layouts

URL: https://codefronts.com/layouts/css-timelines/
Description: 24 hand-coded CSS timeline layouts — six field-study aesthetics (archaeological dig, concert tour stubs, surgical vitals trace, cinema reel, mission control terminal, fermentation jar calendar), twelve chronological patterns (thread, accordion, filmstrip, nature trail, terminal log, art deco, vertical centered, horizontal scroll, neon rail, editorial, stacked progress, brutalist grid), and six documentation layouts (changelog ticker, editorial spine, split-screen CV, railroad stations, film-strip portfolio, audit ledger). Copy-paste ready.
Demo count: 24

### 01. Stratigraphy Timeline

**Type:** Pure CSS
**Description:** Vertical hover-expand archaeological cross-section. Each layer is a geological era — flex-grow reveals finds when hovered, with a depth ruler on the left and an artifact card panel on the right. Built for museum dig reports, geological surveys, and historical site catalogues.

**HTML:**
```html
<section class="tl1-wrap">
  <header class="tl1-head">
    <h2 class="tl1-title">Dig Site <em>K-7</em><br>Anatolian Plateau</h2>
    <div class="tl1-meta">
      <strong>EXCAVATION LOG · SEASON 04</strong>
      42°14′N 33°08′E · Lead: Dr. M. Eren<br>
      Surface elevation 1,142m · Total depth 6.4m<br>
      Catalogued artifacts: 218 · Hover any layer to inspect.
    </div>
  </header>

  <div class="tl1-dig">
    <div class="tl1-ruler">
      <div class="tl1-tick">0.0m</div>
      <div class="tl1-tick">1.0m</div>
      <div class="tl1-tick">2.5m</div>
      <div class="tl1-tick">3.8m</div>
      <div class="tl1-tick">5.0m</div>
      <div class="tl1-tick">6.4m</div>
    </div>

    <div class="tl1-stack">
      <div class="tl1-layer tl1-l1">
        <div class="tl1-era">Topsoil &amp; Ottoman</div>
        <div class="tl1-years">CE 1453 – present · 0.0–1.0m</div>
        <div class="tl1-find">Plowed agricultural soil mixed with glazed Iznik shards, a worn copper para from the reign of Selim II, and clay pipe fragments. Heavy modern disturbance; treat all surface finds as out of context.</div>
      </div>
      <div class="tl1-layer tl1-l2">
        <div class="tl1-era">Byzantine Habitation</div>
        <div class="tl1-years">CE 330 – 1200 · 1.0–2.5m</div>
        <div class="tl1-find">Compacted clay floors of a small basilica, three intact storage amphorae, a hoard of 47 bronze folles, and bone styluses. Evidence of fire damage in the eastern quadrant suggests abandonment by the late 12th century.</div>
      </div>
      <div class="tl1-layer tl1-l3">
        <div class="tl1-era">Roman Provincial</div>
        <div class="tl1-years">63 BCE – CE 330 · 2.5–3.8m</div>
        <div class="tl1-find">Hypocaust tile system, fragment of a tessellated mosaic depicting a stag, two terra sigillata bowls stamped with the maker's mark CAESIVS. Coin of Hadrian recovered at 3.2m.</div>
      </div>
      <div class="tl1-layer tl1-l4">
        <div class="tl1-era">Hellenistic</div>
        <div class="tl1-years">323 – 63 BCE · 3.8–4.6m</div>
        <div class="tl1-find">Lower courses of an ashlar wall (probable agora boundary). Fine black-glaze pottery from Pergamon, three iron arrowheads, and a sealed cache of 12 silver tetradrachms of Eumenes II.</div>
      </div>
      <div class="tl1-layer tl1-l5">
        <div class="tl1-era">Late Bronze</div>
        <div class="tl1-years">1600 – 1200 BCE · 4.6–5.6m</div>
        <div class="tl1-find">Hittite-period storage pithoi in situ, cuneiform tablet fragment (administrative, grain inventory), bronze fibula. Burn layer at 5.4m correlates with the regional collapse horizon documented at Boğazköy.</div>
      </div>
      <div class="tl1-layer tl1-l6">
        <div class="tl1-era">Neolithic</div>
        <div class="tl1-years">7000 – 5000 BCE · 5.6–6.4m</div>
        <div class="tl1-find">Mudbrick platform, obsidian blades sourced to Göllü Dağ, animal bone assemblage (caprines dominant), and the partial remains of a clay figurine — seated female, headless. Sterile soil at 6.4m.</div>
      </div>
    </div>

    <aside class="tl1-artifacts">
      <h4 class="tl1-art-title">Featured Finds · Season 04</h4>
      <div class="tl1-card">
        <div class="tl1-card-name">Tetradrachm of Eumenes II</div>
        <div class="tl1-card-id">CAT. K7-H-0042 · Layer 4</div>
        <div class="tl1-card-desc">Silver, 17.1g. Obverse: diademed head of Philetairos. Reverse: seated Athena with shield. Mint of Pergamon, c. 180 BCE.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Cuneiform Inventory Tablet</div>
        <div class="tl1-card-id">CAT. K7-B-0117 · Layer 5</div>
        <div class="tl1-card-desc">Unfired clay, fragmentary. Ten lines of Hittite syllabic script recording wheat (ZÍZ) quantities. Awaiting full transliteration by Eren &amp; Tunç.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Mosaic Stag Fragment</div>
        <div class="tl1-card-id">CAT. K7-R-0008 · Layer 3</div>
        <div class="tl1-card-desc">Tesserae in limestone and smalti, 38×42cm. Likely from the threshold of a peristyle court. Provincial workshop, late 2nd c. CE.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Obsidian Blade Cache</div>
        <div class="tl1-card-id">CAT. K7-N-0156 · Layer 6</div>
        <div class="tl1-card-desc">Six pressure-flaked prismatic blades. XRF analysis confirms Göllü Dağ source, ~270km southeast. Trade evidence for early Neolithic exchange networks.</div>
      </div>
    </aside>
  </div>
</section>
```

**CSS:**
```css
.tl1-wrap {
  background: #1a1410;
  color: #e8dfc8;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  padding: 2.5rem 2rem 3rem;
}
.tl1-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}
.tl1-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 0.95;
  color: #f0e5cc;
  margin: 0;
}
.tl1-title em { font-style: italic; color: #c89860; }
.tl1-meta {
  font-size: 11px;
  line-height: 1.7;
  color: #a89570;
  border-left: 1px solid #5a4830;
  padding-left: 1rem;
  align-self: end;
}
.tl1-meta strong { color: #e8dfc8; display: block; margin-bottom: 0.25rem; }
.tl1-dig {
  display: grid;
  grid-template-columns: 60px 1fr 260px;
  gap: 0;
}
.tl1-ruler {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  color: #8a7550;
  border-right: 1px solid #5a4830;
}
.tl1-tick {
  flex: 1;
  padding: 0.5rem 0.5rem 0 0;
  text-align: right;
  border-top: 1px dashed rgba(138,117,80,0.3);
  letter-spacing: 0.1em;
}
.tl1-stack { display: flex; flex-direction: column; }
.tl1-layer {
  flex: 1;
  min-height: 110px;
  padding: 1.25rem 1.5rem;
  position: relative;
  border-bottom: 2px solid rgba(0,0,0,0.4);
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.7, 0, 0.2, 1);
  overflow: hidden;
}
.tl1-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.tl1-l1 { background: linear-gradient(180deg, #6b5840, #574332); }
.tl1-l1::before { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.1) 8px 9px); }
.tl1-l2 { background: linear-gradient(180deg, #8a6840, #6e5232); }
.tl1-l2::before { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0 3px, transparent 3px), radial-gradient(circle at 70% 80%, rgba(0,0,0,0.2) 0 4px, transparent 4px); background-size: 40px 40px, 60px 60px; }
.tl1-l3 { background: linear-gradient(180deg, #a47a48, #80582e); }
.tl1-l3::before { background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(0,0,0,0.08) 20px 22px); }
.tl1-l4 { background: linear-gradient(180deg, #c08850, #9a6638); }
.tl1-l4::before { background: radial-gradient(ellipse at 50% 50%, rgba(255,200,120,0.2), transparent 70%); }
.tl1-l5 { background: linear-gradient(180deg, #7a5a3a, #4e3820); }
.tl1-l5::before { background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px); }
.tl1-l6 { background: linear-gradient(180deg, #3a2818, #1a1008); }
.tl1-layer:hover { flex: 3; }
.tl1-layer:hover .tl1-find { opacity: 1; transform: translateX(0); }
.tl1-era {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #f5ecd1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.tl1-years {
  font-size: 10px;
  color: rgba(245,236,209,0.7);
  letter-spacing: 0.15em;
  margin-top: 0.25rem;
}
.tl1-find {
  margin-top: 0.75rem;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(245,236,209,0.85);
  max-width: 500px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.tl1-artifacts {
  border-left: 1px solid #5a4830;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tl1-art-title {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #8a7550;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #5a4830;
  margin: 0 0 0.5rem;
}
.tl1-card {
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(138,117,80,0.3);
}
.tl1-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: #c89860;
}
.tl1-card-id {
  font-size: 9px;
  color: #8a7550;
  letter-spacing: 0.15em;
  margin: 0.25rem 0;
}
.tl1-card-desc {
  font-size: 10.5px;
  line-height: 1.5;
  color: #a89570;
}
@media (max-width: 720px) {
  .tl1-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl1-dig { grid-template-columns: 50px 1fr; }
  .tl1-artifacts { grid-column: 1 / -1; border-left: none; border-top: 1px solid #5a4830; padding: 1rem 0 0; margin-top: 1rem; }
}
```

### 02. Tour Stub Timeline

**Type:** Pure CSS
**Description:** Horizontal snap-scroll strip of concert ticket stubs. Each card carries a city, venue, set list, and a hand-stamped seal — slightly rotated, with dashed tear-perforations and offset shadows. Built for tour archives, festival lineups, and any event-driven brand history.

**HTML:**
```html
<section class="tl2-wrap">
  <header class="tl2-head">
    <h2 class="tl2-title">The Static<br><span class="tl2-title-alt">World Tour '26</span></h2>
    <div class="tl2-credits">
      44 cities<br>
      6 continents<br>
      sold + standing<br>
      ━━━━━━━━━<br>
      scroll →
    </div>
  </header>

  <div class="tl2-strip">
    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">14 · FEB · 2026 · FRI</div>
        <div class="tl2-city">Reykjavík</div>
        <div class="tl2-venue">Harpa Concert Hall</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Northern Static</li>
          <li>Glacier Song</li>
          <li>Bone Radio</li>
          <li>Encore: Aurora</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">22 · FEB · 2026 · SAT</div>
        <div class="tl2-city">Berlin</div>
        <div class="tl2-venue">Tempodrom · Kreuzberg</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>U-Bahn Hymn</li>
          <li>Brutalist Love</li>
          <li>Concrete Dawn</li>
          <li>Encore: Static (live edit)</li>
        </ol>
      </div>
      <div class="tl2-seal">Few<br>Left</div>
    </article>

    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">06 · MAR · 2026 · FRI</div>
        <div class="tl2-city">Marrakech</div>
        <div class="tl2-venue">Jardin Majorelle</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Blue Garden</li>
          <li>Souk Static</li>
          <li>Atlas Lullaby</li>
          <li>Encore: Mint Tea</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">19 · MAR · 2026 · THU</div>
        <div class="tl2-city">Lagos</div>
        <div class="tl2-venue">Terra Kulture Arena</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Harmattan</li>
          <li>Static Pt. II</li>
          <li>Yellow Bus</li>
          <li>Encore: Lagos After Dark</li>
        </ol>
      </div>
      <div class="tl2-seal">Tix<br>Live</div>
    </article>

    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">04 · APR · 2026 · SAT</div>
        <div class="tl2-city">Mexico City</div>
        <div class="tl2-venue">Foro Sol</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Xochimilco</li>
          <li>Smog Romance</li>
          <li>Tláloc</li>
          <li>Encore: Mezcal Static</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">02 · MAY · 2026 · SAT</div>
        <div class="tl2-city">Tokyo</div>
        <div class="tl2-venue">Nippon Budokan</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Shibuya Static</li>
          <li>Sakura Loop</li>
          <li>Train at 3am</li>
          <li>Encore: Hanami Hymn</li>
        </ol>
      </div>
      <div class="tl2-seal">Few<br>Left</div>
    </article>
  </div>
</section>
```

**CSS:**
```css
.tl2-wrap {
  background: #f4ed47;
  color: #1a1a1a;
  font-family: 'Archivo', system-ui, sans-serif;
  padding: 2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.tl2-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #1a1a1a 1px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.08;
  pointer-events: none;
}
.tl2-head {
  padding: 1rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  position: relative;
}
.tl2-title {
  font-family: 'Anton', 'Archivo', sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 9vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}
.tl2-title-alt {
  display: block;
  color: #ff2d72;
  -webkit-text-stroke: 2px #1a1a1a;
}
.tl2-credits {
  font-weight: 900;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: right;
  border: 3px solid #1a1a1a;
  padding: 0.75rem;
  background: #f4ed47;
  transform: rotate(2deg);
  box-shadow: 5px 5px 0 #1a1a1a;
}
.tl2-strip {
  display: flex;
  gap: 1rem;
  padding: 1rem 2rem 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a #f4ed47;
  position: relative;
}
.tl2-strip::-webkit-scrollbar { height: 6px; }
.tl2-strip::-webkit-scrollbar-thumb { background: #1a1a1a; }
.tl2-stub {
  flex: 0 0 270px;
  min-height: 400px;
  background: #fff;
  border: 3px solid #1a1a1a;
  box-shadow: 7px 7px 0 #1a1a1a;
  position: relative;
  scroll-snap-align: start;
  transform: rotate(-1deg);
  transition: transform 0.35s, box-shadow 0.35s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.tl2-stub:nth-child(odd) { transform: rotate(1.5deg); }
.tl2-stub:nth-child(3n) { transform: rotate(-2deg); }
.tl2-stub:nth-child(5n) { transform: rotate(0.5deg); }
.tl2-stub:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 10px 10px 0 #ff2d72;
}
.tl2-stub::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 35%;
  border-top: 2px dashed #1a1a1a;
}
.tl2-stub::after {
  content: '';
  position: absolute;
  left: -8px;
  top: calc(35% - 8px);
  width: 16px; height: 16px;
  background: #f4ed47;
  border: 3px solid #1a1a1a;
  border-radius: 50%;
}
.tl2-top {
  padding: 1rem;
  flex: 0 0 35%;
  background: #fff;
}
.tl2-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.tl2-city {
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: 2rem;
  line-height: 0.9;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.tl2-venue {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.4rem;
  color: #555;
}
.tl2-bot {
  padding: 1.5rem 1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tl2-list-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #777;
  margin: 0 0 0.5rem;
}
.tl2-setlist {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  counter-reset: tl2-set-num;
}
.tl2-setlist li {
  padding: 2px 0;
  border-bottom: 1px dotted #ddd;
}
.tl2-setlist li::before {
  content: counter(tl2-set-num, decimal-leading-zero) ' · ';
  counter-increment: tl2-set-num;
  color: #ff2d72;
}
.tl2-seal {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 54px; height: 54px;
  border: 2px solid #ff2d72;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: 10px;
  color: #ff2d72;
  line-height: 1.1;
  transform: rotate(-15deg);
  text-transform: uppercase;
}
.tl2-sold-out .tl2-seal {
  color: #1a1a1a;
  border-color: #1a1a1a;
  background: #ff2d72;
  transform: rotate(-15deg) scale(1.05);
}
@media (max-width: 720px) {
  .tl2-head { grid-template-columns: 1fr; }
  .tl2-credits { justify-self: start; }
}
```

### 03. Vitals Timeline

**Type:** Pure CSS
**Description:** Clinical procedural timeline with a live EKG SVG trace, four colour-coded readouts (HR, SpO₂, BP, temp), and alert pulses on critical events. Built for surgical case logs, anaesthesia records, and incident retrospectives in healthcare environments.

**HTML:**
```html
<section class="tl3-wrap">
  <header class="tl3-head">
    <h2 class="tl3-title">Mitral Valve <em>Repair</em><br>OR-3 · 08:14:22</h2>
    <div class="tl3-patient">
      <strong>PT · ID-449201 · M · 58y</strong><br>
      ASA III · BMI 27.4<br>
      Lead surgeon: Dr. A. Okafor<br>
      Anesthesia: GA · ETT
    </div>
  </header>

  <div class="tl3-monitor">
    <div class="tl3-readouts">
      <div class="tl3-readout tl3-hr">
        <div class="tl3-lbl">Heart Rate</div>
        <div class="tl3-val">72<span class="tl3-unit">bpm</span></div>
      </div>
      <div class="tl3-readout tl3-sp">
        <div class="tl3-lbl">SpO₂</div>
        <div class="tl3-val">99<span class="tl3-unit">%</span></div>
      </div>
      <div class="tl3-readout tl3-bp">
        <div class="tl3-lbl">BP · MAP</div>
        <div class="tl3-val">118/74<span class="tl3-unit"> · 89</span></div>
      </div>
      <div class="tl3-readout tl3-tp">
        <div class="tl3-lbl">Core Temp</div>
        <div class="tl3-val">36.4<span class="tl3-unit">°C</span></div>
      </div>
    </div>
    <div class="tl3-ekg">
      <svg viewBox="0 0 1000 80" preserveAspectRatio="none" aria-hidden="true">
        <path class="tl3-trace" d="M0,40 L100,40 L110,40 L115,20 L120,60 L125,10 L130,70 L135,40 L240,40 L250,40 L255,20 L260,60 L265,10 L270,70 L275,40 L380,40 L390,40 L395,20 L400,60 L405,10 L410,70 L415,40 L520,40 L530,40 L535,20 L540,60 L545,10 L550,70 L555,40 L660,40 L670,40 L675,20 L680,60 L685,10 L690,70 L695,40 L800,40 L810,40 L815,20 L820,60 L825,10 L830,70 L835,40 L940,40 L950,40 L955,20 L960,60 L965,10 L970,70 L975,40 L1000,40"/>
      </svg>
    </div>
  </div>

  <div class="tl3-timeline">
    <div class="tl3-step">
      <div class="tl3-time">07:42<span class="tl3-elapsed">T−00:32</span></div>
      <div>
        <h4 class="tl3-step-title">Pre-op briefing &amp; timeout</h4>
        <p class="tl3-step-body">Patient identity, procedure, and site confirmed by surgical team per WHO checklist. Blood products on standby (2u PRBC, 2u FFP). Cardiac echo reviewed.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-ok">CHECKLIST CLEAR</span><span class="tl3-tag">ECHO ✓</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">08:14<span class="tl3-elapsed">T+00:00</span></div>
      <div>
        <h4 class="tl3-step-title">Induction &amp; intubation</h4>
        <p class="tl3-step-body">Propofol 200mg / fentanyl 200mcg / rocuronium 50mg. ETT 8.0 placed without difficulty, confirmed by capnography and bilateral breath sounds. Arterial line right radial.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-ok">AIRWAY ✓</span><span class="tl3-tag">A-LINE R RADIAL</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">08:46<span class="tl3-elapsed">T+00:32</span></div>
      <div>
        <h4 class="tl3-step-title">Median sternotomy</h4>
        <p class="tl3-step-body">Skin incision and sternal split with oscillating saw. Retractor placed. Pericardium opened in inverted-T fashion, sutured to drapes. Heparin 30,000u administered.</p>
        <div class="tl3-tags"><span class="tl3-tag">ACT pending</span><span class="tl3-tag tl3-ok">HEMOSTASIS</span></div>
      </div>
    </div>
    <div class="tl3-step tl3-alert">
      <div class="tl3-time">09:11<span class="tl3-elapsed">T+00:57</span></div>
      <div>
        <h4 class="tl3-step-title">Transient hypotension on aortic cannulation</h4>
        <p class="tl3-step-body">MAP fell to 52 momentarily during cannulation; corrected with 100mcg phenylephrine bolus and 250ml volume. ACT now 480s, on bypass within 90 seconds.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-crit">ALERT · MAP 52</span><span class="tl3-tag tl3-ok">CORRECTED</span><span class="tl3-tag">CPB INITIATED</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">09:24<span class="tl3-elapsed">T+01:10</span></div>
      <div>
        <h4 class="tl3-step-title">Cross-clamp &amp; cardioplegia</h4>
        <p class="tl3-step-body">Aortic cross-clamp applied. Antegrade cold blood cardioplegia delivered, asystole achieved within 60s. Cooling to 32°C systemic.</p>
        <div class="tl3-tags"><span class="tl3-tag">XCL 09:24</span><span class="tl3-tag tl3-ok">ARREST CONFIRMED</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">10:02<span class="tl3-elapsed">T+01:48</span></div>
      <div>
        <h4 class="tl3-step-title">Triangular resection + annuloplasty ring</h4>
        <p class="tl3-step-body">P2 segment resected and reapproximated with 4-0 prolene. Cosgrove 32mm annuloplasty band placed with interrupted 2-0 ethibond. Saline test: no regurgitation.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-ok">REPAIR ✓</span><span class="tl3-tag tl3-ok">SALINE TEST DRY</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">10:34<span class="tl3-elapsed">T+02:20</span></div>
      <div>
        <h4 class="tl3-step-title">Wean from bypass · TEE confirms</h4>
        <p class="tl3-step-body">Cross-clamp off, spontaneous sinus rhythm. Weaning slow with low-dose epi (0.03 mcg/kg/min). TEE shows trace MR, mean gradient 3mmHg. Sternum closed in standard fashion.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-ok">OFF BYPASS</span><span class="tl3-tag tl3-ok">TEE: TRACE MR</span><span class="tl3-tag">EPI 0.03</span></div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
.tl3-wrap {
  background: #0d1612;
  color: #d4e8e0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 2rem;
}
.tl3-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #2a4038;
  padding-bottom: 1rem;
  gap: 1.5rem;
}
.tl3-title {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
}
.tl3-title em { font-style: italic; color: #4fc88f; }
.tl3-patient {
  font-size: 10.5px;
  line-height: 1.6;
  text-align: right;
  color: #8aaaa0;
}
.tl3-patient strong { color: #fff; }
.tl3-monitor {
  background: #060d0a;
  border: 1px solid #2a4038;
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.tl3-monitor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(79,200,143,0.03) 3px 4px);
  pointer-events: none;
}
.tl3-readouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}
.tl3-readout { border-left: 2px solid; padding-left: 0.75rem; }
.tl3-hr { border-color: #ff4d6d; }
.tl3-sp { border-color: #4fc88f; }
.tl3-bp { border-color: #ffa726; }
.tl3-tp { border-color: #4dc4ff; }
.tl3-lbl {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #8aaaa0;
  text-transform: uppercase;
}
.tl3-val {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.25rem;
}
.tl3-hr .tl3-val { color: #ff4d6d; }
.tl3-sp .tl3-val { color: #4fc88f; }
.tl3-bp .tl3-val { color: #ffa726; }
.tl3-tp .tl3-val { color: #4dc4ff; }
.tl3-unit {
  font-size: 10px;
  color: #8aaaa0;
  margin-left: 4px;
  font-weight: 400;
}
.tl3-ekg { height: 70px; width: 100%; position: relative; }
.tl3-ekg svg { width: 100%; height: 100%; display: block; }
.tl3-trace {
  stroke: #4fc88f;
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: tl3-ekg 4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(79,200,143,0.6));
}
@keyframes tl3-ekg { to { stroke-dashoffset: 0; } }
.tl3-timeline {
  position: relative;
  padding: 1rem 0;
}
.tl3-timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, #2a4038, #4fc88f, #2a4038);
}
.tl3-step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding: 0.75rem 0 1.25rem;
  position: relative;
}
.tl3-time {
  font-size: 12px;
  font-weight: 700;
  color: #4fc88f;
  letter-spacing: 0.05em;
  text-align: right;
}
.tl3-elapsed {
  display: block;
  font-size: 9px;
  color: #8aaaa0;
  letter-spacing: 0.15em;
  margin-top: 2px;
  font-weight: 400;
}
.tl3-step::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 18px;
  width: 11px; height: 11px;
  background: #0d1612;
  border: 2px solid #4fc88f;
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.tl3-step:hover::after {
  background: #4fc88f;
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(79,200,143,0.8);
}
.tl3-step-title {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 0.35rem;
}
.tl3-step-body {
  font-size: 11.5px;
  line-height: 1.6;
  color: #a8c0b8;
  max-width: 700px;
  margin: 0;
}
.tl3-tags {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.tl3-tag {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid #2a4038;
  color: #8aaaa0;
}
.tl3-tag.tl3-crit { color: #ff4d6d; border-color: #ff4d6d; }
.tl3-tag.tl3-ok { color: #4fc88f; border-color: #4fc88f; }
.tl3-alert::after {
  border-color: #ff4d6d;
  animation: tl3-pulse-alert 1.5s infinite;
}
.tl3-alert .tl3-step-title { color: #ff4d6d; }
@keyframes tl3-pulse-alert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(255,77,109,0); }
}
@media (max-width: 720px) {
  .tl3-head { flex-direction: column; align-items: flex-start; }
  .tl3-patient { text-align: left; }
  .tl3-readouts { grid-template-columns: repeat(2, 1fr); }
}
```

### 04. Film Reel Timeline

**Type:** Pure CSS
**Description:** Vertical cinema reel with sprocket-hole borders top and bottom, three-column frames (frame number, scene still, director notes), and an Italianate Playfair display headline. Built for production diaries, film festival retrospectives, and any project broken into named phases.

**HTML:**
```html
<section class="tl4-wrap">
  <header class="tl4-head">
    <div class="tl4-overline">A Production Diary · Calendar Year MMXXV</div>
    <h2 class="tl4-title">The Last <strong>Lighthouse</strong></h2>
    <div class="tl4-credits">Dir. Helena Vance · Prod. Auteur Pictures · 35mm</div>
  </header>

  <div class="tl4-reel">
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">I</div>
        <div class="tl4-num-lbl">Dev</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Development</strong>
          The script arrives in seventeen drafts, each <em>quieter</em> than the last.
        </div>
        <div class="tl4-slate">FEB 2024 — SEP 2024 · 7 months</div>
      </div>
      <div class="tl4-notes">
        <p>Vance options the Carrigan novella in February. By May, the first treatment removes nearly all dialogue from Act II. Greenlit at $4.2M.</p>
        <div class="tl4-director">"I want it to feel like the audience is also a guest at the lighthouse, unsure if they should be there." — H.V., production notes</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">II</div>
        <div class="tl4-num-lbl">Pre</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Pre-production</strong>
          A coastline is chosen for its <em>refusal to behave</em>.
        </div>
        <div class="tl4-slate">OCT 2024 — JAN 2025 · 4 months</div>
      </div>
      <div class="tl4-notes">
        <p>Location scouting along the Orkney archipelago. Eilean Mòr cleared with Trust for Scotland after three rejections. Cast: McTavish, Okwukwe, Andersson.</p>
        <div class="tl4-director">"The lighthouse keeps its own counsel. We adjust to it." — Production designer Imani Royle</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">III</div>
        <div class="tl4-num-lbl">Shoot</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Principal Photography</strong>
          Forty-two days, nineteen of which are <em>unusable for weather</em>.
        </div>
        <div class="tl4-slate">FEB 2025 — APR 2025 · 60 days scheduled</div>
      </div>
      <div class="tl4-notes">
        <p>Generator failure on day 8 destroys eight reels of magic-hour exterior. Reshot under impossibly similar light on day 31 — a small miracle credited to gaffer J. Sallows.</p>
        <div class="tl4-director">"Day 31 was a gift. We do not deserve day 31." — H.V., daily journal</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">IV</div>
        <div class="tl4-num-lbl">Post</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Post-production</strong>
          Six months of <em>cutting silence</em>.
        </div>
        <div class="tl4-slate">MAY 2025 — OCT 2025 · 6 months</div>
      </div>
      <div class="tl4-notes">
        <p>First assembly runs 187 minutes. Final cut at 104. Sound designer L. Mbeki records 38 distinct varieties of wind on a custom rig.</p>
        <div class="tl4-director">"You don't edit toward a runtime. You edit toward a heartbeat." — Editor Sofia Larsen</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">V</div>
        <div class="tl4-num-lbl">Score</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Scoring</strong>
          A composer who promises <em>almost no notes</em>.
        </div>
        <div class="tl4-slate">AUG 2025 — NOV 2025 · 4 months overlap</div>
      </div>
      <div class="tl4-notes">
        <p>Hildur Stefánsdóttir records with 14 strings and a single bass clarinet. Final score is 31 minutes against a 104-minute film. The silence is the score's instrument too.</p>
        <div class="tl4-director">"Most films use music to fill. We use it to make the silence audible." — H.S.</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">VI</div>
        <div class="tl4-num-lbl">Out</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Release</strong>
          A premiere in <em>October light</em>.
        </div>
        <div class="tl4-slate">11 OCT 2025 · London Film Festival</div>
      </div>
      <div class="tl4-notes">
        <p>World premiere at the BFI Southbank. Standing ovation: 9 minutes. Picked up by A24 for North American distribution within the week.</p>
        <div class="tl4-director">"For two hours, the audience was a fourth keeper at the lighthouse." — Variety review</div>
      </div>
    </article>
  </div>
</section>
```

**CSS:**
```css
.tl4-wrap {
  background: #1c0e08;
  color: #e8d8b8;
  font-family: 'Special Elite', ui-monospace, monospace;
  padding: 2.5rem 2rem 4rem;
}
.tl4-head {
  margin-bottom: 2.5rem;
  text-align: center;
}
.tl4-overline {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: #d4a574;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.tl4-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  color: #f0dfb8;
  margin: 0;
}
.tl4-title strong {
  font-style: normal;
  font-weight: 900;
  display: block;
  color: #c4391f;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #f0dfb8;
}
.tl4-credits {
  font-size: 10px;
  color: #a08770;
  margin-top: 1rem;
  letter-spacing: 0.15em;
}
.tl4-reel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: #0d0604;
  border-top: 22px solid #2a1810;
  border-bottom: 22px solid #2a1810;
  box-shadow:
    inset 0 26px 50px rgba(0,0,0,0.6),
    0 24px 60px rgba(0,0,0,0.8);
}
.tl4-reel::before, .tl4-reel::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  background-image: radial-gradient(circle at 14px center, #f0dfb8 0 5px, transparent 6px);
  background-size: 28px 22px;
  background-repeat: repeat-x;
}
.tl4-reel::before { top: -22px; }
.tl4-reel::after { bottom: -22px; }
.tl4-frame {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  border-bottom: 1px solid #2a1810;
  min-height: 180px;
  position: relative;
  transition: background 0.4s;
  cursor: pointer;
}
.tl4-frame:last-child { border-bottom: none; }
.tl4-frame:hover { background: rgba(196,57,31,0.08); }
.tl4-num {
  border-right: 1px solid #2a1810;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0;
  background: #0a0402;
  color: #d4a574;
}
.tl4-n {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: #f0dfb8;
}
.tl4-num-lbl {
  font-size: 9px;
  letter-spacing: 0.25em;
  margin-top: 0.75rem;
  text-transform: uppercase;
  color: #a08770;
  writing-mode: vertical-rl;
}
.tl4-still {
  border-right: 1px solid #2a1810;
  padding: 1.25rem;
  background: linear-gradient(135deg, #1a0c06, #0d0604);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tl4-scene {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #f0dfb8;
}
.tl4-phase {
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  color: #c4391f;
  font-size: 12px;
  display: block;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.tl4-slate {
  font-size: 10px;
  color: #a08770;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-top: 1px dashed #5a4030;
  padding-top: 0.5rem;
}
.tl4-notes {
  padding: 1.25rem;
  font-size: 11.5px;
  line-height: 1.7;
  color: #c4b090;
}
.tl4-notes p { margin: 0 0 0.5rem; }
.tl4-director {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: #d4a574;
  border-left: 2px solid #c4391f;
  padding-left: 0.75rem;
  margin-top: 0.75rem;
}
@media (max-width: 720px) {
  .tl4-frame { grid-template-columns: 50px 1fr; }
  .tl4-notes { grid-column: 1 / -1; border-top: 1px solid #2a1810; }
}
```

### 05. Mission Control Timeline

**Type:** Pure CSS
**Description:** Space-program terminal aesthetic with T-minus countdown, telemetry rows, status pills (GO, HOLD, CRIT) and per-event gauge bars driven by --g custom properties. CRT scanlines and phosphor glow give a Cape Canaveral readout feel. Built for launch logs, deploy timelines, and ops postmortems.

**HTML:**
```html
<section class="tl5-wrap">
  <header class="tl5-head">
    <div>
      <h2 class="tl5-title">HALCYON-7<br><span class="tl5-sub">::Lunar South Pole Insertion</span></h2>
    </div>
    <div class="tl5-telemetry">
      <div class="tl5-row"><span>VEHICLE</span><span>FALCON H · BLOCK 5</span></div>
      <div class="tl5-row"><span>PAYLOAD</span><span>HALCYON-7 LANDER</span></div>
      <div class="tl5-row"><span>PAD</span><span>KSC-39A</span></div>
      <div class="tl5-row"><span>WINDOW</span><span>04:12:00 UTC</span></div>
      <div class="tl5-row"><span>AZIMUTH</span><span>084.7°</span></div>
      <div class="tl5-row"><span>STATUS</span><span>NOMINAL</span></div>
    </div>
    <div class="tl5-countdown">
      <div class="tl5-cd-label">T-MINUS</div>
      <div class="tl5-clock">00:00:07<span class="tl5-blink">_</span></div>
    </div>
  </header>

  <div class="tl5-log">
    <div class="tl5-log-head">
      <span>T-Time</span>
      <span>Stat</span>
      <span>Event</span>
      <span>Telem</span>
    </div>

    <div class="tl5-event">
      <span class="tl5-tmin">T−14h</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>WET DRESS REHEARSAL</strong>Tanking sequence completed. LOX/RP-1 propellant load confirmed at 100%. All vent valves cycled.</span>
      <span class="tl5-gauge">100%<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−02h</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>RANGE GREEN</strong>Eastern Range clear. Air traffic and maritime traffic confirmed outside exclusion zone. Wx 76% favorable.</span>
      <span class="tl5-gauge">76%<span class="tl5-bar" style="--g: 76%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−45m</span>
      <span class="tl5-stat tl5-hold">HOLD</span>
      <span class="tl5-msg"><strong>TANKING HOLD · LH2</strong>Upper-stage LH2 fill pressure 2.3 PSI above nominal. Bleed valve cycling. Recovery in progress.</span>
      <span class="tl5-gauge">HOLD<span class="tl5-bar tl5-bar-hold" style="--g: 38%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−42m</span>
      <span class="tl5-stat tl5-go">RESUME</span>
      <span class="tl5-msg"><strong>HOLD RELEASED</strong>LH2 fill pressure nominal at 14.8 PSI. Count resumed. Loss-of-window risk: low.</span>
      <span class="tl5-gauge">98%<span class="tl5-bar" style="--g: 98%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−10m</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>TERMINAL COUNT</strong>FTS armed. APU spin-up complete. Launch director polls all stations: GO for launch.</span>
      <span class="tl5-gauge">99%<span class="tl5-bar" style="--g: 99%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+00:00</span>
      <span class="tl5-stat tl5-go">LIFT</span>
      <span class="tl5-msg"><strong>IGNITION &amp; LIFTOFF</strong>27 Merlin engines at 100% throttle. Tower cleared at T+7. Pitch program initiated at T+9.</span>
      <span class="tl5-gauge">7.6M LBF<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+01:08</span>
      <span class="tl5-stat tl5-nom">NOM</span>
      <span class="tl5-msg"><strong>MAX-Q</strong>Vehicle passes maximum dynamic pressure at 11.2 km altitude. Throttle-down complete, throttling back up.</span>
      <span class="tl5-gauge">Q=33<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+02:42</span>
      <span class="tl5-stat tl5-go">SEP</span>
      <span class="tl5-msg"><strong>BECO &amp; STAGE SEP</strong>Boost engine cutoff. Side cores separate cleanly. Upper stage MVac ignition confirmed.</span>
      <span class="tl5-gauge">+147km<span class="tl5-bar" style="--g: 84%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+08:34</span>
      <span class="tl5-stat tl5-crit">CRIT</span>
      <span class="tl5-msg"><strong>UPPER STAGE ANOMALY</strong>Telemetry dropout on FCC-2. Backup channel active. Crew safe; redundancy nominal but logged for review.</span>
      <span class="tl5-gauge">REDX<span class="tl5-bar tl5-bar-crit" style="--g: 65%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+12:18</span>
      <span class="tl5-stat tl5-go">ORB</span>
      <span class="tl5-msg"><strong>ORBITAL INSERTION</strong>Parking orbit confirmed: 185 × 192 km @ 28.5°. TLI burn scheduled for T+02:14:00.</span>
      <span class="tl5-gauge">ORBIT✓<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
  </div>

  <div class="tl5-status-bar">
    <div class="tl5-item">ALT<span class="tl5-v">187km</span></div>
    <div class="tl5-item">VEL<span class="tl5-v">7.79km/s</span></div>
    <div class="tl5-item">DOWNRANGE<span class="tl5-v">2,140km</span></div>
    <div class="tl5-item">ΔV LEFT<span class="tl5-v">3,148m/s</span></div>
    <div class="tl5-item">SIGNAL<span class="tl5-v">−104dBm</span></div>
    <div class="tl5-item">CREW<span class="tl5-v">N/A</span></div>
  </div>
</section>
```

**CSS:**
```css
.tl5-wrap {
  background: #000;
  color: #00ff88;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.tl5-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,255,136,0.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,136,0.02) 2px 3px);
  pointer-events: none;
  z-index: 1;
}
.tl5-wrap > * { position: relative; z-index: 2; }
.tl5-head {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  border-bottom: 1px solid #006633;
  padding-bottom: 1.25rem;
}
.tl5-title {
  font-family: 'Major Mono Display', 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: #00ff88;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0,255,136,0.5);
  letter-spacing: -0.02em;
  margin: 0;
}
.tl5-sub {
  display: block;
  font-size: 0.5em;
  color: #ffaa00;
  margin-top: 0.5rem;
  text-shadow: 0 0 8px rgba(255,170,0,0.5);
}
.tl5-telemetry {
  font-size: 10.5px;
  line-height: 1.7;
  color: #00cc6a;
}
.tl5-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #003322;
  padding: 2px 0;
}
.tl5-row span:last-child { color: #00ff88; }
.tl5-countdown { text-align: right; }
.tl5-cd-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #ffaa00;
}
.tl5-clock {
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 3rem;
  line-height: 1;
  color: #ff3355;
  text-shadow: 0 0 14px rgba(255,51,85,0.7);
  margin-top: 0.25rem;
}
.tl5-blink { animation: tl5-blink 1s steps(2) infinite; }
@keyframes tl5-blink { 50% { opacity: 0; } }
.tl5-log {
  border: 1px solid #006633;
  background: rgba(0,20,12,0.6);
}
.tl5-log-head {
  display: grid;
  grid-template-columns: 90px 60px 1fr 80px;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: #003322;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #00cc6a;
  border-bottom: 1px solid #006633;
}
.tl5-event {
  display: grid;
  grid-template-columns: 90px 60px 1fr 80px;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px dashed #003322;
  align-items: center;
  transition: background 0.2s;
  cursor: pointer;
}
.tl5-event:hover { background: rgba(0,255,136,0.06); }
.tl5-tmin { font-size: 13px; color: #ffaa00; font-weight: 700; }
.tl5-stat {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-align: center;
  padding: 2px 6px;
  border: 1px solid;
}
.tl5-stat.tl5-go { color: #00ff88; border-color: #00ff88; }
.tl5-stat.tl5-hold { color: #ffaa00; border-color: #ffaa00; }
.tl5-stat.tl5-nom { color: #00cc6a; border-color: #00cc6a; }
.tl5-stat.tl5-crit {
  color: #ff3355;
  border-color: #ff3355;
  animation: tl5-blink 0.8s infinite;
}
.tl5-msg { font-size: 12px; color: #d4ffe8; line-height: 1.4; }
.tl5-msg strong { color: #00ff88; display: inline-block; margin-right: 0.5rem; }
.tl5-gauge {
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: #00cc6a;
  text-align: right;
}
.tl5-bar {
  display: block;
  height: 4px;
  margin-top: 2px;
  background: #003322;
  position: relative;
}
.tl5-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--g, 50%);
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
}
.tl5-bar-hold::after { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; }
.tl5-bar-crit::after { background: #ff3355; box-shadow: 0 0 6px #ff3355; }
.tl5-status-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #006633;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tl5-item {
  padding: 0.5rem;
  border: 1px solid #006633;
  text-align: center;
}
.tl5-item .tl5-v {
  display: block;
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  color: #00ff88;
  margin-top: 2px;
  text-shadow: 0 0 6px rgba(0,255,136,0.5);
}
@media (max-width: 720px) {
  .tl5-head, .tl5-log-head, .tl5-event { grid-template-columns: 1fr; gap: 0.5rem; }
  .tl5-status-bar { grid-template-columns: repeat(3, 1fr); }
  .tl5-countdown { text-align: left; }
}
```

### 06. Fermentation Calendar

**Type:** Pure CSS
**Description:** Hand-drawn 21-day grid where each day is a glass jar SVG with rising bubble animations and an activity bar. Soft EB Garamond + Caveat typography on cream paper. Peak days are highlighted in terracotta. Built for time-lapse projects, recipe diaries, and any patient process measured by days.

**HTML:**
```html
<section class="tl6-wrap">
  <header class="tl6-head">
    <h2 class="tl6-title">Sourdough <span class="tl6-swash">Starter</span><br>A 21-day Diary</h2>
    <div class="tl6-recipe">
      <h4 class="tl6-recipe-head">before you begin —</h4>
      <p>You need almost nothing. A glass jar, a wooden spoon, room around 22°C, and the patience of someone who has never been in a hurry.</p>
      <p class="tl6-ing">— rye flour, room-temp water, a kitchen with a window</p>
    </div>
  </header>

  <div class="tl6-grid">
    <div class="tl6-day-label">mon</div>
    <div class="tl6-day-label">tue</div>
    <div class="tl6-day-label">wed</div>
    <div class="tl6-day-label">thu</div>
    <div class="tl6-day-label">fri</div>
    <div class="tl6-day-label">sat</div>
    <div class="tl6-day-label">sun</div>

    <div class="tl6-day">
      <div class="tl6-num">1</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="38" width="20" height="8" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">flour + water, mixed</div>
      <div class="tl6-act" style="--act: 10%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">2</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="36" width="20" height="10" fill="#d4b890"/>
          <circle cx="16" cy="42" r="1" class="tl6-bubble" style="animation-delay: 0s"/>
        </svg>
      </div>
      <div class="tl6-stage">quiet still</div>
      <div class="tl6-act" style="--act: 15%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">3</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="32" width="20" height="14" fill="#d4b890"/>
          <circle cx="14" cy="40" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="22" cy="38" r="1" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">first bubbles</div>
      <div class="tl6-act" style="--act: 35%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">4</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="28" width="20" height="18" fill="#d4b890"/>
          <circle cx="14" cy="38" r="1.5" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="20" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.7s"/>
          <circle cx="26" cy="40" r="1.5" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">smells sour</div>
      <div class="tl6-act" style="--act: 55%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">5</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="24" width="20" height="22" fill="#d4b890"/>
          <circle cx="13" cy="36" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="20" cy="32" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
          <circle cx="27" cy="38" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">false rise</div>
      <div class="tl6-act" style="--act: 60%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">6</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="30" width="20" height="16" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">it falls. don't worry.</div>
      <div class="tl6-act" style="--act: 30%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">7</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="26" width="20" height="20" fill="#d4b890"/>
          <circle cx="14" cy="36" r="1.5" class="tl6-bubble" style="animation-delay: 0.3s"/>
          <circle cx="24" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.8s"/>
        </svg>
      </div>
      <div class="tl6-stage">second wind</div>
      <div class="tl6-act" style="--act: 50%"></div>
    </div>

    <div class="tl6-day">
      <div class="tl6-num">8</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
          <circle cx="13" cy="34" r="1" class="tl6-bubble"/>
          <circle cx="21" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="36" r="1" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">tangier now</div>
      <div class="tl6-act" style="--act: 65%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">9</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="20" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
          <circle cx="26" cy="34" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">doubling</div>
      <div class="tl6-act" style="--act: 78%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">10</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="14" width="20" height="32" fill="#d4b890"/>
          <circle cx="13" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0s"/>
          <circle cx="20" cy="26" r="1" class="tl6-bubble" style="animation-delay: 0.4s"/>
          <circle cx="27" cy="32" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
          <circle cx="16" cy="22" r="1" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">first peak ✦</div>
      <div class="tl6-act" style="--act: 90%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">11</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
          <circle cx="14" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.3s"/>
          <circle cx="24" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
        </svg>
      </div>
      <div class="tl6-stage">discard half</div>
      <div class="tl6-act" style="--act: 50%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">12</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="20" width="20" height="26" fill="#d4b890"/>
          <circle cx="13" cy="32" r="1.5" class="tl6-bubble"/>
          <circle cx="22" cy="28" r="1" class="tl6-bubble" style="animation-delay: 0.5s"/>
        </svg>
      </div>
      <div class="tl6-stage">rebuilding</div>
      <div class="tl6-act" style="--act: 68%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">13</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="16" width="20" height="30" fill="#d4b890"/>
          <circle cx="14" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="22" cy="26" r="1.5" class="tl6-bubble" style="animation-delay: 0.7s"/>
          <circle cx="27" cy="32" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">predictable</div>
      <div class="tl6-act" style="--act: 82%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">14</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="12" width="20" height="34" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0s"/>
          <circle cx="20" cy="24" r="1" class="tl6-bubble" style="animation-delay: 0.4s"/>
          <circle cx="27" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
          <circle cx="17" cy="20" r="1" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">bake-ready ✦</div>
      <div class="tl6-act" style="--act: 95%"></div>
    </div>

    <div class="tl6-day">
      <div class="tl6-num">15</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="24" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
        </svg>
      </div>
      <div class="tl6-stage">first loaf</div>
      <div class="tl6-act" style="--act: 75%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">16</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="20" width="20" height="26" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">rest</div>
      <div class="tl6-act" style="--act: 40%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">17</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="16" width="20" height="30" fill="#d4b890"/>
          <circle cx="14" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="22" cy="26" r="1.5" class="tl6-bubble" style="animation-delay: 0.7s"/>
        </svg>
      </div>
      <div class="tl6-stage">name it</div>
      <div class="tl6-act" style="--act: 82%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">18</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="14" width="20" height="32" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="21" cy="24" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.9s"/>
        </svg>
      </div>
      <div class="tl6-stage">share with neighbor</div>
      <div class="tl6-act" style="--act: 88%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">19</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1.5" class="tl6-bubble"/>
        </svg>
      </div>
      <div class="tl6-stage">to the fridge</div>
      <div class="tl6-act" style="--act: 25%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">20</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">sleeping</div>
      <div class="tl6-act" style="--act: 12%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">21</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="12" width="20" height="34" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1.5" class="tl6-bubble"/>
          <circle cx="20" cy="24" r="1" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">it has a name now ✦</div>
      <div class="tl6-act" style="--act: 92%"></div>
    </div>
  </div>

  <div class="tl6-tasting">
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 3 — first acid</h5>
      <div class="tl6-note-day">tasting note</div>
      Sharp, almost like green apple peel. Bubbles smaller than a poppy seed. You will think it has failed. It has not.
    </div>
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 10 — peak one</h5>
      <div class="tl6-note-day">tasting note</div>
      Yogurt and warm wheat. Doubles in four hours. The smell will rearrange your kitchen — in a good way.
    </div>
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 21 — the bread</h5>
      <div class="tl6-note-day">tasting note</div>
      Crust like old porcelain, crumb the color of evening light. A faint sweetness underneath the sour. Now you have a friend for life.
    </div>
  </div>
</section>
```

**CSS:**
```css
.tl6-wrap {
  background: #f5ecd9;
  color: #3a2a1a;
  font-family: Georgia, serif;
  padding: 2.5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
}
.tl6-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184, 92, 56, 0.04) 0 80px, transparent 80px),
    radial-gradient(circle at 80% 70%, rgba(106, 130, 90, 0.06) 0 100px, transparent 100px),
    radial-gradient(circle at 50% 50%, rgba(146, 89, 130, 0.03) 0 60px, transparent 60px);
  pointer-events: none;
}
.tl6-wrap > * { position: relative; }
.tl6-head {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: end;
}
.tl6-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 0.95;
  color: #3a2a1a;
  margin: 0;
}
.tl6-swash {
  font-family: Georgia, cursive;
  color: #b85c38;
  font-weight: 700;
  font-style: normal;
  display: block;
  font-size: 1.2em;
  transform: rotate(-2deg) translateX(20px);
}
.tl6-recipe {
  background: #fff8e8;
  border: 1px solid #c4ab85;
  padding: 1rem;
  transform: rotate(1deg);
  box-shadow: 4px 4px 0 rgba(58,42,26,0.1);
  position: relative;
}
.tl6-recipe::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 60px; height: 16px;
  background: rgba(184, 92, 56, 0.3);
  transform: translateX(-50%) rotate(-3deg);
}
.tl6-recipe-head {
  font-family: cursive;
  font-size: 1.35rem;
  color: #b85c38;
  margin: 0 0 0.5rem;
  font-weight: 700;
}
.tl6-recipe p {
  font-size: 13px;
  line-height: 1.5;
  color: #5a3e2a;
  margin: 0 0 0.5rem;
}
.tl6-ing {
  font-family: cursive;
  font-size: 1rem !important;
  color: #6a4a3a !important;
}
.tl6-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
}
.tl6-day-label {
  font-family: cursive;
  font-size: 1.15rem;
  color: #b85c38;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1.5px dashed #c4ab85;
}
.tl6-day {
  aspect-ratio: 1;
  background: #fff8e8;
  border: 1.5px solid #c4ab85;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.tl6-day:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 4px 6px 0 rgba(58,42,26,0.15);
  z-index: 3;
}
.tl6-num {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #6a4a3a;
}
.tl6-stage {
  font-family: cursive;
  font-size: 0.9rem;
  line-height: 1.1;
  color: #3a2a1a;
  margin-top: auto;
}
.tl6-jar {
  width: 44px;
  height: 54px;
  margin: 4px auto;
}
.tl6-jar svg { width: 100%; height: 100%; }
.tl6-bubble {
  fill: rgba(255,255,255,0.6);
  animation: tl6-rise 3s ease-in infinite;
}
@keyframes tl6-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tl6-bubble { animation: none; opacity: 0.6; }
}
.tl6-peak { background: #ffe9c4; border-color: #b85c38; }
.tl6-peak .tl6-stage { color: #b85c38; font-weight: 700; }
.tl6-act {
  height: 4px;
  background: rgba(196,171,133,0.3);
  margin-top: 4px;
  position: relative;
}
.tl6-act::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--act, 0%);
  background: linear-gradient(90deg, #6a825a, #b85c38);
}
.tl6-tasting {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid #c4ab85;
}
.tl6-note {
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: #5a3e2a;
  padding-left: 1rem;
  border-left: 2px solid #b85c38;
}
.tl6-note-head {
  font-family: cursive;
  font-style: normal;
  font-size: 1.25rem;
  color: #b85c38;
  margin: 0 0 0.25rem;
  font-weight: 700;
}
.tl6-note-day {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6a4a3a;
  margin-bottom: 0.5rem;
}
@media (max-width: 720px) {
  .tl6-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl6-grid { grid-template-columns: repeat(4, 1fr); }
  .tl6-tasting { grid-template-columns: 1fr; }
}
```

### 07. Thread Timeline

**Type:** Pure CSS
**Description:** Conversational thread format where each moment reads like a message. Tight left-aligned thread line with chat-bubble entries and system-event dividers. Perfect for healthcare patient histories, support ticket logs, or onboarding checklists that tell a human story step by step.

**HTML:**
```html
<div class="tl7-wrap">
  <div class="tl7-thread"></div>

  <div class="tl7-entry tl7-system">
    <div class="tl7-avatar" aria-hidden="true">●</div>
    <div class="tl7-bubble">
      <p class="tl7-msg">Patient record opened · Case #PT-20419 · Admitted 08 Jan 2025</p>
    </div>
  </div>

  <div class="tl7-entry">
    <div class="tl7-avatar" aria-hidden="true">DR</div>
    <div class="tl7-bubble">
      <p class="tl7-who">Dr. Ananya Rao — Attending</p>
      <p class="tl7-msg">Initial assessment complete. Patient presents with persistent fatigue and elevated markers. Ordering full metabolic panel and chest imaging. Suspect autoimmune involvement — referring to rheumatology.</p>
      <span class="tl7-ts">08 Jan 2025 · 09:14</span>
    </div>
  </div>

  <div class="tl7-entry">
    <div class="tl7-avatar" aria-hidden="true">LB</div>
    <div class="tl7-bubble">
      <p class="tl7-who">Lab Results — Pathology</p>
      <p class="tl7-msg">ANA titre: 1:320 (positive). Anti-dsDNA elevated at 48 IU/mL. ESR 72 mm/hr. Results forwarded to rheumatology and attending physician.</p>
      <span class="tl7-ts">10 Jan 2025 · 14:32</span>
    </div>
  </div>

  <div class="tl7-entry">
    <div class="tl7-avatar" aria-hidden="true">RH</div>
    <div class="tl7-bubble">
      <p class="tl7-who">Dr. Marcos Lima — Rheumatology</p>
      <p class="tl7-msg">Based on clinical picture and serology, diagnosis consistent with SLE. Initiating hydroxychloroquine 400mg daily. Scheduling follow-up in 6 weeks. Patient counselled on sun avoidance and flare recognition.</p>
      <span class="tl7-ts">15 Jan 2025 · 11:05</span>
    </div>
  </div>

  <div class="tl7-entry tl7-system">
    <div class="tl7-avatar tl7-avatar-ok" aria-hidden="true">✓</div>
    <div class="tl7-bubble tl7-bubble-ok">
      <p class="tl7-msg">Medication dispensed · Pharmacy confirmed · Insurance pre-auth approved</p>
    </div>
  </div>

  <div class="tl7-entry">
    <div class="tl7-avatar" aria-hidden="true">NS</div>
    <div class="tl7-bubble">
      <p class="tl7-who">Nurse Yuki Tanaka — Follow-up</p>
      <p class="tl7-msg">6-week check-in completed. Patient reports reduced fatigue, joint pain improved significantly. No adverse drug reactions noted. Labs trending in right direction — ESR down to 41 mm/hr.</p>
      <span class="tl7-ts">26 Feb 2025 · 10:20</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl7-wrap {
  --tl7-bg: #0c1117;
  --tl7-a:  #00e5c8;
  background: var(--tl7-bg);
  padding: 2.5rem 1.75rem;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl7-thread {
  position: absolute;
  left: calc(1.75rem + 19px);
  top: 2.5rem;
  bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--tl7-a), rgba(0,229,200,0.05));
}
.tl7-entry {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  position: relative;
}
.tl7-entry:last-child { margin-bottom: 0; }
.tl7-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--tl7-a);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(0,229,200,0.3);
  background: rgba(0,229,200,0.08);
  box-shadow: 0 0 0 3px var(--tl7-bg);
}
.tl7-bubble {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px 16px 16px 16px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.tl7-bubble:hover {
  background: rgba(0,229,200,0.05);
  border-color: rgba(0,229,200,0.2);
}
.tl7-who {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--tl7-a);
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}
.tl7-msg {
  font-size: 13.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}
.tl7-ts {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-top: 0.5rem;
}
.tl7-system .tl7-bubble {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,0.08);
  border-radius: 8px;
  text-align: center;
}
.tl7-system .tl7-msg {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tl7-avatar-ok {
  background: rgba(0,229,200,0.12);
  border-color: rgba(0,229,200,0.3);
  color: var(--tl7-a);
}
.tl7-bubble-ok {
  border-color: rgba(0,229,200,0.2) !important;
  background: rgba(0,229,200,0.04) !important;
}
@media (max-width: 480px) {
  .tl7-wrap { padding: 1.5rem 1rem; }
  .tl7-thread { left: calc(1rem + 19px); }
}
```

### 08. Accordion Timeline

**Type:** Pure CSS + tiny JS
**Description:** Collapsible year-rows that expand to reveal structured detail panels. Built for legislation history, contract amendments, compliance records — anywhere dense information must be scannable before it is readable. The accordion uses a small onclick handler so only one row stays open at a time.

**HTML:**
```html
<div class="tl8-wrap">
  <div class="tl8-row tl8-open">
    <div class="tl8-head" onclick="toggleTl2(this)">
      <span class="tl8-year">1998</span>
      <span class="tl8-summary">Data Protection Act <span class="tl8-badge tl8-badge-en">Enacted</span></span>
      <span class="tl8-arrow" aria-hidden="true">▾</span>
    </div>
    <div class="tl8-body">
      <div class="tl8-body-inner">
        <div class="tl8-detail">
          <p class="tl8-detail-label">Jurisdiction</p>
          <p class="tl8-detail-text">United Kingdom. Replaced the 1984 Act. Implemented the EC Data Protection Directive 95/46/EC into domestic law.</p>
        </div>
        <div class="tl8-detail">
          <p class="tl8-detail-label">Key Provisions</p>
          <p class="tl8-detail-text">Eight data protection principles governing fair processing, purpose limitation, data accuracy, and subject access rights.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="tl8-row">
    <div class="tl8-head" onclick="toggleTl2(this)">
      <span class="tl8-year">2002</span>
      <span class="tl8-summary">Privacy &amp; Electronic Comms <span class="tl8-badge tl8-badge-en">Enacted</span></span>
      <span class="tl8-arrow" aria-hidden="true">▾</span>
    </div>
    <div class="tl8-body">
      <div class="tl8-body-inner">
        <div class="tl8-detail">
          <p class="tl8-detail-label">Scope</p>
          <p class="tl8-detail-text">Regulated direct marketing, cookies, and electronic communications. First major regulation to address unsolicited email.</p>
        </div>
        <div class="tl8-detail">
          <p class="tl8-detail-label">Amendment (2011)</p>
          <p class="tl8-detail-text">Cookie consent requirements strengthened following EU pressure. Opt-in became mandatory for non-essential tracking.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="tl8-row">
    <div class="tl8-head" onclick="toggleTl2(this)">
      <span class="tl8-year">2018</span>
      <span class="tl8-summary">GDPR / DPA 2018 <span class="tl8-badge tl8-badge-en">Enacted</span></span>
      <span class="tl8-arrow" aria-hidden="true">▾</span>
    </div>
    <div class="tl8-body">
      <div class="tl8-body-inner">
        <div class="tl8-detail">
          <p class="tl8-detail-label">Scale</p>
          <p class="tl8-detail-text">EU-wide regulation with extraterritorial effect. Maximum fines of €20M or 4% of global annual turnover, whichever is higher.</p>
        </div>
        <div class="tl8-detail">
          <p class="tl8-detail-label">New Rights</p>
          <p class="tl8-detail-text">Right to erasure, data portability, and objection to automated decision-making formally enshrined for the first time.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="tl8-row">
    <div class="tl8-head" onclick="toggleTl2(this)">
      <span class="tl8-year">2022</span>
      <span class="tl8-summary">UK GDPR Post-Brexit <span class="tl8-badge tl8-badge-am">Amended</span></span>
      <span class="tl8-arrow" aria-hidden="true">▾</span>
    </div>
    <div class="tl8-body">
      <div class="tl8-body-inner">
        <div class="tl8-detail">
          <p class="tl8-detail-label">Divergence</p>
          <p class="tl8-detail-text">UK retained GDPR principles but began diverging from EU text. Government proposed reforms to reduce compliance burden for SMEs.</p>
        </div>
        <div class="tl8-detail">
          <p class="tl8-detail-label">Adequacy Decision</p>
          <p class="tl8-detail-text">EU granted UK adequacy status until 2025, permitting data flows. Subject to ongoing review as UK law evolves independently.</p>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl8-wrap {
  --tl8-bg: #faf7f2;
  --tl8-a:  #b5451b;
  --tl8-ink: #1a1209;
  background: var(--tl8-bg);
  padding: 2rem 1.5rem;
  max-width: 780px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  border-top: 2px solid var(--tl8-ink);
}
.tl8-row {
  border-bottom: 1px solid rgba(26,18,9,0.12);
}
.tl8-head {
  display: grid;
  grid-template-columns: 90px 1fr 28px;
  gap: 1.5rem;
  align-items: center;
  padding: 1.1rem 0;
  cursor: pointer;
  transition: padding 0.15s;
}
.tl8-head:hover {
  padding-left: 0.5rem;
}
.tl8-year {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tl8-ink);
}
.tl8-summary {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  color: var(--tl8-ink);
}
.tl8-arrow {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(26,18,9,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--tl8-ink);
  transition: transform 0.3s, background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.tl8-row.tl8-open .tl8-arrow {
  transform: rotate(180deg);
  background: var(--tl8-ink);
  color: var(--tl8-bg);
}
.tl8-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.tl8-row.tl8-open .tl8-body {
  max-height: 400px;
}
.tl8-body-inner {
  padding: 0 0 1.5rem 6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.tl8-detail {
  background: #fff;
  border: 1px solid rgba(26,18,9,0.1);
  padding: 0.9rem 1rem;
  border-radius: 2px;
}
.tl8-detail-label {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tl8-a);
  margin-bottom: 0.4rem;
}
.tl8-detail-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13.5px;
  color: rgba(26,18,9,0.65);
  line-height: 1.6;
}
.tl8-badge {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.tl8-badge-en {
  background: rgba(27,67,50,0.12);
  color: #1b4332;
}
.tl8-badge-am {
  background: rgba(181,69,27,0.1);
  color: var(--tl8-a);
}
@media (max-width: 600px) {
  .tl8-head { grid-template-columns: 70px 1fr 28px; gap: 0.75rem; }
  .tl8-body-inner { padding-left: 0; grid-template-columns: 1fr; }
}
```

**JS:**
```js
// Click any year-row header to toggle that row open. Only one row
// stays open at a time — clicking another collapses the previous one.
// Wired via inline onclick="toggleTl2(this)" in the HTML markup.
function toggleTl2(headEl) {
  const row = headEl.closest('.tl8-row');
  const isOpen = row.classList.contains('tl8-open');
  document.querySelectorAll('.tl8-row.tl8-open').forEach(r => r.classList.remove('tl8-open'));
  if (!isOpen) row.classList.add('tl8-open');
}
```

### 09. Cinematic Filmstrip

**Type:** CSS + drag scroll
**Description:** Horizontal film reel you drag to explore. Sprocket holes, warm amber type, and frame numbers give it a physical celluloid feel — ideal for film studies, festival histories, or any media company timeline that wants to read as cinema rather than spreadsheet.

**HTML:**
```html
<div class="tl9-stripwrap">
  <div class="tl9-sprockets" aria-hidden="true">
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
  </div>

  <div class="tl9-frames" id="tl9-frames">
    <div class="tl9-frame" data-n="F·001">
      <div class="tl9-year">1927</div>
      <h3 class="tl9-title">The Jazz Singer</h3>
      <p class="tl9-desc">The first feature-length film with synchronized dialogue. Warner Bros gambled on a dying studio — and changed cinema forever.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">Sound Era</span>
        <span class="tl9-chip">Warner Bros</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·002">
      <div class="tl9-year">1941</div>
      <h3 class="tl9-title">Citizen Kane</h3>
      <p class="tl9-desc">Welles' debut redefined visual storytelling. Deep focus, unconventional structure, and narrative fragmentation became a new grammar.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">RKO</span>
        <span class="tl9-chip">Welles</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·003">
      <div class="tl9-year">1960</div>
      <h3 class="tl9-title">La Dolce Vita</h3>
      <p class="tl9-desc">Fellini's freewheeling portrait of Roman high society. Coined a word, launched a visual culture, and bewildered critics for decades.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">Nouvelle Vague</span>
        <span class="tl9-chip">Fellini</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·004">
      <div class="tl9-year">1972</div>
      <h3 class="tl9-title">The Godfather</h3>
      <p class="tl9-desc">Coppola transforms pulp crime fiction into Shakespearean tragedy. The American New Wave at its most commercially ruthless.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">New Hollywood</span>
        <span class="tl9-chip">Paramount</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·005">
      <div class="tl9-year">1994</div>
      <h3 class="tl9-title">Pulp Fiction</h3>
      <p class="tl9-desc">Tarantino's fractured chronology, pop-culture saturation, and explosive dialogue reset independent cinema's ambitions globally.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">Indie</span>
        <span class="tl9-chip">Tarantino</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·006">
      <div class="tl9-year">2019</div>
      <h3 class="tl9-title">Parasite</h3>
      <p class="tl9-desc">Bong Joon-ho's genre-shifting class satire became the first non-English film to win the Academy Award for Best Picture.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">CJ ENM</span>
        <span class="tl9-chip">Palme d'Or</span>
      </div>
    </div>
  </div>

  <div class="tl9-sprockets" aria-hidden="true">
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
  </div>

  <p class="tl9-hint">↔ DRAG TO SCROLL ↔</p>
</div>
```

**CSS:**
```css
.tl9-stripwrap {
  --tl9-bg: #13111a;
  --tl9-a:  #f0c040;
  background: var(--tl9-bg);
  padding: 2rem 0 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}
.tl9-sprockets {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-top: 2px solid rgba(240,192,64,0.15);
  border-bottom: 2px solid rgba(240,192,64,0.15);
  gap: 2.5rem;
  overflow: hidden;
}
.tl9-hole {
  width: 12px;
  height: 18px;
  border-radius: 3px;
  border: 1.5px solid rgba(240,192,64,0.28);
  flex-shrink: 0;
}
.tl9-frames {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  border-top: 3px solid rgba(240,192,64,0.22);
  border-bottom: 3px solid rgba(240,192,64,0.22);
}
.tl9-frames::-webkit-scrollbar { display: none; }
.tl9-frame {
  flex-shrink: 0;
  width: 240px;
  border-right: 2px solid rgba(240,192,64,0.1);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: background 0.25s;
}
.tl9-frame:hover {
  background: rgba(240,192,64,0.04);
}
.tl9-frame::before {
  content: attr(data-n);
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(240,192,64,0.25);
}
.tl9-year {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--tl9-a);
  line-height: 1;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 30px rgba(240,192,64,0.3);
}
.tl9-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.tl9-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.tl9-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tl9-chip {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(240,192,64,0.25);
  border-radius: 3px;
  color: rgba(240,192,64,0.7);
}
.tl9-hint {
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(240,192,64,0.35);
  letter-spacing: 2px;
}
```

**JS:**
```js
// Drag-to-scroll the horizontal filmstrip. Mouse handlers wire
// up grab/release; touch handlers do the same for mobile. Wrapped
// in an IIFE so the element handle, state vars, and listeners stay
// scoped. Runs once per page load since the gallery dedupes
// identical js strings before emitting script tags.
(function() {
  const el = document.getElementById('tl9-frames');
  if (!el) return;
  let down = false, sx = 0, sl = 0;
  el.addEventListener('mousedown', e => {
    down = true; sx = e.pageX - el.offsetLeft; sl = el.scrollLeft;
    el.style.cursor = 'grabbing'; el.style.userSelect = 'none';
  });
  document.addEventListener('mouseup', () => { down = false; el.style.cursor = 'grab'; });
  el.addEventListener('mousemove', e => {
    if (!down) return; e.preventDefault();
    el.scrollLeft = sl - (e.pageX - el.offsetLeft - sx) * 1.3;
  });
  let tx = 0;
  el.addEventListener('touchstart', e => { tx = e.touches[0].pageX; sl = el.scrollLeft; }, { passive: true });
  el.addEventListener('touchmove', e => { el.scrollLeft = sl - (e.touches[0].pageX - tx); }, { passive: true });
})();
```

### 10. Nature Trail

**Type:** Pure CSS
**Description:** Stepping stones along a dashed path. Each milestone is anchored by an icon gem, a year marker, and impact tags. Earthy greens, alternating left/right layout, and an organic visual rhythm — made for environmental reports, ESG storytelling, and brand sustainability journeys.

**HTML:**
```html
<div class="tl10-wrap">
  <div class="tl10-path" aria-hidden="true"></div>

  <div class="tl10-stone">
    <div class="tl10-text">
      <p class="tl10-phase">Phase 01</p>
      <h3 class="tl10-name">Baseline Assessment</h3>
      <p class="tl10-desc">Comprehensive scope 1, 2, and 3 emissions audit completed across all 14 operational sites. The first honest look at our footprint — and it was confronting.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">Carbon Audit</span>
        <span class="tl10-tag">14 Sites</span>
      </div>
    </div>
    <div class="tl10-center">
      <div class="tl10-gem">◉</div>
      <span class="tl10-year">2020</span>
    </div>
    <div class="tl10-img">🌍</div>
  </div>

  <div class="tl10-stone tl10-flip">
    <div class="tl10-img">⚡</div>
    <div class="tl10-center">
      <div class="tl10-gem">⚡</div>
      <span class="tl10-year">2021</span>
    </div>
    <div class="tl10-text">
      <p class="tl10-phase">Phase 02</p>
      <h3 class="tl10-name">Renewable Transition</h3>
      <p class="tl10-desc">Switched 80% of grid electricity to wind and solar PPAs. On-site solar installed at 6 warehouses. Energy costs fell 22% in year one.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">−42% Scope 2</span>
        <span class="tl10-tag">PPA Contracts</span>
      </div>
    </div>
  </div>

  <div class="tl10-stone">
    <div class="tl10-text">
      <p class="tl10-phase">Phase 03</p>
      <h3 class="tl10-name">Supply Chain Engagement</h3>
      <p class="tl10-desc">Rolled out supplier sustainability scorecard to 340 vendors. 82% have committed to science-based targets. Phased out three high-impact suppliers.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">340 Vendors</span>
        <span class="tl10-tag">SBTi Aligned</span>
      </div>
    </div>
    <div class="tl10-center">
      <div class="tl10-gem">◈</div>
      <span class="tl10-year">2023</span>
    </div>
    <div class="tl10-img">🌱</div>
  </div>

  <div class="tl10-stone tl10-flip tl10-last">
    <div class="tl10-img">🎯</div>
    <div class="tl10-center">
      <div class="tl10-gem">★</div>
      <span class="tl10-year">2025</span>
    </div>
    <div class="tl10-text">
      <p class="tl10-phase">Phase 04</p>
      <h3 class="tl10-name">Net Zero Certified</h3>
      <p class="tl10-desc">Achieved verified net zero status across scopes 1 and 2. Scope 3 on target for 2028. B Corp certification under review. The hardest work is still ahead.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">Net Zero S1+S2</span>
        <span class="tl10-tag">B Corp Pending</span>
        <span class="tl10-tag">2028 Target</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl10-wrap {
  --tl10-bg: #f2f4f0;
  --tl10-a:  #1b4332;
  --tl10-ink: #0d1f16;
  background: var(--tl10-bg);
  padding: 2.5rem 1.5rem;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl10-path {
  position: absolute;
  left: 50%;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(27,67,50,0.3) 0 8px,
    transparent 8px 16px
  );
  transform: translateX(-50%);
}
.tl10-stone {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
}
.tl10-last { margin-bottom: 0; }
.tl10-flip .tl10-text  { grid-column: 3; }
.tl10-flip .tl10-img   { grid-column: 1; }
.tl10-text { padding: 0 1.5rem; }
.tl10-flip .tl10-text { text-align: left; }
.tl10-stone:not(.tl10-flip) .tl10-text { text-align: right; }
.tl10-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  grid-column: 2;
}
.tl10-gem {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(27,67,50,0.25);
  box-shadow: 0 4px 16px rgba(27,67,50,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--tl10-a);
  transition: transform 0.3s, box-shadow 0.3s;
}
.tl10-stone:hover .tl10-gem {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(27,67,50,0.2);
}
.tl10-year {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--tl10-a);
}
.tl10-phase {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(27,67,50,0.45);
  margin-bottom: 0.35rem;
}
.tl10-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  color: var(--tl10-ink);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.tl10-desc {
  font-size: 13.5px;
  color: rgba(13,31,22,0.55);
  line-height: 1.7;
  margin: 0 0 0.7rem;
}
.tl10-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tl10-stone:not(.tl10-flip) .tl10-tags { justify-content: flex-end; }
.tl10-tag {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  padding: 0.2rem 0.6rem;
  background: rgba(27,67,50,0.08);
  border-radius: 99px;
  color: var(--tl10-a);
}
.tl10-img {
  aspect-ratio: 5 / 4;
  max-width: 220px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  box-shadow: 0 4px 20px rgba(27,67,50,0.12);
}
@media (max-width: 720px) {
  .tl10-path { left: 28px; }
  .tl10-stone, .tl10-flip {
    grid-template-columns: 56px 1fr;
    gap: 0.75rem;
    text-align: left;
  }
  .tl10-flip .tl10-text,
  .tl10-stone:not(.tl10-flip) .tl10-text { text-align: left; grid-column: 2; padding: 0; }
  .tl10-center { grid-column: 1; align-self: flex-start; }
  .tl10-img { display: none; }
  .tl10-stone:not(.tl10-flip) .tl10-tags { justify-content: flex-start; }
}
```

### 11. Terminal Log

**Type:** Pure CSS
**Description:** Terminal-style incident timeline. Each log line carries a timestamp, severity level, and event detail. Scanlines, mono fonts, and blinking critical alerts create genuine operational tension. Built for incident reports, security audits, deployment postmortems.

**HTML:**
```html
<div class="tl11-wrap">
  <div class="tl11-scanlines" aria-hidden="true"></div>

  <div class="tl11-term">
    <div class="tl11-topbar">
      <span class="tl11-dot tl11-r"></span>
      <span class="tl11-dot tl11-y"></span>
      <span class="tl11-dot tl11-g"></span>
      <span class="tl11-tlabel">incident-report-2025-03-14.log — Production / US-EAST-1</span>
    </div>

    <div class="tl11-body">
      <div class="tl11-sep">── INCIDENT INC-4471 · Severity P1 · Duration 4h 17m ──</div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:13:07</span>
        <span class="tl11-lvl tl11-warn">WARN</span>
        <span class="tl11-text">Latency spike detected on <strong>api-gateway-prod-3</strong>. P99: <span class="tl11-hl">1,840ms</span> (threshold 500ms). Auto-scaling triggered.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:19:44</span>
        <span class="tl11-lvl tl11-err">ERROR</span>
        <span class="tl11-text">DB connection pool exhausted on <strong>rds-primary-east</strong>. <span class="tl11-hl">4,200 queued</span>. New connections rejected.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:21:02</span>
        <span class="tl11-lvl tl11-crit">CRIT</span>
        <span class="tl11-text"><strong>ALERT FIRED:</strong> Error rate exceeded <span class="tl11-hl">18.7%</span>. PagerDuty escalated. Checkout flow <span class="tl11-hl">DEGRADED</span>.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:28:15</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">SRE <strong>@chen_wei</strong> acknowledged. War room opened in <strong>#inc-4471</strong>. Status page updated to "Investigating".</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:45:33</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">Root cause: <strong>unoptimised query</strong> in release <span class="tl11-hl">v4.12.1</span> causing full table scans. Rollback initiated.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 03:02:09</span>
        <span class="tl11-lvl tl11-warn">WARN</span>
        <span class="tl11-text">Rollback to <strong>v4.11.9</strong> complete. Queue depth: <span class="tl11-hl">812</span>. Error rate falling → <span class="tl11-hl">3.2%</span>.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 03:18:51</span>
        <span class="tl11-lvl tl11-ok">OK</span>
        <span class="tl11-text">All services nominal. Error rate <span class="tl11-hl">0.04%</span>. P99 <span class="tl11-hl">182ms</span>. Status: "Resolved".</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 06:30:00</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">Postmortem created. <strong>Action items:</strong> query review gate in CI, pool alerting at 60% capacity, blue/green for DB migrations.</span>
      </div>

      <div class="tl11-sep">── END OF INCIDENT · 3,847 users affected · $14,200 est. revenue loss ──</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl11-wrap {
  --tl11-bg:   #080810;
  --tl11-a:    #ff3860;
  background: var(--tl11-bg);
  padding: 2rem 1.5rem;
  position: relative;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  overflow: hidden;
}
.tl11-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.04) 0 1px,
    transparent 1px 3px
  );
}
.tl11-term {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(255,56,96,0.18);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.tl11-topbar {
  background: rgba(255,56,96,0.08);
  border-bottom: 1px solid rgba(255,56,96,0.18);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tl11-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.tl11-r { background: #ff5f57; }
.tl11-y { background: #febc2e; }
.tl11-g { background: #28c840; }
.tl11-tlabel {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-left: 0.65rem;
}
.tl11-body {
  padding: 1.25rem 1rem;
}
.tl11-sep {
  font-size: 10.5px;
  color: rgba(255,255,255,0.12);
  letter-spacing: 1.5px;
  padding: 0.4rem 0;
}
.tl11-line {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.tl11-line:last-of-type { border-bottom: 0; }
.tl11-ts {
  font-size: 10.5px;
  color: rgba(255,255,255,0.22);
  white-space: nowrap;
  flex-shrink: 0;
}
.tl11-lvl {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}
.tl11-info { background: rgba(30,120,255,0.18); color: #4da6ff; }
.tl11-warn { background: rgba(255,180,0,0.18);  color: #fbbf24; }
.tl11-err  { background: rgba(255,56,96,0.22);  color: var(--tl11-a); }
.tl11-ok   { background: rgba(40,200,64,0.18);  color: #4ade80; }
.tl11-crit {
  background: rgba(255,56,96,0.4);
  color: #fff;
  animation: tl11-blink 1s step-end infinite;
}
@keyframes tl11-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.tl11-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  flex: 1;
  word-break: break-word;
}
.tl11-text strong { color: #fff; font-weight: 600; }
.tl11-hl          { color: var(--tl11-a); }
@media (max-width: 600px) {
  .tl11-line { flex-direction: column; gap: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl11-crit { animation: none; }
}
```

### 12. Art Deco Steps

**Type:** Pure CSS
**Description:** Gallery-wall layout with geometric ornamentation, italic serif eras, and curated work tags. Indigo on cream with diamond decorations and serif grandeur — for museums, heritage brands, artist retrospectives, and any institution whose history should feel like a permanent collection.

**HTML:**
```html
<div class="tl12-wrap">
  <div class="tl12-ornament" aria-hidden="true">
    <div class="tl12-rule"></div>
    <div class="tl12-diamond"></div>
    <div class="tl12-label">A Retrospective</div>
    <div class="tl12-diamond"></div>
    <div class="tl12-rule"></div>
  </div>

  <div class="tl12-entry">
    <div class="tl12-inner">
      <div class="tl12-left">
        <div class="tl12-era">Early</div>
        <div class="tl12-span">1890 — 1910</div>
      </div>
      <div class="tl12-right">
        <h3 class="tl12-title">The Impressionist Foundation</h3>
        <p class="tl12-body">Rooted in the tradition of plein-air painting, the early works capture fleeting light and emotional atmosphere rather than documentary precision. Critics were hostile; collectors were entranced.</p>
        <div class="tl12-works">
          <span class="tl12-work">Haystacks at Dusk</span>
          <span class="tl12-work">The Seine in November</span>
          <span class="tl12-work">Portrait of Madeleine</span>
        </div>
      </div>
    </div>
  </div>

  <div class="tl12-entry">
    <div class="tl12-inner">
      <div class="tl12-left">
        <div class="tl12-era">Middle</div>
        <div class="tl12-span">1911 — 1935</div>
      </div>
      <div class="tl12-right">
        <h3 class="tl12-title">The Cubist Rupture</h3>
        <p class="tl12-body">Exposure to Picasso and Braque in Paris fractured the picture plane. The artist began dissecting familiar forms — faces, furniture, cityscapes — into interlocking geometric shards of simultaneous viewpoints.</p>
        <div class="tl12-works">
          <span class="tl12-work">Decomposition No. 7</span>
          <span class="tl12-work">Woman at the Table</span>
          <span class="tl12-work">Three Guitars</span>
        </div>
      </div>
    </div>
  </div>

  <div class="tl12-entry tl12-last">
    <div class="tl12-inner">
      <div class="tl12-left">
        <div class="tl12-era">Late</div>
        <div class="tl12-span">1936 — 1962</div>
      </div>
      <div class="tl12-right">
        <h3 class="tl12-title">Abstraction &amp; Silence</h3>
        <p class="tl12-body">The war years stripped away decoration. Large canvases of near-monochromatic fields emerged — radical reductions that anticipated Abstract Expressionism. The late works are the quietest and the most demanding.</p>
        <div class="tl12-works">
          <span class="tl12-work">Blue Field Study I</span>
          <span class="tl12-work">Nocturne for V.</span>
          <span class="tl12-work">The Last Interior</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl12-wrap {
  --tl12-bg:  #fff8f0;
  --tl12-a:   #2d3a8c;
  --tl12-ink: #0d0d20;
  background: var(--tl12-bg);
  padding: 2.5rem 1.5rem;
  max-width: 880px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl12-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.tl12-rule {
  flex: 1;
  height: 1px;
  background: rgba(45,58,140,0.22);
}
.tl12-diamond {
  width: 8px;
  height: 8px;
  background: var(--tl12-a);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.tl12-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(45,58,140,0.5);
  white-space: nowrap;
}
.tl12-entry {
  margin-bottom: 3rem;
}
.tl12-last { margin-bottom: 0; }
.tl12-inner {
  display: grid;
  grid-template-columns: 150px 1fr;
  border-left: 2px solid rgba(45,58,140,0.18);
}
.tl12-left {
  padding: 0 1.75rem 0 0;
  text-align: right;
  position: relative;
}
.tl12-left::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tl12-bg);
  border: 2px solid var(--tl12-a);
}
.tl12-era {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  font-style: italic;
  color: var(--tl12-a);
  line-height: 1;
}
.tl12-span {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: rgba(13,13,32,0.35);
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}
.tl12-right {
  padding: 0 0 0 1.75rem;
}
.tl12-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  color: var(--tl12-ink);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.tl12-body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: rgba(13,13,32,0.6);
  line-height: 1.75;
  margin: 0 0 0.9rem;
}
.tl12-works {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tl12-work {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12.5px;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(45,58,140,0.22);
  border-radius: 2px;
  color: var(--tl12-a);
  background: rgba(45,58,140,0.04);
  transition: background 0.2s, color 0.2s;
  cursor: default;
}
.tl12-work:hover {
  background: var(--tl12-a);
  color: var(--tl12-bg);
}
@media (max-width: 600px) {
  .tl12-inner { grid-template-columns: 1fr; border-left: 0; }
  .tl12-left {
    padding: 0 0 1rem;
    text-align: left;
    border-left: 2px solid rgba(45,58,140,0.18);
    padding-left: 1rem;
  }
  .tl12-left::after { left: -7px; right: auto; }
  .tl12-right { padding-left: 1rem; border-left: 2px solid rgba(45,58,140,0.18); }
}
```

### 13. Vertical Centered

**Type:** Pure CSS
**Description:** Classic alternating layout with a glowing red center spine and editorial dot markers. Items zigzag left and right along a vertical line — the most recognizable timeline pattern, refined with bold serif type and a moody dark canvas.

**HTML:**
```html
<div class="tl13-wrap">
  <div class="tl13-line" aria-hidden="true"></div>

  <div class="tl13-item">
    <div class="tl13-content">
      <p class="tl13-year">2018</p>
      <h3 class="tl13-heading">First Contact</h3>
      <p class="tl13-body">A small prototype quietly changed everything. What started as a weekend project became the foundation for something much larger.</p>
      <span class="tl13-tag">Origin</span>
    </div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-empty"></div>
  </div>

  <div class="tl13-item">
    <div class="tl13-empty"></div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-content">
      <p class="tl13-year">2019</p>
      <h3 class="tl13-heading">First Funding Round</h3>
      <p class="tl13-body">Series A closed at $4.2M. The team grew from 3 to 18 people over the following six months, fueling rapid product development.</p>
      <span class="tl13-tag">Growth</span>
    </div>
  </div>

  <div class="tl13-item">
    <div class="tl13-content">
      <p class="tl13-year">2021</p>
      <h3 class="tl13-heading">Global Expansion</h3>
      <p class="tl13-body">Operations extended to 12 countries. Localization teams established in EMEA, APAC, and LATAM markets.</p>
      <span class="tl13-tag">Scale</span>
    </div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-empty"></div>
  </div>

  <div class="tl13-item">
    <div class="tl13-empty"></div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-content">
      <p class="tl13-year">2023</p>
      <h3 class="tl13-heading">Product V3 Launch</h3>
      <p class="tl13-body">A full platform rearchitecture delivered 10× performance improvements and unlocked an entirely new category of enterprise clients.</p>
      <span class="tl13-tag">Milestone</span>
    </div>
  </div>

  <div class="tl13-item">
    <div class="tl13-content">
      <p class="tl13-year">2025</p>
      <h3 class="tl13-heading">IPO Filed</h3>
      <p class="tl13-body">With $120M ARR and 94% NRR, the company filed S-1 with an initial valuation range between $1.4B and $1.9B.</p>
      <span class="tl13-tag">Today</span>
    </div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-empty"></div>
  </div>
</div>
```

**CSS:**
```css
.tl13-wrap {
  --tl13-bg:     #0a0a0a;
  --tl13-accent: #c8423a;
  background: var(--tl13-bg);
  padding: 2.5rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl13-line {
  position: absolute;
  left: 50%;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(200,66,58,0.6) 10%,
    rgba(200,66,58,0.6) 90%,
    transparent
  );
  transform: translateX(-50%);
}
.tl13-item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 3rem;
}
.tl13-item:last-child { margin-bottom: 0; }
.tl13-item:nth-child(odd of .tl13-item) .tl13-content { grid-column: 1; text-align: right; }
.tl13-item:nth-child(odd of .tl13-item) .tl13-empty   { grid-column: 3; }
.tl13-item:nth-child(even of .tl13-item) .tl13-empty  { grid-column: 1; }
.tl13-item:nth-child(even of .tl13-item) .tl13-content { grid-column: 3; text-align: left; }
.tl13-dot-col {
  grid-column: 2;
  display: flex;
  justify-content: center;
  padding-top: 0.6rem;
}
.tl13-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tl13-accent);
  box-shadow:
    0 0 0 4px rgba(200,66,58,0.2),
    0 0 16px rgba(200,66,58,0.5);
}
.tl13-content { padding: 0 1.5rem; }
.tl13-year {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--tl13-accent);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.tl13-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.tl13-body {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin: 0;
}
.tl13-tag {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(200,66,58,0.4);
  border-radius: 4px;
  color: var(--tl13-accent);
}
@media (max-width: 600px) {
  .tl13-line { left: 22px; }
  .tl13-item,
  .tl13-item:nth-child(odd of .tl13-item),
  .tl13-item:nth-child(even of .tl13-item) {
    grid-template-columns: 44px 1fr;
  }
  .tl13-item:nth-child(odd of .tl13-item) .tl13-content,
  .tl13-item:nth-child(even of .tl13-item) .tl13-content {
    grid-column: 2;
    text-align: left;
    padding: 0 0 0 0.5rem;
  }
  .tl13-dot-col { grid-column: 1; justify-content: flex-start; padding-left: 14px; }
  .tl13-empty { display: none; }
}
```

### 14. Horizontal Scroll

**Type:** CSS + drag scroll
**Description:** A draggable horizontal ribbon of era cards above a ruled line. Each card gets its own accent color, building a rainbow chronology you can scroll left-to-right. Made for tech histories, product evolution, brand decades.

**HTML:**
```html
<div class="tl14-scene">
  <div class="tl14-rail-wrap" id="tl14-rail-wrap">
    <div class="tl14-rail">
      <div class="tl14-card tl14-c1">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">1980 — 1990</p>
          <h3 class="tl14-title">The Mainframe Decade</h3>
          <p class="tl14-desc">Computing power was centralized and access was controlled. The seeds of distributed thinking were being planted.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c2">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">1990 — 2000</p>
          <h3 class="tl14-title">The Internet Awakens</h3>
          <p class="tl14-desc">HTML, browsers, and dial-up modems stitched the world together. A new kind of publishing was born.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c3">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">2000 — 2010</p>
          <h3 class="tl14-title">Social &amp; Mobile</h3>
          <p class="tl14-desc">Platforms, smartphones, and the always-on web reshaped every aspect of daily communication and commerce.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c4">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">2010 — 2018</p>
          <h3 class="tl14-title">Cloud Dominance</h3>
          <p class="tl14-desc">Infrastructure became invisible. AWS, Azure, and GCP abstracted away hardware, enabling new kinds of scale.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c5">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">2018 — 2023</p>
          <h3 class="tl14-title">Machine Learning Era</h3>
          <p class="tl14-desc">Transformers, foundation models, and generative AI moved from research papers to everyday products at breakneck speed.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c6">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">2023 — Now</p>
          <h3 class="tl14-title">Ambient Intelligence</h3>
          <p class="tl14-desc">AI is embedded into every layer of the stack. The interface is dissolving into conversation, context, and intent.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
    </div>
  </div>
  <p class="tl14-hint">↔ DRAG TO SCROLL ↔</p>
</div>
```

**CSS:**
```css
.tl14-scene {
  --tl14-paper: #f7f4ef;
  --tl14-ink:   #0d0d0d;
  --tl14-c1: #0d0d0d;
  --tl14-c2: #c8423a;
  --tl14-c3: #2b6cb0;
  --tl14-c4: #d4a017;
  --tl14-c5: #1a7a4a;
  --tl14-c6: #7c3aed;
  background: var(--tl14-paper);
  padding: 2rem 0;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl14-rail-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding: 1.5rem 2rem 2rem;
  cursor: grab;
}
.tl14-rail-wrap::-webkit-scrollbar { display: none; }
.tl14-rail {
  display: flex;
  gap: 60px;
  min-width: max-content;
  align-items: flex-start;
  position: relative;
}
.tl14-rail::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tl14-ink) 5%,
    var(--tl14-ink) 95%,
    transparent
  );
}
.tl14-card {
  width: 220px;
  flex-shrink: 0;
  position: relative;
  padding-top: 70px;
}
.tl14-node {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tl14-ink);
  border: 3px solid var(--tl14-paper);
  box-shadow: 0 0 0 2px var(--tl14-ink);
  z-index: 2;
}
.tl14-c2 .tl14-node { background: var(--tl14-c2); box-shadow: 0 0 0 2px var(--tl14-c2); }
.tl14-c3 .tl14-node { background: var(--tl14-c3); box-shadow: 0 0 0 2px var(--tl14-c3); }
.tl14-c4 .tl14-node { background: var(--tl14-c4); box-shadow: 0 0 0 2px var(--tl14-c4); }
.tl14-c5 .tl14-node { background: var(--tl14-c5); box-shadow: 0 0 0 2px var(--tl14-c5); }
.tl14-c6 .tl14-node { background: var(--tl14-c6); box-shadow: 0 0 0 2px var(--tl14-c6); }
.tl14-inner {
  background: #fff;
  border: 1px solid rgba(13,13,13,0.1);
  padding: 1.1rem 1.1rem 1.3rem;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(13,13,13,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.tl14-inner:hover {
  transform: translateY(-4px);
  box-shadow: 4px 8px 0 rgba(13,13,13,0.12);
}
.tl14-period {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: rgba(13,13,13,0.4);
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.tl14-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tl14-ink);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.tl14-desc {
  font-size: 12.5px;
  color: rgba(13,13,13,0.5);
  line-height: 1.55;
  margin: 0;
}
.tl14-bar {
  height: 3px;
  border-radius: 2px;
  margin-top: 0.9rem;
  background: var(--tl14-ink);
}
.tl14-c2 .tl14-bar { background: var(--tl14-c2); }
.tl14-c3 .tl14-bar { background: var(--tl14-c3); }
.tl14-c4 .tl14-bar { background: var(--tl14-c4); }
.tl14-c5 .tl14-bar { background: var(--tl14-c5); }
.tl14-c6 .tl14-bar { background: var(--tl14-c6); }
.tl14-hint {
  margin: 1rem 0 0;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(13,13,13,0.35);
  letter-spacing: 2px;
}
```

**JS:**
```js
// Drag-to-scroll the horizontal ribbon. Same pattern as the
// filmstrip demo; IIFE keeps state and listeners scoped per page.
(function() {
  const rail = document.getElementById('tl14-rail-wrap');
  if (!rail) return;
  let down = false, sx = 0, sl = 0;
  rail.addEventListener('mousedown', e => {
    down = true;
    sx = e.pageX - rail.offsetLeft;
    sl = rail.scrollLeft;
    rail.style.cursor = 'grabbing';
    rail.style.userSelect = 'none';
  });
  document.addEventListener('mouseup', () => { down = false; rail.style.cursor = 'grab'; });
  rail.addEventListener('mousemove', e => {
    if (!down) return;
    e.preventDefault();
    rail.scrollLeft = sl - (e.pageX - rail.offsetLeft - sx) * 1.2;
  });
  let tx = 0;
  rail.addEventListener('touchstart', e => { tx = e.touches[0].pageX; sl = rail.scrollLeft; }, { passive: true });
  rail.addEventListener('touchmove',  e => { rail.scrollLeft = sl - (e.touches[0].pageX - tx); }, { passive: true });
})();
```

### 15. Neon Left Rail

**Type:** Pure CSS
**Description:** A glowing purple spine anchors event icons to detailed metric cards. Dark, dense, and data-forward — built for engineering dashboards, mission logs, and product announcements where every event needs numbers attached.

**HTML:**
```html
<div class="tl15-scene">
  <div class="tl15-wrap">
    <div class="tl15-item">
      <div class="tl15-icon" aria-hidden="true">◉</div>
      <div class="tl15-meta">
        <span class="tl15-date">Jan 2022</span>
        <span class="tl15-badge">Launch</span>
      </div>
      <h3 class="tl15-title">Mission Alpha Initiated</h3>
      <p class="tl15-body">Initial deployment of the orbital logistics platform. Four units synchronized across three continents within the first 72 hours of operation.</p>
      <div class="tl15-stats">
        <div class="tl15-stat"><span class="tl15-stat-val">4</span><span class="tl15-stat-label">Units</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">72h</span><span class="tl15-stat-label">Deploy</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">99.2%</span><span class="tl15-stat-label">Uptime</span></div>
      </div>
    </div>

    <div class="tl15-item">
      <div class="tl15-icon" aria-hidden="true">⚡</div>
      <div class="tl15-meta">
        <span class="tl15-date">Sep 2022</span>
        <span class="tl15-badge">Upgrade</span>
      </div>
      <h3 class="tl15-title">Propulsion Overhaul</h3>
      <p class="tl15-body">Second-generation ion drives installed across the fleet, cutting fuel consumption by 38% and extending operational range by nearly 2,000km.</p>
      <div class="tl15-stats">
        <div class="tl15-stat"><span class="tl15-stat-val">−38%</span><span class="tl15-stat-label">Fuel</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">+2k</span><span class="tl15-stat-label">km Range</span></div>
      </div>
    </div>

    <div class="tl15-item">
      <div class="tl15-icon" aria-hidden="true">⚠</div>
      <div class="tl15-meta">
        <span class="tl15-date">Mar 2024</span>
        <span class="tl15-badge">Critical</span>
      </div>
      <h3 class="tl15-title">Communication Relay Failure</h3>
      <p class="tl15-body">Ground station Echo suffered a 14-hour blackout. Autonomous recovery protocols activated; manual override restored full comms within 6 hours ahead of schedule.</p>
      <div class="tl15-stats">
        <div class="tl15-stat"><span class="tl15-stat-val">14h</span><span class="tl15-stat-label">Outage</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">6h</span><span class="tl15-stat-label">Recovery</span></div>
      </div>
    </div>

    <div class="tl15-item">
      <div class="tl15-icon" aria-hidden="true">★</div>
      <div class="tl15-meta">
        <span class="tl15-date">Nov 2025</span>
        <span class="tl15-badge">Milestone</span>
      </div>
      <h3 class="tl15-title">Global Coverage Achieved</h3>
      <p class="tl15-body">The 24th satellite placed the network in geosynchronous alignment. Full polar coverage now enables sub-50ms latency for any point on Earth.</p>
      <div class="tl15-stats">
        <div class="tl15-stat"><span class="tl15-stat-val">24</span><span class="tl15-stat-label">Satellites</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">&lt;50ms</span><span class="tl15-stat-label">Latency</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">100%</span><span class="tl15-stat-label">Coverage</span></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl15-scene {
  --tl15-bg:     #08081a;
  --tl15-accent: #7c3aed;
  --tl15-accent-soft: #a78bfa;
  background: var(--tl15-bg);
  padding: 2.5rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl15-wrap {
  max-width: 720px;
  margin: 0 auto;
  border-left: 1px solid rgba(124,58,237,0.3);
}
.tl15-item {
  position: relative;
  padding: 0 0 3rem 3rem;
}
.tl15-item:last-child { padding-bottom: 0; }
.tl15-item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(124,58,237,0.8),
    rgba(124,58,237,0.1)
  );
}
.tl15-icon {
  position: absolute;
  left: -22px;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--tl15-accent-soft);
  box-shadow: 0 0 20px rgba(124,58,237,0.3);
}
.tl15-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.tl15-date {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--tl15-accent);
  text-transform: uppercase;
}
.tl15-badge {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.5rem;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 3px;
  color: var(--tl15-accent-soft);
}
.tl15-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}
.tl15-body {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin: 0 0 0.9rem;
}
.tl15-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.tl15-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tl15-stat-val {
  font-family: ui-monospace, monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--tl15-accent-soft);
}
.tl15-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
```

### 16. Editorial

**Type:** Pure CSS
**Description:** Magazine-style two-column alternating layout with large gradient visuals, italic serif headings, and pull quotes. Refined type on warm paper — built for retrospectives, brand histories, and long-read feature articles.

**HTML:**
```html
<div class="tl16-scene">
  <div class="tl16-wrap">
    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">01</p>
        <p class="tl16-decade">1940 — 1960</p>
        <h3 class="tl16-heading">The Atomic Age</h3>
        <p class="tl16-body">Nuclear fission unlocked both promise and peril. Nations raced to harness what was once thought to be nature's most fundamental secret.</p>
        <blockquote class="tl16-pullquote">"We have unleashed a force that will reshape civilization itself."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v1" data-label="1940 — 1960">40s</div>
      </div>
    </div>

    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">02</p>
        <p class="tl16-decade">1960 — 1980</p>
        <h3 class="tl16-heading">The Space Race</h3>
        <p class="tl16-body">Earthbound dreams took flight. Rockets carried humans beyond the atmosphere, reframing humanity's sense of its own place in the cosmos.</p>
        <blockquote class="tl16-pullquote">"The Moon is not so far when you decide you must go there."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v2" data-label="1960 — 1980">60s</div>
      </div>
    </div>

    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">03</p>
        <p class="tl16-decade">1980 — 2000</p>
        <h3 class="tl16-heading">The Digital Revolution</h3>
        <p class="tl16-body">Personal computers arrived in homes. Software became the new architecture, and those who wrote it found themselves as the architects of the century ahead.</p>
        <blockquote class="tl16-pullquote">"Software is eating the world — and it's hungry."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v3" data-label="1980 — 2000">80s</div>
      </div>
    </div>

    <div class="tl16-entry tl16-last">
      <div class="tl16-text">
        <p class="tl16-number">04</p>
        <p class="tl16-decade">2000 — Present</p>
        <h3 class="tl16-heading">The Intelligence Age</h3>
        <p class="tl16-body">Data became the substrate of decision. Machines learned from patterns invisible to human eyes, and the boundary between tool and collaborator began to blur.</p>
        <blockquote class="tl16-pullquote">"We are no longer just using intelligence; we are growing it."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v4" data-label="2000 — Now">2K</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl16-scene {
  --tl16-paper: #f0ece4;
  --tl16-ink:   #0d0d0d;
  background: var(--tl16-paper);
  padding: 3rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl16-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.tl16-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  align-items: center;
  border-bottom: 1px solid rgba(13,13,13,0.1);
}
.tl16-last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.tl16-entry:nth-child(even) .tl16-text   { order: 2; }
.tl16-entry:nth-child(even) .tl16-visual { order: 1; }
.tl16-visual {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.tl16-visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.9);
  position: relative;
}
.tl16-visual-inner::after {
  content: attr(data-label);
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  font-weight: 400;
}
.tl16-v1 { background: linear-gradient(135deg, #1a1a2e, #c8423a); }
.tl16-v2 { background: linear-gradient(135deg, #0a3d62, #2980b9); }
.tl16-v3 { background: linear-gradient(135deg, #1a3a1a, #2ecc71); }
.tl16-v4 { background: linear-gradient(135deg, #3d2000, #d4a017); }
.tl16-number {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(13,13,13,0.1);
  line-height: 1;
  margin: 0 0 -0.5rem;
}
.tl16-decade {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(13,13,13,0.4);
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
.tl16-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tl16-ink);
  margin: 0 0 0.7rem;
  line-height: 1.2;
}
.tl16-body {
  font-size: 13.5px;
  color: rgba(13,13,13,0.6);
  line-height: 1.75;
  margin: 0;
}
.tl16-pullquote {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--tl16-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(13,13,13,0.65);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .tl16-entry,
  .tl16-entry:nth-child(even) { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl16-entry:nth-child(even) .tl16-text,
  .tl16-entry:nth-child(even) .tl16-visual { order: unset; }
}
```

### 17. Stacked Progress

**Type:** Pure CSS
**Description:** Left-anchored trail with per-card progress bars and status pills. Built for product roadmaps, quarterly OKRs, and milestone trackers where each step carries a percentage and a "done / in progress / planned" state.

**HTML:**
```html
<div class="tl17-scene">
  <div class="tl17-wrap">
    <div class="tl17-track" aria-hidden="true"><div class="tl17-track-fill"></div></div>

    <div class="tl17-row">
      <div class="tl17-aside">
        <div class="tl17-circle">Q1</div>
        <div class="tl17-connector"></div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Jan — Mar 2025</span>
          <span class="tl17-status tl17-done">Complete</span>
        </div>
        <h3 class="tl17-name">Core Infrastructure</h3>
        <p class="tl17-text">Database sharding, API gateway redesign, and global CDN rollout completed 12 days ahead of schedule.</p>
        <div class="tl17-progress-label"><span>Infrastructure</span><span>100%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:100%"></div></div>
      </div>
    </div>

    <div class="tl17-row">
      <div class="tl17-aside">
        <div class="tl17-circle">Q2</div>
        <div class="tl17-connector"></div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Apr — Jun 2025</span>
          <span class="tl17-status tl17-done">Complete</span>
        </div>
        <h3 class="tl17-name">Mobile Application</h3>
        <p class="tl17-text">iOS and Android apps launched simultaneously. 4.8-star App Store rating within the first month of public availability.</p>
        <div class="tl17-progress-label"><span>Mobile</span><span>100%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:100%"></div></div>
      </div>
    </div>

    <div class="tl17-row">
      <div class="tl17-aside">
        <div class="tl17-circle">Q3</div>
        <div class="tl17-connector"></div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Jul — Sep 2025</span>
          <span class="tl17-status tl17-active">In Progress</span>
        </div>
        <h3 class="tl17-name">AI Integration Layer</h3>
        <p class="tl17-text">Embedding the new intelligence pipeline into all major product surfaces. Search, recommendations, and auto-summarization on track.</p>
        <div class="tl17-progress-label"><span>AI Layer</span><span>67%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:67%"></div></div>
      </div>
    </div>

    <div class="tl17-row">
      <div class="tl17-aside">
        <div class="tl17-circle">Q4</div>
        <div class="tl17-connector"></div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Oct — Dec 2025</span>
          <span class="tl17-status tl17-plan">Planned</span>
        </div>
        <h3 class="tl17-name">Enterprise Platform</h3>
        <p class="tl17-text">SSO, audit logging, custom data residency, and dedicated onboarding for Fortune 500 accounts entering the pipeline.</p>
        <div class="tl17-progress-label"><span>Enterprise</span><span>12%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:12%"></div></div>
      </div>
    </div>

    <div class="tl17-row tl17-last">
      <div class="tl17-aside">
        <div class="tl17-circle">Q1</div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Jan — Mar 2026</span>
          <span class="tl17-status tl17-plan">Planned</span>
        </div>
        <h3 class="tl17-name">Global Expansion</h3>
        <p class="tl17-text">Localization into 14 new markets, regional data centers in Southeast Asia and South America, and a dedicated partner ecosystem.</p>
        <div class="tl17-progress-label"><span>Expansion</span><span>0%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:0%"></div></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl17-scene {
  --tl17-bg:     #0d0d10;
  --tl17-accent: #e05c1a;
  background: var(--tl17-bg);
  padding: 2.5rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl17-wrap {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.tl17-track {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,0.06);
}
.tl17-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, var(--tl17-accent), rgba(224,92,26,0));
  animation: tl17-track 2s ease forwards;
}
@keyframes tl17-track {
  from { height: 0; }
  to   { height: 85%; }
}
.tl17-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  position: relative;
}
.tl17-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
}
.tl17-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(224,92,26,0.12);
  border: 1px solid rgba(224,92,26,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tl17-accent);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: background 0.3s, box-shadow 0.3s;
}
.tl17-row:hover .tl17-circle {
  background: rgba(224,92,26,0.25);
  box-shadow: 0 0 20px rgba(224,92,26,0.3);
}
.tl17-connector {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, rgba(224,92,26,0.3), transparent);
  min-height: 30px;
}
.tl17-card {
  flex: 1;
  margin-bottom: 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 1.25rem;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.tl17-row:hover .tl17-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(224,92,26,0.25);
  transform: translateX(4px);
}
.tl17-last .tl17-card { margin-bottom: 0; }
.tl17-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.tl17-when {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--tl17-accent);
  text-transform: uppercase;
}
.tl17-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  white-space: nowrap;
}
.tl17-done   { background: rgba(26,122,74,0.2); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.tl17-active { background: rgba(224,92,26,0.2); color: var(--tl17-accent); border: 1px solid rgba(224,92,26,0.3); }
.tl17-plan   { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }
.tl17-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.4rem;
}
.tl17-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  margin: 0 0 0.9rem;
}
.tl17-progress-label {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.35rem;
}
.tl17-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.tl17-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tl17-accent), #f97316);
  transition: width 1s ease;
}
@media (prefers-reduced-motion: reduce) {
  .tl17-track-fill { animation: none; height: 85%; }
}
```

### 18. Brutalist Grid

**Type:** Pure CSS
**Description:** Raw borders, offset shadows, and a rigid year-column grid. Vertical year labels in the left rail; two-up event blocks in the right rail. No softness — just structure, contrast, and impact. For brand histories that want to read as built, not designed.

**HTML:**
```html
<div class="tl18-scene">
  <div class="tl18-grid">
    <div class="tl18-row">
      <div class="tl18-year-cell"><span class="tl18-yr">1995</span></div>
      <div class="tl18-content-cell">
        <div class="tl18-event tl18-highlight">
          <p class="tl18-cat">Foundation</p>
          <h3 class="tl18-ev-title">Company Founded</h3>
          <p class="tl18-ev-body">Three engineers left to build what they believed the industry was missing. Bootstrapped, no external capital.</p>
        </div>
        <div class="tl18-event">
          <p class="tl18-cat">Product</p>
          <h3 class="tl18-ev-title">First Beta Released</h3>
          <p class="tl18-ev-body">200 early access users signed on in the first week. Feedback was brutal. It improved everything.</p>
        </div>
      </div>
    </div>

    <div class="tl18-row">
      <div class="tl18-year-cell"><span class="tl18-yr">2002</span></div>
      <div class="tl18-content-cell">
        <div class="tl18-event">
          <p class="tl18-cat">Finance</p>
          <h3 class="tl18-ev-title">Series B Raised</h3>
          <p class="tl18-ev-body">$22M from Sequoia and Index Ventures. Valuation crossed $100M for the first time.</p>
        </div>
        <div class="tl18-event tl18-accent">
          <p class="tl18-cat">Crisis</p>
          <h3 class="tl18-ev-title">CEO Replaced</h3>
          <p class="tl18-ev-body">Board-led transition. Incoming leadership brought an operations background that proved transformative.</p>
        </div>
      </div>
    </div>

    <div class="tl18-row">
      <div class="tl18-year-cell"><span class="tl18-yr">2011</span></div>
      <div class="tl18-content-cell">
        <div class="tl18-event">
          <p class="tl18-cat">Milestone</p>
          <h3 class="tl18-ev-title">1M Users</h3>
          <p class="tl18-ev-body">The platform crossed one million active accounts. A full-page ad in the New York Times marked the occasion.</p>
        </div>
        <div class="tl18-event">
          <p class="tl18-cat">Tech</p>
          <h3 class="tl18-ev-title">V4 Architecture</h3>
          <p class="tl18-ev-body">Complete rewrite of the core engine. Moved to a distributed microservices model running on commodity hardware.</p>
        </div>
      </div>
    </div>

    <div class="tl18-row tl18-last">
      <div class="tl18-year-cell"><span class="tl18-yr">2026</span></div>
      <div class="tl18-content-cell">
        <div class="tl18-event tl18-highlight">
          <p class="tl18-cat">Now</p>
          <h3 class="tl18-ev-title">Market Leader</h3>
          <p class="tl18-ev-body">42% category share. $340M ARR. Operations in 58 countries. The original engineers are still writing code.</p>
        </div>
        <div class="tl18-event">
          <p class="tl18-cat">Future</p>
          <h3 class="tl18-ev-title">What's Next</h3>
          <p class="tl18-ev-body">Autonomous workflows, embedded AI, and a marketplace launching later this year. The best chapter hasn't been written yet.</p>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl18-scene {
  --tl18-paper: #f5f0e8;
  --tl18-ink:   #0d0d0d;
  --tl18-red:   #c8423a;
  background: var(--tl18-paper);
  padding: 3rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl18-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
  border-top: 3px solid var(--tl18-ink);
  border-bottom: 3px solid var(--tl18-ink);
}
.tl18-row {
  display: contents;
}
.tl18-year-cell {
  padding: 1.5rem 1rem 1.5rem 0;
  border-right: 3px solid var(--tl18-ink);
  border-bottom: 1px solid rgba(13,13,13,0.12);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.tl18-last .tl18-year-cell { border-bottom: 0; }
.tl18-yr {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--tl18-ink);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  line-height: 1;
}
.tl18-content-cell {
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(13,13,13,0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.tl18-last .tl18-content-cell { border-bottom: 0; }
/* Brutalist offset shadow is intentionally hard-edged — no blur, just
   a solid ink-colored block peeking out behind the card. Built with
   box-shadow rather than a ::before pseudo because pseudos with
   z-index: -1 get hidden behind the parent's background when the
   parent gets its own stacking context (any transform creates one),
   making the card's text invisible on hover. */
.tl18-event {
  position: relative;
  padding: 1rem;
  border: 1.5px solid var(--tl18-ink);
  background: #fff;
  box-shadow: 4px 4px 0 0 var(--tl18-ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.tl18-event:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--tl18-ink);
}
.tl18-cat {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(13,13,13,0.45);
  margin: 0 0 0.5rem;
}
.tl18-ev-title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tl18-ink);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
.tl18-ev-body {
  font-size: 12.5px;
  color: rgba(13,13,13,0.55);
  line-height: 1.55;
  margin: 0;
}
.tl18-highlight { background: var(--tl18-ink); }
.tl18-highlight .tl18-cat       { color: rgba(255,255,255,0.4); }
.tl18-highlight .tl18-ev-title  { color: #fff; }
.tl18-highlight .tl18-ev-body   { color: rgba(255,255,255,0.5); }
.tl18-highlight::before         { background: rgba(255,255,255,0.3); }
.tl18-accent                    { border-color: var(--tl18-red); }
.tl18-accent::before            { background: var(--tl18-red); }
.tl18-accent .tl18-ev-title     { color: var(--tl18-red); }
@media (max-width: 700px) {
  .tl18-grid { grid-template-columns: 60px 1fr; }
  .tl18-yr { font-size: 1.4rem; }
  .tl18-content-cell { grid-template-columns: 1fr; padding-left: 1rem; }
}
```

### 19. Ticker Tape Changelog

**Type:** Pure CSS
**Description:** Horizontal snap-scroll changelog with giant ghost version numerals behind each card and colour-coded tags (Feature / Fix / Breaking / Perf). Built for software release notes, version histories, and product update streams.

**HTML:**
```html
<div class="tl19-wrap">
  <div class="tl19-track">
    <div class="tl19-item" data-v="v3.2">
      <div class="tl19-ver">v3.2.0</div>
      <div class="tl19-date">14 May 2026</div>
      <div class="tl19-headline">Streaming response latency reduced by 40%</div>
      <span class="tl19-tag tl19-tag-perf">Perf</span>
    </div>
    <div class="tl19-item" data-v="v3.1">
      <div class="tl19-ver">v3.1.4</div>
      <div class="tl19-date">02 May 2026</div>
      <div class="tl19-headline">Fixed race condition in auth token refresh</div>
      <span class="tl19-tag tl19-tag-fix">Fix</span>
    </div>
    <div class="tl19-item" data-v="v3.0">
      <div class="tl19-ver">v3.0.0</div>
      <div class="tl19-date">18 Apr 2026</div>
      <div class="tl19-headline">New plugin architecture — breaking API changes</div>
      <span class="tl19-tag tl19-tag-break">Breaking</span>
    </div>
    <div class="tl19-item" data-v="v2.9">
      <div class="tl19-ver">v2.9.1</div>
      <div class="tl19-date">01 Apr 2026</div>
      <div class="tl19-headline">Dark mode system preference detection</div>
      <span class="tl19-tag tl19-tag-feat">Feature</span>
    </div>
    <div class="tl19-item" data-v="v2.8">
      <div class="tl19-ver">v2.8.0</div>
      <div class="tl19-date">12 Mar 2026</div>
      <div class="tl19-headline">Keyboard shortcut manager added</div>
      <span class="tl19-tag tl19-tag-feat">Feature</span>
    </div>
    <div class="tl19-item" data-v="v2.7">
      <div class="tl19-ver">v2.7.2</div>
      <div class="tl19-date">28 Feb 2026</div>
      <div class="tl19-headline">Memory leak in observer pattern patched</div>
      <span class="tl19-tag tl19-tag-fix">Fix</span>
    </div>
  </div>
  <div class="tl19-hint">← scroll →</div>
</div>
```

**CSS:**
```css
.tl19-wrap {
  background: #111;
  border: 1px solid #222;
  border-radius: 2px;
  overflow: hidden;
  padding: 2rem 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl19-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2rem;
  scroll-snap-type: x mandatory;
}
.tl19-track::-webkit-scrollbar { display: none; }
.tl19-item {
  flex: 0 0 250px;
  padding: 1.5rem 2rem 1.5rem 1.5rem;
  border-right: 1px solid #2a2a2a;
  margin-right: 1rem;
  scroll-snap-align: start;
  position: relative;
}
.tl19-item::before {
  content: attr(data-v);
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 3.5rem;
  color: #1e1e1e;
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  line-height: 1;
  pointer-events: none;
}
.tl19-ver {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: #c8ff00;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.tl19-date {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #444;
  margin-bottom: 0.8rem;
}
.tl19-headline {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  color: #e8e5e0;
}
.tl19-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  text-transform: uppercase;
}
.tl19-tag-feat  { background: #1a2e00; color: #c8ff00; }
.tl19-tag-fix   { background: #2e0000; color: #ff6b6b; }
.tl19-tag-break { background: #2e1a00; color: #ffaa00; }
.tl19-tag-perf  { background: #00182e; color: #00b4d8; }
.tl19-hint {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #444;
  text-align: right;
  padding: 0.5rem 1.5rem 0;
  letter-spacing: 0.1em;
}
```

### 20. Editorial Spine

**Type:** Pure CSS
**Description:** Magazine-style vertical with italic display years on the left of a hairline gold rule, kicker labels, Instrument Serif titles, and Crimson Pro italic body copy on warm paper. Built for company histories, personal biographies, and long-read editorial features.

**HTML:**
```html
<div class="tl20-wrap">
  <div class="tl20-header">
    <span class="tl20-header-title">A Brief History</span>
    <span class="tl20-header-sub">Studio Chronicle · 2018–present</span>
  </div>

  <div class="tl20-entry">
    <div class="tl20-year">2018</div>
    <div class="tl20-rule"></div>
    <div class="tl20-body">
      <div class="tl20-kicker">Origin</div>
      <div class="tl20-title-main">Founded in a rented loft, Shoreditch</div>
      <div class="tl20-text">Three designers with one shared monitor and an unhealthy obsession with kerning. The first project was a brand identity for a local coffee importer.</div>
    </div>
  </div>

  <div class="tl20-entry">
    <div class="tl20-year">2020</div>
    <div class="tl20-rule"></div>
    <div class="tl20-body">
      <div class="tl20-kicker">Pivot</div>
      <div class="tl20-title-main">Shifted to digital-first products</div>
      <div class="tl20-text">The pandemic reshaped our practice. We dissolved our print retainer clients and rebuilt around software, motion, and interactive design systems.</div>
    </div>
  </div>

  <div class="tl20-entry">
    <div class="tl20-year">2023</div>
    <div class="tl20-rule"></div>
    <div class="tl20-body">
      <div class="tl20-kicker">Recognition</div>
      <div class="tl20-title-main">D&amp;AD Wood Pencil, Digital Design</div>
      <div class="tl20-text">Our data-journalism work for a climate NGO earned the studio's first major award and opened a new chapter of purpose-led commissions.</div>
    </div>
  </div>

  <div class="tl20-entry">
    <div class="tl20-year">Now</div>
    <div class="tl20-rule"></div>
    <div class="tl20-body">
      <div class="tl20-kicker">Present</div>
      <div class="tl20-title-main">Eight people, four time zones</div>
      <div class="tl20-text">A deliberately small studio that treats craft as a non-negotiable. Currently booking for Q4 2026.</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl20-wrap {
  background: #faf6ef;
  color: #1a1a1a;
  padding: 2.5rem 2rem;
  border-radius: 2px;
  max-width: 680px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl20-header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 0.75rem;
}
.tl20-header-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.85rem;
  font-weight: 300;
  color: #1a1a1a;
}
.tl20-header-sub {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tl20-entry {
  display: grid;
  grid-template-columns: 6ch 1px 1fr;
  gap: 0 1.5rem;
  margin-bottom: 2.25rem;
  animation: tl20-fade-up 0.4s ease both;
}
@keyframes tl20-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tl20-entry { animation: none; }
}
.tl20-year {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: #c8a96e;
  text-align: right;
  padding-top: 0.1rem;
}
.tl20-rule {
  width: 1px;
  background: #ddd;
  position: relative;
}
.tl20-rule::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1.5px solid #c8a96e;
  border-radius: 50%;
  background: #faf6ef;
  position: absolute;
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
}
.tl20-kicker {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.3rem;
}
.tl20-title-main {
  font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.tl20-text {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  font-style: italic;
}
```

### 21. Split Screen Timeline

**Type:** Pure CSS
**Description:** Dark alternating left/right layout with a faded center spine and ringed dot markers. Each entry carries a date, two-line heading, body copy, and a discipline pill. Built for career histories, CVs, and project milestone retrospectives.

**HTML:**
```html
<div class="tl21-wrap">
  <div class="tl21-spine"></div>

  <div class="tl21-entry">
    <div class="tl21-content">
      <div class="tl21-date">Jan 2022</div>
      <div class="tl21-heading">Lead Product Designer<br>Vercel</div>
      <div class="tl21-body">Oversaw the redesign of the dashboard, reducing time-to-deploy by 30% through progressive disclosure patterns.</div>
      <span class="tl21-pill">Product · Systems</span>
    </div>
    <div class="tl21-spacer"></div>
    <div class="tl21-dot"></div>
  </div>

  <div class="tl21-entry">
    <div class="tl21-spacer"></div>
    <div class="tl21-content">
      <div class="tl21-date">Mar 2020</div>
      <div class="tl21-heading">Senior UX Engineer<br>Linear</div>
      <div class="tl21-body">Built the keyboard-first interaction model that became Linear's defining differentiator in the project management space.</div>
      <span class="tl21-pill">Interaction · Eng</span>
    </div>
    <div class="tl21-dot"></div>
  </div>

  <div class="tl21-entry">
    <div class="tl21-content">
      <div class="tl21-date">Jun 2018</div>
      <div class="tl21-heading">Design Systems Lead<br>Stripe</div>
      <div class="tl21-body">Created and maintained Stripe's internal component library across 12 product teams and three platform surfaces.</div>
      <span class="tl21-pill">Tokens · Figma</span>
    </div>
    <div class="tl21-spacer"></div>
    <div class="tl21-dot"></div>
  </div>

  <div class="tl21-entry">
    <div class="tl21-spacer"></div>
    <div class="tl21-content">
      <div class="tl21-date">Sep 2016</div>
      <div class="tl21-heading">UI Designer<br>Intercom</div>
      <div class="tl21-body">Early product hire. Shaped the visual language for the Messenger product from v1 through to its first major rebrand.</div>
      <span class="tl21-pill">Visual · Branding</span>
    </div>
    <div class="tl21-dot"></div>
  </div>
</div>
```

**CSS:**
```css
.tl21-wrap {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 0;
  background: #0c0c0c;
  color: #f0ede8;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl21-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #333 5%, #333 95%, transparent);
  transform: translateX(-50%);
}
.tl21-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 120px;
  position: relative;
}
.tl21-entry:nth-child(odd) .tl21-content {
  grid-column: 1;
  text-align: right;
  padding: 1.5rem 2.5rem 1.5rem 0;
}
.tl21-entry:nth-child(even) .tl21-content {
  grid-column: 2;
  text-align: left;
  padding: 1.5rem 0 1.5rem 2.5rem;
}
.tl21-entry:nth-child(odd) .tl21-spacer { grid-column: 2; }
.tl21-entry:nth-child(even) .tl21-spacer { grid-column: 1; }
.tl21-dot {
  position: absolute;
  left: 50%;
  top: 1.6rem;
  width: 10px;
  height: 10px;
  background: #f0ede8;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px #0c0c0c, 0 0 0 4px #444;
}
.tl21-date {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #555;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.tl21-heading {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e8e5e0;
  margin-bottom: 0.4rem;
  line-height: 1.25;
}
.tl21-body {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.5;
}
.tl21-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid #333;
  border-radius: 99px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #555;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
@media (max-width: 600px) {
  .tl21-entry { grid-template-columns: 1fr; }
  .tl21-entry:nth-child(odd) .tl21-content,
  .tl21-entry:nth-child(even) .tl21-content {
    grid-column: 1;
    text-align: left;
    padding: 1.5rem 0 1.5rem 2rem;
  }
  .tl21-spine { left: 0.5rem; transform: none; }
  .tl21-dot { left: 0.5rem; transform: translateX(-50%); }
}
```

### 22. Railroad Stations

**Type:** Pure CSS
**Description:** Horizontal stations on a dashed track with one active station glowing cyan. Each station has a status header (Archived / Current / Planned / Concept), year, name, and sub-line. Built for product roadmaps, technology evolution, and API version maps.

**HTML:**
```html
<div class="tl22-wrap">
  <div class="tl22-track">
    <div class="tl22-station">
      <div class="tl22-top">ARCHIVED</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">2019</div>
        <div class="tl22-name">REST API v1</div>
        <div class="tl22-sub">Deprecated</div>
      </div>
    </div>
    <div class="tl22-station">
      <div class="tl22-top">ARCHIVED</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">2021</div>
        <div class="tl22-name">GraphQL Gateway</div>
        <div class="tl22-sub">Replaced 2024</div>
      </div>
    </div>
    <div class="tl22-station tl22-active">
      <div class="tl22-top">CURRENT</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">2024</div>
        <div class="tl22-name">Edge Runtime</div>
        <div class="tl22-sub">Live · 99.98% uptime</div>
      </div>
    </div>
    <div class="tl22-station">
      <div class="tl22-top">PLANNED</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">Q3 2026</div>
        <div class="tl22-name">WASM Runtime</div>
        <div class="tl22-sub">In development</div>
      </div>
    </div>
    <div class="tl22-station">
      <div class="tl22-top">CONCEPT</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">2027+</div>
        <div class="tl22-name">Zero-latency Mesh</div>
        <div class="tl22-sub">Research phase</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl22-wrap {
  background: #0d0f14;
  border-radius: 4px;
  padding: 2.5rem;
  overflow-x: auto;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl22-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: 700px;
  position: relative;
  padding-top: 3rem;
}
.tl22-track::before {
  content: '';
  position: absolute;
  top: calc(3rem + 16px);
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #1e2530 0px, #1e2530 8px,
    #2a3340 8px, #2a3340 12px
  );
}
.tl22-station {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.tl22-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0d0f14;
  border: 3px solid #3a4a5c;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tl22-node::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a4a5c;
  transition: background 0.2s;
}
.tl22-active .tl22-node {
  border-color: #00e5ff;
  box-shadow: 0 0 20px rgba(0,229,255,0.3);
}
.tl22-active .tl22-node::after {
  background: #00e5ff;
  width: 10px;
  height: 10px;
}
.tl22-label {
  margin-top: 0.8rem;
  text-align: center;
}
.tl22-year {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: #3a4a5c;
  letter-spacing: 0.1em;
  margin-bottom: 0.2rem;
}
.tl22-active .tl22-year { color: #00e5ff; }
.tl22-name {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #8899aa;
  line-height: 1.3;
  max-width: 90px;
}
.tl22-active .tl22-name { color: #ccd6e0; }
.tl22-sub {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #3a4a5c;
  margin-top: 0.2rem;
  max-width: 90px;
  line-height: 1.4;
}
.tl22-active .tl22-sub { color: #5a7a8c; }
.tl22-top {
  position: absolute;
  top: -3rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #2a3340;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.tl22-active .tl22-top { color: #4a6070; }
```

### 23. Film Strip Portfolio

**Type:** Pure CSS
**Description:** Horizontal portfolio reel with sprocket holes top and bottom, gradient project tiles with year stickers, role line, and tech-stack chips. Built for design portfolios, case-study indexes, and creative project galleries.

**HTML:**
```html
<div class="tl23-wrap">
  <div class="tl23-holes">
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
  </div>
  <div class="tl23-strip">
    <div class="tl23-frame">
      <div class="tl23-num">001 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#1a1a2e,#16213e)">NOVA</div>
        <div class="tl23-year-tag">2026</div>
      </div>
      <div class="tl23-title">Nova Design System</div>
      <div class="tl23-role">Lead Designer</div>
      <div class="tl23-tech"><span>Figma</span><span>Tokens</span><span>React</span></div>
    </div>
    <div class="tl23-frame">
      <div class="tl23-num">002 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#0d2137,#0a3d2b)">ATLAS</div>
        <div class="tl23-year-tag">2025</div>
      </div>
      <div class="tl23-title">Atlas Data Viz</div>
      <div class="tl23-role">UX + Dev</div>
      <div class="tl23-tech"><span>D3.js</span><span>WebGL</span><span>SVG</span></div>
    </div>
    <div class="tl23-frame">
      <div class="tl23-num">003 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#2e1a0a,#1a0a2e)">ORBIT</div>
        <div class="tl23-year-tag">2024</div>
      </div>
      <div class="tl23-title">Orbit Mobile App</div>
      <div class="tl23-role">Product Design</div>
      <div class="tl23-tech"><span>iOS</span><span>Swift</span><span>Haptics</span></div>
    </div>
    <div class="tl23-frame">
      <div class="tl23-num">004 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#0a2e1a,#2e0a1a)">DUNE</div>
        <div class="tl23-year-tag">2023</div>
      </div>
      <div class="tl23-title">Dune Brand Identity</div>
      <div class="tl23-role">Brand + Motion</div>
      <div class="tl23-tech"><span>After Effects</span><span>AI</span></div>
    </div>
    <div class="tl23-frame">
      <div class="tl23-num">005 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#1a2e0a,#0a1a2e)">LOOP</div>
        <div class="tl23-year-tag">2022</div>
      </div>
      <div class="tl23-title">Loop CMS Platform</div>
      <div class="tl23-role">Full-stack Design</div>
      <div class="tl23-tech"><span>Next.js</span><span>CMS</span></div>
    </div>
  </div>
  <div class="tl23-holes">
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
  </div>
</div>
```

**CSS:**
```css
.tl23-wrap {
  background: #111;
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 3px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl23-holes {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 1rem;
  background: #111;
}
.tl23-hole {
  width: 18px;
  height: 12px;
  background: #0c0c0c;
  border-radius: 2px;
  flex-shrink: 0;
}
.tl23-strip {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #000;
}
.tl23-strip::-webkit-scrollbar { display: none; }
.tl23-frame {
  flex: 0 0 220px;
  padding: 1.5rem 1rem;
  background: #141414;
  border-right: 2px solid #000;
  position: relative;
  transition: background 0.2s;
}
.tl23-frame:hover { background: #1a1a1a; }
.tl23-num {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #333;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}
.tl23-img {
  width: 100%;
  aspect-ratio: 16/10;
  background: #1e1e1e;
  border-radius: 2px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  position: relative;
}
.tl23-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 2.5rem;
  opacity: 0.18;
  letter-spacing: 0.1em;
  color: #fff;
}
.tl23-year-tag {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.5rem;
  background: rgba(0,0,0,0.7);
  color: #888;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  letter-spacing: 0.1em;
}
.tl23-title {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #d4d0cb;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}
.tl23-role {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #555;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tl23-tech {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tl23-tech span {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.5rem;
  color: #444;
  border: 1px solid #2a2a2a;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  letter-spacing: 0.05em;
}
```

### 24. Ledger Audit Log

**Type:** Pure CSS
**Description:** Financial-grade audit log table with a dark masthead, column ruling, status badges (Done / Pending / Critical / Archived), and a gold left-edge marker on milestone rows. Built for database migration history, compliance records, and incident logs.

**HTML:**
```html
<div class="tl24-wrap">
  <div class="tl24-header">
    <div>
      <div class="tl24-title-lbl">System Audit Log</div>
      <div class="tl24-title-name">Migration Record</div>
    </div>
    <div class="tl24-period">FY 2024–2026<br>Schema v4 → v7</div>
  </div>

  <div class="tl24-cols">
    <span>Date</span>
    <span>Description</span>
    <span>Reference</span>
    <span>Status</span>
  </div>

  <div class="tl24-row tl24-milestone">
    <div class="tl24-dt">2024-01-08</div>
    <div class="tl24-desc">
      Initial schema migration v4 → v5
      <small>Postgres 14 → 16 · 3.2M rows</small>
    </div>
    <div class="tl24-ref">MIG-001</div>
    <div class="tl24-status"><span class="tl24-badge tl24-arch">Archived</span></div>
  </div>

  <div class="tl24-row">
    <div class="tl24-dt">2024-03-22</div>
    <div class="tl24-desc">
      Added composite index on events table
      <small>Resolved P1 query timeout · Ticket #4421</small>
    </div>
    <div class="tl24-ref">IDX-007</div>
    <div class="tl24-status"><span class="tl24-badge tl24-arch">Archived</span></div>
  </div>

  <div class="tl24-row">
    <div class="tl24-dt">2025-07-14</div>
    <div class="tl24-desc">
      Backfilled NULL values in user_meta
      <small>GDPR remediation · 88k rows affected</small>
    </div>
    <div class="tl24-ref">REM-034</div>
    <div class="tl24-status"><span class="tl24-badge tl24-done">Done</span></div>
  </div>

  <div class="tl24-row tl24-milestone">
    <div class="tl24-dt">2025-11-01</div>
    <div class="tl24-desc">
      Schema migration v5 → v6 — new billing model
      <small>Zero-downtime · Blue/green deployment</small>
    </div>
    <div class="tl24-ref">MIG-002</div>
    <div class="tl24-status"><span class="tl24-badge tl24-done">Done</span></div>
  </div>

  <div class="tl24-row">
    <div class="tl24-dt">2026-02-19</div>
    <div class="tl24-desc">
      Incident: replication lag exceeded 45s
      <small>RCA complete · Failover triggered</small>
    </div>
    <div class="tl24-ref">INC-012</div>
    <div class="tl24-status"><span class="tl24-badge tl24-crit">Critical</span></div>
  </div>

  <div class="tl24-row tl24-milestone">
    <div class="tl24-dt">2026-05-08</div>
    <div class="tl24-desc">
      Schema migration v6 → v7 in progress
      <small>Estimated completion 2026-05-22</small>
    </div>
    <div class="tl24-ref">MIG-003</div>
    <div class="tl24-status"><span class="tl24-badge tl24-pend">Pending</span></div>
  </div>

  <div class="tl24-footer">
    <div class="tl24-footer-note">Gold bar = milestone event</div>
    <div class="tl24-footer-count">6 of 148 entries shown</div>
  </div>
</div>
```

**CSS:**
```css
.tl24-wrap {
  background: #f8f5f0;
  color: #1a1a1a;
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
  font-family: 'Space Mono', ui-monospace, monospace;
  border: 1px solid #ddd;
}
.tl24-header {
  padding: 1.5rem 2rem;
  background: #1a1a1a;
  color: #f8f5f0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tl24-title-lbl {
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0.25rem;
}
.tl24-title-name {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  color: #f8f5f0;
}
.tl24-period {
  font-size: 0.6rem;
  color: #888;
  text-align: right;
  line-height: 1.5;
}
.tl24-cols {
  display: grid;
  grid-template-columns: 8ch 1fr 10ch 8ch;
  gap: 0 1.5rem;
  padding: 0.5rem 2rem;
  background: #eee;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #999;
  border-bottom: 1px solid #ddd;
}
.tl24-row {
  display: grid;
  grid-template-columns: 8ch 1fr 10ch 8ch;
  gap: 0 1.5rem;
  padding: 0.8rem 2rem;
  border-bottom: 1px solid #ebe8e2;
  align-items: center;
  transition: background 0.15s;
  position: relative;
}
.tl24-row:hover { background: #f0ece6; }
.tl24-milestone { background: #fffbf2; }
.tl24-milestone::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c8a96e;
}
.tl24-dt {
  font-size: 0.65rem;
  color: #999;
  white-space: nowrap;
}
.tl24-desc {
  font-size: 0.7rem;
  color: #333;
  line-height: 1.3;
}
.tl24-desc small {
  display: block;
  font-size: 0.55rem;
  color: #aaa;
  margin-top: 0.15rem;
}
.tl24-ref {
  font-size: 0.6rem;
  color: #bbb;
  text-align: right;
}
.tl24-status { text-align: right; }
.tl24-badge {
  display: inline-block;
  font-size: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tl24-done { background: #e8f5e9; color: #2e7d32; }
.tl24-pend { background: #fff3e0; color: #e65100; }
.tl24-arch { background: #f5f5f5; color: #999; }
.tl24-crit { background: #fce4ec; color: #c62828; }
.tl24-footer {
  padding: 1rem 2rem;
  background: #f0ece6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #ddd;
}
.tl24-footer-note {
  font-size: 0.55rem;
  color: #aaa;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tl24-footer-count {
  font-size: 0.65rem;
  color: #666;
}
@media (max-width: 600px) {
  .tl24-cols, .tl24-row { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.5rem 1rem; }
  .tl24-cols { display: none; }
  .tl24-ref, .tl24-status { text-align: left; }
}
```

---
## 20 Pure CSS Toggles & Switches

URL: https://codefronts.com/components/css-toggles-switches/
Description: 20 hand-coded CSS toggle switches with live demos — haptic keys, waveform, timed countdown, biometric scan, split-flap board, permission stack, iOS, Material Design, skeuomorphic, neon, brutalist, day/night, flip card, sliding pill, glassmorphism, rotary knob, iOS light, outline, bouncy pebble, and industrial rocker. Pure CSS, fully accessible, copy-paste ready.
Demo count: 20

### 01. Haptic Keys

**Type:** Pure CSS
**Description:** Chunky square key with a 3D press-depth shadow and a glowing accent ring on activate. Pressing literally sinks the button 3px while the hard bottom shadow collapses — pure tactile button metaphor for tactile UI trends.

**HTML:**
```html
<label class="tg-hap">
  <input class="tg-hap-input" type="checkbox" checked>
  <span class="tg-hap-btn" aria-hidden="true">
    <span class="tg-hap-ring"></span>
    <svg class="tg-hap-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
    </svg>
  </span>
  <span class="tg-hap-label">Notify</span>
</label>
```

**CSS:**
```css
.tg-hap {
  --tg-hap-rim: #14141e;
  --tg-hap-wire: #1e1e2e;
  --tg-hap-edge: #020205;
  --tg-hap-accent: #39d353;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  user-select: none;
}
.tg-hap-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-hap-btn {
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--tg-hap-rim);
  border: 1px solid var(--tg-hap-wire);
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 0 var(--tg-hap-edge),
    0 8px 16px rgba(0,0,0,0.5);
  transition:
    box-shadow 0.1s ease,
    transform 0.1s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}
.tg-hap-icon {
  width: 22px;
  height: 22px;
  color: #3a3a52;
  filter: grayscale(1) brightness(0.6);
  position: relative;
  z-index: 1;
  transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}
.tg-hap-ring {
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Press effect — clicking the label sinks the button.
   Using the label's :active so the whole hit-area drives the press. */
.tg-hap:active .tg-hap-btn {
  box-shadow:
    0 2px 0 var(--tg-hap-edge),
    0 3px 8px rgba(0,0,0,0.5);
  transform: translateY(3px);
}
.tg-hap-input:checked ~ .tg-hap-btn {
  background: #0f1a0f;
  border-color: rgba(57,211,83,0.3);
  box-shadow:
    0 6px 0 var(--tg-hap-edge),
    0 8px 16px rgba(0,0,0,0.5),
    0 0 20px rgba(57,211,83,0.15);
}
.tg-hap-input:checked ~ .tg-hap-btn .tg-hap-icon {
  color: var(--tg-hap-accent);
  filter: none;
  transform: scale(1.15);
}
.tg-hap-input:checked ~ .tg-hap-btn .tg-hap-ring {
  border-color: var(--tg-hap-accent);
  box-shadow: 0 0 12px rgba(57,211,83,0.3);
}
.tg-hap-input:focus-visible ~ .tg-hap-btn {
  outline: 2px solid var(--tg-hap-accent);
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-hap-btn,
  .tg-hap-icon,
  .tg-hap-ring { transition: none; }
}
```

### 02. Waveform Toggle

**Type:** Pure CSS
**Description:** Static audio bars spring to life with staggered breathing animations when toggled on. The track border and indicator dot pulse with an ice-cyan glow. Audio-visual data physicality — toggle = sound on/off.

**HTML:**
```html
<label class="tg-wav">
  <input class="tg-wav-input" type="checkbox" checked>
  <span class="tg-wav-body" aria-hidden="true">
    <span class="tg-wav-bars">
      <span></span><span></span><span></span><span></span><span></span>
      <span></span><span></span><span></span><span></span>
    </span>
    <span class="tg-wav-text">Microphone</span>
    <span class="tg-wav-dot"></span>
  </span>
</label>
```

**CSS:**
```css
.tg-wav {
  --tg-wav-rim: #14141e;
  --tg-wav-wire: #1e1e2e;
  --tg-wav-fog: #3a3a52;
  --tg-wav-ash: #7a7a98;
  --tg-wav-ice: #00e5ff;
  display: inline-block;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  user-select: none;
}
.tg-wav-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-wav-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--tg-wav-rim);
  border: 1px solid var(--tg-wav-wire);
  min-width: 240px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.tg-wav-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 28px;
}
.tg-wav-bars span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--tg-wav-fog);
  transition: background 0.3s ease, height 0.3s ease;
}
/* Static heights (off state) — each bar has its own resting height. */
.tg-wav-bars span:nth-child(1) { height: 8px; }
.tg-wav-bars span:nth-child(2) { height: 14px; }
.tg-wav-bars span:nth-child(3) { height: 20px; }
.tg-wav-bars span:nth-child(4) { height: 26px; }
.tg-wav-bars span:nth-child(5) { height: 18px; }
.tg-wav-bars span:nth-child(6) { height: 24px; }
.tg-wav-bars span:nth-child(7) { height: 12px; }
.tg-wav-bars span:nth-child(8) { height: 20px; }
.tg-wav-bars span:nth-child(9) { height: 8px; }
.tg-wav-text {
  font-size: 13px;
  color: var(--tg-wav-ash);
  transition: color 0.3s ease;
}
.tg-wav-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tg-wav-wire);
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* Each bar oscillates between its resting height and ~30% of it. The
   varied durations + delays keep the pattern from looking robotic. */
@keyframes tg-wav-breathe {
  0%, 100% { height: var(--tg-wav-h); }
  50%      { height: calc(var(--tg-wav-h) * 0.3 + 4px); }
}
.tg-wav-input:checked ~ .tg-wav-body {
  border-color: rgba(0,229,255,0.3);
  background: rgba(0,229,255,0.04);
}
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span {
  background: var(--tg-wav-ice);
}
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(1) { animation: tg-wav-breathe 0.9s ease-in-out infinite;       --tg-wav-h: 8px;  }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(2) { animation: tg-wav-breathe 0.7s ease-in-out 0.1s infinite;  --tg-wav-h: 14px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(3) { animation: tg-wav-breathe 1.1s ease-in-out 0.2s infinite;  --tg-wav-h: 20px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(4) { animation: tg-wav-breathe 0.8s ease-in-out 0.05s infinite; --tg-wav-h: 26px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(5) { animation: tg-wav-breathe 1.0s ease-in-out 0.15s infinite; --tg-wav-h: 18px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(6) { animation: tg-wav-breathe 0.6s ease-in-out 0.25s infinite; --tg-wav-h: 24px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(7) { animation: tg-wav-breathe 0.9s ease-in-out 0.08s infinite; --tg-wav-h: 12px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(8) { animation: tg-wav-breathe 1.2s ease-in-out 0.18s infinite; --tg-wav-h: 20px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(9) { animation: tg-wav-breathe 0.75s ease-in-out 0.3s infinite; --tg-wav-h: 8px;  }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-text { color: var(--tg-wav-ice); }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-dot {
  background: var(--tg-wav-ice);
  box-shadow: 0 0 8px var(--tg-wav-ice);
}
.tg-wav-input:focus-visible ~ .tg-wav-body {
  outline: 2px solid var(--tg-wav-ice);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-wav-body,
  .tg-wav-bars span,
  .tg-wav-dot,
  .tg-wav-text { transition: none; }
  .tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span { animation: none; }
}
```

### 03. Timed Toggle

**Type:** Pure CSS
**Description:** An SVG arc fills around a circle when the toggle activates, visualising session time. Temporal UI for progress-aware states — users see state over time, not just on/off. The ember glow signals an active countdown.

**HTML:**
```html
<label class="tg-time">
  <input class="tg-time-input" type="checkbox" checked>
  <span class="tg-time-body" aria-hidden="true">
    <span class="tg-time-arc">
      <svg viewBox="0 0 28 28">
        <circle class="tg-time-bg" cx="14" cy="14" r="11"/>
        <circle class="tg-time-prog" cx="14" cy="14" r="11"/>
      </svg>
      <span class="tg-time-dot"></span>
    </span>
    <span class="tg-time-text">15 min · active</span>
  </span>
</label>
```

**CSS:**
```css
.tg-time {
  --tg-time-rim: #14141e;
  --tg-time-wire: #1e1e2e;
  --tg-time-fog: #3a3a52;
  --tg-time-ash: #7a7a98;
  --tg-time-ember: #ff6b35;
  display: inline-block;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  user-select: none;
}
.tg-time-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-time-body {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--tg-time-rim);
  border: 1px solid var(--tg-time-wire);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.tg-time-arc {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.tg-time-arc svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.tg-time-bg {
  fill: none;
  stroke: var(--tg-time-wire);
  stroke-width: 3;
}
/* circumference at r=11 is 2*pi*11 ~= 69. We use 82 as the dasharray
   so the fill animates from "empty" (offset 82) to "nearly full" (offset
   20) — leaving a small gap signals it's still counting down, not done. */
.tg-time-prog {
  fill: none;
  stroke: var(--tg-time-ember);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 82;
  stroke-dashoffset: 82;
  transition: stroke-dashoffset 0.4s ease;
}
.tg-time-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tg-time-fog);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.tg-time-text {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--tg-time-ash);
  transition: color 0.3s ease;
}
.tg-time-input:checked ~ .tg-time-body {
  border-color: rgba(255,107,53,0.4);
  background: rgba(255,107,53,0.05);
}
.tg-time-input:checked ~ .tg-time-body .tg-time-prog {
  stroke-dashoffset: 20;
}
.tg-time-input:checked ~ .tg-time-body .tg-time-dot {
  background: var(--tg-time-ember);
  box-shadow: 0 0 6px var(--tg-time-ember);
}
.tg-time-input:checked ~ .tg-time-body .tg-time-text {
  color: var(--tg-time-ember);
}
.tg-time-input:focus-visible ~ .tg-time-body {
  outline: 2px solid var(--tg-time-ember);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-time-body,
  .tg-time-prog,
  .tg-time-dot,
  .tg-time-text { transition: none; }
}
```

### 04. Biometric Scan

**Type:** Pure CSS
**Description:** A scanline sweeps top-to-bottom, corner brackets glow lilac, and the icon ring lights up when activated. Identity-first UI for auth flows — the toggle becomes a scan target instead of a switch.

**HTML:**
```html
<label class="tg-bio">
  <input class="tg-bio-input" type="checkbox" checked>
  <span class="tg-bio-frame" aria-hidden="true">
    <span class="tg-bio-scanline"></span>
    <span class="tg-bio-corners"></span>
    <span class="tg-bio-icon-wrap">
      <span class="tg-bio-rings"></span>
      <svg class="tg-bio-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 11a2 2 0 0 0-2 2v1a8 8 0 0 1-.6 3"/>
        <path d="M14 13.1c0 .9 0 1.8-.2 2.6a13 13 0 0 1-.6 2.4"/>
        <path d="M16 11.4c.3 1 .4 2 .4 3.1a15 15 0 0 1-.3 2.7"/>
        <path d="M18 11.5c.3 2 .3 4 0 6"/>
        <path d="M8 13.5c0 1.4-.1 2.7-.5 4"/>
        <path d="M6 11c-.2.7-.3 1.4-.3 2.1"/>
        <path d="M3.5 9.5A12 12 0 0 1 12 5a12 12 0 0 1 8.5 4.5"/>
      </svg>
    </span>
    <span class="tg-bio-status">Touch ID · scanning</span>
  </span>
</label>
```

**CSS:**
```css
.tg-bio {
  --tg-bio-rim: #14141e;
  --tg-bio-wire: #1e1e2e;
  --tg-bio-ash: #7a7a98;
  --tg-bio-lilac: #c084fc;
  display: inline-block;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  user-select: none;
}
.tg-bio-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-bio-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 180px;
  padding: 20px;
  border-radius: 16px;
  background: var(--tg-bio-rim);
  border: 1px solid var(--tg-bio-wire);
  overflow: hidden;
  transition: border-color 0.5s ease, background 0.5s ease;
}
.tg-bio-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tg-bio-lilac), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tg-bio-corners {
  position: absolute;
  inset: 12px;
  pointer-events: none;
}
.tg-bio-corners::before,
.tg-bio-corners::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--tg-bio-wire);
  border-style: solid;
  transition: border-color 0.4s ease;
}
.tg-bio-corners::before {
  top: 0; left: 0;
  border-width: 2px 0 0 2px;
  border-radius: 3px 0 0 0;
}
.tg-bio-corners::after {
  bottom: 0; right: 0;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 3px 0;
}
.tg-bio-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--tg-bio-wire);
  color: var(--tg-bio-ash);
  transition: border-color 0.4s ease, color 0.4s ease;
}
.tg-bio-icon {
  width: 28px;
  height: 28px;
}
/* Two concentric outer rings that light up on scan. The :before adds
   a second ring so we get the layered radar look without extra DOM. */
.tg-bio-rings {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.tg-bio-rings::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.tg-bio-status {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tg-bio-ash);
  transition: color 0.4s ease;
}
@keyframes tg-bio-scan {
  0%   { top: 0; }
  100% { top: 100%; }
}
.tg-bio-input:checked ~ .tg-bio-frame {
  border-color: rgba(192,132,252,0.4);
  background: rgba(192,132,252,0.05);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-scanline {
  opacity: 1;
  animation: tg-bio-scan 1.8s ease-in-out infinite;
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-icon-wrap {
  border-color: var(--tg-bio-lilac);
  color: var(--tg-bio-lilac);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-rings {
  border-color: rgba(192,132,252,0.3);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-rings::before {
  border-color: rgba(192,132,252,0.15);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-status {
  color: var(--tg-bio-lilac);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-corners::before,
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-corners::after {
  border-color: var(--tg-bio-lilac);
}
.tg-bio-input:focus-visible ~ .tg-bio-frame {
  outline: 2px solid var(--tg-bio-lilac);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-bio-frame,
  .tg-bio-icon-wrap,
  .tg-bio-rings,
  .tg-bio-status,
  .tg-bio-corners::before,
  .tg-bio-corners::after { transition: none; }
  .tg-bio-input:checked ~ .tg-bio-frame .tg-bio-scanline { animation: none; }
}
```

### 05. Split-Flap Board

**Type:** Pure CSS
**Description:** A retro-mechanical airport departure board built from CSS-only rotateX flips. Toggling cycles both rows simultaneously — OFFLINE flips to ONLINE, STANDBY flips to ACTIVE — with each character flipping in sequence for the cascading split-flap feel.

**HTML:**
```html
<label class="tg-flap">
  <input class="tg-flap-input" type="checkbox" checked>
  <span class="tg-flap-stage" aria-hidden="true">
    <span class="tg-flap-row">
      <span class="tg-flap-lbl">Status</span>
      <span class="tg-flap-board">
        <span class="tg-flap-char" data-off="O" data-on="O"></span>
        <span class="tg-flap-char" data-off="F" data-on="N"></span>
        <span class="tg-flap-char" data-off="F" data-on="L"></span>
        <span class="tg-flap-char" data-off="L" data-on="I"></span>
        <span class="tg-flap-char" data-off="I" data-on="N"></span>
        <span class="tg-flap-char" data-off="N" data-on="E"></span>
        <span class="tg-flap-char" data-off="E" data-on="·"></span>
      </span>
    </span>
    <span class="tg-flap-row">
      <span class="tg-flap-lbl">Mode</span>
      <span class="tg-flap-board">
        <span class="tg-flap-char" data-off="S" data-on="A"></span>
        <span class="tg-flap-char" data-off="T" data-on="C"></span>
        <span class="tg-flap-char" data-off="A" data-on="T"></span>
        <span class="tg-flap-char" data-off="N" data-on="I"></span>
        <span class="tg-flap-char" data-off="D" data-on="V"></span>
        <span class="tg-flap-char" data-off="B" data-on="E"></span>
        <span class="tg-flap-char" data-off="Y" data-on="·"></span>
      </span>
    </span>
  </span>
</label>
```

**CSS:**
```css
.tg-flap {
  --tg-flap-bg: #0a0a12;
  --tg-flap-border: #1a1a28;
  --tg-flap-ash: #7a7a98;
  --tg-flap-volt: #e0ff00;
  --tg-flap-ice: #00e5ff;
  --tg-flap-flip: 0.5s;
  display: inline-block;
  cursor: pointer;
  font-family: "Inconsolata", "Roboto Mono", ui-monospace, monospace;
  user-select: none;
}
.tg-flap-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-flap-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tg-flap-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tg-flap-lbl {
  min-width: 56px;
  font-size: 12px;
  color: var(--tg-flap-ash);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tg-flap-board {
  display: flex;
  gap: 4px;
}
/* Each char is a black tile with a horizontal seam down the middle and
   a CSS-only flip. The letter is rendered via data-off/data-on attrs in
   a pseudo, so toggling swaps which attr is shown. */
.tg-flap-char {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 38px;
  border-radius: 5px;
  background: var(--tg-flap-bg);
  border: 1px solid var(--tg-flap-border);
  font-size: 18px;
  font-weight: 500;
  color: var(--tg-flap-ash);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 400px;
  transition: color var(--tg-flap-flip) ease;
}
/* Seam across the middle of every char tile. */
.tg-flap-char::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.6);
  z-index: 2;
  pointer-events: none;
}
/* The letter itself lives in ::before so we can flip it independently
   of the tile chrome. Default shows the off character. */
.tg-flap-char::before {
  content: attr(data-off);
  display: inline-block;
  transform-origin: center;
  animation: tg-flap-off var(--tg-flap-flip) ease both;
}
@keyframes tg-flap-off {
  0%   { transform: rotateX(-90deg); }
  50%  { content: attr(data-off); }
  100% { transform: rotateX(0); }
}
@keyframes tg-flap-on {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(-90deg); }
  51%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
/* Stagger — each char is delayed 80ms further than the previous so the
   board cascades. Both rows share the same stagger pattern. */
.tg-flap-board .tg-flap-char:nth-child(1) { animation-delay: 0ms; }
.tg-flap-board .tg-flap-char:nth-child(2) { animation-delay: 80ms; }
.tg-flap-board .tg-flap-char:nth-child(3) { animation-delay: 160ms; }
.tg-flap-board .tg-flap-char:nth-child(4) { animation-delay: 240ms; }
.tg-flap-board .tg-flap-char:nth-child(5) { animation-delay: 320ms; }
.tg-flap-board .tg-flap-char:nth-child(6) { animation-delay: 400ms; }
.tg-flap-board .tg-flap-char:nth-child(7) { animation-delay: 480ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char {
  color: var(--tg-flap-volt);
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-row:nth-child(2) .tg-flap-char {
  color: var(--tg-flap-ice);
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char::before {
  content: attr(data-on);
  animation: tg-flap-on var(--tg-flap-flip) ease both;
  animation-delay: inherit;
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(1) { animation-delay: 0ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(2) { animation-delay: 80ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(3) { animation-delay: 160ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(4) { animation-delay: 240ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(5) { animation-delay: 320ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(6) { animation-delay: 400ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(7) { animation-delay: 480ms; }
.tg-flap-input:focus-visible ~ .tg-flap-stage {
  outline: 2px solid var(--tg-flap-volt);
  outline-offset: 6px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-flap-char,
  .tg-flap-char::before { animation: none; transition: none; }
  .tg-flap-char::before { content: attr(data-off); }
  .tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char::before { content: attr(data-on); }
}
```

### 06. Permission Stack

**Type:** Pure CSS
**Description:** Grouped consent UI with mini pill toggles inside stacked bordered rows. Each row independently grants or revokes a permission — the icon and label brighten and the pill switches to brand-green when granted. The dominant trust-first UI pattern replacing modal popups.

**HTML:**
```html
<div class="tg-perm">
  <label class="tg-perm-item">
    <input class="tg-perm-input" type="checkbox" checked>
    <svg class="tg-perm-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
    <span class="tg-perm-info">
      <span class="tg-perm-name">Location</span>
      <span class="tg-perm-desc">While using the app</span>
    </span>
    <span class="tg-perm-pill" aria-hidden="true">
      <span class="tg-perm-thumb"></span>
    </span>
  </label>
  <label class="tg-perm-item">
    <input class="tg-perm-input" type="checkbox">
    <svg class="tg-perm-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M23 7l-7 5 7 5V7z"/>
      <rect x="1" y="5" width="15" height="14" rx="2"/>
    </svg>
    <span class="tg-perm-info">
      <span class="tg-perm-name">Camera</span>
      <span class="tg-perm-desc">Photos and video</span>
    </span>
    <span class="tg-perm-pill" aria-hidden="true">
      <span class="tg-perm-thumb"></span>
    </span>
  </label>
  <label class="tg-perm-item">
    <input class="tg-perm-input" type="checkbox" checked>
    <svg class="tg-perm-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <rect x="9" y="2" width="6" height="12" rx="3"/>
      <path d="M19 10a7 7 0 0 1-14 0"/>
      <path d="M12 18v3"/>
    </svg>
    <span class="tg-perm-info">
      <span class="tg-perm-name">Microphone</span>
      <span class="tg-perm-desc">Voice input</span>
    </span>
    <span class="tg-perm-pill" aria-hidden="true">
      <span class="tg-perm-thumb"></span>
    </span>
  </label>
  <label class="tg-perm-item">
    <input class="tg-perm-input" type="checkbox">
    <svg class="tg-perm-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>
    <span class="tg-perm-info">
      <span class="tg-perm-name">Contacts</span>
      <span class="tg-perm-desc">Read access only</span>
    </span>
    <span class="tg-perm-pill" aria-hidden="true">
      <span class="tg-perm-thumb"></span>
    </span>
  </label>
</div>
```

**CSS:**
```css
.tg-perm {
  --tg-perm-bg: #08080f;
  --tg-perm-rim: #14141e;
  --tg-perm-wire: #1e1e2e;
  --tg-perm-fog: #3a3a52;
  --tg-perm-ash: #7a7a98;
  --tg-perm-snow: #f0f0fa;
  --tg-perm-volt: #e0ff00;
  --tg-perm-void: #04040a;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 280px;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.tg-perm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--tg-perm-wire);
  margin-top: -1px;
  background: var(--tg-perm-bg);
  cursor: pointer;
  transition: background 0.2s ease;
}
.tg-perm-item:first-child { border-radius: 12px 12px 0 0; }
.tg-perm-item:last-child  { border-radius: 0 0 12px 12px; }
.tg-perm-item:hover { background: var(--tg-perm-rim); }
.tg-perm-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-perm-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--tg-perm-ash);
  opacity: 0.4;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.tg-perm-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tg-perm-name {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--tg-perm-snow);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.tg-perm-desc {
  font-size: 11px;
  color: var(--tg-perm-ash);
}
/* Mini pill toggle on the right of each row. */
.tg-perm-pill {
  position: relative;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--tg-perm-wire);
  border: 1px solid var(--tg-perm-fog);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.tg-perm-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tg-perm-fog);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease;
}
.tg-perm-input:checked ~ .tg-perm-icon { opacity: 1; color: var(--tg-perm-volt); }
.tg-perm-input:checked ~ .tg-perm-info .tg-perm-name { opacity: 1; }
.tg-perm-input:checked ~ .tg-perm-pill {
  background: var(--tg-perm-volt);
  border-color: var(--tg-perm-volt);
}
.tg-perm-input:checked ~ .tg-perm-pill .tg-perm-thumb {
  transform: translateX(18px);
  background: var(--tg-perm-void);
}
.tg-perm-input:focus-visible ~ .tg-perm-pill {
  outline: 2px solid var(--tg-perm-volt);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-perm-item,
  .tg-perm-icon,
  .tg-perm-name,
  .tg-perm-pill,
  .tg-perm-thumb { transition: none; }
}
```

### 07. iOS

**Type:** Pure CSS
**Description:** The reference iOS-style pill toggle — translucent track, white thumb with a subtle drop shadow, smooth slide on toggle. Honors prefers-reduced-motion.

**HTML:**
```html
<label class="tg-ios">
  <input class="tg-ios-input" type="checkbox" checked>
  <span class="tg-ios-track" aria-hidden="true">
    <span class="tg-ios-thumb"></span>
  </span>
  <span class="tg-ios-label">Wi-Fi</span>
</label>
```

**CSS:**
```css
.tg-ios {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 15px;
  color: #f0eeff;
  user-select: none;
}
.tg-ios-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-ios-track {
  position: relative;
  width: 51px;
  height: 31px;
  background: rgba(120,120,128,0.32);
  border-radius: 999px;
  transition: background 0.25s ease;
}
.tg-ios-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #ffffff;
  /* Tighter shadow than real iOS — on iOS the shadow casts onto the
     screen background; here the toggle sits on a card and a softer
     shadow keeps the thumb visually contained within the track. */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 0 1px rgba(0,0,0,0.08);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-ios-input:checked ~ .tg-ios-track {
  background: #34c759;
}
.tg-ios-input:checked ~ .tg-ios-track .tg-ios-thumb {
  transform: translateX(20px);
}
.tg-ios-input:focus-visible ~ .tg-ios-track {
  outline: 2px solid #0a84ff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-ios-track,
  .tg-ios-thumb { transition: none; }
}
```

### 08. Material Design

**Type:** Pure CSS
**Description:** Google Material Design 3 switch — track with rounded thumb that lifts and changes colour on toggle. Active state shows a filled icon-style indicator.

**HTML:**
```html
<label class="tg-md">
  <input class="tg-md-input" type="checkbox" checked>
  <span class="tg-md-track" aria-hidden="true">
    <span class="tg-md-thumb"></span>
  </span>
  <span class="tg-md-label">Notifications</span>
</label>
```

**CSS:**
```css
.tg-md {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Roboto", "Google Sans", sans-serif;
  font-size: 14px;
  color: #e6e0e9;
  user-select: none;
}
.tg-md-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-md-track {
  position: relative;
  width: 52px;
  height: 32px;
  background: #49454f;
  border: 2px solid #79747e;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}
.tg-md-thumb {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cac4d0;
  transform: translateY(-50%);
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.15s ease,
              height 0.15s ease,
              background 0.2s ease;
}
.tg-md-input:checked ~ .tg-md-track {
  background: #d0bcff;
  border-color: #d0bcff;
}
.tg-md-input:checked ~ .tg-md-track .tg-md-thumb {
  /* Inner width is 48px (52 - 2px border × 2). Thumb grows to 24px
     on-state, so max left value that keeps the thumb fully inside the
     border is 48 - 24 = 24px, minus 2px breathing room = 22px. */
  left: 22px;
  width: 24px;
  height: 24px;
  background: #381e72;
}
.tg-md-input:focus-visible ~ .tg-md-track {
  outline: 2px solid #d0bcff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-md-track,
  .tg-md-thumb { transition: none; }
}
```

### 09. Skeuomorphic Light Switch

**Type:** Pure CSS
**Description:** A physical rocker light switch — brushed metal bezel, plastic rocker that tilts on toggle, subtle shadow that deepens when pressed. Heavy realism, satisfying click.

**HTML:**
```html
<label class="tg-skeo">
  <input class="tg-skeo-input" type="checkbox" checked>
  <span class="tg-skeo-bezel" aria-hidden="true">
    <span class="tg-skeo-rocker">
      <span class="tg-skeo-mark"></span>
    </span>
  </span>
  <span class="tg-skeo-label">Power</span>
</label>
```

**CSS:**
```css
.tg-skeo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d8d4dc;
  user-select: none;
}
.tg-skeo-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-skeo-bezel {
  position: relative;
  width: 56px;
  height: 44px;
  background: linear-gradient(180deg, #4a4a52 0%, #2a2a30 100%);
  border-radius: 6px;
  padding: 4px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.18),
    inset 0 -1px 1px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-skeo-rocker {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f4f1ec 0%, #d8d2c6 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.18s ease;
  transform-origin: center;
}
.tg-skeo-mark {
  position: absolute;
  top: 6px; left: 50%;
  width: 14px; height: 3px;
  background: #2a2a30;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: top 0.18s ease, bottom 0.18s ease;
}
.tg-skeo-input:checked ~ .tg-skeo-bezel .tg-skeo-rocker {
  transform: rotateX(0deg);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.8),
    inset 0 1px 0 rgba(0,0,0,0.15);
}
.tg-skeo-input:checked ~ .tg-skeo-bezel .tg-skeo-mark {
  top: auto;
  bottom: 6px;
  background: #d04f4f;
}
.tg-skeo-input:not(:checked) ~ .tg-skeo-bezel .tg-skeo-rocker {
  transform: rotateX(180deg);
}
.tg-skeo-input:focus-visible ~ .tg-skeo-bezel {
  outline: 2px solid #6b9eff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-skeo-rocker,
  .tg-skeo-mark { transition: none; }
}
```

### 10. Neon Cyber

**Type:** Pure CSS
**Description:** A glowing neon outline toggle — dark track with a cyan thumb that pulses with a soft glow when active. Futuristic dashboard aesthetic.

**HTML:**
```html
<label class="tg-neon">
  <input class="tg-neon-input" type="checkbox" checked>
  <span class="tg-neon-track" aria-hidden="true">
    <span class="tg-neon-thumb"></span>
  </span>
  <span class="tg-neon-label">Shields</span>
</label>
```

**CSS:**
```css
.tg-neon {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b8e8f0;
  user-select: none;
}
.tg-neon-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-neon-track {
  position: relative;
  width: 54px;
  height: 26px;
  background: #0a1320;
  border: 1px solid rgba(0, 220, 255, 0.3);
  border-radius: 999px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.tg-neon-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6be8ff 0%, #0a90b8 100%);
  transform: translateY(-50%);
  box-shadow:
    0 0 6px rgba(0, 220, 255, 0.4),
    inset 0 1px 1px rgba(255,255,255,0.4);
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease;
}
.tg-neon-input:checked ~ .tg-neon-track {
  border-color: rgba(0, 220, 255, 0.9);
  box-shadow:
    0 0 12px rgba(0, 220, 255, 0.5),
    inset 0 0 8px rgba(0, 220, 255, 0.15);
}
.tg-neon-input:checked ~ .tg-neon-track .tg-neon-thumb {
  left: 33px;
  box-shadow:
    0 0 14px rgba(0, 220, 255, 0.9),
    inset 0 1px 1px rgba(255,255,255,0.5);
}
.tg-neon-input:focus-visible ~ .tg-neon-track {
  outline: 2px solid #6be8ff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-neon-track,
  .tg-neon-thumb { transition: none; }
}
```

### 11. Brutalist

**Type:** Pure CSS
**Description:** Hard edges, no shadows, monospace label, raw markup feel. The track and thumb are pure rectangles. A counterpoint to polished SaaS-style toggles.

**HTML:**
```html
<label class="tg-brut">
  <input class="tg-brut-input" type="checkbox" checked>
  <span class="tg-brut-track" aria-hidden="true">
    <span class="tg-brut-thumb"></span>
  </span>
  <span class="tg-brut-label">Tracking</span>
</label>
```

**CSS:**
```css
.tg-brut {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0eeff;
  user-select: none;
}
.tg-brut-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-brut-track {
  /* Outer 60×28; with 2px border, inner space is 56×24. Thumb is a
     24×24 white block that slides inside that inner space. Track
     stays dark in both states — the thumb's position is the signal,
     not a color inversion, so the state is readable at a glance even
     in a static preview. */
  position: relative;
  width: 60px;
  height: 28px;
  background: #1a1a1a;
  border: 2px solid #f0eeff;
  border-radius: 0;
  transition: background 0.1s linear;
  box-sizing: border-box;
}
.tg-brut-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 100%;
  background: #f0eeff;
  border-radius: 0;
  transition: left 0.1s linear;
}
.tg-brut-input:checked ~ .tg-brut-track .tg-brut-thumb {
  /* Inner width is 56px, thumb width 24px → 32px is the rightmost
     position that keeps the thumb fully inside the border. The track
     stays dark in both states — the thumb's position is the only
     state signal. Pure brutalist: stark contrast, no decoration. */
  left: 32px;
}
.tg-brut-input:focus-visible ~ .tg-brut-track {
  outline: 2px solid #ff6c8a;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-brut-track,
  .tg-brut-thumb { transition: none; }
}
```

### 12. Day / Night

**Type:** Pure CSS
**Description:** A dark-mode toggle that morphs from a sun in a sky-blue track to a crescent moon over a deep night track. The most "what does this control" pattern in the bunch.

**HTML:**
```html
<label class="tg-dn" aria-label="Theme: light or dark">
  <input class="tg-dn-input" type="checkbox" checked>
  <span class="tg-dn-track" aria-hidden="true">
    <span class="tg-dn-thumb">
      <span class="tg-dn-crater tg-dn-c1"></span>
      <span class="tg-dn-crater tg-dn-c2"></span>
      <span class="tg-dn-crater tg-dn-c3"></span>
    </span>
    <span class="tg-dn-star tg-dn-s1"></span>
    <span class="tg-dn-star tg-dn-s2"></span>
    <span class="tg-dn-star tg-dn-s3"></span>
  </span>
</label>
```

**CSS:**
```css
.tg-dn {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}
.tg-dn-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-dn-track {
  position: relative;
  width: 72px;
  height: 36px;
  background: linear-gradient(180deg, #87ceeb 0%, #4a90c2 100%);
  border-radius: 999px;
  overflow: hidden;
  transition: background 0.4s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.tg-dn-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe066 0%, #f5a623 90%);
  box-shadow: 0 0 14px rgba(255, 224, 102, 0.7);
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.4s ease,
              box-shadow 0.4s ease;
}
.tg-dn-crater {
  position: absolute;
  border-radius: 50%;
  background: #2a2a30;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tg-dn-c1 { top: 6px;  left: 8px;  width: 6px;  height: 6px; }
.tg-dn-c2 { top: 14px; left: 18px; width: 4px;  height: 4px; }
.tg-dn-c3 { top: 20px; left: 6px;  width: 5px;  height: 5px; }
.tg-dn-star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tg-dn-s1 { top: 8px;  left: 14px; }
.tg-dn-s2 { top: 18px; left: 24px; width: 1.5px; height: 1.5px; }
.tg-dn-s3 { top: 10px; left: 28px; }
.tg-dn-input:not(:checked) ~ .tg-dn-track {
  background: linear-gradient(180deg, #0a1322 0%, #1c2540 100%);
}
.tg-dn-input:not(:checked) ~ .tg-dn-track .tg-dn-thumb {
  left: 39px;
  background: radial-gradient(circle at 35% 35%, #e8e6f0 0%, #a8a5bb 90%);
  box-shadow: 0 0 12px rgba(168, 165, 187, 0.5);
}
.tg-dn-input:not(:checked) ~ .tg-dn-track .tg-dn-crater { opacity: 0.5; }
.tg-dn-input:not(:checked) ~ .tg-dn-track .tg-dn-star { opacity: 0.85; }
.tg-dn-input:focus-visible ~ .tg-dn-track {
  outline: 2px solid #ffe066;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-dn-track,
  .tg-dn-thumb,
  .tg-dn-crater,
  .tg-dn-star { transition: none; }
}
```

### 13. Flip Card

**Type:** Pure CSS
**Description:** A 3D flip toggle — front face shows OFF, back face shows ON. Rotates around the Y axis on toggle. Showcases transform-style: preserve-3d.

**HTML:**
```html
<label class="tg-flip">
  <input class="tg-flip-input" type="checkbox" checked>
  <span class="tg-flip-card" aria-hidden="true">
    <span class="tg-flip-face tg-flip-on">ON</span>
    <span class="tg-flip-face tg-flip-off">OFF</span>
  </span>
  <span class="tg-flip-label">Auto-save</span>
</label>
```

**CSS:**
```css
.tg-flip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
  perspective: 400px;
}
.tg-flip-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-flip-card {
  position: relative;
  width: 56px;
  height: 30px;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tg-flip-on {
  background: linear-gradient(135deg, #2eb88a 0%, #1d9c70 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.tg-flip-off {
  background: linear-gradient(135deg, #4a4a52 0%, #2a2a30 100%);
  color: #b8b6d4;
  transform: rotateY(180deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.tg-flip-input:not(:checked) ~ .tg-flip-card {
  transform: rotateY(180deg);
}
.tg-flip-input:focus-visible ~ .tg-flip-card {
  outline: 2px solid #7c6cff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-flip-card { transition: none; }
}
```

### 14. Sliding Pill with Label

**Type:** Pure CSS
**Description:** A track containing both labels (ON / OFF) with a thumb that slides over the active one. Common SaaS-dashboard pattern — the label IS the indicator.

**HTML:**
```html
<label class="tg-pill">
  <input class="tg-pill-input" type="checkbox" checked>
  <span class="tg-pill-track" aria-hidden="true">
    <span class="tg-pill-text tg-pill-on">ON</span>
    <span class="tg-pill-text tg-pill-off">OFF</span>
    <span class="tg-pill-thumb"></span>
  </span>
  <span class="tg-pill-label">Public profile</span>
</label>
```

**CSS:**
```css
.tg-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
}
.tg-pill-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-pill-track {
  position: relative;
  width: 76px;
  height: 28px;
  background: #2a2a30;
  border-radius: 999px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background 0.25s ease;
}
.tg-pill-text {
  position: relative;
  z-index: 2;
  text-align: center;
  transition: color 0.25s ease;
  pointer-events: none;
}
.tg-pill-on  { color: #7c6cff; }
.tg-pill-off { color: #6a6a7a; }
.tg-pill-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: #f0eeff;
  border-radius: 999px;
  z-index: 1;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.tg-pill-input:checked ~ .tg-pill-track .tg-pill-on  { color: #1a1a1a; }
.tg-pill-input:checked ~ .tg-pill-track .tg-pill-off { color: #6a6a7a; }
.tg-pill-input:not(:checked) ~ .tg-pill-track .tg-pill-on  { color: #6a6a7a; }
.tg-pill-input:not(:checked) ~ .tg-pill-track .tg-pill-off { color: #1a1a1a; }
.tg-pill-input:not(:checked) ~ .tg-pill-track .tg-pill-thumb {
  left: 50%;
}
.tg-pill-input:focus-visible ~ .tg-pill-track {
  outline: 2px solid #7c6cff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-pill-thumb,
  .tg-pill-text,
  .tg-pill-track { transition: none; }
}
```

### 15. Glassmorphism

**Type:** Pure CSS
**Description:** A frosted-glass pill with a backdrop-blurred thumb. The colored backdrop tints the glass; the thumb floats above it. Modern dark-mode aesthetic.

**HTML:**
```html
<label class="tg-glass">
  <input class="tg-glass-input" type="checkbox" checked>
  <span class="tg-glass-track" aria-hidden="true">
    <span class="tg-glass-thumb"></span>
  </span>
  <span class="tg-glass-label">Focus mode</span>
</label>
```

**CSS:**
```css
.tg-glass {
  /* A subtle colored backdrop behind the track makes the backdrop-filter
     blur visible. Without a non-flat background the glass effect has
     nothing to refract. */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,108,255,0.18), rgba(255,108,138,0.12));
}
.tg-glass-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-glass-track {
  position: relative;
  width: 56px;
  height: 30px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  transition: background 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}
.tg-glass-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 2px 6px rgba(0,0,0,0.18);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease;
}
.tg-glass-input:checked ~ .tg-glass-track {
  background: rgba(124,108,255,0.32);
  border-color: rgba(124,108,255,0.55);
}
.tg-glass-input:checked ~ .tg-glass-track .tg-glass-thumb {
  /* Inner width: 56 - 2 = 54. Thumb 24. Max left to stay inside: 54-24-2 = 28. */
  left: 28px;
  background: rgba(255,255,255,0.95);
}
.tg-glass-input:focus-visible ~ .tg-glass-track {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-glass-track,
  .tg-glass-thumb { transition: none; }
}
```

### 16. Skeuomorphic Knob

**Type:** Pure CSS
**Description:** A brushed-metal rotary knob that physically rotates 90 degrees on toggle. Different motion type from the sliding switches — rotation as the state signal. Tick marks anchor the dial.

**HTML:**
```html
<label class="tg-knob">
  <input class="tg-knob-input" type="checkbox" checked>
  <span class="tg-knob-stage" aria-hidden="true">
    <span class="tg-knob-tick tg-knob-t-off">OFF</span>
    <span class="tg-knob-tick tg-knob-t-on">ON</span>
    <span class="tg-knob-dial">
      <span class="tg-knob-indicator"></span>
    </span>
  </span>
  <span class="tg-knob-label">Power</span>
</label>
```

**CSS:**
```css
.tg-knob {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #d8d4dc;
  user-select: none;
}
.tg-knob-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-knob-stage {
  position: relative;
  width: 60px;
  height: 60px;
}
.tg-knob-tick {
  position: absolute;
  font-family: ui-monospace, "Fira Code", monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #6a6a7a;
}
.tg-knob-t-off { top: 4px;  left: 0; }
.tg-knob-t-on  { top: 4px;  right: 0; }
.tg-knob-dial {
  position: absolute;
  top: 12px; left: 6px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #f0e8d8 0%, #6a5a30 90%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.4);
  transform: rotate(-45deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-knob-indicator {
  position: absolute;
  top: 4px; left: 50%;
  width: 3px; height: 14px;
  background: #2a1d0e;
  border-radius: 2px;
  transform: translateX(-50%);
}
.tg-knob-input:checked ~ .tg-knob-stage .tg-knob-dial {
  transform: rotate(45deg);
}
.tg-knob-input:checked ~ .tg-knob-stage .tg-knob-t-on { color: #d8b66e; }
.tg-knob-input:not(:checked) ~ .tg-knob-stage .tg-knob-t-off { color: #d8b66e; }
.tg-knob-input:focus-visible ~ .tg-knob-stage .tg-knob-dial {
  outline: 2px solid #d8b66e;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-knob-dial { transition: none; }
}
```

### 17. iOS Light Mode

**Type:** Pure CSS
**Description:** The iOS toggle in its light-theme presentation — clean white card backdrop, soft gray off-state, signature green on-state. Counterpart to demo 1.

**HTML:**
```html
<label class="tg-iosl">
  <input class="tg-iosl-input" type="checkbox" checked>
  <span class="tg-iosl-track" aria-hidden="true">
    <span class="tg-iosl-thumb"></span>
  </span>
  <span class="tg-iosl-label">Bluetooth</span>
</label>
```

**CSS:**
```css
.tg-iosl {
  /* Wrapped in a light-card backdrop because the gallery stage is dark.
     This is exactly how you'd ship this in a real light-mode app —
     surrounded by a white surface. */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 15px;
  color: #1a1a1f;
  user-select: none;
  padding: 14px 18px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tg-iosl-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-iosl-track {
  position: relative;
  width: 51px;
  height: 31px;
  background: #e5e5ea;
  border-radius: 999px;
  transition: background 0.25s ease;
}
.tg-iosl-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 0 1px rgba(0,0,0,0.08);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-iosl-input:checked ~ .tg-iosl-track {
  background: #34c759;
}
.tg-iosl-input:checked ~ .tg-iosl-track .tg-iosl-thumb {
  transform: translateX(20px);
}
.tg-iosl-input:focus-visible ~ .tg-iosl-track {
  outline: 2px solid #0a84ff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-iosl-track,
  .tg-iosl-thumb { transition: none; }
}
```

### 18. Outline

**Type:** Pure CSS
**Description:** A pure-stroke toggle — track and thumb are outlines only, no fills. When toggled on, the thumb fills with brand color. Minimalist; pairs with the brutalist demo.

**HTML:**
```html
<label class="tg-out">
  <input class="tg-out-input" type="checkbox" checked>
  <span class="tg-out-track" aria-hidden="true">
    <span class="tg-out-thumb"></span>
  </span>
  <span class="tg-out-label">Sync</span>
</label>
```

**CSS:**
```css
.tg-out {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
}
.tg-out-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-out-track {
  position: relative;
  width: 56px;
  height: 28px;
  background: transparent;
  border: 1px solid #6a6a7a;
  border-radius: 999px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.tg-out-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #6a6a7a;
  transform: translateY(-50%);
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.2s ease,
              border-color 0.2s ease;
}
.tg-out-input:checked ~ .tg-out-track {
  border-color: #7c6cff;
}
.tg-out-input:checked ~ .tg-out-track .tg-out-thumb {
  /* Inner width: 56 - 2 = 54. Thumb 20. Max left: 54-20-3 = 31. */
  left: 31px;
  background: #7c6cff;
  border-color: #7c6cff;
}
.tg-out-input:focus-visible ~ .tg-out-track {
  outline: 2px solid #7c6cff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-out-track,
  .tg-out-thumb { transition: none; }
}
```

### 19. Bouncy Pebble

**Type:** Pure CSS
**Description:** A chunky outlined toggle with an organic "pebble" thumb shape built from 8-value border-radius syntax. Bouncy springy transition with anticipation + overshoot. Track and thumb swap colors on each state. The reference for hand-crafted, designer-drawn toggles — distinctive from every other demo in the collection.

**HTML:**
```html
<label class="tg-bp">
  <input class="tg-bp-input" type="checkbox" checked>
  <span class="tg-bp-track" aria-hidden="true">
    <span class="tg-bp-thumb"></span>
  </span>
  <span class="tg-bp-label">Theme: butter</span>
</label>
```

**CSS:**
```css
.tg-bp {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
}
.tg-bp-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-bp-track {
  position: relative;
  width: 150px;
  height: 74px;
  background: #f3f3f3;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 3px #2a2a2a,
    0 10px 20px rgba(0,0,0,0.35);
  transition: background 0.35s ease;
}
.tg-bp-thumb {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 48px;
  height: 48px;
  background: #f4df72;
  border: 3px solid #2b2b2b;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
  /* 8-value border-radius (horizontal × vertical radii per corner)
     creates the organic asymmetric pebble shape: fuller left, tighter
     right, subtle diagonal tension. The -2deg tilt adds hand-crafted
     irregularity. The cubic-bezier easing has anticipation (negative
     control point) and overshoot (>1 control point) — the thumb
     pulls back slightly before sliding, then overshoots the
     destination before settling. */
  border-radius: 52% 38% 42% 58% / 52% 42% 58% 48%;
  transform: translateY(-50%) rotate(-2deg);
  transition: all 0.35s cubic-bezier(0.68, -0.4, 0.27, 1.4);
}
.tg-bp-input:checked ~ .tg-bp-track {
  background: #f4df72;
}
.tg-bp-input:checked ~ .tg-bp-track .tg-bp-thumb {
  /* Slides to right edge. Track is 150px wide, thumb is 48px + 3px×2
     border = 54px total. left: calc(100% - 64px) gives 10px from the
     right edge, mirroring the 10px from the left in the off state. */
  left: calc(100% - 64px);
  background: #f5f5f5;
  /* Mirrored border-radius — horizontal asymmetry flips. The "fuller"
     side is now the right (the direction the thumb just came from). */
  border-radius: 38% 52% 58% 42% / 42% 52% 48% 58%;
  transform: translateY(-50%) rotate(2deg);
}
.tg-bp-input:focus-visible ~ .tg-bp-track {
  outline: 3px solid #7c6cff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-bp-track,
  .tg-bp-thumb { transition: none; }
}
```

### 20. Industrial Rocker

**Type:** Pure CSS
**Description:** A chunky industrial rocker switch with twin indicator lights, rotating "teeth" along the rail, and a color-shifting metallic thumb. The off-light glows red; the on-light glows brand purple. Inspired by heavy-duty equipment power switches.

**HTML:**
```html
<label class="tg-rock">
  <input class="tg-rock-input" type="checkbox" checked>
  <span class="tg-rock-body" aria-hidden="true">
    <span class="tg-rock-lights">
      <span class="tg-rock-light tg-rock-light-off"></span>
      <span class="tg-rock-light tg-rock-light-on"></span>
    </span>
    <span class="tg-rock-track-top">
      <span></span><span></span><span></span><span></span><span></span>
      <span></span><span></span><span></span><span></span><span></span>
    </span>
    <span class="tg-rock-rail"></span>
    <span class="tg-rock-thumb"></span>
    <span class="tg-rock-track-bot">
      <span></span><span></span><span></span><span></span><span></span>
      <span></span><span></span><span></span><span></span><span></span>
    </span>
  </span>
  <span class="tg-rock-label">Power</span>
</label>
```

**CSS:**
```css
@property --tg-rock-shine {
  syntax: "<color>";
  initial-value: #f50000;
  inherits: false;
}
.tg-rock {
  --tg-rock-sz: 8px;
  --tg-rock-off: #f50000;
  --tg-rock-on: #7c6cff;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  user-select: none;
}
.tg-rock-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* Body proportions: 28×sz wide, 18×sz tall.
   Layout regions stacked vertically:
     row 1 (top): lights row, ~3×sz tall
     row 2: top track teeth, ~1.5×sz tall
     row 3: rail + thumb, ~7×sz tall (the main switch)
     row 4: bottom track teeth, ~1.5×sz tall */
.tg-rock-body {
  position: relative;
  display: inline-block;
  width: calc(var(--tg-rock-sz) * 28);
  height: calc(var(--tg-rock-sz) * 18);
}
.tg-rock-lights {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(var(--tg-rock-sz) * 2);
}
.tg-rock-light {
  width: calc(var(--tg-rock-sz) * 1.4);
  height: calc(var(--tg-rock-sz) * 1.4);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a4a52, #1a1a1f);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  transition: all 0.5s ease;
}
/* Rail spans the full body width, vertically centered. */
.tg-rock-rail {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(var(--tg-rock-sz) * 7);
  transform: translateY(-50%);
  background: linear-gradient(180deg, #2a2a30, #0a0a0e);
  border-radius: calc(var(--tg-rock-sz) * 0.8);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.8),
    inset 0 -1px 2px rgba(255,255,255,0.05),
    0 2px 4px rgba(0,0,0,0.3);
}
/* Thumb: ~12×sz wide (almost half the body), 6×sz tall, sits on the rail. */
.tg-rock-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--tg-rock-sz) * 1);
  width: calc(var(--tg-rock-sz) * 12);
  height: calc(var(--tg-rock-sz) * 5.5);
  transform: translateY(-50%);
  background: linear-gradient(180deg, #c0c0c8 0%, #8a8a92 45%, #4a4a52 100%);
  border-radius: calc(var(--tg-rock-sz) * 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 3px 6px rgba(0,0,0,0.5),
    0 0 calc(var(--tg-rock-sz) * 1.8) var(--tg-rock-shine);
  transition: left 0.5s ease, --tg-rock-shine 0.5s ease;
}
/* Grip lines: three horizontal bars across the thumb face. */
.tg-rock-thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  box-shadow:
    0 calc(var(--tg-rock-sz) * 0.6) 0 rgba(0,0,0,0.55),
    0 calc(var(--tg-rock-sz) * -0.6) 0 rgba(0,0,0,0.55);
}
.tg-rock-track-top,
.tg-rock-track-bot {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--tg-rock-sz) * 1);
}
.tg-rock-track-top { top: calc(var(--tg-rock-sz) * 3); }
.tg-rock-track-bot { bottom: calc(var(--tg-rock-sz) * 0); }
.tg-rock-track-top span,
.tg-rock-track-bot span {
  width: calc(var(--tg-rock-sz) * 1);
  height: calc(var(--tg-rock-sz) * 1);
  background: #3a3a42;
  border-radius: 1px;
  transition: transform 0.5s ease;
}
/* Off state — left light glows red. */
.tg-rock-light-off {
  background: radial-gradient(circle at 35% 35%, #ff7575, var(--tg-rock-off));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    0 0 calc(var(--tg-rock-sz) * 1.2) var(--tg-rock-off);
}
/* On state — left dims, right lights up purple, thumb slides right. */
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-light-off {
  background: radial-gradient(circle at 35% 35%, #4a4a52, #1a1a1f);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-light-on {
  background: radial-gradient(circle at 35% 35%, #b5a8ff, var(--tg-rock-on));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    0 0 calc(var(--tg-rock-sz) * 1.2) var(--tg-rock-on);
}
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-thumb {
  left: calc(100% - var(--tg-rock-sz) * 13);
  --tg-rock-shine: #7c6cff;
}
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-track-top span {
  transform: rotate(20deg);
}
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-track-bot span {
  transform: rotate(-20deg);
}
.tg-rock-input:focus-visible ~ .tg-rock-body .tg-rock-rail {
  outline: 2px solid #7c6cff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-rock-thumb,
  .tg-rock-light,
  .tg-rock-track-top span,
  .tg-rock-track-bot span { transition: none; }
}
```

---
## 21 CSS Tooltips

URL: https://codefronts.com/snippets/css-tooltips/
Description: 21 hand-coded CSS tooltips spanning icon toolbars, form-field help, code docs, editorial footnotes, profile cards, schematics, inventories, keyboard shortcuts, glossary words, status dots, table cells, content tags, departures boards, recipe ingredients, constellation maps, periodic-table elements, photo EXIF cards, org charts, and event timelines.
Demo count: 21

### 01. Schematic Hotspot

**Type:** Pure CSS
**Description:** For product diagrams and exploded views. Four pulsing red dots dot a wireframe drawing; hover any one and a leader line draws itself to a numbered callout box with part name, description, and a tiny spec table. The whole annotation reads like a CAD title block.

**HTML:**
```html
<div class="schem-stage-wrap">
  <div class="schem-paper">
    <span class="schem-corner schem-tl"></span>
    <span class="schem-corner schem-tr"></span>
    <span class="schem-corner schem-bl"></span>
    <span class="schem-corner schem-br"></span>
    <div class="schem-meta">
      <span>DWG-0142-A · CAMERA / EXPLODED VIEW</span>
      <span class="schem-right">SCALE 1:1 · REV 04<br>14.MAY.2026</span>
    </div>
    <div class="schem-object">
      <svg class="schem-svg" viewBox="0 0 800 460" preserveAspectRatio="xMidYMid meet">
        <rect x="200" y="160" width="400" height="200" stroke="#1c2330" stroke-width="1.5" fill="none"/>
        <rect x="340" y="130" width="80" height="30" stroke="#1c2330" stroke-width="1.5" fill="none"/>
        <rect x="355" y="120" width="50" height="10" stroke="#1c2330" stroke-width="1" fill="none"/>
        <path d="M200 160 L160 180 L160 340 L200 360 Z" stroke="#1c2330" stroke-width="1.5" fill="none"/>
        <circle cx="450" cy="260" r="90" stroke="#1c2330" stroke-width="1.5" fill="none"/>
        <circle cx="450" cy="260" r="68" stroke="#1c2330" stroke-width="1" fill="none"/>
        <circle cx="450" cy="260" r="46" stroke="#1c2330" stroke-width="0.8" fill="none"/>
        <circle cx="450" cy="260" r="24" stroke="#1c2330" stroke-width="0.6" fill="none"/>
        <circle cx="260" cy="200" r="22" stroke="#1c2330" stroke-width="1" fill="none"/>
        <circle cx="260" cy="200" r="3" fill="#1c2330"/>
        <circle cx="540" cy="200" r="18" stroke="#1c2330" stroke-width="1" fill="none"/>
        <rect x="320" y="190" width="40" height="28" stroke="#1c2330" stroke-width="0.8" fill="none"/>
        <line x1="200" y1="380" x2="600" y2="380" stroke="#1c2330" stroke-width="0.5" stroke-dasharray="4,4"/>
        <text x="400" y="398" text-anchor="middle" font-family="IBM Plex Mono" font-size="10" fill="#1c2330">142mm</text>
      </svg>
      <div class="schem-hot schem-hot-1"></div>
      <svg class="schem-leader schem-leader-1"><line x1="0" y1="100" x2="180" y2="0" stroke="#1c2330" stroke-width="1"/></svg>
      <div class="schem-note schem-note-1">
        <div class="schem-num">01</div>
        <div class="schem-label">— Optical Assembly</div>
        <div class="schem-part">35mm <em>f/1.4</em> prime</div>
        <div class="schem-desc">Twelve-element design across nine groups. Aspherical front and rear, two ED elements mid-stack.</div>
        <div class="schem-spec">
          <span class="schem-k">Glass</span><span class="schem-v">12 / 9</span>
          <span class="schem-k">Coating</span><span class="schem-v">Nano-V</span>
          <span class="schem-k">Weight</span><span class="schem-v">410g</span>
        </div>
      </div>
      <div class="schem-hot schem-hot-2"></div>
      <svg class="schem-leader schem-leader-2"><line x1="160" y1="80" x2="0" y2="0" stroke="#1c2330" stroke-width="1"/></svg>
      <div class="schem-note schem-note-2">
        <div class="schem-num">02</div>
        <div class="schem-label">— Shutter Dial</div>
        <div class="schem-part">Mechanical <em>command</em> dial</div>
        <div class="schem-desc">Detented brass with knurled edge. Range 1/8000s to 30s plus bulb. Locks with a quarter-press.</div>
        <div class="schem-spec">
          <span class="schem-k">Steps</span><span class="schem-v">1/3 EV</span>
          <span class="schem-k">Travel</span><span class="schem-v">300°</span>
          <span class="schem-k">Cycles</span><span class="schem-v">500k</span>
        </div>
      </div>
      <div class="schem-hot schem-hot-3"></div>
      <svg class="schem-leader schem-leader-3"><line x1="0" y1="120" x2="80" y2="0" stroke="#1c2330" stroke-width="1"/></svg>
      <div class="schem-note schem-note-3">
        <div class="schem-num">03</div>
        <div class="schem-label">— Accessory Port</div>
        <div class="schem-part">ISO 518 <em>hot shoe</em></div>
        <div class="schem-desc">Standard mount with X-sync at 1/250s. Center pin plus four data contacts for TTL flash control.</div>
        <div class="schem-spec">
          <span class="schem-k">Sync</span><span class="schem-v">1/250s</span>
          <span class="schem-k">Pins</span><span class="schem-v">1+4</span>
          <span class="schem-k">Hot</span><span class="schem-v">12V</span>
        </div>
      </div>
      <div class="schem-hot schem-hot-4"></div>
      <svg class="schem-leader schem-leader-4"><line x1="160" y1="0" x2="0" y2="80" stroke="#1c2330" stroke-width="1"/></svg>
      <div class="schem-note schem-note-4">
        <div class="schem-num">04</div>
        <div class="schem-label">— Hand Grip</div>
        <div class="schem-part">Magnesium <em>undergrip</em></div>
        <div class="schem-desc">Cast magnesium core wrapped in pressed cowhide. Conceals battery, card slot, and focus-recall trigger.</div>
        <div class="schem-spec">
          <span class="schem-k">Wrap</span><span class="schem-v">Cowhide</span>
          <span class="schem-k">Core</span><span class="schem-v">MgAl</span>
          <span class="schem-k">Battery</span><span class="schem-v">7.4 Wh</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.schem-stage-wrap {
  background: #f4f3ee;
  padding: 32px 24px;
  background-image:
    linear-gradient(rgba(28, 35, 48, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 35, 48, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1c2330;
  /* Force full width of the stage. .cf-stage uses align-items: center
     which collapses children to their content-min-width when they
     don't declare an explicit width. Without this, .schem-paper's
     width: 100% resolves against a collapsed parent and produces the
     tiny-square + content-overflow we saw. */
  width: 100%;
  box-sizing: border-box;
}
.schem-paper {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 10;
  background: #fbfaf6;
  border: 1px solid rgba(28, 35, 48, 0.2);
  overflow: visible;
}
.schem-paper::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(28, 35, 48, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 35, 48, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.schem-meta {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(28, 35, 48, 0.55);
  z-index: 2;
}
.schem-right { text-align: right; line-height: 1.6; }
.schem-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(28, 35, 48, 0.4);
}
.schem-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.schem-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.schem-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.schem-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.schem-object {
  position: absolute;
  inset: 50px 60px 50px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schem-svg { width: 100%; height: 100%; overflow: visible; }
.schem-hot {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px;
  border-radius: 50%;
  cursor: help;
  z-index: 5;
}
.schem-hot::before {
  content: '';
  position: absolute;
  inset: 5px;
  background: #c1422c;
  border-radius: 50%;
}
.schem-hot::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #c1422c;
  border-radius: 50%;
  animation: schem-pulse 2.4s ease-out infinite;
}
@keyframes schem-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2);   opacity: 0;   }
}
.schem-hot-1 { top: 56%; left: 56.25%; }
.schem-hot-2 { top: 25%; left: 32.5%; }
.schem-hot-3 { top: 30%; left: 47.5%; }
.schem-hot-4 { top: 56%; left: 22.5%; }
/* Leader lines hidden — they were stylish but only worked with the
   original off-paper annotation positions. Now that notes are clamped
   to the paper's four corners (so .cf-stage doesn't clip them), drawing
   a line from each hotspot to its corner would require per-hotspot
   trig that's not worth the complexity. Keeping the SVG markup in
   place so the adjacent-sibling selector chain
   (.schem-hot:hover + .schem-leader + .schem-note) still resolves. */
.schem-leader { display: none; }
.schem-note {
  position: absolute;
  width: 190px;
  background: #fbfaf6;
  border: 1px solid #1c2330;
  padding: 11px 13px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.6;
  color: #1c2330;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
  pointer-events: none;
  z-index: 10;
  box-shadow: 4px 4px 0 rgba(28, 35, 48, 0.08);
}
.schem-hot:hover + .schem-leader + .schem-note {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.12s;
}
/* Annotations positioned in each corner of the schematic object's
   coordinate space — kept inside the paper bounds so they don't get
   clipped by .cf-stage's overflow:hidden. Hotspot 1 (lens) lower-right,
   note in upper-right; hotspot 2 (top dial) upper-left, note upper-left;
   hotspot 3 (hot shoe) top-center, note top-right; hotspot 4 (grip)
   lower-left, note lower-left. */
.schem-note-1 { top: 4%;  right: 0; left: auto; }
.schem-note-2 { top: 4%;  left: 0; }
.schem-note-3 { top: 4%;  left: 50%; }
.schem-note-4 { bottom: 4%; left: 0; top: auto; }
.schem-num {
  display: inline-block;
  font-family: Georgia, serif;
  font-weight: 500;
  font-style: italic;
  color: #c1422c;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 3px;
}
.schem-label {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(28, 35, 48, 0.6);
  margin-bottom: 6px;
}
.schem-part {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 6px;
  color: #1c2330;
}
.schem-part em { font-style: italic; color: #c1422c; }
.schem-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  color: rgba(28, 35, 48, 0.75);
  line-height: 1.5;
}
.schem-spec {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(28, 35, 48, 0.3);
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 3px 8px;
  font-size: 9.5px;
}
.schem-k { color: rgba(28, 35, 48, 0.5); }
.schem-v { color: #c1422c; }
```

### 02. Keyboard Shortcut Hint

**Type:** Pure CSS
**Description:** A compact label-plus-keycap pill for productivity apps. Each tooltip wears its shortcut as little 3D keycaps that depress on a loop while the tooltip is shown — the closest pure-CSS can get to communicating "this is a real chord, try it." A 400ms delay keeps it out of the way on quick mouse passes.

**HTML:**
```html
<div class="kbd-stage">
  <div class="kbd-shell">
    <div class="kbd-titlebar">
      <span class="kbd-tdot"></span><span class="kbd-tdot"></span><span class="kbd-tdot"></span>
      <span class="kbd-ttitle">Untitled Document — Composer</span>
    </div>
    <div class="kbd-toolbar">
      <div class="kbd-group">
        <button class="kbd-btn" type="button" aria-label="Save">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          <span class="kbd-tip">
            <span class="kbd-tip-label">Save</span>
            <span class="kbd-tip-keys"><span class="kbd-key">⌘</span><span class="kbd-key">S</span></span>
          </span>
        </button>
        <button class="kbd-btn" type="button" aria-label="Undo">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
          <span class="kbd-tip">
            <span class="kbd-tip-label">Undo</span>
            <span class="kbd-tip-keys"><span class="kbd-key">⌘</span><span class="kbd-key">Z</span></span>
          </span>
        </button>
        <button class="kbd-btn" type="button" aria-label="Redo">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"/></svg>
          <span class="kbd-tip">
            <span class="kbd-tip-label">Redo</span>
            <span class="kbd-tip-keys"><span class="kbd-key">⌘</span><span class="kbd-key">⇧</span><span class="kbd-key">Z</span></span>
          </span>
        </button>
      </div>
      <div class="kbd-group">
        <button class="kbd-btn kbd-btn-active" type="button" aria-label="Bold">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>
          <span class="kbd-tip">
            <span class="kbd-tip-label">Bold</span>
            <span class="kbd-tip-keys"><span class="kbd-key">⌘</span><span class="kbd-key">B</span></span>
          </span>
        </button>
        <button class="kbd-btn" type="button" aria-label="Italic">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
          <span class="kbd-tip">
            <span class="kbd-tip-label">Italic</span>
            <span class="kbd-tip-keys"><span class="kbd-key">⌘</span><span class="kbd-key">I</span></span>
          </span>
        </button>
        <button class="kbd-btn" type="button" aria-label="Underline">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg>
          <span class="kbd-tip">
            <span class="kbd-tip-label">Underline</span>
            <span class="kbd-tip-keys"><span class="kbd-key">⌘</span><span class="kbd-key">U</span></span>
          </span>
        </button>
      </div>
      <div class="kbd-group">
        <button class="kbd-btn" type="button" aria-label="Align Left">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/></svg>
          <span class="kbd-tip kbd-tip-ext">
            <span class="kbd-tip-row">
              <span class="kbd-tip-label">Align Left</span>
              <span class="kbd-tip-keys"><span class="kbd-key">⌘</span><span class="kbd-key">⇧</span><span class="kbd-key">L</span></span>
            </span>
            <span class="kbd-tip-desc">Aligns the current paragraph to the left edge of the column.</span>
          </span>
        </button>
        <button class="kbd-btn" type="button" aria-label="Settings">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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-2.83 2.83l-.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-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 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.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 1.82.33H9a1.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-.33 1.82V9a1.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 class="kbd-tip">
            <span class="kbd-tip-label">Settings</span>
            <span class="kbd-tip-keys"><span class="kbd-key">⌘</span><span class="kbd-key">,</span></span>
          </span>
        </button>
      </div>
    </div>
    <div class="kbd-content">
      <h3 class="kbd-h">The cursor as a finger.</h3>
      <p class="kbd-p">Hover any toolbar button to see its keycap; the keys depress on a loop, the way a real chord would feel if you held the gesture <em>just</em> long enough to second-guess it.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.kbd-stage {
  background: #f5f5f3;
  /* Top room for the small keycap tooltips popping up from each
     toolbar button. ~130px is enough since these tips are compact. */
  padding: 130px 28px 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a1a1a;
}
.kbd-shell {
  width: 100%;
  max-width: 600px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.15);
}
.kbd-titlebar {
  height: 34px;
  background: #fafaf8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 7px;
  border-radius: 10px 10px 0 0;
}
.kbd-tdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e2e2de;
}
.kbd-ttitle {
  flex: 1;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}
.kbd-toolbar {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: 4px;
  overflow: visible;
  flex-wrap: wrap;
}
.kbd-group {
  display: flex;
  gap: 2px;
  padding: 0 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.kbd-group:last-child { border-right: none; }
.kbd-btn {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: #444;
  transition: background 0.15s, color 0.15s;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 0;
}
.kbd-btn:hover { background: #f0f0ec; color: #111; }
.kbd-btn-active { background: #e8e8e4; color: #111; }
.kbd-btn svg { width: 17px; height: 17px; }
.kbd-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a1a1a;
  color: #fff;
  padding: 7px 10px;
  border-radius: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.2s;
  z-index: 50;
  pointer-events: none;
  box-shadow:
    0 6px 18px -4px rgba(0, 0, 0, 0.3),
    0 2px 6px -2px rgba(0, 0, 0, 0.2);
}
.kbd-btn:hover .kbd-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.4s, 0.4s, 0s;
}
.kbd-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 7px; height: 7px;
  background: #1a1a1a;
}
.kbd-tip-label { font-weight: 500; letter-spacing: 0.01em; }
.kbd-tip-keys { display: flex; gap: 3px; }
.kbd-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: linear-gradient(180deg, #3d3d3d 0%, #2a2a2a 100%);
  border: 1px solid #4a4a4a;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #f5f5f3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.1s, border-bottom-width 0.1s, box-shadow 0.1s;
}
.kbd-btn:hover .kbd-key {
  animation: kbd-press 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.kbd-btn:hover .kbd-key:nth-child(2) { animation-delay: 0.1s; }
.kbd-btn:hover .kbd-key:nth-child(3) { animation-delay: 0.2s; }
@keyframes kbd-press {
  0%, 50%, 100% { transform: translateY(0); border-bottom-width: 2px; }
  25% { transform: translateY(1px); border-bottom-width: 1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
}
.kbd-tip-ext {
  padding: 10px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  white-space: normal;
  width: 200px;
  text-align: left;
}
.kbd-tip-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kbd-tip-desc {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}
.kbd-content {
  padding: 28px 36px 36px;
  font-family: 'Inter', system-ui, sans-serif;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  line-height: 1.7;
}
.kbd-h {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  color: #111;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.kbd-p { max-width: 480px; margin: 0; }
.kbd-p em {
  color: #2d6a4f;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 500;
}
```

### 03. IDE Function Hover

**Type:** Pure CSS
**Description:** A typed-signature documentation popover for code editors. Hover the underlined function call to reveal a stacked card — badge, namespace path, signature, prose description, parameter rows, and a docs-shortcut footer — the kind of tooltip every IDE wishes it shipped by default.

**HTML:**
```html
<div class="ide-stage">
  <div class="ide-editor">
    <div class="ide-tabs">
      <span class="ide-dot"></span><span class="ide-dot"></span><span class="ide-dot"></span>
      <span class="ide-tab">orchestrator.ts</span>
    </div>
    <div class="ide-body">
      <div class="ide-gutter">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
        <div>6</div><div>7</div><div>8</div>
      </div>
      <div class="ide-code">
        <div class="ide-line"><span class="ide-cmt">// pipeline assembled at boot</span></div>
        <div class="ide-line"><span class="ide-kw">import</span> { <span class="ide-fn">createScheduler</span> } <span class="ide-kw">from</span> <span class="ide-str">"./scheduler"</span>;</div>
        <div class="ide-line">&nbsp;</div>
        <div class="ide-line"><span class="ide-kw">const</span> <span class="ide-var">queue</span> = <span class="ide-symbol"><span class="ide-fn">createScheduler</span><span class="ide-tip">
          <span class="ide-tip-head">
            <span class="ide-tip-badge">FUNCTION</span>
            <span class="ide-tip-path"><span>core</span><span class="ide-sep">›</span><span>scheduler</span><span class="ide-sep">›</span><span>createScheduler</span></span>
          </span>
          <span class="ide-tip-sig"><span class="ide-kw">function</span> <span class="ide-fn">createScheduler</span>&lt;<span class="ide-var">T</span>&gt;(<br>&nbsp;&nbsp;<span class="ide-param">opts</span>: <span class="ide-var">SchedulerOptions</span>&lt;<span class="ide-var">T</span>&gt;<br>): <span class="ide-var">Queue</span>&lt;<span class="ide-var">T</span>&gt;</span>
          <span class="ide-tip-desc">Creates a back-pressured task queue with concurrency control. Items are processed in <code class="ide-tip-code">FIFO</code> order; failing jobs surface to the dead-letter sink.</span>
          <span class="ide-tip-params">
            <span class="ide-tip-param-row"><span class="ide-pname">concurrency</span><span class="ide-pdesc">Max parallel jobs. Default <code class="ide-tip-code">4</code>.</span></span>
            <span class="ide-tip-param-row"><span class="ide-pname">retries</span><span class="ide-pdesc">Per-task retry budget. Default <code class="ide-tip-code">3</code>.</span></span>
            <span class="ide-tip-param-row"><span class="ide-pname">onDrain</span><span class="ide-pdesc">Fires once when the queue empties.</span></span>
          </span>
          <span class="ide-tip-foot">
            <span>scheduler.ts · L42</span>
            <span><span class="ide-kbd-key">⌘</span><span class="ide-kbd-key">K</span> for docs</span>
          </span>
        </span></span>({</div>
        <div class="ide-line">&nbsp;&nbsp;<span class="ide-param">concurrency</span>: <span class="ide-num">8</span>,</div>
        <div class="ide-line">&nbsp;&nbsp;<span class="ide-param">retries</span>: <span class="ide-num">3</span>,</div>
        <div class="ide-line">});</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
/* No @import here. Demos use Inter + JetBrains Mono (from
   BaseLayout) and Georgia / cursive system fallbacks for the rest.
   See top-of-file Fonts comment for the why. */

.ide-stage {
  background: #0d1117;
  /* Top padding sized so the tooltip (~280px tall, pops up from the
     symbol) fully renders inside the gallery card. Without this the
     card's overflow:hidden clips the top of the tip. The bottom needs
     less room since the editor is anchored to flex-start. */
  padding: 300px 28px 48px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ide-editor {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  width: 100%;
  max-width: 560px;
  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.7);
}
.ide-tabs {
  background: #0d1117;
  border-bottom: 1px solid #30363d;
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 32px;
  gap: 4px;
  border-radius: 8px 8px 0 0;
}
.ide-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #30363d;
}
.ide-dot:nth-child(1) { background: #ff5f57; }
.ide-dot:nth-child(2) { background: #febc2e; }
.ide-dot:nth-child(3) { background: #28c840; }
.ide-tab {
  margin-left: 18px;
  padding: 5px 12px;
  background: #161b22;
  border-radius: 6px 6px 0 0;
  font-size: 11px;
  color: #c9d1d9;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ide-tab::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: #58a6ff;
}
.ide-body {
  padding: 18px 0;
  font-size: 13px;
  /* Use a pixel line-height so the gutter and code columns advance at
     the same rate — em-based line-height (1.85) combined with two
     different font-sizes drifted them apart by ~2px per row and the
     gutter numbers no longer matched their code lines. */
  line-height: 22px;
  display: flex;
  color: #c9d1d9;
}
.ide-gutter {
  width: 44px;
  text-align: right;
  padding-right: 12px;
  color: #484f58;
  user-select: none;
  border-right: 1px solid #21262d;
  /* Same font-size as the code column so digits ride the 22px baseline
     in step with the code. */
  font-size: 13px;
}
.ide-code { padding: 0 16px; flex: 1; min-width: 0; }
/* No white-space: pre on .ide-line. The line uses &nbsp; for visible
   indentation, which works under white-space: normal. Setting pre
   would honor the source newlines between sibling spans (especially
   inside the .ide-symbol that nests the multi-line tooltip markup),
   breaking each token onto its own visual row in the try-it iframe. */
.ide-line {}
.ide-kw    { color: #ff7b72; }
.ide-fn    { color: #d2a8ff; }
.ide-str   { color: #a5d6ff; }
.ide-num   { color: #79c0ff; }
.ide-cmt   { color: #8b949e; font-style: italic; }
.ide-var   { color: #79c0ff; }
.ide-param { color: #ffa657; }

.ide-symbol {
  position: relative;
  cursor: help;
  /* Visible-at-rest affordance: a dashed blue underline tells users
     "this token has a hover" without needing them to land on it first.
     The original (transparent until hover) was a discovery failure —
     users had no signal the demo had a hover tooltip at all. */
  border-bottom: 1px dashed rgba(88, 166, 255, 0.55);
  transition: border-color 0.2s, background 0.2s;
  border-radius: 2px;
  padding: 0 2px;
}
.ide-symbol::after {
  /* Small info dot to the right of the symbol — second discovery cue
     in case the underline gets lost in syntax highlighting. */
  content: 'ⓘ';
  display: inline-block;
  font-size: 9px;
  color: rgba(88, 166, 255, 0.6);
  vertical-align: middle;
  margin-left: 3px;
  transition: color 0.2s;
}
.ide-symbol:hover {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.08);
}
.ide-symbol:hover::after {
  color: #58a6ff;
}

.ide-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: -20px;
  width: 380px;
  background: linear-gradient(180deg, #1c2128 0%, #161b22 100%);
  border: 1px solid #30363d;
  border-radius: 6px;
  box-shadow:
    0 18px 50px -8px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(88, 166, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.22s;
  z-index: 10;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  pointer-events: none;
  display: block;
  /* Reset two properties the tip inherits from the .ide-line ancestor:
     white-space: pre (which would render the source newlines between
     spans as visible whitespace inside the tip) and line-height: 1.85
     (the editor's loose line-height — fine for code, way too tall
     inside the tooltip's prose). */
  white-space: normal;
  line-height: 1.5;
  text-align: left;
}
.ide-symbol:hover .ide-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.ide-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 32px;
  width: 10px; height: 10px;
  background: #161b22;
  border-right: 1px solid #30363d;
  border-bottom: 1px solid #30363d;
  transform: translateY(-50%) rotate(45deg);
}
.ide-tip-head {
  padding: 10px 14px 9px;
  border-bottom: 1px solid #21262d;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.ide-tip-badge {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.ide-tip-path { color: #8b949e; font-size: 11px; }
.ide-sep { color: #484f58; margin: 0 4px; }
.ide-tip-sig {
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
  border-bottom: 1px solid #21262d;
  display: block;
  /* Re-enable pre here so the multi-line function signature keeps its
     indent. The outer .ide-tip reset this to normal so the prose
     blocks (description, params, footer) don't render the source-
     formatting whitespace between sibling spans. */
  white-space: pre;
}
.ide-tip-desc {
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.65;
  color: #c9d1d9;
  border-bottom: 1px solid #21262d;
  display: block;
}
.ide-tip-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(110, 118, 129, 0.2);
  color: #ffa657;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.ide-tip-params {
  padding: 10px 14px;
  border-bottom: 1px solid #21262d;
  display: block;
}
.ide-tip-param-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  font-size: 11.5px;
  padding: 3px 0;
  line-height: 1.5;
}
.ide-pname { color: #ffa657; }
.ide-pdesc { color: #8b949e; font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; }
.ide-tip-foot {
  padding: 9px 14px;
  font-size: 10px;
  color: #6e7681;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ide-kbd-key {
  background: #21262d;
  border: 1px solid #30363d;
  border-bottom-width: 2px;
  color: #c9d1d9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin: 0 2px;
  display: inline-block;
}
```

### 04. Editorial Footnote

**Type:** Pure CSS
**Description:** A sidenote for longform reading. The source word grows an underline on hover; a paper-card with a deckle clip-path drops down on a hairline tether, holds the body of the note in italic Garamond, and closes with a small all-caps citation. Made for essays, not interfaces.

**HTML:**
```html
<div class="edn-stage">
  <article class="edn-essay">
    <div class="edn-byline">
      <span>An essay · No. XII</span>
      <span>14 May 2026</span>
    </div>
    <p>
      <span class="edn-dropcap">T</span>he interface is a place where reading becomes touch. We rarely talk about the cursor as a finger, but it is — it brushes against language, and language flinches back. A tooltip is what happens when a word
      <span class="edn-anchor">decides to answer<span class="edn-sup">1</span><span class="edn-tip">
        <span class="edn-tip-num">1.</span>
        <span class="edn-tip-body">The phrase belongs to Robin Sloan, who described hover states as "the part of the web that whispers back." Most of us, of course, have settled for the part that mumbles.</span>
        <span class="edn-tip-cite">— Sloan, 2019, p. 84</span>
      </span></span>. Once it could only do so in gray boxes, a meek municipal voice; now it can do almost anything, and so the question is no longer whether it speaks but what register it speaks in.
    </p>
    <p>
      Consider the
      <span class="edn-anchor">marginalia of medieval readers<span class="edn-sup">2</span><span class="edn-tip">
        <span class="edn-tip-num">2.</span>
        <span class="edn-tip-body">In the manuscript tradition, glosses were often longer than the texts they served. The Vulgate, the Talmud, the Glossa Ordinaria — these are pages where the footnote ate the page and called it home.</span>
        <span class="edn-tip-cite">— de Hamel, 2016, ch. 4</span>
      </span></span>, who wrote louder than the books they read. Their pages were tooltips made of ink, hovering forever — annotations that became canon because the original was lonely without them.
    </p>
  </article>
</div>
```

**CSS:**
```css
.edn-stage {
  background: #f3eee3;
  /* Generous bottom room — footnote tips drop down from each anchor. */
  padding: 40px 40px 220px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.edn-stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: 0.5;
}
.edn-essay {
  max-width: 560px;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  color: #2a1f17;
  position: relative;
  z-index: 1;
}
.edn-byline {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8a2c1c;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(138, 44, 28, 0.3);
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
}
.edn-essay p {
  margin-bottom: 18px;
  text-align: justify;
  hyphens: auto;
}
.edn-dropcap {
  float: left;
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 76px;
  line-height: 0.85;
  margin: 4px 10px 0 0;
  color: #8a2c1c;
}
.edn-anchor {
  position: relative;
  display: inline;
  color: #8a2c1c;
  cursor: help;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 500;
  background-image: linear-gradient(to right, #8a2c1c 0%, #8a2c1c 100%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  padding-bottom: 2px;
}
.edn-anchor:hover { background-size: 100% 1px; }
.edn-sup {
  font-size: 0.65em;
  vertical-align: super;
  color: #8a2c1c;
  font-weight: 600;
  margin-left: 1px;
}
.edn-tip {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, -8px) rotate(-0.4deg);
  width: 300px;
  background: #faf5ea;
  color: #2a1f17;
  padding: 16px 20px 18px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 10px 26px -6px rgba(75, 40, 20, 0.25),
    0 2px 5px -1px rgba(75, 40, 20, 0.15);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.3s;
  z-index: 20;
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.55;
  pointer-events: none;
  text-align: left;
  display: block;
  clip-path: polygon(
    0% 4%, 2% 1%, 6% 3%, 12% 0%, 22% 2%, 35% 0%, 48% 2%, 62% 0%,
    78% 2%, 90% 0%, 96% 3%, 100% 1%,
    100% 96%, 98% 99%, 90% 97%, 78% 100%, 60% 98%, 42% 100%, 24% 98%,
    10% 100%, 4% 97%, 0% 99%
  );
}
.edn-anchor:hover .edn-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) rotate(-0.4deg);
  transition-delay: 0s;
}
.edn-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 14px;
  background: #8a2c1c;
  opacity: 0.4;
}
.edn-tip-num {
  display: inline-block;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #8a2c1c;
  font-size: 20px;
  line-height: 1;
  margin-right: 6px;
  vertical-align: -2px;
}
.edn-tip-body {
  font-style: italic;
  display: inline;
}
.edn-tip-cite {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dotted rgba(138, 44, 28, 0.4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a2c1c;
  font-style: normal;
}
```

### 05. Profile Card

**Type:** Pure CSS
**Description:** A rich hover-card for mentions, comments, and team rosters. Internal elements stagger in: hero glow, then portrait, then name and tagline, then stats — so the card unfolds rather than flicking on. Hover any avatar in the roster below.

**HTML:**
```html
<div class="pc-stage">
  <div class="pc-roster">
    <div class="pc-head">
      <span>Editorial Team · Vol XII</span>
      <span>3 active</span>
    </div>
    <div class="pc-row">
      <div class="pc-avatar-trigger">
        <svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="pc-av1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#c1422c"/><stop offset="1" stop-color="#7a2415"/></linearGradient></defs>
          <rect width="100" height="100" fill="url(#pc-av1)"/>
          <text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">M</text>
        </svg>
      </div>
      <div class="pc-id">
        <div class="pc-name-row">Mira <em>Vance</em></div>
        <div class="pc-handle">@miravance</div>
      </div>
      <div class="pc-role">Editor-in-Chief</div>
      <div class="pc-status"></div>
      <div class="pc-card">
        <div class="pc-stagger">
          <div class="pc-hero"></div>
          <div class="pc-body">
            <div class="pc-photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av1)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">M</text></svg>
            </div>
            <div class="pc-display-name">Mira <em>Vance</em></div>
            <div class="pc-tagline">"Words first; everything else negotiated after."</div>
            <div class="pc-stats">
              <div><div class="pc-stat-num">142</div><div class="pc-stat-label">essays</div></div>
              <div><div class="pc-stat-num">8.4k</div><div class="pc-stat-label">readers</div></div>
              <div><div class="pc-stat-num">VII</div><div class="pc-stat-label">volumes</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pc-row">
      <div class="pc-avatar-trigger">
        <svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="pc-av2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2d4a3e"/><stop offset="1" stop-color="#0d1f17"/></linearGradient></defs>
          <rect width="100" height="100" fill="url(#pc-av2)"/>
          <text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">A</text>
        </svg>
      </div>
      <div class="pc-id">
        <div class="pc-name-row">Adesh <em>Kothari</em></div>
        <div class="pc-handle">@adesh.k</div>
      </div>
      <div class="pc-role">Design Director</div>
      <div class="pc-status pc-status-away"></div>
      <div class="pc-card">
        <div class="pc-stagger">
          <div class="pc-hero pc-hero-green"></div>
          <div class="pc-body">
            <div class="pc-photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av2)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">A</text></svg>
            </div>
            <div class="pc-display-name">Adesh <em>Kothari</em></div>
            <div class="pc-tagline">"Restraint is also a flourish, if you commit to it."</div>
            <div class="pc-stats">
              <div><div class="pc-stat-num">96</div><div class="pc-stat-label">covers</div></div>
              <div><div class="pc-stat-num">12</div><div class="pc-stat-label">awards</div></div>
              <div><div class="pc-stat-num">04</div><div class="pc-stat-label">books</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pc-row">
      <div class="pc-avatar-trigger">
        <svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
          <defs><linearGradient id="pc-av3" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#6b4226"/><stop offset="1" stop-color="#2a1810"/></linearGradient></defs>
          <rect width="100" height="100" fill="url(#pc-av3)"/>
          <text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">J</text>
        </svg>
      </div>
      <div class="pc-id">
        <div class="pc-name-row">June <em>Lacroix</em></div>
        <div class="pc-handle">@junelacroix</div>
      </div>
      <div class="pc-role">Photo Editor</div>
      <div class="pc-status"></div>
      <div class="pc-card">
        <div class="pc-stagger">
          <div class="pc-hero pc-hero-amber"></div>
          <div class="pc-body">
            <div class="pc-photo">
              <svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av3)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">J</text></svg>
            </div>
            <div class="pc-display-name">June <em>Lacroix</em></div>
            <div class="pc-tagline">"A photograph is the slowest sentence a magazine can run."</div>
            <div class="pc-stats">
              <div><div class="pc-stat-num">311</div><div class="pc-stat-label">shoots</div></div>
              <div><div class="pc-stat-num">28</div><div class="pc-stat-label">cities</div></div>
              <div><div class="pc-stat-num">VI</div><div class="pc-stat-label">years</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.pc-stage {
  background: #14110d;
  /* Generous bottom room — profile cards drop down from roster rows
     and are ~360px tall, so the gallery card needs room below the
     visible roster for them to render in full. */
  padding: 36px 28px 400px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
}
.pc-roster {
  width: 100%;
  max-width: 560px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}
.pc-head {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 236, 230, 0.5);
}
.pc-row {
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  color: #efece6;
}
.pc-row:last-child { border-bottom: none; }
.pc-row:hover { background: rgba(255, 255, 255, 0.025); }
.pc-avatar-trigger {
  width: 36px; height: 36px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-avatar-trigger:hover { transform: scale(1.08); }
.pc-avatar-svg {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block;
}
.pc-name-row {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}
.pc-name-row em { font-style: italic; color: #f7d18e; font-weight: 300; }
.pc-handle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgba(239, 236, 230, 0.4);
  margin-top: 2px;
}
.pc-role {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(239, 236, 230, 0.5);
}
.pc-status {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6fcf97;
  box-shadow: 0 0 8px rgba(111, 207, 151, 0.6);
}
.pc-status-away { background: #f7d18e; box-shadow: 0 0 8px rgba(247, 209, 142, 0.6); }
.pc-card {
  position: absolute;
  top: calc(100% + 12px);
  left: 20px;
  width: 320px;
  background: linear-gradient(180deg, #1f1a14 0%, #14110d 100%);
  border: 1px solid rgba(247, 209, 142, 0.15);
  border-radius: 2px;
  box-shadow:
    0 25px 60px -16px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(247, 209, 142, 0.05),
    inset 0 1px 0 rgba(247, 209, 142, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.3s;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.pc-row:hover .pc-card,
.pc-avatar-trigger:hover .pc-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.pc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f7d18e, transparent);
  opacity: 0.5;
}
.pc-hero {
  height: 76px;
  background:
    radial-gradient(circle at 30% 60%, rgba(193, 66, 44, 0.4), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.3), transparent 50%),
    linear-gradient(135deg, #2a201a 0%, #14110d 100%);
  position: relative;
  overflow: hidden;
}
.pc-hero-green {
  background:
    radial-gradient(circle at 30% 60%, rgba(45, 74, 62, 0.5), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.3), transparent 50%),
    linear-gradient(135deg, #1a2a23 0%, #14110d 100%);
}
.pc-hero-amber {
  background:
    radial-gradient(circle at 30% 60%, rgba(107, 66, 38, 0.5), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.25), transparent 50%),
    linear-gradient(135deg, #2a201a 0%, #14110d 100%);
}
.pc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(247, 209, 142, 0.04) 6px, rgba(247, 209, 142, 0.04) 7px);
}
.pc-body { padding: 0 18px 16px; position: relative; }
.pc-photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin-top: -28px;
  border: 2px solid #14110d;
  box-shadow: 0 0 0 1px rgba(247, 209, 142, 0.3);
  position: relative;
  overflow: hidden;
  background: #2a201a;
}
.pc-display-name {
  margin-top: 12px;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: #efece6;
}
.pc-display-name em { font-style: italic; color: #f7d18e; font-weight: 300; }
.pc-tagline {
  margin-top: 6px;
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  color: rgba(239, 236, 230, 0.65);
  line-height: 1.4;
}
.pc-stats {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pc-stat-num {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: #f7d18e;
}
.pc-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(239, 236, 230, 0.4);
  margin-top: 2px;
}
.pc-stagger > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-row:hover .pc-stagger > *,
.pc-avatar-trigger:hover .pc-stagger > * {
  opacity: 1;
  transform: translateY(0);
}
.pc-row:hover .pc-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.pc-row:hover .pc-stagger > *:nth-child(2) { transition-delay: 0.18s; }
```

### 06. Inventory Tooltip

**Type:** Pure CSS
**Description:** A rarity-tinted tooltip for games, achievements, and collectibles. Each rarity tier (common → legendary) glows its own color through the border, the stat list, and the pulsing outline. Italic flavor text closes every card the way a good item description should.

**HTML:**
```html
<div class="rpg-stage">
  <div class="rpg-inv">
    <div class="rpg-slot rpg-r-legend">
      <svg class="rpg-icon" viewBox="0 0 64 64" aria-hidden="true">
        <defs><linearGradient id="rpg-g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fde68a"/><stop offset="1" stop-color="#b45309"/></linearGradient></defs>
        <path d="M32 4 L36 22 L52 14 L42 32 L60 36 L42 40 L52 58 L36 50 L32 60 L28 50 L12 58 L22 40 L4 36 L22 32 L12 14 L28 22 Z" fill="url(#rpg-g1)" stroke="#fde68a" stroke-width="0.5"/>
        <circle cx="32" cy="36" r="6" fill="#fffbeb"/>
      </svg>
      <div class="rpg-tip">
        <div class="rpg-tip-name">Sunburst Talisman</div>
        <div class="rpg-tip-type">Legendary · Amulet</div>
        <div class="rpg-tip-stat"><span>Spell Power</span><span class="rpg-v">+84</span></div>
        <div class="rpg-tip-stat"><span>Critical Strike</span><span class="rpg-v">+12%</span></div>
        <div class="rpg-tip-stat"><span>Movement</span><span class="rpg-v rpg-neg">−4%</span></div>
        <div class="rpg-tip-bar">Awakened · 7/10
          <div class="rpg-tip-bar-track"><div class="rpg-tip-bar-fill" style="width:70%"></div></div>
        </div>
        <div class="rpg-tip-divider"></div>
        <div class="rpg-tip-flavor">"It does not warm — it only insists that warmth was once here."</div>
        <div class="rpg-tip-foot"><span>BOUND</span><span>vendor: 2,400g</span></div>
      </div>
    </div>

    <div class="rpg-slot rpg-r-epic">
      <svg class="rpg-icon" viewBox="0 0 64 64" aria-hidden="true">
        <defs><linearGradient id="rpg-g2" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#e9d5ff"/><stop offset="1" stop-color="#6b21a8"/></linearGradient></defs>
        <path d="M32 6 L42 24 L52 32 L42 40 L32 58 L22 40 L12 32 L22 24 Z" fill="url(#rpg-g2)" stroke="#e9d5ff" stroke-width="0.6"/>
        <path d="M32 14 L36 28 L32 36 L28 28 Z" fill="#1a0a25"/>
      </svg>
      <div class="rpg-tip">
        <div class="rpg-tip-name">Voidshard Pendant</div>
        <div class="rpg-tip-type">Epic · Pendant</div>
        <div class="rpg-tip-stat"><span>Intellect</span><span class="rpg-v">+62</span></div>
        <div class="rpg-tip-stat"><span>Shadow Mastery</span><span class="rpg-v">+9%</span></div>
        <div class="rpg-tip-bar">Charged · 3/5
          <div class="rpg-tip-bar-track"><div class="rpg-tip-bar-fill" style="width:60%"></div></div>
        </div>
        <div class="rpg-tip-divider"></div>
        <div class="rpg-tip-flavor">"Cool to the touch. Then colder. Then it whispers your name in a voice that almost is."</div>
        <div class="rpg-tip-foot"><span>SOULBOUND</span><span>vendor: 1,150g</span></div>
      </div>
    </div>

    <div class="rpg-slot rpg-r-rare">
      <svg class="rpg-icon" viewBox="0 0 64 64" aria-hidden="true">
        <defs><linearGradient id="rpg-g3" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#93c5fd"/><stop offset="1" stop-color="#1e40af"/></linearGradient></defs>
        <path d="M32 4 L36 20 L52 28 L36 32 L32 60 L28 32 L12 28 L28 20 Z" fill="url(#rpg-g3)" stroke="#dbeafe" stroke-width="0.5"/>
      </svg>
      <div class="rpg-tip">
        <div class="rpg-tip-name">Ranger's Compass</div>
        <div class="rpg-tip-type">Rare · Trinket</div>
        <div class="rpg-tip-stat"><span>Agility</span><span class="rpg-v">+34</span></div>
        <div class="rpg-tip-stat"><span>Stealth</span><span class="rpg-v">+7%</span></div>
        <div class="rpg-tip-divider"></div>
        <div class="rpg-tip-flavor">"True north is whichever direction the deer have not yet noticed you."</div>
        <div class="rpg-tip-foot"><span>UNIQUE</span><span>vendor: 480g</span></div>
      </div>
    </div>

    <div class="rpg-slot rpg-r-uncommon">
      <svg class="rpg-icon" viewBox="0 0 64 64" aria-hidden="true">
        <defs><linearGradient id="rpg-g4" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#bef264"/><stop offset="1" stop-color="#3f6212"/></linearGradient></defs>
        <ellipse cx="32" cy="36" rx="20" ry="22" fill="url(#rpg-g4)" stroke="#ecfccb" stroke-width="0.5"/>
        <path d="M32 14 Q28 24 32 36" stroke="#1a2e0a" stroke-width="2" fill="none"/>
      </svg>
      <div class="rpg-tip">
        <div class="rpg-tip-name">Verdant Tonic</div>
        <div class="rpg-tip-type">Uncommon · Consumable</div>
        <div class="rpg-tip-stat"><span>Restores</span><span class="rpg-v">+1,200 HP</span></div>
        <div class="rpg-tip-stat"><span>Over</span><span class="rpg-v">8 sec</span></div>
        <div class="rpg-tip-divider"></div>
        <div class="rpg-tip-flavor">"Tastes like the smell of a greenhouse in winter."</div>
        <div class="rpg-tip-foot"><span>STACK · 14</span><span>vendor: 24g</span></div>
      </div>
    </div>

    <div class="rpg-slot rpg-r-common">
      <svg class="rpg-icon" viewBox="0 0 64 64" aria-hidden="true">
        <path d="M22 18 L42 18 L46 26 L46 46 L18 46 L18 26 Z" fill="#9ca3af" stroke="#e5e7eb" stroke-width="0.5"/>
        <rect x="28" y="26" width="8" height="20" fill="#4b5563"/>
      </svg>
      <div class="rpg-tip">
        <div class="rpg-tip-name">Iron Lockbox</div>
        <div class="rpg-tip-type">Common · Container</div>
        <div class="rpg-tip-stat"><span>Slots</span><span class="rpg-v">+6</span></div>
        <div class="rpg-tip-divider"></div>
        <div class="rpg-tip-flavor">"Heavy enough to be honest about what it contains."</div>
        <div class="rpg-tip-foot"><span>STACK · 1</span><span>vendor: 8g</span></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.rpg-stage {
  background: radial-gradient(ellipse at top, #1a1410 0%, #0a0806 100%);
  /* Generous top room — rpg tooltips pop UP from each slot, ~300px
     tall. The inventory grid sits low so the tip has room above. */
  padding: 320px 28px 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rpg-inv {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 520px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(212, 175, 55, 0.08),
    inset 0 1px 0 rgba(212, 175, 55, 0.1);
  position: relative;
}
.rpg-inv::before {
  content: 'INVENTORY';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #d4af37;
  background: #1a1410;
  padding: 0 14px;
}
.rpg-slot {
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.4));
  border: 1px solid rgba(212, 175, 55, 0.15);
  position: relative;
  cursor: pointer;
  transition: transform 0.25s, border-color 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rpg-slot:hover {
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-2px);
}
.rpg-icon {
  width: 60%; height: 60%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.rpg-slot::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 10px 10px;
  border-color: transparent;
}
.rpg-r-common   { --rpg-color: #b8b8b8; --rpg-glow: rgba(180, 180, 180, 0.15); }
.rpg-r-uncommon { --rpg-color: #4ade80; --rpg-glow: rgba(74, 222, 128, 0.20); }
.rpg-r-rare     { --rpg-color: #60a5fa; --rpg-glow: rgba(96, 165, 250, 0.25); }
.rpg-r-epic     { --rpg-color: #c084fc; --rpg-glow: rgba(192, 132, 252, 0.30); }
.rpg-r-legend   { --rpg-color: #fbbf24; --rpg-glow: rgba(251, 191, 36, 0.35); }
.rpg-r-common::after   { border-bottom-color: #aaa; }
.rpg-r-uncommon::after { border-bottom-color: #4caf50; }
.rpg-r-rare::after     { border-bottom-color: #5cb3ff; }
.rpg-r-epic::after     { border-bottom-color: #b366f2; }
.rpg-r-legend::after   { border-bottom-color: #ffb83d; }
.rpg-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.95);
  width: 240px;
  background: linear-gradient(180deg, #1a1410 0%, #0e0a07 100%);
  border: 1px solid var(--rpg-color, #888);
  padding: 12px 13px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #d4c5a9;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0.2s;
  z-index: 30;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 26px var(--rpg-glow, rgba(255, 255, 255, 0.1)),
    0 18px 36px -10px rgba(0, 0, 0, 0.8);
  text-align: left;
}
.rpg-slot:hover .rpg-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0s;
}
.rpg-tip::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--rpg-color, #888);
  opacity: 0.3;
  pointer-events: none;
  animation: rpg-glow 2s ease-in-out infinite;
}
@keyframes rpg-glow {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.5; }
}
.rpg-tip-name {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--rpg-color, #fff);
  line-height: 1.2;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.rpg-tip-type {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(212, 197, 169, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}
.rpg-tip-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 3px 0;
  color: #d4c5a9;
}
.rpg-v { color: #6fd09b; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; }
.rpg-neg { color: #f06b5c; }
.rpg-tip-bar {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 9.5px;
  color: rgba(212, 197, 169, 0.5);
}
.rpg-tip-bar-track {
  margin-top: 3px;
  height: 4px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 197, 169, 0.15);
  position: relative;
}
.rpg-tip-bar-fill {
  height: 100%;
  background: var(--rpg-color, #888);
}
.rpg-tip-divider {
  margin: 10px 0 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 197, 169, 0.2), transparent);
}
.rpg-tip-flavor {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(212, 197, 169, 0.75);
  line-height: 1.4;
}
.rpg-tip-foot {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 197, 169, 0.15);
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: rgba(212, 197, 169, 0.5);
}
```

### 07. Glossary Word Card

**Type:** Pure CSS
**Description:** Dotted-underlined words in a paragraph that pop out a rich dictionary card on hover — part-of-speech tag, headword, IPA pronunciation, etymology, italic definition, usage quotation, and a row of synonym pills. Built for longform articles, language-learning sites, encyclopedias.

**HTML:**
```html
<div class="gloss-stage">
  <div class="gloss-inner">
    <p class="gloss-text">
      There is a word for the smell of rain on dry earth —
      <span class="gloss-t">
        <span class="gloss-word">petrichor</span>
        <span class="gloss-tip">
          <span class="gloss-top">
            <span class="gloss-pos">noun · meteorology</span>
            <span class="gloss-head">petrichor</span>
            <span class="gloss-ipa">/ˈpɛtrɪkɔːr/</span>
          </span>
          <span class="gloss-origin"><strong>Origin:</strong> Greek <em>petra</em> (stone) + <em>ichor</em> (the ethereal fluid said to flow through the veins of gods). Coined 1964 by Bear &amp; Thomas.</span>
          <span class="gloss-def">The pleasant, earthy scent that arises when rain falls on dry soil, produced by geosmin released from actinobacteria.</span>
          <span class="gloss-ex">
            <span class="gloss-ex-label">In use</span>
            <span class="gloss-ex-quote">"The petrichor that rose from the cracked earth was the first sign that the long drought had broken."</span>
          </span>
          <span class="gloss-syn">
            <span class="gloss-syn-pill">geosmin</span>
            <span class="gloss-syn-pill">earthy scent</span>
            <span class="gloss-syn-pill">rain smell</span>
          </span>
        </span>
      </span>
      — a sensation so specific it once had no name. Equally unnamed was
      <span class="gloss-t">
        <span class="gloss-word">sonder</span>
        <span class="gloss-tip">
          <span class="gloss-top">
            <span class="gloss-pos">noun · neologism</span>
            <span class="gloss-head">sonder</span>
            <span class="gloss-ipa">/ˈsɒndər/</span>
          </span>
          <span class="gloss-origin"><strong>Origin:</strong> Coined by John Koenig in <em>The Dictionary of Obscure Sorrows</em> (2012). Likely influenced by French <em>sonder</em> (to probe, to fathom).</span>
          <span class="gloss-def">The sudden realization that every passerby is living a life as vivid and complex as one's own — filled with ambitions, fears, and an intricate private world.</span>
          <span class="gloss-ex">
            <span class="gloss-ex-label">In use</span>
            <span class="gloss-ex-quote">"Staring out the train window, she was struck by sonder — each lit window a whole life she'd never know."</span>
          </span>
          <span class="gloss-syn">
            <span class="gloss-syn-pill">empathy</span>
            <span class="gloss-syn-pill">weltanschauung</span>
          </span>
        </span>
      </span>,
      the act of registering that strangers have entire interior worlds. We live in
      <span class="gloss-t">
        <span class="gloss-word">liminal</span>
        <span class="gloss-tip">
          <span class="gloss-top">
            <span class="gloss-pos">adjective · anthropology</span>
            <span class="gloss-head">liminal</span>
            <span class="gloss-ipa">/ˈlɪmɪnəl/</span>
          </span>
          <span class="gloss-origin"><strong>Origin:</strong> Latin <em>limen</em> (threshold). Popularised by anthropologist Arnold van Gennep (1909) to describe transitional ritual phases.</span>
          <span class="gloss-def">Occupying a position at, or on both sides of, a threshold or boundary; relating to a transitional or initial stage of a process.</span>
          <span class="gloss-ex">
            <span class="gloss-ex-label">In use</span>
            <span class="gloss-ex-quote">"The airport is the most liminal of spaces — everyone passing through on the way to somewhere else."</span>
          </span>
          <span class="gloss-syn">
            <span class="gloss-syn-pill">transitional</span>
            <span class="gloss-syn-pill">threshold</span>
            <span class="gloss-syn-pill">interstitial</span>
          </span>
        </span>
      </span>
      spaces more than we realise.
    </p>
  </div>
</div>
```

**CSS:**
```css
.gloss-stage {
  background: #fdf9f3;
  /* Top room for the dictionary card (~280px tall) popping up from
     dotted-underlined words. Glossary words can be anywhere on the
     line, so generous top is the safest choice. */
  padding: 300px 28px 40px;
  font-family: Georgia, serif;
}
.gloss-inner {
  max-width: 560px;
  margin: 0 auto;
}
.gloss-text {
  font-size: 18px;
  line-height: 1.85;
  color: #2c2416;
  margin: 0;
}
.gloss-t {
  position: relative;
  display: inline-block;
}
.gloss-word {
  cursor: help;
  border-bottom: 1.5px dotted #a08050;
  color: #6a4820;
  transition: color .15s, border-color .15s;
}
.gloss-t:hover .gloss-word {
  color: #3a2010;
  border-bottom-color: #3a2010;
}
.gloss-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 320px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(160, 128, 80, 0.2);
  box-shadow:
    0 8px 36px rgba(60, 40, 10, 0.13),
    0 2px 8px rgba(60, 40, 10, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  font-family: Georgia, serif;
  text-align: left;
  display: block;
  white-space: normal;
}
.gloss-t:hover .gloss-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.gloss-top {
  display: block;
  padding: 16px 18px 12px;
  background: #faf6ef;
  border-bottom: 1px solid rgba(160, 128, 80, 0.12);
}
.gloss-pos {
  display: block;
  font-size: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b09060;
  margin-bottom: 5px;
}
.gloss-head {
  display: block;
  font-size: 24px;
  font-weight: 500;
  color: #1a1008;
  line-height: 1;
  margin-bottom: 4px;
}
.gloss-ipa {
  display: block;
  font-size: 12px;
  color: #a09070;
  font-style: italic;
}
.gloss-origin {
  display: block;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(160, 128, 80, 0.1);
  font-size: 11px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #9a8060;
  line-height: 1.5;
}
.gloss-origin strong { color: #6a5030; font-weight: 500; }
.gloss-def {
  display: block;
  padding: 13px 18px;
  font-size: 13px;
  color: #3c2c14;
  line-height: 1.65;
  border-bottom: 1px solid rgba(160, 128, 80, 0.1);
  font-style: italic;
}
.gloss-ex {
  display: block;
  padding: 11px 18px 13px;
  font-size: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #8a7050;
}
.gloss-ex-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c0a878;
  margin-bottom: 5px;
}
.gloss-ex-quote {
  display: block;
  color: #5a4020;
  line-height: 1.5;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
}
.gloss-syn {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 18px 13px;
  border-top: 1px solid rgba(160, 128, 80, 0.1);
}
.gloss-syn-pill {
  font-size: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(160, 128, 80, 0.08);
  color: #8a6840;
  border: 1px solid rgba(160, 128, 80, 0.18);
}
```

### 08. Service Status Dots

**Type:** Pure CSS
**Description:** A status-page list where each colored dot pulses with its service state — hovering any row reveals an uptime bar history (30 days, color-coded), live metrics (uptime, latency, throughput), and the most recent incident summary. Built for SaaS status pages, infrastructure dashboards, on-call surfaces.

**HTML:**
```html
<div class="svc-stage">
  <div class="svc-inner">
    <div class="svc-row-wrap">
      <div class="svc-row">
        <span class="svc-dot svc-ok svc-pulse"></span>
        <span class="svc-name">API Gateway</span>
        <span class="svc-pct">99.98%</span>
      </div>
      <span class="svc-tip">
        <span class="svc-tip-head">
          <span class="svc-tip-dot" style="background:#3fb950"></span>
          <span class="svc-tip-name">API Gateway</span>
          <span class="svc-badge svc-badge-ok">Operational</span>
        </span>
        <span class="svc-bars-label">30-day uptime</span>
        <span class="svc-bars">
          <span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:80%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
        </span>
        <span class="svc-metrics">
          <span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">99.98%</span></span>
          <span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">38ms</span></span>
          <span class="svc-met"><span class="svc-met-label">Req/min</span><span class="svc-met-val">12.4k</span></span>
        </span>
        <span class="svc-incident">Last incident: <strong>Feb 14 · 18 min partial degradation</strong> — elevated error rates on /auth endpoints. Resolved.</span>
      </span>
    </div>

    <div class="svc-row-wrap">
      <div class="svc-row">
        <span class="svc-dot svc-ok svc-pulse"></span>
        <span class="svc-name">Auth Service</span>
        <span class="svc-pct">100.00%</span>
      </div>
      <span class="svc-tip">
        <span class="svc-tip-head">
          <span class="svc-tip-dot" style="background:#3fb950"></span>
          <span class="svc-tip-name">Auth Service</span>
          <span class="svc-badge svc-badge-ok">Operational</span>
        </span>
        <span class="svc-bars-label">30-day uptime</span>
        <span class="svc-bars">
          <span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
        </span>
        <span class="svc-metrics">
          <span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">100%</span></span>
          <span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">18ms</span></span>
          <span class="svc-met"><span class="svc-met-label">Token/min</span><span class="svc-met-val">84k</span></span>
        </span>
        <span class="svc-incident">No incidents in the last 90 days.</span>
      </span>
    </div>

    <div class="svc-row-wrap">
      <div class="svc-row">
        <span class="svc-dot svc-ok svc-pulse"></span>
        <span class="svc-name">PostgreSQL Primary</span>
        <span class="svc-pct">99.94%</span>
      </div>
      <span class="svc-tip">
        <span class="svc-tip-head">
          <span class="svc-tip-dot" style="background:#3fb950"></span>
          <span class="svc-tip-name">PostgreSQL Primary</span>
          <span class="svc-badge svc-badge-ok">Operational</span>
        </span>
        <span class="svc-bars-label">30-day uptime</span>
        <span class="svc-bars">
          <span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#f85149;height:40%"></span><span class="svc-bar" style="background:#d29922;height:70%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
        </span>
        <span class="svc-metrics">
          <span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">99.94%</span></span>
          <span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">6ms</span></span>
          <span class="svc-met"><span class="svc-met-label">Conns</span><span class="svc-met-val">142/500</span></span>
        </span>
        <span class="svc-incident">Last incident: <strong>Mar 2 · 34 min outage</strong> — connection pool exhaustion during traffic spike. Failover to replica triggered.</span>
      </span>
    </div>

    <div class="svc-row-wrap">
      <div class="svc-row">
        <span class="svc-dot svc-warn"></span>
        <span class="svc-name">Email Delivery</span>
        <span class="svc-pct">98.42%</span>
      </div>
      <span class="svc-tip">
        <span class="svc-tip-head">
          <span class="svc-tip-dot" style="background:#d29922"></span>
          <span class="svc-tip-name">Email Delivery</span>
          <span class="svc-badge svc-badge-warn">Degraded</span>
        </span>
        <span class="svc-bars-label">30-day uptime</span>
        <span class="svc-bars">
          <span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:55%"></span><span class="svc-bar" style="background:#d29922;height:50%"></span><span class="svc-bar" style="background:#f85149;height:30%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#d29922;height:55%"></span><span class="svc-bar" style="background:#d29922;height:65%"></span><span class="svc-bar" style="background:#d29922;height:58%"></span><span class="svc-bar" style="background:#d29922;height:62%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#d29922;height:57%"></span>
        </span>
        <span class="svc-metrics">
          <span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-warn">98.42%</span></span>
          <span class="svc-met"><span class="svc-met-label">Delivery</span><span class="svc-met-val svc-met-warn">91.3%</span></span>
          <span class="svc-met"><span class="svc-met-label">Avg delay</span><span class="svc-met-val svc-met-warn">340ms</span></span>
        </span>
        <span class="svc-incident">Active: <strong>Elevated bounce rates on Gmail / Yahoo</strong> — IP reputation issue with third-party relay. Investigation ongoing since May 11.</span>
      </span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.svc-stage {
  background: #0d1117;
  /* Right room — status detail tooltip pops to the RIGHT of each row,
     ~280px wide. Without big right padding the tip would be cut off
     by .cf-stage's overflow:hidden on the gallery card. */
  padding: 36px 320px 36px 28px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.svc-inner {
  max-width: 440px;
  margin: 0 auto;
}
.svc-row-wrap {
  position: relative;
}
.svc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: help;
}
.svc-row-wrap:last-child .svc-row { border-bottom: none; }
.svc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-ok    { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.5); }
.svc-warn  { background: #d29922; box-shadow: 0 0 6px rgba(210, 153, 34, 0.5); }
.svc-down  { background: #f85149; box-shadow: 0 0 6px rgba(248, 81, 73, 0.5); }
.svc-pulse { animation: svc-pulse-anim 2.5s ease-in-out infinite; }
@keyframes svc-pulse-anim {
  0%, 100% { box-shadow: 0 0 6px rgba(63, 185, 80, 0.5); }
  50%      { box-shadow: 0 0 14px rgba(63, 185, 80, 0.8); }
}
.svc-name {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  letter-spacing: 0.02em;
}
.svc-pct {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
}
.svc-tip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  width: 280px;
  background: #161b22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  display: block;
  text-align: left;
}
.svc-row-wrap:hover .svc-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.svc-tip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-tip-name {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}
.svc-badge {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.svc-badge-ok   { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.25); }
.svc-badge-warn { background: rgba(210, 153, 34, 0.15); color: #d29922; border: 1px solid rgba(210, 153, 34, 0.25); }
.svc-badge-down { background: rgba(248, 81, 73, 0.15); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.25); }
.svc-bars-label {
  display: block;
  padding: 10px 14px 5px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.svc-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 34px;
  padding: 0 14px 10px;
}
.svc-bar {
  flex: 1;
  border-radius: 1px;
  min-height: 4px;
  display: block;
}
.svc-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-met {
  display: block;
  padding: 10px 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-met:last-child { border-right: none; }
.svc-met-label {
  display: block;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.svc-met-val {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}
.svc-met-ok   { color: #3fb950; }
.svc-met-warn { color: #d29922; }
.svc-met-down { color: #f85149; }
.svc-incident {
  display: block;
  padding: 9px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  line-height: 1.5;
  font-family: 'Inter', system-ui, sans-serif;
}
.svc-incident strong {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
```

### 09. Team Avatar Card

**Type:** Pure CSS
**Description:** Initials-only avatar circles in a row that lift slightly on hover and pop out a full profile card — gradient hero band, larger avatar with shadow ring, role + presence dot + bio + three-stat row + Message / View Profile buttons. Built for team rosters, mention popovers, comment hovers.

**HTML:**
```html
<div class="avt-stage">
  <div class="avt-inner">
    <div class="avt-t">
      <div class="avt-circle" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
      <div class="avt-tip">
        <div class="avt-hero" style="background:linear-gradient(135deg,#4a1880,#8050c0)">
          <div class="avt-photo" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
        </div>
        <div class="avt-body">
          <div class="avt-name">Sarah Lindqvist</div>
          <div class="avt-role">CEO · Executive</div>
          <div class="avt-online"><span class="avt-online-dot" style="background:#22c55e"></span>Active now</div>
          <div class="avt-bio">Former Stripe PM. Building the next layer of financial infrastructure for SMBs.</div>
          <div class="avt-stats">
            <div><div class="avt-stat-n">214</div><div class="avt-stat-l">Team</div></div>
            <div><div class="avt-stat-n">8yr</div><div class="avt-stat-l">Tenure</div></div>
            <div><div class="avt-stat-n">$1.2B</div><div class="avt-stat-l">Valuation</div></div>
          </div>
        </div>
        <div class="avt-foot">
          <div class="avt-btn">Message</div>
          <div class="avt-btn avt-btn-prim">View Profile</div>
        </div>
      </div>
    </div>

    <div class="avt-t">
      <div class="avt-circle" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
      <div class="avt-tip">
        <div class="avt-hero" style="background:linear-gradient(135deg,#102060,#3060a0)">
          <div class="avt-photo" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
        </div>
        <div class="avt-body">
          <div class="avt-name">Marcus Webb</div>
          <div class="avt-role">CTO · Engineering</div>
          <div class="avt-online"><span class="avt-online-dot" style="background:#22c55e"></span>Active now</div>
          <div class="avt-bio">Ex-Google infra. Obsessed with distributed systems and making things fast at scale.</div>
          <div class="avt-stats">
            <div><div class="avt-stat-n">96</div><div class="avt-stat-l">Team</div></div>
            <div><div class="avt-stat-n">5yr</div><div class="avt-stat-l">Tenure</div></div>
            <div><div class="avt-stat-n">340</div><div class="avt-stat-l">PRs</div></div>
          </div>
        </div>
        <div class="avt-foot">
          <div class="avt-btn">Message</div>
          <div class="avt-btn avt-btn-prim">View Profile</div>
        </div>
      </div>
    </div>

    <div class="avt-t">
      <div class="avt-circle" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
      <div class="avt-tip">
        <div class="avt-hero" style="background:linear-gradient(135deg,#054030,#108060)">
          <div class="avt-photo" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
        </div>
        <div class="avt-body">
          <div class="avt-name">Elena Russo</div>
          <div class="avt-role">CMO · Marketing</div>
          <div class="avt-online"><span class="avt-online-dot" style="background:#f59e0b"></span>Away · 2h ago</div>
          <div class="avt-bio">Brand strategist. Grew Notion's Europe presence 3×. London-based, GMT+1.</div>
          <div class="avt-stats">
            <div><div class="avt-stat-n">68</div><div class="avt-stat-l">Team</div></div>
            <div><div class="avt-stat-n">3yr</div><div class="avt-stat-l">Tenure</div></div>
            <div><div class="avt-stat-n">+84%</div><div class="avt-stat-l">YoY</div></div>
          </div>
        </div>
        <div class="avt-foot">
          <div class="avt-btn">Message</div>
          <div class="avt-btn avt-btn-prim">View Profile</div>
        </div>
      </div>
    </div>

    <div class="avt-t">
      <div class="avt-circle" style="background:linear-gradient(135deg,#802050,#c04080)">AP</div>
      <div class="avt-tip">
        <div class="avt-hero" style="background:linear-gradient(135deg,#601030,#a03060)">
          <div class="avt-photo" style="background:linear-gradient(135deg,#802050,#c04080)">AP</div>
        </div>
        <div class="avt-body">
          <div class="avt-name">Aisha Patel</div>
          <div class="avt-role">Growth Lead · Marketing</div>
          <div class="avt-online"><span class="avt-online-dot" style="background:#94a3b8"></span>Offline</div>
          <div class="avt-bio">Data-driven growth. 0 → 100k users in 18 months. Runs the acquisition engine.</div>
          <div class="avt-stats">
            <div><div class="avt-stat-n">6</div><div class="avt-stat-l">Team</div></div>
            <div><div class="avt-stat-n">1yr</div><div class="avt-stat-l">Tenure</div></div>
            <div><div class="avt-stat-n">$1.2M</div><div class="avt-stat-l">Budget</div></div>
          </div>
        </div>
        <div class="avt-foot">
          <div class="avt-btn">Message</div>
          <div class="avt-btn avt-btn-prim">View Profile</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.avt-stage {
  background: #ffffff;
  /* Top room for the profile card (~280px tall) popping up from each
     avatar circle. */
  padding: 300px 28px 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
}
.avt-inner {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.avt-t {
  position: relative;
  cursor: help;
}
.avt-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.03em;
  transition: transform .15s, box-shadow .15s;
}
.avt-t:hover .avt-circle {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.avt-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .25s,
    transform .25s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .25s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}
.avt-t:hover .avt-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.avt-hero {
  height: 56px;
  position: relative;
}
.avt-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  position: absolute;
  left: 14px;
  bottom: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.avt-body {
  padding: 20px 14px 12px;
}
.avt-name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.avt-role {
  font-size: 10.5px;
  color: #888;
  margin-top: 2px;
}
.avt-online {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #888;
  margin-top: 6px;
}
.avt-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.avt-bio {
  font-size: 11.5px;
  color: #555;
  margin-top: 8px;
  line-height: 1.5;
}
.avt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}
.avt-stat-n {
  font-size: 15px;
  font-weight: 700;
  color: #111;
}
.avt-stat-l {
  font-size: 8px;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
}
.avt-foot {
  padding: 9px 14px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 6px;
}
.avt-btn {
  flex: 1;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  border: 1px solid #e8e8e8;
  color: #444;
  background: #fafafa;
  cursor: pointer;
}
.avt-btn-prim {
  background: #111;
  border-color: #111;
  color: #fff;
}
```

### 10. Keyboard Shortcut Card

**Type:** Pure CSS
**Description:** A list of shortcuts where each row pops out a full reference card — large action title, big keycaps, plain-English description, three "when to use" bullets, and a related-shortcuts pill row. A richer companion to the compact keycap-pill demo earlier in this collection.

**HTML:**
```html
<div class="kchord-stage">
  <div class="kchord-inner">
    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Save file</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">S</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Save File</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">S</span></div>
        </div>
        <div class="kchord-desc">Saves the current file to disk immediately. If the file has never been saved, opens a Save As dialog to choose a name and location.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">After every meaningful change to preserve work</div>
          <div class="kchord-when-item">Before switching branches or running tests</div>
          <div class="kchord-when-item">Before closing the editor or tab</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ S — Save As</div>
          <div class="kchord-rel-pill">⌘ ⌥ S — Save All</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Undo</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">Z</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Undo</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">Z</span></div>
        </div>
        <div class="kchord-desc">Reverses the last editing action, stepping backwards through the undo history one action at a time. History is preserved across saves.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">After accidentally deleting or overwriting text</div>
          <div class="kchord-when-item">To compare before/after a refactor</div>
          <div class="kchord-when-item">To recover from an unwanted auto-format</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ Z — Redo</div>
          <div class="kchord-rel-pill">⌘ K U — Clear history</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Command palette</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">⇧</span><span class="kchord-plus">+</span><span class="kchord-key">P</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Command Palette</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">⇧</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">P</span></div>
        </div>
        <div class="kchord-desc">Opens a searchable list of every editor command, extension action, and setting. The fastest way to trigger any feature without memorising its location.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To find any command without digging through menus</div>
          <div class="kchord-when-item">To run a formatter, linter, or task</div>
          <div class="kchord-when-item">To change settings quickly by name</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ P — Quick open file</div>
          <div class="kchord-rel-pill">⌘ ⇧ O — Go to symbol</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Find in file</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">F</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Find in File</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">F</span></div>
        </div>
        <div class="kchord-desc">Opens an inline search bar. Supports plain text, regular expressions, and case-sensitive matching. Highlights all occurrences inside the active file.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To locate a variable, function, or string in the file</div>
          <div class="kchord-when-item">To count occurrences of a term before refactoring</div>
          <div class="kchord-when-item">With regex to find patterns (e.g. unused imports)</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ H — Find &amp; Replace</div>
          <div class="kchord-rel-pill">⌘ ⇧ F — Find in workspace</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Toggle comment</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">/</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Toggle Comment</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">/</span></div>
        </div>
        <div class="kchord-desc">Toggles line comments on the current line or all selected lines. Uses the correct comment syntax for the file's language automatically.</div>
        <div class="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To temporarily disable a block of code for debugging</div>
          <div class="kchord-when-item">To add an explanatory comment above a function</div>
          <div class="kchord-when-item">To comment multiple lines at once (select first)</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ / — Block comment</div>
          <div class="kchord-rel-pill">⌘ K C — Add comment</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.kchord-stage {
  background: #111116;
  /* Left room — kchord tips pop to the LEFT of each shortcut row,
     ~260px wide. */
  padding: 36px 28px 36px 320px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.kchord-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kchord-t {
  position: relative;
}
.kchord-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: help;
  transition: background .12s;
}
.kchord-t:hover .kchord-row {
  background: rgba(255, 255, 255, 0.04);
}
.kchord-label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}
.kchord-keys {
  display: flex;
  gap: 4px;
  align-items: center;
}
.kchord-key {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
  letter-spacing: 0.02em;
}
.kchord-plus {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
}
.kchord-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: 260px;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}
.kchord-t:hover .kchord-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.kchord-top {
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kchord-action {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}
.kchord-keys-big {
  display: flex;
  gap: 5px;
  align-items: center;
}
.kchord-key-big {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}
.kchord-plus-big {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}
.kchord-desc {
  padding: 11px 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
}
.kchord-when {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.kchord-when-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kchord-when-item {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 4px;
  padding-left: 10px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.4;
}
.kchord-when-item::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  top: -1px;
}
.kchord-related {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kchord-rel-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 2px;
}
.kchord-rel-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}
```

### 11. Data Table Cell

**Type:** Pure CSS
**Description:** A quarterly metrics table where each plain number is a hover target. The popover shows the metric name, large value, change-vs-prior quarter, a three-bar segment breakdown (e.g. SMB / Mid / Enterprise), and a two-piece footer with delta and aggregate context. For analytics dashboards, BI reports, KPI surfaces.

**HTML:**
```html
<div class="tcell-stage">
  <div class="tcell-inner">
    <table class="tcell-table">
      <thead>
        <tr>
          <th></th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="tcell-row-label">Revenue</td>
          <td>
            <span class="tcell-t">
              <span class="tcell-val">$2.1M</span>
              <span class="tcell-tip">
                <span class="tcell-head">
                  <span class="tcell-metric">Revenue · Q1</span>
                  <span class="tcell-big-row"><span class="tcell-big">$2.1M</span><span class="tcell-change tcell-up">↑ +18% vs Q4</span></span>
                </span>
                <span class="tcell-bars">
                  <span class="tcell-bars-label">By segment</span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">SMB</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:62%;background:#6366f1"></span></span><span class="tcell-bar-pct">62%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Mid</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:28%;background:#8b5cf6"></span></span><span class="tcell-bar-pct">28%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:10%;background:#a78bfa"></span></span><span class="tcell-bar-pct">10%</span></span>
                </span>
                <span class="tcell-foot"><span>vs prior: <strong>+$320K</strong></span><span>ARR: <strong>$8.4M</strong></span></span>
              </span>
            </span>
          </td>
          <td>
            <span class="tcell-t">
              <span class="tcell-val">$2.8M</span>
              <span class="tcell-tip">
                <span class="tcell-head">
                  <span class="tcell-metric">Revenue · Q2</span>
                  <span class="tcell-big-row"><span class="tcell-big">$2.8M</span><span class="tcell-change tcell-up">↑ +33% vs Q1</span></span>
                </span>
                <span class="tcell-bars">
                  <span class="tcell-bars-label">By segment</span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">SMB</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:55%;background:#6366f1"></span></span><span class="tcell-bar-pct">55%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Mid</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:33%;background:#8b5cf6"></span></span><span class="tcell-bar-pct">33%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:12%;background:#a78bfa"></span></span><span class="tcell-bar-pct">12%</span></span>
                </span>
                <span class="tcell-foot"><span>vs Q1: <strong>+$700K</strong></span><span>ARR: <strong>$11.2M</strong></span></span>
              </span>
            </span>
          </td>
          <td>
            <span class="tcell-t">
              <span class="tcell-val">$3.4M</span>
              <span class="tcell-tip">
                <span class="tcell-head">
                  <span class="tcell-metric">Revenue · Q3</span>
                  <span class="tcell-big-row"><span class="tcell-big">$3.4M</span><span class="tcell-change tcell-up">↑ +21% vs Q2</span></span>
                </span>
                <span class="tcell-bars">
                  <span class="tcell-bars-label">By segment</span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">SMB</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:48%;background:#6366f1"></span></span><span class="tcell-bar-pct">48%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Mid</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#8b5cf6"></span></span><span class="tcell-bar-pct">38%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:14%;background:#a78bfa"></span></span><span class="tcell-bar-pct">14%</span></span>
                </span>
                <span class="tcell-foot"><span>vs Q2: <strong>+$600K</strong></span><span>ARR: <strong>$13.6M</strong></span></span>
              </span>
            </span>
          </td>
          <td>
            <span class="tcell-t">
              <span class="tcell-val">$4.2M</span>
              <span class="tcell-tip">
                <span class="tcell-head">
                  <span class="tcell-metric">Revenue · Q4</span>
                  <span class="tcell-big-row"><span class="tcell-big">$4.2M</span><span class="tcell-change tcell-up">↑ +24% vs Q3</span></span>
                </span>
                <span class="tcell-bars">
                  <span class="tcell-bars-label">By segment</span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">SMB</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:42%;background:#6366f1"></span></span><span class="tcell-bar-pct">42%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Mid</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#8b5cf6"></span></span><span class="tcell-bar-pct">38%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:20%;background:#a78bfa"></span></span><span class="tcell-bar-pct">20%</span></span>
                </span>
                <span class="tcell-foot"><span>vs Q3: <strong>+$800K</strong></span><span>Year: <strong>$12.5M</strong></span></span>
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <td class="tcell-row-label">Active Users</td>
          <td>
            <span class="tcell-t">
              <span class="tcell-val">12.4K</span>
              <span class="tcell-tip">
                <span class="tcell-head">
                  <span class="tcell-metric">Active Users · Q1</span>
                  <span class="tcell-big-row"><span class="tcell-big">12.4K</span><span class="tcell-change tcell-up">↑ +22%</span></span>
                </span>
                <span class="tcell-bars">
                  <span class="tcell-bars-label">By plan</span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Free</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:58%;background:#22c55e"></span></span><span class="tcell-bar-pct">58%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Pro</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:32%;background:#16a34a"></span></span><span class="tcell-bar-pct">32%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:10%;background:#166534"></span></span><span class="tcell-bar-pct">10%</span></span>
                </span>
                <span class="tcell-foot"><span>New: <strong>+2,240</strong></span><span>DAU/MAU: <strong>41%</strong></span></span>
              </span>
            </span>
          </td>
          <td>
            <span class="tcell-t">
              <span class="tcell-val">18.9K</span>
              <span class="tcell-tip">
                <span class="tcell-head">
                  <span class="tcell-metric">Active Users · Q2</span>
                  <span class="tcell-big-row"><span class="tcell-big">18.9K</span><span class="tcell-change tcell-up">↑ +52%</span></span>
                </span>
                <span class="tcell-bars">
                  <span class="tcell-bars-label">By plan</span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Free</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:54%;background:#22c55e"></span></span><span class="tcell-bar-pct">54%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Pro</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:36%;background:#16a34a"></span></span><span class="tcell-bar-pct">36%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:10%;background:#166534"></span></span><span class="tcell-bar-pct">10%</span></span>
                </span>
                <span class="tcell-foot"><span>New: <strong>+6,500</strong></span><span>DAU/MAU: <strong>44%</strong></span></span>
              </span>
            </span>
          </td>
          <td>
            <span class="tcell-t">
              <span class="tcell-val">24.1K</span>
              <span class="tcell-tip">
                <span class="tcell-head">
                  <span class="tcell-metric">Active Users · Q3</span>
                  <span class="tcell-big-row"><span class="tcell-big">24.1K</span><span class="tcell-change tcell-up">↑ +28%</span></span>
                </span>
                <span class="tcell-bars">
                  <span class="tcell-bars-label">By plan</span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Free</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:50%;background:#22c55e"></span></span><span class="tcell-bar-pct">50%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Pro</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#16a34a"></span></span><span class="tcell-bar-pct">38%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:12%;background:#166534"></span></span><span class="tcell-bar-pct">12%</span></span>
                </span>
                <span class="tcell-foot"><span>New: <strong>+5,200</strong></span><span>DAU/MAU: <strong>47%</strong></span></span>
              </span>
            </span>
          </td>
          <td>
            <span class="tcell-t">
              <span class="tcell-val">31.8K</span>
              <span class="tcell-tip">
                <span class="tcell-head">
                  <span class="tcell-metric">Active Users · Q4</span>
                  <span class="tcell-big-row"><span class="tcell-big">31.8K</span><span class="tcell-change tcell-up">↑ +32%</span></span>
                </span>
                <span class="tcell-bars">
                  <span class="tcell-bars-label">By plan</span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Free</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:44%;background:#22c55e"></span></span><span class="tcell-bar-pct">44%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Pro</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:40%;background:#16a34a"></span></span><span class="tcell-bar-pct">40%</span></span>
                  <span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:16%;background:#166534"></span></span><span class="tcell-bar-pct">16%</span></span>
                </span>
                <span class="tcell-foot"><span>New: <strong>+7,700</strong></span><span>YoY: <strong>+156%</strong></span></span>
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <td class="tcell-row-label">Churn</td>
          <td><span class="tcell-t"><span class="tcell-val">2.8%</span><span class="tcell-tip"><span class="tcell-head"><span class="tcell-metric">Monthly Churn · Q1</span><span class="tcell-big-row"><span class="tcell-big">2.8%</span><span class="tcell-change tcell-dn">↓ +0.4pp worse</span></span></span><span class="tcell-bars"><span class="tcell-bars-label">Reason</span><span class="tcell-bar-row"><span class="tcell-bar-name">Price</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:42%;background:#ef4444"></span></span><span class="tcell-bar-pct">42%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Feat.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:31%;background:#f87171"></span></span><span class="tcell-bar-pct">31%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Other</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:27%;background:#fca5a5"></span></span><span class="tcell-bar-pct">27%</span></span></span><span class="tcell-foot"><span>Net rev churn: <strong>1.1%</strong></span><span>Win-back: <strong>14%</strong></span></span></span></span></td>
          <td><span class="tcell-t"><span class="tcell-val">2.4%</span><span class="tcell-tip"><span class="tcell-head"><span class="tcell-metric">Monthly Churn · Q2</span><span class="tcell-big-row"><span class="tcell-big">2.4%</span><span class="tcell-change tcell-up">↑ −0.4pp better</span></span></span><span class="tcell-bars"><span class="tcell-bars-label">Reason</span><span class="tcell-bar-row"><span class="tcell-bar-name">Price</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#ef4444"></span></span><span class="tcell-bar-pct">38%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Feat.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:34%;background:#f87171"></span></span><span class="tcell-bar-pct">34%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Other</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:28%;background:#fca5a5"></span></span><span class="tcell-bar-pct">28%</span></span></span><span class="tcell-foot"><span>Net rev churn: <strong>0.8%</strong></span><span>Win-back: <strong>18%</strong></span></span></span></span></td>
          <td><span class="tcell-t"><span class="tcell-val">2.1%</span><span class="tcell-tip"><span class="tcell-head"><span class="tcell-metric">Monthly Churn · Q3</span><span class="tcell-big-row"><span class="tcell-big">2.1%</span><span class="tcell-change tcell-up">↑ −0.3pp better</span></span></span><span class="tcell-bars"><span class="tcell-bars-label">Reason</span><span class="tcell-bar-row"><span class="tcell-bar-name">Price</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:32%;background:#ef4444"></span></span><span class="tcell-bar-pct">32%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Feat.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#f87171"></span></span><span class="tcell-bar-pct">38%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Other</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:30%;background:#fca5a5"></span></span><span class="tcell-bar-pct">30%</span></span></span><span class="tcell-foot"><span>Net rev churn: <strong>0.6%</strong></span><span>Win-back: <strong>21%</strong></span></span></span></span></td>
          <td><span class="tcell-t"><span class="tcell-val">1.8%</span><span class="tcell-tip"><span class="tcell-head"><span class="tcell-metric">Monthly Churn · Q4</span><span class="tcell-big-row"><span class="tcell-big">1.8%</span><span class="tcell-change tcell-up">↑ −0.3pp better</span></span></span><span class="tcell-bars"><span class="tcell-bars-label">Reason</span><span class="tcell-bar-row"><span class="tcell-bar-name">Price</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:28%;background:#ef4444"></span></span><span class="tcell-bar-pct">28%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Feat.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:40%;background:#f87171"></span></span><span class="tcell-bar-pct">40%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Other</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:32%;background:#fca5a5"></span></span><span class="tcell-bar-pct">32%</span></span></span><span class="tcell-foot"><span>Net rev churn: <strong>0.4%</strong></span><span>Year: <strong>−1.0pp</strong></span></span></span></span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```

**CSS:**
```css
.tcell-stage {
  background: #f8f9fa;
  /* Top room — table cell tips pop UP from each value (~220px tall). */
  padding: 240px 28px 36px;
  font-family: 'Inter', system-ui, sans-serif;
}
.tcell-inner {
  max-width: 520px;
  margin: 0 auto;
}
.tcell-table {
  width: 100%;
  border-collapse: collapse;
}
.tcell-table thead th {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
  font-weight: 500;
  padding: 0 14px 11px;
  text-align: right;
}
.tcell-table thead th:first-child { text-align: left; }
.tcell-table tbody tr { border-top: 1px solid #eee; }
.tcell-table tbody tr:hover { background: rgba(0, 0, 0, 0.015); }
.tcell-table tbody td {
  padding: 12px 14px;
  font-size: 12.5px;
  color: #333;
  text-align: right;
  white-space: nowrap;
}
.tcell-row-label {
  color: #777 !important;
  font-size: 11px !important;
  text-align: left !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tcell-t {
  position: relative;
  display: inline-block;
  cursor: help;
}
.tcell-val {
  border-bottom: 1px dashed transparent;
  transition: border-color .15s, color .15s;
}
.tcell-t:hover .tcell-val {
  border-bottom-color: #aaa;
  color: #111;
}
.tcell-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  background: #fff;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.11),
    0 2px 8px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  display: block;
  text-align: left;
  white-space: normal;
}
.tcell-t:hover .tcell-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.tcell-head {
  display: block;
  padding: 12px 13px 9px;
  border-bottom: 1px solid #f0f0f0;
}
.tcell-metric {
  display: block;
  font-size: 9.5px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 5px;
}
.tcell-big-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tcell-big {
  font-size: 22px;
  font-weight: 700;
  color: #111;
}
.tcell-change {
  font-size: 11px;
  font-weight: 600;
}
.tcell-up { color: #16a34a; }
.tcell-dn { color: #dc2626; }
.tcell-bars {
  display: block;
  padding: 11px 13px 7px;
  border-bottom: 1px solid #f0f0f0;
}
.tcell-bars-label {
  display: block;
  font-size: 7.5px;
  color: #bbb;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.tcell-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.tcell-bar-name {
  font-size: 9.5px;
  color: #999;
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}
.tcell-bar-track {
  flex: 1;
  height: 5px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  display: block;
}
.tcell-bar-fill {
  height: 100%;
  border-radius: 3px;
  display: block;
}
.tcell-bar-pct {
  font-size: 9.5px;
  color: #bbb;
  width: 28px;
  flex-shrink: 0;
  text-align: right;
}
.tcell-foot {
  display: flex;
  justify-content: space-between;
  padding: 10px 13px;
  font-size: 10.5px;
  color: #bbb;
}
.tcell-foot strong {
  color: #555;
  font-weight: 600;
}
```

### 12. Content Tag Card

**Type:** Pure CSS
**Description:** Colored pill labels (Machine Learning, DevOps, Security) that lift on hover and reveal a tag-detail card — colored icon block, article count, description, popularity-this-month bar with trend, related-tag pills, and the top three articles in this tag. For blog tag clouds, knowledge bases, content discovery surfaces.

**HTML:**
```html
<div class="ctag-stage">
  <div class="ctag-inner">
    <div class="ctag-list">
      <div class="ctag-t">
        <div class="ctag-pill" style="background:#eff6ff;border-color:#bfdbfe;color:#1e40af"><span class="ctag-dot" style="background:#3b82f6"></span>Machine Learning</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#dbeafe;color:#1e40af">ML</div><div><div class="ctag-name">Machine Learning</div><div class="ctag-count">1,284 articles</div></div></div>
            <div class="ctag-desc">Algorithms that enable systems to learn from data without explicit programming. Covers supervised, unsupervised, and reinforcement learning.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:88%;background:#3b82f6"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+14% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Deep Learning</span><span class="ctag-rel-pill">Neural Nets</span><span class="ctag-rel-pill">PyTorch</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">Fine-tuning LLMs on custom datasets</div>
            <div class="ctag-ex-item">Understanding transformer attention</div>
            <div class="ctag-ex-item">Gradient descent, explained visually</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#f0fdf4;border-color:#bbf7d0;color:#15803d"><span class="ctag-dot" style="background:#22c55e"></span>Open Source</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#dcfce7;color:#15803d">OS</div><div><div class="ctag-name">Open Source</div><div class="ctag-count">2,941 articles</div></div></div>
            <div class="ctag-desc">Software with source code available for anyone to use, inspect, modify, and distribute. Covers licensing, contributing, and ecosystem news.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:94%;background:#22c55e"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ all-time high</strong></span><span>+22% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">GitHub</span><span class="ctag-rel-pill">Linux</span><span class="ctag-rel-pill">Licensing</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">How to write a great README</div>
            <div class="ctag-ex-item">OSS licensing: MIT vs Apache vs GPL</div>
            <div class="ctag-ex-item">First PR tips for new contributors</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#fdf4ff;border-color:#e9d5ff;color:#7e22ce"><span class="ctag-dot" style="background:#a855f7"></span>System Design</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#f3e8ff;color:#7e22ce">SD</div><div><div class="ctag-name">System Design</div><div class="ctag-count">876 articles</div></div></div>
            <div class="ctag-desc">The process of defining the architecture, components, and interfaces of a system to satisfy specified requirements at scale.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:76%;background:#a855f7"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+3% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Distributed</span><span class="ctag-rel-pill">CAP Theorem</span><span class="ctag-rel-pill">Databases</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">Designing a rate limiter from scratch</div>
            <div class="ctag-ex-item">When to use a message queue</div>
            <div class="ctag-ex-item">Read replicas and write-ahead logs</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#fff7ed;border-color:#fed7aa;color:#c2410c"><span class="ctag-dot" style="background:#f97316"></span>Career</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#ffedd5;color:#c2410c">CR</div><div><div class="ctag-name">Career</div><div class="ctag-count">3,102 articles</div></div></div>
            <div class="ctag-desc">Advice on navigating tech careers — from first job to staff engineer, negotiation, interviews, and switching roles.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:82%;background:#f97316"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+9% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Interviews</span><span class="ctag-rel-pill">Salary</span><span class="ctag-rel-pill">Remote work</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">The staff engineer path, explained</div>
            <div class="ctag-ex-item">How to negotiate a competing offer</div>
            <div class="ctag-ex-item">Writing your first performance review</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#fff1f2;border-color:#fecdd3;color:#be123c"><span class="ctag-dot" style="background:#f43f5e"></span>Security</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#ffe4e6;color:#be123c">SE</div><div><div class="ctag-name">Security</div><div class="ctag-count">1,540 articles</div></div></div>
            <div class="ctag-desc">Application security, cryptography, threat modelling, vulnerability research, and secure development practices for engineers.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:70%;background:#f43f5e"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↑ trending</strong></span><span>+18% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">OWASP</span><span class="ctag-rel-pill">Auth</span><span class="ctag-rel-pill">CVE</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">SQL injection prevention in 2024</div>
            <div class="ctag-ex-item">JWT vs sessions: which to use</div>
            <div class="ctag-ex-item">Zero-trust architecture basics</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#f0fdfa;border-color:#99f6e4;color:#0f766e"><span class="ctag-dot" style="background:#14b8a6"></span>DevOps</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#ccfbf1;color:#0f766e">DO</div><div><div class="ctag-name">DevOps</div><div class="ctag-count">1,188 articles</div></div></div>
            <div class="ctag-desc">Practices and tools that unify software development and IT operations — CI/CD, containerisation, infrastructure as code, monitoring.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:66%;background:#14b8a6"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+2% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Docker</span><span class="ctag-rel-pill">Kubernetes</span><span class="ctag-rel-pill">Terraform</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">Building zero-downtime deploys</div>
            <div class="ctag-ex-item">Helm charts for beginners</div>
            <div class="ctag-ex-item">Observability vs. monitoring</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#fefce8;border-color:#fef08a;color:#854d0e"><span class="ctag-dot" style="background:#eab308"></span>Performance</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#fef9c3;color:#854d0e">PF</div><div><div class="ctag-name">Performance</div><div class="ctag-count">922 articles</div></div></div>
            <div class="ctag-desc">Techniques for optimising speed, throughput, and resource efficiency — from query tuning to Core Web Vitals.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:60%;background:#eab308"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>→ stable</strong></span><span>+1% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">Profiling</span><span class="ctag-rel-pill">Caching</span><span class="ctag-rel-pill">Web Vitals</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">N+1 queries and how to fix them</div>
            <div class="ctag-ex-item">React re-renders: a visual guide</div>
            <div class="ctag-ex-item">Redis caching patterns in production</div>
          </div>
        </div>
      </div>

      <div class="ctag-t">
        <div class="ctag-pill" style="background:#f8fafc;border-color:#e2e8f0;color:#475569"><span class="ctag-dot" style="background:#94a3b8"></span>Architecture</div>
        <div class="ctag-tip">
          <div class="ctag-head">
            <div class="ctag-head-row"><div class="ctag-icon" style="background:#f1f5f9;color:#475569">AR</div><div><div class="ctag-name">Architecture</div><div class="ctag-count">748 articles</div></div></div>
            <div class="ctag-desc">Software architecture patterns, trade-offs, and design decisions — microservices, monoliths, event-driven, hexagonal, and beyond.</div>
          </div>
          <div class="ctag-pop">
            <div class="ctag-pop-label">Popularity this month</div>
            <div class="ctag-track"><div class="ctag-fill" style="width:54%;background:#94a3b8"></div></div>
            <div class="ctag-trend"><span class="ctag-trend-left"><strong>↓ slight dip</strong></span><span>−3% vs last month</span></div>
          </div>
          <div class="ctag-rel">
            <div class="ctag-rel-label">Related</div>
            <div class="ctag-rel-pills"><span class="ctag-rel-pill">DDD</span><span class="ctag-rel-pill">Microservices</span><span class="ctag-rel-pill">Clean Code</span></div>
          </div>
          <div class="ctag-ex">
            <div class="ctag-ex-label">Top articles</div>
            <div class="ctag-ex-item">Monolith first: the case for starting simple</div>
            <div class="ctag-ex-item">CQRS and event sourcing, explained</div>
            <div class="ctag-ex-item">When to break up a microservice</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ctag-stage {
  background: #fff;
  /* Top room — content-tag cards pop UP from each pill (~300px tall). */
  padding: 320px 28px 36px;
  font-family: 'Inter', system-ui, sans-serif;
}
.ctag-inner {
  max-width: 560px;
  margin: 0 auto;
}
.ctag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}
.ctag-t {
  position: relative;
}
.ctag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: help;
  transition: transform .15s, box-shadow .15s;
}
.ctag-t:hover .ctag-pill {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.ctag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ctag-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 260px;
  background: #fff;
  border-radius: 11px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.11),
    0 2px 8px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}
.ctag-t:hover .ctag-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.ctag-head {
  padding: 13px 14px 11px;
  border-bottom: 1px solid #f4f4f4;
}
.ctag-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ctag-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.ctag-name {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}
.ctag-count {
  font-size: 10px;
  color: #bbb;
  margin-top: 1px;
}
.ctag-desc {
  font-size: 11.5px;
  color: #666;
  line-height: 1.55;
}
.ctag-pop {
  padding: 10px 14px;
  border-bottom: 1px solid #f4f4f4;
}
.ctag-pop-label {
  font-size: 7.5px;
  color: #ccc;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ctag-track {
  height: 5px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.ctag-fill {
  height: 100%;
  border-radius: 3px;
}
.ctag-trend {
  font-size: 10px;
  color: #bbb;
  display: flex;
  justify-content: space-between;
}
.ctag-trend-left strong {
  color: #555;
  font-weight: 600;
}
.ctag-rel {
  padding: 10px 14px;
  border-bottom: 1px solid #f4f4f4;
}
.ctag-rel-label {
  font-size: 7.5px;
  color: #ccc;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ctag-rel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ctag-rel-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f4f4f6;
  color: #888;
  border: 1px solid #eee;
}
.ctag-ex {
  padding: 10px 14px 12px;
}
.ctag-ex-label {
  font-size: 7.5px;
  color: #ccc;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ctag-ex-item {
  font-size: 10.5px;
  color: #777;
  margin-bottom: 4px;
  padding-left: 9px;
  position: relative;
  line-height: 1.4;
}
.ctag-ex-item::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: #ccc;
}
```

### 13. Airport Departures Board

**Type:** Pure CSS
**Description:** A Solari-flap inspired departures board — amber-on-charcoal monospace rows for six flights. Hover any row to reveal the flight detail card: airline, route with duration, aircraft, seats, class, plus a status pill that pulses when a flight is boarding. For travel apps, status pages, and ops dashboards.

**HTML:**
```html
<div class="depart-stage">
  <div class="depart-board">
    <div class="depart-headrow">
      <span>Time</span><span>Flight</span><span>Destination</span><span>Term</span><span>Gate</span><span>Status</span>
    </div>
    <div class="depart-row">
      <span class="depart-time">06:15</span>
      <span class="depart-num">AA 2847</span>
      <span class="depart-dest">New York <small>JFK</small></span>
      <span class="depart-term">T3</span>
      <span class="depart-gate">B12</span>
      <span class="depart-status depart-departed">Departed</span>
      <div class="depart-tip">
        <div class="depart-tip-head">
          <div><div class="depart-airline">American Airlines</div><div class="depart-flightnum">AA 2847</div></div>
          <span class="depart-badge depart-badge-departed">Departed</span>
        </div>
        <div class="depart-route">
          <div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
          <div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">5h 22m</div></div><div class="depart-plane">→</div></div>
          <div class="depart-airport"><div class="depart-code">JFK</div><div class="depart-city">New York</div></div>
        </div>
        <div class="depart-grid">
          <div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">B737-800</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">162</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">F / Y</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">Yes</div></div>
        </div>
        <div class="depart-foot"><span>Departed 06:09 · 6 min early</span><span>T3 · Gate B12</span></div>
      </div>
    </div>
    <div class="depart-row">
      <span class="depart-time">07:40</span>
      <span class="depart-num">UA 5512</span>
      <span class="depart-dest">Chicago <small>ORD</small></span>
      <span class="depart-term">T7</span>
      <span class="depart-gate">C04</span>
      <span class="depart-status depart-ontime">On Time</span>
      <div class="depart-tip">
        <div class="depart-tip-head">
          <div><div class="depart-airline">United Airlines</div><div class="depart-flightnum">UA 5512</div></div>
          <span class="depart-badge depart-badge-ontime">On Time</span>
        </div>
        <div class="depart-route">
          <div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
          <div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">3h 55m</div></div><div class="depart-plane">→</div></div>
          <div class="depart-airport"><div class="depart-code">ORD</div><div class="depart-city">Chicago</div></div>
        </div>
        <div class="depart-grid">
          <div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">A320neo</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">150</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">J / Y</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Wi-Fi</div><div class="depart-cell-val">Yes</div></div>
        </div>
        <div class="depart-foot"><span>Boards 07:10 · Gate closes 07:25</span><span>T7 · Gate C04</span></div>
      </div>
    </div>
    <div class="depart-row">
      <span class="depart-time">08:20</span>
      <span class="depart-num">DL 8831</span>
      <span class="depart-dest">London <small>LHR</small></span>
      <span class="depart-term">TB</span>
      <span class="depart-gate">A22</span>
      <span class="depart-status depart-boarding">Boarding</span>
      <div class="depart-tip">
        <div class="depart-tip-head">
          <div><div class="depart-airline">Delta Air Lines</div><div class="depart-flightnum">DL 8831</div></div>
          <span class="depart-badge depart-badge-boarding">Boarding</span>
        </div>
        <div class="depart-route">
          <div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
          <div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">10h 15m</div></div><div class="depart-plane">→</div></div>
          <div class="depart-airport"><div class="depart-code">LHR</div><div class="depart-city">London</div></div>
        </div>
        <div class="depart-grid">
          <div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">B767-400</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">245</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">F / J / Y</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">Yes</div></div>
        </div>
        <div class="depart-foot"><span>Now boarding all groups · Final call</span><span>TB · Gate A22</span></div>
      </div>
    </div>
    <div class="depart-row">
      <span class="depart-time">10:30</span>
      <span class="depart-num">SQ 7736</span>
      <span class="depart-dest">Singapore <small>SIN</small></span>
      <span class="depart-term">TB</span>
      <span class="depart-gate">B44</span>
      <span class="depart-status depart-delayed">Delayed 45m</span>
      <div class="depart-tip">
        <div class="depart-tip-head">
          <div><div class="depart-airline">Singapore Airlines</div><div class="depart-flightnum">SQ 7736</div></div>
          <span class="depart-badge depart-badge-delayed">Delayed 45m</span>
        </div>
        <div class="depart-route">
          <div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
          <div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">17h 30m</div></div><div class="depart-plane">→</div></div>
          <div class="depart-airport"><div class="depart-code">SIN</div><div class="depart-city">Singapore</div></div>
        </div>
        <div class="depart-grid">
          <div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">A350-900ULR</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">161</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">J / Y</div></div>
          <div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">2× hot</div></div>
        </div>
        <div class="depart-foot"><span>Late inbound aircraft · New ETD 11:15</span><span>TB · Gate B44</span></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.depart-stage {
  background: #111111;
  /* Bottom room — flight detail cards drop down from each row, ~280px
     tall. The board sits high so the tooltips render inside the card. */
  padding: 36px 28px 320px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.depart-board {
  max-width: 720px;
  margin: 0 auto;
  background: #181818;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
}
.depart-headrow {
  display: grid;
  grid-template-columns: 60px 90px 1fr 50px 50px 90px;
  padding: 10px 18px;
  border-bottom: 1px solid #222;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a3a3a;
  gap: 12px;
}
.depart-row {
  display: grid;
  grid-template-columns: 60px 90px 1fr 50px 50px 90px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid #1d1d1d;
  gap: 12px;
  cursor: help;
  position: relative;
  transition: background 0.12s;
}
.depart-row:last-child { border-bottom: none; }
.depart-row:hover { background: rgba(255, 255, 255, 0.025); }
.depart-time {
  font-size: 16px;
  font-weight: 500;
  color: #e8a020;
  letter-spacing: 0.06em;
}
.depart-num { font-size: 12px; color: #8a8a8a; }
.depart-dest { font-size: 13px; color: #e0e0e0; letter-spacing: 0.02em; }
.depart-dest small { font-size: 10px; color: #444; margin-left: 6px; }
.depart-term { font-size: 12px; color: #6a6a6a; }
.depart-gate { font-size: 13px; font-weight: 500; color: #c08010; }
.depart-status { font-size: 10px; font-weight: 500; letter-spacing: 0.05em; }
.depart-ontime  { color: #30b860; }
.depart-boarding { color: #e8a020; animation: depart-blink 1.2s ease-in-out infinite; }
.depart-delayed { color: #e05030; }
.depart-departed { color: #404040; }
@keyframes depart-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.depart-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(6px);
  z-index: 100;
  width: 360px;
  background: #1c1c1c;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}
.depart-row:hover .depart-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.depart-tip-head {
  background: #222;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #2a2a2a;
}
.depart-airline { font-size: 10px; color: #5a5a5a; letter-spacing: 0.08em; }
.depart-flightnum {
  font-size: 18px;
  font-weight: 500;
  color: #e8a020;
  margin-top: 2px;
}
.depart-badge {
  font-size: 9.5px;
  padding: 3px 9px;
  border-radius: 3px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.depart-badge-ontime   { background: rgba(48, 184, 96, 0.12); color: #30b860; border: 1px solid rgba(48, 184, 96, 0.2); }
.depart-badge-boarding { background: rgba(232, 160, 32, 0.12); color: #e8a020; border: 1px solid rgba(232, 160, 32, 0.2); }
.depart-badge-delayed  { background: rgba(224, 80, 48, 0.12); color: #e05030; border: 1px solid rgba(224, 80, 48, 0.2); }
.depart-badge-departed { background: rgba(80, 80, 80, 0.1); color: #505050; border: 1px solid #282828; }
.depart-route {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #242424;
}
.depart-airport { text-align: center; }
.depart-code { font-size: 20px; font-weight: 500; color: #c0c0c0; letter-spacing: 0.04em; }
.depart-city { font-size: 8.5px; color: #444; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.depart-arrow {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}
.depart-arrow-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, #2a2a2a, #3a3a3a, #2a2a2a);
  position: relative;
}
.depart-duration {
  font-size: 8.5px;
  color: #404040;
  text-align: center;
  position: absolute;
  top: -13px;
  width: 100%;
  letter-spacing: 0.08em;
}
.depart-plane { font-size: 13px; color: #505050; flex-shrink: 0; }
.depart-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #242424;
}
.depart-cell {
  padding: 9px 14px;
  border-right: 1px solid #242424;
}
.depart-cell:last-child { border-right: none; }
.depart-cell-label {
  font-size: 7.5px;
  color: #383838;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.depart-cell-val { font-size: 11.5px; color: #808080; }
.depart-foot {
  padding: 9px 16px;
  font-size: 8.5px;
  color: #303030;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.06em;
}
```

### 14. Recipe Ingredient Card

**Type:** Pure CSS
**Description:** A warm cookbook page where ingredient names carry dotted underlines. Hover one and a side card lifts in with nutrition facts, substitution suggestions, and a sourcing note — designed for recipe sites, meal-plan apps, food databases.

**HTML:**
```html
<div class="ringd-stage">
  <div class="ringd-card">
    <div class="ringd-title">Roasted Lemon Herb Chicken</div>
    <div class="ringd-subtitle">French Country · Serves 4</div>
    <div class="ringd-meta">
      <div class="ringd-meta-item"><div class="ringd-meta-label">Prep</div><div class="ringd-meta-val">20 min</div></div>
      <div class="ringd-meta-item"><div class="ringd-meta-label">Cook</div><div class="ringd-meta-val">1 hr 15 min</div></div>
      <div class="ringd-meta-item"><div class="ringd-meta-label">Total</div><div class="ringd-meta-val">1 hr 35 min</div></div>
      <div class="ringd-meta-item"><div class="ringd-meta-label">Difficulty</div><div class="ringd-meta-val">Medium</div></div>
    </div>
    <div class="ringd-section-head">Ingredients</div>
    <ul class="ringd-list">
      <li>
        <span class="ringd-qty">1 whole (3–4 lb)</span>
        <span class="ringd-t">
          <span class="ringd-name">free-range chicken</span>
          <div class="ringd-tip">
            <div class="ringd-tip-head"><div class="ringd-ing-name">Free-Range Chicken</div><div class="ringd-ing-type">Poultry · whole bird</div></div>
            <div class="ringd-nutrition">
              <div class="ringd-nut-title">Per 100g (roasted, no skin)</div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Calories</span><span class="ringd-nut-val">165 kcal</span></div>
              <div class="ringd-bar-wrap"><div class="ringd-bar" style="width:55%"></div></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Protein</span><span class="ringd-nut-val">31g</span></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Iron</span><span class="ringd-nut-val">1.1mg (14% DV)</span></div>
            </div>
            <div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Cornish game hens (halve cook time)</div><div class="ringd-sub">Bone-in chicken pieces</div></div>
            <div class="ringd-note">Look for air-chilled, free-range birds — less water retention gives crispier skin.</div>
          </div>
        </span>
      </li>
      <li>
        <span class="ringd-qty">2 whole heads</span>
        <span class="ringd-t">
          <span class="ringd-name">garlic</span>
          <div class="ringd-tip">
            <div class="ringd-tip-head"><div class="ringd-ing-name">Garlic</div><div class="ringd-ing-type">Allium · bulb</div></div>
            <div class="ringd-nutrition">
              <div class="ringd-nut-title">Per 3 cloves (9g)</div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Calories</span><span class="ringd-nut-val">13 kcal</span></div>
              <div class="ringd-bar-wrap"><div class="ringd-bar" style="width:10%"></div></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Allicin</span><span class="ringd-nut-val">high (antimicrobial)</span></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Vit C</span><span class="ringd-nut-val">9% DV</span></div>
            </div>
            <div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Roasted garlic paste (2 tbsp)</div><div class="ringd-sub">Shallots (milder flavour)</div></div>
            <div class="ringd-note">Do not peel — roasted whole heads caramelize beautifully.</div>
          </div>
        </span>
      </li>
      <li>
        <span class="ringd-qty">2 medium</span>
        <span class="ringd-t">
          <span class="ringd-name">lemons, zested and halved</span>
          <div class="ringd-tip">
            <div class="ringd-tip-head"><div class="ringd-ing-name">Lemon</div><div class="ringd-ing-type">Citrus fruit · fresh</div></div>
            <div class="ringd-nutrition">
              <div class="ringd-nut-title">Per 1 medium lemon (84g)</div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Calories</span><span class="ringd-nut-val">22 kcal</span></div>
              <div class="ringd-bar-wrap"><div class="ringd-bar" style="width:15%"></div></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Vitamin C</span><span class="ringd-nut-val">51mg (56% DV)</span></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Citric acid</span><span class="ringd-nut-val">tenderises meat</span></div>
            </div>
            <div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Meyer lemons (sweeter)</div><div class="ringd-sub">1½ limes + ½ orange</div></div>
            <div class="ringd-note">Microplane the zest before cutting — releases essential oils lost once sliced.</div>
          </div>
        </span>
      </li>
      <li>
        <span class="ringd-qty">¼ cup, fresh</span>
        <span class="ringd-t">
          <span class="ringd-name">thyme and rosemary</span>
          <div class="ringd-tip">
            <div class="ringd-tip-head"><div class="ringd-ing-name">Fresh Herbs</div><div class="ringd-ing-type">Lamiaceae · aromatic</div></div>
            <div class="ringd-nutrition">
              <div class="ringd-nut-title">Per tbsp fresh thyme (2.4g)</div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Thymol</span><span class="ringd-nut-val">antimicrobial terpene</span></div>
              <div class="ringd-bar-wrap"><div class="ringd-bar" style="width:30%"></div></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Iron</span><span class="ringd-nut-val">1.7mg (10% DV)</span></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Rosmarinic</span><span class="ringd-nut-val">antioxidant</span></div>
            </div>
            <div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Dried herbs (use ⅓ the quantity)</div><div class="ringd-sub">Herbes de Provence (1 tbsp)</div></div>
            <div class="ringd-note">Slide whole sprigs under the skin — the fat bastes the herbs during roasting.</div>
          </div>
        </span>
      </li>
      <li>
        <span class="ringd-qty">4 tbsp, softened</span>
        <span class="ringd-t">
          <span class="ringd-name">unsalted butter</span>
          <div class="ringd-tip">
            <div class="ringd-tip-head"><div class="ringd-ing-name">Unsalted Butter</div><div class="ringd-ing-type">Dairy · fat</div></div>
            <div class="ringd-nutrition">
              <div class="ringd-nut-title">Per tbsp (14g)</div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Calories</span><span class="ringd-nut-val">102 kcal</span></div>
              <div class="ringd-bar-wrap"><div class="ringd-bar" style="width:78%"></div></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Saturated</span><span class="ringd-nut-val">7.3g</span></div>
              <div class="ringd-nut-row"><span class="ringd-nut-name">Vitamin A</span><span class="ringd-nut-val">7% DV</span></div>
            </div>
            <div class="ringd-subs"><div class="ringd-subs-title">Substitutions</div><div class="ringd-sub">Ghee (higher smoke point)</div><div class="ringd-sub">Olive oil (dairy-free)</div></div>
            <div class="ringd-note">Unsalted lets you control seasoning. European-style (84%+ fat) gives richer results.</div>
          </div>
        </span>
      </li>
    </ul>
  </div>
</div>
```

**CSS:**
```css
.ringd-stage {
  background: #fdf8f0;
  /* Right room — ingredient cards pop to the RIGHT of each name,
     ~280px wide. The recipe card is centered with extra right space. */
  padding: 40px 320px 40px 28px;
  font-family: Georgia, serif;
}
.ringd-card {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(180, 160, 120, 0.25);
  border-radius: 2px;
  padding: 32px 36px;
  box-shadow:
    0 2px 22px rgba(100, 80, 40, 0.08),
    0 0 0 4px rgba(180, 160, 120, 0.06);
}
.ringd-title {
  font-family: Georgia, serif;
  font-size: 26px;
  font-style: italic;
  color: #2c2010;
  margin-bottom: 4px;
  line-height: 1.2;
}
.ringd-subtitle {
  font-size: 12px;
  color: #a09070;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ringd-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(180, 160, 120, 0.2);
  flex-wrap: wrap;
}
.ringd-meta-label {
  font-size: 8.5px;
  color: #b0a080;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ringd-meta-val {
  font-size: 13px;
  color: #5a4828;
  font-style: italic;
  margin-top: 1px;
}
.ringd-section-head {
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7050;
  margin-bottom: 12px;
  font-weight: 400;
}
.ringd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ringd-list li {
  font-size: 15px;
  color: #3a2c18;
  line-height: 1.9;
  border-bottom: 1px dashed rgba(180, 160, 120, 0.15);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ringd-list li:last-child { border-bottom: none; }
.ringd-qty {
  color: #a09070;
  font-size: 13px;
  font-style: italic;
  min-width: 110px;
  flex-shrink: 0;
}
.ringd-t {
  position: relative;
  display: inline-block;
  cursor: help;
}
.ringd-name {
  border-bottom: 1px dotted rgba(140, 100, 40, 0.4);
  transition: color .15s, border-color .15s;
  color: #3a2c18;
}
.ringd-t:hover .ringd-name {
  color: #8a5020;
  border-bottom-color: rgba(138, 80, 32, 0.6);
}
.ringd-tip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  z-index: 200;
  width: 240px;
  background: #fff;
  border: 1px solid rgba(180, 160, 120, 0.3);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  box-shadow: 4px 6px 22px rgba(80, 60, 20, 0.15);
  overflow: hidden;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
}
.ringd-t:hover .ringd-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.ringd-tip-head {
  background: #f8f2e6;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(180, 160, 120, 0.2);
}
.ringd-ing-name {
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: #3a2c18;
  margin-bottom: 2px;
}
.ringd-ing-type {
  font-size: 9.5px;
  color: #a09070;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ringd-nutrition {
  padding: 10px 13px;
  border-bottom: 1px solid rgba(180, 160, 120, 0.12);
}
.ringd-nut-title {
  font-size: 8.5px;
  color: #b0a080;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ringd-nut-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  font-size: 10.5px;
}
.ringd-nut-name { color: #7a6a50; }
.ringd-nut-val {
  color: #5a4828;
  font-family: Georgia, serif;
  font-style: italic;
}
.ringd-bar-wrap {
  height: 2px;
  background: rgba(180, 160, 120, 0.15);
  border-radius: 1px;
  margin: 2px 0 6px;
  overflow: hidden;
}
.ringd-bar {
  height: 100%;
  border-radius: 1px;
  background: linear-gradient(to right, #c8a060, #e8c080);
}
.ringd-subs {
  padding: 10px 13px;
  border-bottom: 1px solid rgba(180, 160, 120, 0.12);
}
.ringd-subs-title {
  font-size: 8.5px;
  color: #b0a080;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ringd-sub {
  font-size: 10.5px;
  color: #7a6a50;
  margin-bottom: 4px;
  padding-left: 9px;
  position: relative;
}
.ringd-sub::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #c8a060;
  font-size: 9px;
}
.ringd-note {
  padding: 10px 13px;
  font-size: 9.5px;
  font-style: italic;
  color: #9a8a68;
  line-height: 1.5;
  font-family: Georgia, serif;
}
```

### 15. Orion Constellation Chart

**Type:** Pure CSS
**Description:** A starfield rendering of the Orion constellation with six labeled star hotspots — Rigel, Betelgeuse, Bellatrix, Alnilam, Saiph, Meissa. Each star pops a card with real astronomical data: Bayer designation, distance, magnitude, luminosity, and a five-star brightness gauge.

**HTML:**
```html
<div class="orion-stage">
  <div class="orion-chart">
    <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
      <circle cx="22" cy="18" r="0.6" fill="rgba(200,220,255,0.35)"/>
      <circle cx="80" cy="10" r="0.7" fill="rgba(200,220,255,0.45)"/>
      <circle cx="140" cy="22" r="0.4" fill="rgba(200,220,255,0.25)"/>
      <circle cx="170" cy="38" r="0.6" fill="rgba(200,220,255,0.35)"/>
      <circle cx="265" cy="18" r="0.7" fill="rgba(200,220,255,0.4)"/>
      <circle cx="330" cy="22" r="0.4" fill="rgba(200,220,255,0.22)"/>
      <circle cx="360" cy="55" r="0.6" fill="rgba(200,220,255,0.38)"/>
      <circle cx="30" cy="80" r="0.4" fill="rgba(200,220,255,0.2)"/>
      <circle cx="320" cy="75" r="0.6" fill="rgba(200,220,255,0.32)"/>
      <circle cx="55" cy="145" r="0.5" fill="rgba(200,220,255,0.28)"/>
      <circle cx="360" cy="150" r="0.5" fill="rgba(200,220,255,0.28)"/>
      <circle cx="35" cy="260" r="0.5" fill="rgba(200,220,255,0.3)"/>
      <circle cx="380" cy="260" r="0.5" fill="rgba(200,220,255,0.28)"/>
      <circle cx="58" cy="360" r="0.4" fill="rgba(200,220,255,0.2)"/>
      <circle cx="90" cy="380" r="0.5" fill="rgba(200,220,255,0.28)"/>
      <circle cx="340" cy="355" r="0.5" fill="rgba(200,220,255,0.3)"/>
      <circle cx="392" cy="360" r="0.6" fill="rgba(200,220,255,0.35)"/>
      <line x1="200" y1="48" x2="148" y2="155" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
      <line x1="200" y1="48" x2="262" y2="142" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
      <line x1="148" y1="155" x2="168" y2="228" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
      <line x1="262" y1="142" x2="232" y2="224" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
      <line x1="168" y1="228" x2="200" y2="230" stroke="rgba(140,160,255,0.22)" stroke-width="0.8"/>
      <line x1="200" y1="230" x2="232" y2="224" stroke="rgba(140,160,255,0.22)" stroke-width="0.8"/>
      <line x1="168" y1="228" x2="136" y2="342" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
      <line x1="232" y1="224" x2="278" y2="330" stroke="rgba(140,160,255,0.18)" stroke-width="0.8"/>
      <circle cx="200" cy="48" r="6" fill="rgba(160,180,255,0.08)"/>
      <circle cx="200" cy="48" r="2.5" fill="#d0daff" opacity="0.85"/>
      <circle cx="148" cy="155" r="10" fill="rgba(255,120,60,0.06)"/>
      <circle cx="148" cy="155" r="5" fill="#ffb890" opacity="0.9"/>
      <circle cx="262" cy="142" r="6" fill="rgba(160,200,255,0.06)"/>
      <circle cx="262" cy="142" r="3" fill="#c0d8ff" opacity="0.85"/>
      <circle cx="168" cy="228" r="5" fill="rgba(160,180,255,0.06)"/>
      <circle cx="168" cy="228" r="2.8" fill="#d0daff" opacity="0.85"/>
      <circle cx="200" cy="230" r="5" fill="rgba(160,180,255,0.06)"/>
      <circle cx="200" cy="230" r="3" fill="#d0daff" opacity="0.85"/>
      <circle cx="232" cy="224" r="5" fill="rgba(160,200,255,0.06)"/>
      <circle cx="232" cy="224" r="2.5" fill="#c8d8ff" opacity="0.85"/>
      <circle cx="136" cy="342" r="5" fill="rgba(160,200,255,0.06)"/>
      <circle cx="136" cy="342" r="2.5" fill="#c0d4ff" opacity="0.8"/>
      <circle cx="278" cy="330" r="14" fill="rgba(160,200,255,0.05)"/>
      <circle cx="278" cy="330" r="6" fill="#dce8ff" opacity="0.95"/>
    </svg>
    <div class="orion-spot" style="left:37%;top:38.75%"><div class="orion-hit"></div>
      <div class="orion-card">
        <div class="orion-top"><div class="orion-bayer">α Orionis</div><div class="orion-name">Betelgeuse</div><div class="orion-const">Orion · Upper left shoulder</div><span class="orion-pill">M1–2 Iaab · Red Supergiant</span></div>
        <div class="orion-data">
          <div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">700 ly</span></div>
          <div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">0.42 (variable)</span></div>
          <div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~126,000 L☉</span></div>
          <div class="orion-row"><span class="orion-key">Radius</span><span class="orion-val">~700 R☉</span></div>
          <div class="orion-mag"><span class="orion-mag-label">Brightness</span><span class="orion-mag-stars"><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star orion-mag-dim">★</span></span></div>
        </div>
      </div>
    </div>
    <div class="orion-spot" style="left:69.5%;top:82.5%"><div class="orion-hit"></div>
      <div class="orion-card orion-card-left">
        <div class="orion-top"><div class="orion-bayer">β Orionis</div><div class="orion-name">Rigel</div><div class="orion-const">Orion · Lower right</div><span class="orion-pill">B8 Ia · Blue Supergiant</span></div>
        <div class="orion-data">
          <div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">860 ly</span></div>
          <div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">0.13 (brightest)</span></div>
          <div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~120,000 L☉</span></div>
          <div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">12,100 K</span></div>
          <div class="orion-mag"><span class="orion-mag-label">Brightness</span><span class="orion-mag-stars"><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span></span></div>
        </div>
      </div>
    </div>
    <div class="orion-spot" style="left:65.5%;top:35.5%"><div class="orion-hit"></div>
      <div class="orion-card orion-card-left">
        <div class="orion-top"><div class="orion-bayer">γ Orionis</div><div class="orion-name">Bellatrix</div><div class="orion-const">Orion · Upper right shoulder</div><span class="orion-pill">B2 III · Blue Giant</span></div>
        <div class="orion-data">
          <div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">250 ly</span></div>
          <div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">1.64</span></div>
          <div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~6,400 L☉</span></div>
          <div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">22,000 K</span></div>
          <div class="orion-mag"><span class="orion-mag-label">Brightness</span><span class="orion-mag-stars"><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star">★</span><span class="orion-mag-star orion-mag-dim">★</span><span class="orion-mag-star orion-mag-dim">★</span></span></div>
        </div>
      </div>
    </div>
    <div class="orion-spot" style="left:50%;top:57.5%"><div class="orion-hit"></div>
      <div class="orion-card">
        <div class="orion-top"><div class="orion-bayer">ε Orionis</div><div class="orion-name">Alnilam</div><div class="orion-const">Orion · Belt, central star</div><span class="orion-pill">B0 Ia · Blue Supergiant</span></div>
        <div class="orion-data">
          <div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">2,000 ly</span></div>
          <div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">1.69</span></div>
          <div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~375,000 L☉</span></div>
          <div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">27,500 K</span></div>
        </div>
      </div>
    </div>
    <div class="orion-spot" style="left:50%;top:12%"><div class="orion-hit"></div>
      <div class="orion-card">
        <div class="orion-top"><div class="orion-bayer">λ Orionis</div><div class="orion-name">Meissa</div><div class="orion-const">Orion · Head</div><span class="orion-pill">O8 III · Blue-White Giant</span></div>
        <div class="orion-data">
          <div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">1,100 ly</span></div>
          <div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">3.39</span></div>
          <div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~28,000 L☉</span></div>
          <div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">35,000 K</span></div>
        </div>
      </div>
    </div>
    <div class="orion-spot" style="left:34%;top:85.5%"><div class="orion-hit"></div>
      <div class="orion-card">
        <div class="orion-top"><div class="orion-bayer">κ Orionis</div><div class="orion-name">Saiph</div><div class="orion-const">Orion · Lower left</div><span class="orion-pill">B0.5 Ia · Blue Supergiant</span></div>
        <div class="orion-data">
          <div class="orion-row"><span class="orion-key">Distance</span><span class="orion-val">720 ly</span></div>
          <div class="orion-row"><span class="orion-key">App. mag</span><span class="orion-val">2.07</span></div>
          <div class="orion-row"><span class="orion-key">Luminosity</span><span class="orion-val">~57,500 L☉</span></div>
          <div class="orion-row"><span class="orion-key">Temp</span><span class="orion-val">26,500 K</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.orion-stage {
  background: #04060e;
  /* Side room — star cards pop to the right (Betelgeuse, Alnilam,
     Meissa, Saiph) or left (Rigel, Bellatrix). 260px each side. */
  padding: 40px 280px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orion-chart {
  position: relative;
  width: 400px;
  height: 400px;
  flex-shrink: 0;
}
.orion-chart svg { width: 100%; height: 100%; display: block; }
.orion-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: help;
  z-index: 10;
}
.orion-hit {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
}
.orion-hit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(180, 200, 255, 0);
  transition: background .2s;
}
.orion-spot:hover .orion-hit::after {
  background: rgba(180, 200, 255, 0.08);
  box-shadow: 0 0 18px 6px rgba(160, 180, 255, 0.12);
}
.orion-card {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  z-index: 200;
  width: 230px;
  background: rgba(8, 12, 28, 0.96);
  border: 1px solid rgba(100, 120, 200, 0.2);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(100, 120, 200, 0.06);
  overflow: hidden;
  text-align: left;
}
.orion-spot:hover .orion-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.orion-card-left {
  left: auto;
  right: calc(100% + 14px);
  transform: translateY(-50%) translateX(-6px);
}
.orion-spot:hover .orion-card-left {
  transform: translateY(-50%) translateX(0);
}
.orion-top {
  padding: 12px 13px 10px;
  border-bottom: 1px solid rgba(100, 120, 200, 0.1);
}
.orion-bayer {
  font-size: 9px;
  color: rgba(140, 160, 255, 0.4);
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}
.orion-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(220, 230, 255, 0.92);
  margin-bottom: 1px;
}
.orion-const {
  font-size: 9.5px;
  color: rgba(100, 120, 180, 0.6);
}
.orion-pill {
  display: inline-block;
  font-size: 8.5px;
  padding: 2px 7px;
  border-radius: 3px;
  margin-top: 6px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(100, 120, 200, 0.2);
  color: rgba(140, 160, 220, 0.7);
}
.orion-data { padding: 10px 13px; }
.orion-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.orion-key {
  font-size: 8.5px;
  color: rgba(60, 80, 140, 0.7);
  letter-spacing: 0.08em;
}
.orion-val {
  font-size: 9.5px;
  color: rgba(160, 180, 240, 0.75);
}
.orion-mag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(100, 120, 200, 0.06);
}
.orion-mag-label {
  font-size: 7.5px;
  color: rgba(60, 80, 140, 0.5);
  letter-spacing: 0.08em;
}
.orion-mag-stars {
  display: flex;
  gap: 2px;
}
.orion-mag-star {
  font-size: 9.5px;
  color: rgba(255, 220, 80, 0.7);
}
.orion-mag-dim {
  color: rgba(60, 80, 140, 0.3);
}
```

### 16. Periodic Table Element

**Type:** Pure CSS
**Description:** Periodic-table tiles for the first three periods, color-coded by element category (nonmetal, alkali, halogen, noble, metalloid, etc.). Hover any tile and a card lifts in with atomic number, mass, electron configuration, melting/boiling points, and discovery credit.

**HTML:**
```html
<div class="elm-stage">
  <div class="elm-grid">
    <div class="elm-row">
      <div class="elm-tile elm-nonmetal">
        <div class="elm-num">1</div><div class="elm-sym">H</div><div class="elm-name">Hydrogen</div><div class="elm-mass">1.008</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">H</div><div class="elm-card-name">Hydrogen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">1</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Atomic Mass</span><span class="elm-card-val">1.008 u</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">1s¹</span></div>
            <div class="elm-card-row"><span class="elm-card-key">State (25°C)</span><span class="elm-card-val">Gas</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−252.9 °C</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1766 · Henry Cavendish</div>
        </div>
      </div>
      <div class="elm-gap" style="width:380px"></div>
      <div class="elm-tile elm-noble">
        <div class="elm-num">2</div><div class="elm-sym">He</div><div class="elm-name">Helium</div><div class="elm-mass">4.003</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">He</div><div class="elm-card-name">Helium</div><span class="elm-cat elm-cat-noble">Noble Gas</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">2</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Atomic Mass</span><span class="elm-card-val">4.003 u</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">1s²</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−268.9 °C</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1895 · Ramsey, Clève, Langlet</div>
        </div>
      </div>
    </div>
    <div class="elm-row">
      <div class="elm-tile elm-alkali">
        <div class="elm-num">3</div><div class="elm-sym">Li</div><div class="elm-name">Lithium</div><div class="elm-mass">6.941</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">Li</div><div class="elm-card-name">Lithium</div><span class="elm-cat elm-cat-alkali">Alkali Metal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">3</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s¹</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">180.5 °C</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Use</span><span class="elm-card-val">Batteries, ceramics</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1817 · J. A. Arfwedson</div>
        </div>
      </div>
      <div class="elm-tile elm-alkaline">
        <div class="elm-num">4</div><div class="elm-sym">Be</div><div class="elm-name">Beryllium</div><div class="elm-mass">9.012</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">Be</div><div class="elm-card-name">Beryllium</div><span class="elm-cat elm-cat-alkaline">Alkaline Earth</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">4</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s²</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">1,287 °C</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Note</span><span class="elm-card-val">Highly toxic dust</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1798 · L.-N. Vauquelin</div>
        </div>
      </div>
      <div class="elm-gap" style="width:300px"></div>
      <div class="elm-tile elm-metalloid">
        <div class="elm-num">5</div><div class="elm-sym">B</div><div class="elm-name">Boron</div><div class="elm-mass">10.81</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">B</div><div class="elm-card-name">Boron</div><span class="elm-cat elm-cat-metalloid">Metalloid</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p¹</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">2,076 °C</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1808 · Gay-Lussac, Davy</div>
        </div>
      </div>
      <div class="elm-tile elm-nonmetal">
        <div class="elm-num">6</div><div class="elm-sym">C</div><div class="elm-name">Carbon</div><div class="elm-mass">12.01</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">C</div><div class="elm-card-name">Carbon</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p²</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Allotropes</span><span class="elm-card-val">Diamond, graphite</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Sublimation</span><span class="elm-card-val">3,642 °C</span></div>
          </div>
          <div class="elm-card-disc">Known since antiquity</div>
        </div>
      </div>
      <div class="elm-tile elm-nonmetal">
        <div class="elm-num">7</div><div class="elm-sym">N</div><div class="elm-name">Nitrogen</div><div class="elm-mass">14.01</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">N</div><div class="elm-card-name">Nitrogen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p³</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−195.8 °C</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Atmosphere</span><span class="elm-card-val">78% of air</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1772 · Daniel Rutherford</div>
        </div>
      </div>
      <div class="elm-tile elm-nonmetal">
        <div class="elm-num">8</div><div class="elm-sym">O</div><div class="elm-name">Oxygen</div><div class="elm-mass">16.00</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">O</div><div class="elm-card-name">Oxygen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁴</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−183 °C</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1771 · C. W. Scheele</div>
        </div>
      </div>
      <div class="elm-tile elm-halogen">
        <div class="elm-num">9</div><div class="elm-sym">F</div><div class="elm-name">Fluorine</div><div class="elm-mass">19.00</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">F</div><div class="elm-card-name">Fluorine</div><span class="elm-cat elm-cat-halogen">Halogen</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁵</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Electronegativity</span><span class="elm-card-val">3.98 (highest)</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−188 °C</span></div>
          </div>
          <div class="elm-card-disc">Isolated 1886 · Henri Moissan</div>
        </div>
      </div>
      <div class="elm-tile elm-noble">
        <div class="elm-num">10</div><div class="elm-sym">Ne</div><div class="elm-name">Neon</div><div class="elm-mass">20.18</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">Ne</div><div class="elm-card-name">Neon</div><span class="elm-cat elm-cat-noble">Noble Gas</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁶</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−246.1 °C</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Emission</span><span class="elm-card-val">Red-orange glow</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1898 · Ramsay & Travers</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.elm-stage {
  background: #0d0d10;
  /* Top room — element cards pop UP from each tile, ~240px tall. */
  padding: 260px 28px 40px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.elm-grid {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.elm-row {
  display: flex;
  gap: 5px;
}
.elm-tile {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  padding: 5px 6px;
  cursor: help;
  transition: transform .15s;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.elm-tile:hover {
  transform: scale(1.08) translateY(-2px);
  z-index: 10;
}
.elm-nonmetal  { background: rgba(40, 80, 40, 0.3);  border-color: rgba(60, 160, 60, 0.25); }
.elm-alkali    { background: rgba(80, 20, 20, 0.3);  border-color: rgba(200, 60, 40, 0.25); }
.elm-alkaline  { background: rgba(80, 50, 0, 0.3);   border-color: rgba(200, 140, 0, 0.25); }
.elm-metalloid { background: rgba(20, 60, 80, 0.3);  border-color: rgba(40, 160, 200, 0.25); }
.elm-noble     { background: rgba(60, 20, 80, 0.3);  border-color: rgba(160, 60, 200, 0.25); }
.elm-halogen   { background: rgba(60, 60, 0, 0.3);   border-color: rgba(180, 180, 20, 0.25); }
.elm-gap { height: 56px; flex-shrink: 0; }
.elm-num { font-size: 7.5px; color: rgba(255, 255, 255, 0.25); }
.elm-sym {
  font-size: 19px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
  margin: 1px 0 2px;
}
.elm-name {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elm-mass {
  font-size: 6.5px;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 1px;
}
.elm-card {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 300;
  width: 220px;
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  text-align: left;
}
.elm-tile:hover .elm-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.elm-card-top {
  padding: 11px 13px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.elm-card-sym {
  font-size: 24px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}
.elm-card-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.elm-cat {
  display: inline-block;
  font-size: 7.5px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 6px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.elm-cat-nonmetal  { background: rgba(60, 160, 60, 0.15); color: #60c060; border: 1px solid rgba(60, 160, 60, 0.2); }
.elm-cat-alkali    { background: rgba(180, 40, 20, 0.15); color: #e06050; border: 1px solid rgba(180, 40, 20, 0.2); }
.elm-cat-alkaline  { background: rgba(160, 100, 0, 0.15); color: #c09020; border: 1px solid rgba(160, 100, 0, 0.2); }
.elm-cat-metalloid { background: rgba(20, 100, 140, 0.15); color: #40c0e0; border: 1px solid rgba(20, 100, 140, 0.2); }
.elm-cat-noble     { background: rgba(120, 40, 160, 0.15); color: #a060e0; border: 1px solid rgba(120, 40, 160, 0.2); }
.elm-cat-halogen   { background: rgba(140, 140, 0, 0.15); color: #c0c020; border: 1px solid rgba(140, 140, 0, 0.2); }
.elm-card-data { padding: 9px 13px; }
.elm-card-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.elm-card-key {
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.08em;
}
.elm-card-val {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.elm-card-econfig {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.04em;
}
.elm-card-disc {
  padding: 8px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.04em;
}
```

### 17. Photo EXIF Grid

**Type:** Pure CSS
**Description:** A dark contact-sheet grid of eight gradient photographs. Hover any cell to lift a developer-tools-style card with full EXIF metadata — camera body, lens, aperture, shutter, ISO, focal length, white balance, and location. For photo portfolios and stock catalogs.

**HTML:**
```html
<div class="exif-stage">
  <div class="exif-grid">
    <div class="exif-cell">
      <div class="exif-img" style="background:linear-gradient(160deg,#c86020 0%,#e8a030 40%,#f0c060 70%,#a04010 100%)"></div>
      <div class="exif-tip">
        <div class="exif-tip-head"><div><div class="exif-camera">Sony A7 IV</div><div class="exif-lens">FE 24-70mm f/2.8 GM</div></div><div class="exif-date">Mar 14, 2024</div></div>
        <div class="exif-settings">
          <div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/8.0</div></div>
          <div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/250s</div></div>
          <div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">100</div></div>
        </div>
        <div class="exif-extra"><span>Focal: <strong>35mm</strong></span><span>WB: <strong>Daylight</strong></span><span>Malibu, CA</span></div>
      </div>
    </div>
    <div class="exif-cell">
      <div class="exif-img" style="background:linear-gradient(145deg,#1a1218 0%,#2c1828 50%,#180c14 100%)"></div>
      <div class="exif-tip">
        <div class="exif-tip-head"><div><div class="exif-camera">Nikon Z6 III</div><div class="exif-lens">NIKKOR Z 85mm f/1.8 S</div></div><div class="exif-date">Jan 8, 2024</div></div>
        <div class="exif-settings">
          <div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/1.8</div></div>
          <div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/160s</div></div>
          <div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">800</div></div>
        </div>
        <div class="exif-extra"><span>Focal: <strong>85mm</strong></span><span>WB: <strong>Tungsten</strong></span><span>Flash: <strong>Off</strong></span></div>
      </div>
    </div>
    <div class="exif-cell">
      <div class="exif-img" style="background:linear-gradient(180deg,#082840 0%,#0c4060 35%,#1060a0 70%,#082040 100%)"></div>
      <div class="exif-tip">
        <div class="exif-tip-head"><div><div class="exif-camera">Fujifilm X-T5</div><div class="exif-lens">XF 16-80mm f/4 R</div></div><div class="exif-date">Feb 22, 2024</div></div>
        <div class="exif-settings">
          <div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/11</div></div>
          <div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/500s</div></div>
          <div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">200</div></div>
        </div>
        <div class="exif-extra"><span>Focal: <strong>16mm</strong></span><span>WB: <strong>Cloudy</strong></span><span>Big Sur, CA</span></div>
      </div>
    </div>
    <div class="exif-cell">
      <div class="exif-img" style="background:linear-gradient(135deg,#0c1e10 0%,#1a3818 40%,#2a5a28 70%,#0c2010 100%)"></div>
      <div class="exif-tip">
        <div class="exif-tip-head"><div><div class="exif-camera">Canon EOS R5</div><div class="exif-lens">RF 24-105mm f/4L IS</div></div><div class="exif-date">Apr 5, 2024</div></div>
        <div class="exif-settings">
          <div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/5.6</div></div>
          <div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/60s</div></div>
          <div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">400</div></div>
        </div>
        <div class="exif-extra"><span>Focal: <strong>50mm</strong></span><span>WB: <strong>Shade</strong></span><span>Olympic NP</span></div>
      </div>
    </div>
    <div class="exif-cell">
      <div class="exif-img" style="background:linear-gradient(160deg,#080c18 0%,#101428 40%,#181c30 70%,#0c0e20 100%)"></div>
      <div class="exif-tip">
        <div class="exif-tip-head"><div><div class="exif-camera">Sony A7 IV</div><div class="exif-lens">FE 50mm f/1.4 GM</div></div><div class="exif-date">Dec 18, 2023</div></div>
        <div class="exif-settings">
          <div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/2.0</div></div>
          <div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/30s</div></div>
          <div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">3200</div></div>
        </div>
        <div class="exif-extra"><span>Focal: <strong>50mm</strong></span><span>WB: <strong>Auto</strong></span><span>Tokyo, JP</span></div>
      </div>
    </div>
    <div class="exif-cell">
      <div class="exif-img" style="background:linear-gradient(155deg,#604020 0%,#d09050 40%,#f0c880 70%,#806030 100%)"></div>
      <div class="exif-tip">
        <div class="exif-tip-head"><div><div class="exif-camera">Hasselblad X2D</div><div class="exif-lens">XCD 45mm f/3.5</div></div><div class="exif-date">Nov 3, 2023</div></div>
        <div class="exif-settings">
          <div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/16</div></div>
          <div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/1000s</div></div>
          <div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">64</div></div>
        </div>
        <div class="exif-extra"><span>Focal: <strong>45mm</strong></span><span>WB: <strong>Daylight</strong></span><span>Sahara, Morocco</span></div>
      </div>
    </div>
    <div class="exif-cell">
      <div class="exif-img" style="background:linear-gradient(170deg,#c8c8cc 0%,#a8a8b0 40%,#d0d0d4 70%,#b0b0b8 100%)"></div>
      <div class="exif-tip">
        <div class="exif-tip-head"><div><div class="exif-camera">Leica M11</div><div class="exif-lens">Summicron 50mm f/2</div></div><div class="exif-date">Oct 14, 2023</div></div>
        <div class="exif-settings">
          <div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/4.0</div></div>
          <div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/125s</div></div>
          <div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">200</div></div>
        </div>
        <div class="exif-extra"><span>Focal: <strong>50mm</strong></span><span>WB: <strong>Cloudy</strong></span><span>Highlands, UK</span></div>
      </div>
    </div>
    <div class="exif-cell">
      <div class="exif-img" style="background:linear-gradient(150deg,#200830 0%,#401060 40%,#602080 65%,#100420 100%)"></div>
      <div class="exif-tip">
        <div class="exif-tip-head"><div><div class="exif-camera">Nikon Z6 III</div><div class="exif-lens">NIKKOR Z 14-30mm f/4 S</div></div><div class="exif-date">Sep 27, 2023</div></div>
        <div class="exif-settings">
          <div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/2.8</div></div>
          <div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">20s</div></div>
          <div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">1600</div></div>
        </div>
        <div class="exif-extra"><span>Focal: <strong>14mm</strong></span><span>WB: <strong>3200K</strong></span><span>Iceland</span></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.exif-stage {
  background: #080808;
  /* Top room — EXIF cards pop UP from each photo, ~180px tall. */
  padding: 220px 28px 40px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* Force full width of the .cf-stage flex parent. Without this, the
     stage collapses to its content's min-width and the 4-column grid
     inside resolves each 1fr track to ~0px, stacking all 8 photos as
     one thin vertical strip. */
  width: 100%;
  box-sizing: border-box;
}
.exif-grid {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.exif-cell {
  position: relative;
  aspect-ratio: 3 / 2;
  cursor: help;
}
.exif-img {
  width: 100%;
  height: 100%;
  display: block;
  transition: filter .2s;
}
.exif-cell:hover .exif-img {
  filter: brightness(1.1);
}
.exif-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 100;
  width: 230px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.98);
  overflow: hidden;
  text-align: left;
}
.exif-cell:hover .exif-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.exif-tip-head {
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.exif-camera {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
}
.exif-lens {
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 2px;
}
.exif-date {
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.2);
}
.exif-settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.exif-set {
  padding: 9px 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.exif-set:last-child {
  border-right: none;
}
.exif-key {
  font-size: 6.5px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.exif-val {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
}
.exif-extra {
  display: flex;
  justify-content: space-between;
  padding: 8px 13px;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.25);
  gap: 6px;
}
.exif-extra strong {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
```

### 18. Org Chart Node

**Type:** Pure CSS
**Description:** A three-tier org chart with CEO → C-suite → leads. Hover any node to lift a profile card with gradient hero, avatar monogram, role + department pill, three stats (reports/org size/tenure), and a footer with email + timezone. For team directories, succession-planning UIs, internal wikis.

**HTML:**
```html
<div class="org-stage">
  <div class="org-tree">
    <div class="org-level">
      <div class="org-node">
        <div class="org-box org-box-ceo">
          <div class="org-av" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
          <div class="org-bname">Sarah Lindqvist</div>
          <div class="org-btitle">Chief Executive Officer</div>
          <div class="org-bdept">Executive</div>
        </div>
        <div class="org-card org-card-left">
          <div class="org-hero" style="background:linear-gradient(135deg,#4a1880,#8050c0)"></div>
          <div class="org-photo" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
          <div class="org-body">
            <div class="org-name">Sarah Lindqvist</div>
            <div class="org-title">Chief Executive Officer</div>
            <span class="org-pill">Executive · Board</span>
            <div class="org-stats">
              <div class="org-stat"><div class="org-stat-n">2</div><div class="org-stat-l">Reports</div></div>
              <div class="org-stat"><div class="org-stat-n">214</div><div class="org-stat-l">Org Size</div></div>
              <div class="org-stat"><div class="org-stat-n">8yr</div><div class="org-stat-l">Tenure</div></div>
            </div>
          </div>
          <div class="org-foot"><span>sarah@company.com</span><span>NYC · EST</span></div>
        </div>
      </div>
    </div>
    <div class="org-conn"></div>
    <div class="org-level">
      <div class="org-node">
        <div class="org-box">
          <div class="org-av" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
          <div class="org-bname">Marcus Webb</div>
          <div class="org-btitle">Chief Technology Officer</div>
          <div class="org-bdept">Engineering</div>
        </div>
        <div class="org-card org-card-left">
          <div class="org-hero" style="background:linear-gradient(135deg,#102060,#3060a0)"></div>
          <div class="org-photo" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
          <div class="org-body">
            <div class="org-name">Marcus Webb</div>
            <div class="org-title">Chief Technology Officer</div>
            <span class="org-pill">Engineering · Platform</span>
            <div class="org-stats">
              <div class="org-stat"><div class="org-stat-n">2</div><div class="org-stat-l">Reports</div></div>
              <div class="org-stat"><div class="org-stat-n">96</div><div class="org-stat-l">Org Size</div></div>
              <div class="org-stat"><div class="org-stat-n">5yr</div><div class="org-stat-l">Tenure</div></div>
            </div>
          </div>
          <div class="org-foot"><span>m.webb@company.com</span><span>SF · PST</span></div>
        </div>
      </div>
      <div class="org-node">
        <div class="org-box">
          <div class="org-av" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
          <div class="org-bname">Elena Russo</div>
          <div class="org-btitle">Chief Marketing Officer</div>
          <div class="org-bdept">Marketing</div>
        </div>
        <div class="org-card">
          <div class="org-hero" style="background:linear-gradient(135deg,#054030,#108060)"></div>
          <div class="org-photo" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
          <div class="org-body">
            <div class="org-name">Elena Russo</div>
            <div class="org-title">Chief Marketing Officer</div>
            <span class="org-pill">Marketing · Growth</span>
            <div class="org-stats">
              <div class="org-stat"><div class="org-stat-n">2</div><div class="org-stat-l">Reports</div></div>
              <div class="org-stat"><div class="org-stat-n">68</div><div class="org-stat-l">Org Size</div></div>
              <div class="org-stat"><div class="org-stat-n">3yr</div><div class="org-stat-l">Tenure</div></div>
            </div>
          </div>
          <div class="org-foot"><span>e.russo@company.com</span><span>London · GMT</span></div>
        </div>
      </div>
      <div class="org-node">
        <div class="org-box">
          <div class="org-av" style="background:linear-gradient(135deg,#804010,#c07030)">AT</div>
          <div class="org-bname">Amir Tahir</div>
          <div class="org-btitle">Chief Financial Officer</div>
          <div class="org-bdept">Finance</div>
        </div>
        <div class="org-card">
          <div class="org-hero" style="background:linear-gradient(135deg,#603008,#a06020)"></div>
          <div class="org-photo" style="background:linear-gradient(135deg,#804010,#c07030)">AT</div>
          <div class="org-body">
            <div class="org-name">Amir Tahir</div>
            <div class="org-title">Chief Financial Officer</div>
            <span class="org-pill">Finance · Strategy</span>
            <div class="org-stats">
              <div class="org-stat"><div class="org-stat-n">2</div><div class="org-stat-l">Reports</div></div>
              <div class="org-stat"><div class="org-stat-n">50</div><div class="org-stat-l">Org Size</div></div>
              <div class="org-stat"><div class="org-stat-n">2yr</div><div class="org-stat-l">Tenure</div></div>
            </div>
          </div>
          <div class="org-foot"><span>a.tahir@company.com</span><span>Dubai · GST</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.org-stage {
  background: #f7f7f9;
  /* Side room — org cards pop to the right (CMO/CFO) or left (CEO/CTO). */
  padding: 40px 280px;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.org-level {
  display: flex;
  justify-content: center;
  gap: 18px;
  position: relative;
}
.org-conn {
  width: 1px;
  height: 24px;
  background: #d0d0d8;
  margin: 0 auto;
}
.org-node {
  position: relative;
  cursor: help;
}
.org-box {
  background: #fff;
  border: 1px solid #e0e0e8;
  border-radius: 8px;
  padding: 9px 12px;
  width: 130px;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.org-node:hover .org-box {
  border-color: #a0a0c0;
  box-shadow: 0 4px 16px rgba(0, 0, 40, 0.08);
}
.org-box-ceo {
  border-color: #c0b0e0;
  background: linear-gradient(135deg, #faf9ff, #fff);
}
.org-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 0 auto 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.03em;
}
.org-bname {
  font-size: 10.5px;
  font-weight: 600;
  color: #1a1a2e;
}
.org-btitle {
  font-size: 8.5px;
  color: #909098;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.org-bdept {
  font-size: 7.5px;
  color: #c0c0cc;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.org-card {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  z-index: 200;
  width: 230px;
  background: #fff;
  border: 1px solid #e4e4ee;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  box-shadow:
    0 8px 30px rgba(0, 0, 40, 0.12),
    0 2px 8px rgba(0, 0, 40, 0.06);
  overflow: hidden;
  text-align: left;
}
.org-node:hover .org-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.org-card-left {
  left: auto;
  right: calc(100% + 12px);
  transform: translateY(-50%) translateX(-6px);
}
.org-node:hover .org-card-left {
  transform: translateY(-50%) translateX(0);
}
.org-hero {
  height: 50px;
  position: relative;
}
.org-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  position: absolute;
  left: 14px;
  bottom: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.org-body {
  padding: 20px 14px 11px;
}
.org-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
}
.org-title {
  font-size: 10.5px;
  color: #6060a0;
  margin-top: 1px;
}
.org-pill {
  display: inline-block;
  font-size: 8.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f0f0f8;
  color: #8080b0;
  margin-top: 6px;
  border: 1px solid #e4e4f0;
  letter-spacing: 0.04em;
}
.org-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f8;
}
.org-stat {
  text-align: center;
}
.org-stat-n {
  font-size: 14px;
  font-weight: 600;
  color: #2a2a4e;
}
.org-stat-l {
  font-size: 7.5px;
  color: #c0c0cc;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.org-foot {
  padding: 9px 14px;
  border-top: 1px solid #f4f4fc;
  font-size: 9.5px;
  color: #b0b0c8;
  display: flex;
  justify-content: space-between;
}
```

### 19. Event Timeline

**Type:** Pure CSS
**Description:** A horizontal seven-event company timeline (seed → IPO) with alternating labels above and below the track. Hovering any dot reveals an event card with quarter, headline, body prose, and a metric badge (valuation, ARR, market cap). For about pages, investor pages, retrospectives.

**HTML:**
```html
<div class="tline-stage">
  <div class="tline-track">
    <div class="tline-events">
      <div class="tline-event">
        <div class="tline-label">Seed Round</div>
        <div class="tline-dot"></div>
        <div class="tline-year">2018</div>
        <div class="tline-card">
          <div class="tline-card-top"><div class="tline-card-year">Q3 · 2018</div><div class="tline-card-title">Seed Funding Closed</div><span class="tline-badge tline-badge-mile">Milestone</span></div>
          <div class="tline-body">$2.4M raised from 12 angel investors. The round was led by two former founders from the enterprise SaaS sector, providing both capital and key industry connections.</div>
          <div class="tline-impact"><span class="tline-impact-label">Runway</span><span class="tline-impact-val">18 months secured</span></div>
        </div>
      </div>
      <div class="tline-event">
        <div class="tline-label">Public Beta</div>
        <div class="tline-dot"></div>
        <div class="tline-year">2019</div>
        <div class="tline-card">
          <div class="tline-card-top"><div class="tline-card-year">Q1 · 2019</div><div class="tline-card-title">Public Beta Launch</div><span class="tline-badge tline-badge-prod">Product</span></div>
          <div class="tline-body">First 1,000 paying customers acquired within 90 days. Net Promoter Score of 72 in initial surveys. Product-market fit validated across legal, healthcare, fintech.</div>
          <div class="tline-impact"><span class="tline-impact-label">ARR at launch</span><span class="tline-impact-val">$480K</span></div>
        </div>
      </div>
      <div class="tline-event">
        <div class="tline-label">Series A</div>
        <div class="tline-dot"></div>
        <div class="tline-year">2020</div>
        <div class="tline-card">
          <div class="tline-card-top"><div class="tline-card-year">Q2 · 2020</div><div class="tline-card-title">Series A — $12M</div><span class="tline-badge tline-badge-mile">Milestone</span></div>
          <div class="tline-body">$12M Series A led by Sequoia Capital. Round closed despite pandemic uncertainty, reflecting strong retention. Funds used to double engineering headcount.</div>
          <div class="tline-impact"><span class="tline-impact-label">Post-money</span><span class="tline-impact-val">$68M</span></div>
        </div>
      </div>
      <div class="tline-event">
        <div class="tline-label">EU Expansion</div>
        <div class="tline-dot"></div>
        <div class="tline-year">2021</div>
        <div class="tline-card">
          <div class="tline-card-top"><div class="tline-card-year">Q3 · 2021</div><div class="tline-card-title">100K Users · EU Launch</div><span class="tline-badge tline-badge-prod">Growth</span></div>
          <div class="tline-body">Crossed 100,000 active users and launched GDPR-compliant EU data centres in Frankfurt and Dublin. Opened London office with 24 hires. MRR surpassed $1M.</div>
          <div class="tline-impact"><span class="tline-impact-label">EU share</span><span class="tline-impact-val">31% of new ARR</span></div>
        </div>
      </div>
      <div class="tline-event">
        <div class="tline-label">Series B</div>
        <div class="tline-dot"></div>
        <div class="tline-year">2022</div>
        <div class="tline-card">
          <div class="tline-card-top"><div class="tline-card-year">Q1 · 2022</div><div class="tline-card-title">Series B — $45M · Profitable</div><span class="tline-badge tline-badge-mile">Milestone</span></div>
          <div class="tline-body">$45M Series B led by Andreessen Horowitz. Achieved first profitable quarter ahead of schedule. Capital allocated to enterprise sales infrastructure.</div>
          <div class="tline-impact"><span class="tline-impact-label">Valuation</span><span class="tline-impact-val">$320M post-money</span></div>
        </div>
      </div>
      <div class="tline-event">
        <div class="tline-label">Acquisition</div>
        <div class="tline-dot"></div>
        <div class="tline-year">2023</div>
        <div class="tline-card">
          <div class="tline-card-top"><div class="tline-card-year">Q2 · 2023</div><div class="tline-card-title">Acquired Synapse Labs</div><span class="tline-badge tline-badge-acq">M&amp;A</span></div>
          <div class="tline-body">Acquired Synapse Labs, a 22-person AI workflow automation startup, for $280M. The deal added Synapse's LLM orchestration layer, accelerating the roadmap.</div>
          <div class="tline-impact"><span class="tline-impact-label">ARR added</span><span class="tline-impact-val">$8.4M</span></div>
        </div>
      </div>
      <div class="tline-event">
        <div class="tline-label">IPO Filed</div>
        <div class="tline-dot"></div>
        <div class="tline-year">2024</div>
        <div class="tline-card">
          <div class="tline-card-top"><div class="tline-card-year">Q3 · 2024</div><div class="tline-card-title">S-1 Filed · NASDAQ</div><span class="tline-badge tline-badge-ipo">Public Markets</span></div>
          <div class="tline-body">Filed S-1 registration with the SEC. IPO priced at $18/share, valuing the company at $1.2B. Shares began trading on NASDAQ under the ticker SNYP, closing up 38% on day one.</div>
          <div class="tline-impact"><span class="tline-impact-label">Market cap</span><span class="tline-impact-val">$1.65B (day 1)</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tline-stage {
  background: #0e0c14;
  /* Top + bottom room — event cards alternate above and below the
     track. Odd events flip column-reverse so the label lands above
     the dot and the card pops up. Cards are ~220px tall. */
  padding: 240px 24px;
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
  overflow: hidden;
}
.tline-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(80, 40, 120, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.tline-track {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  padding: 40px 0;
}
.tline-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(120, 80, 200, 0.3) 10%, rgba(120, 80, 200, 0.3) 90%, transparent);
  transform: translateY(-50%);
}
.tline-events {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.tline-event {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: help;
}
.tline-event:nth-child(odd) {
  flex-direction: column-reverse;
}
.tline-label {
  font-size: 9px;
  color: rgba(180, 140, 240, 0.5);
  text-align: center;
  margin: 11px 0;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.tline-year {
  font-size: 11px;
  font-weight: 700;
  color: rgba(180, 140, 240, 0.7);
  text-align: center;
  margin: 11px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.tline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(120, 80, 200, 0.6);
  border: 2px solid rgba(120, 80, 200, 0.3);
  transition: background .15s, box-shadow .15s, transform .15s;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.tline-event:hover .tline-dot {
  background: rgba(160, 110, 240, 0.9);
  box-shadow: 0 0 14px 4px rgba(120, 80, 200, 0.25);
  transform: scale(1.3);
}
.tline-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 200;
  width: 250px;
  background: rgba(14, 12, 22, 0.97);
  border: 1px solid rgba(120, 80, 200, 0.2);
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(120, 80, 200, 0.08);
  overflow: hidden;
  text-align: left;
}
.tline-event:nth-child(odd) .tline-card {
  bottom: calc(100% + 10px);
  top: auto;
}
.tline-event:nth-child(even) .tline-card {
  top: calc(100% + 10px);
  bottom: auto;
}
.tline-event:hover .tline-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.tline-card-top {
  padding: 12px 13px 10px;
  border-bottom: 1px solid rgba(120, 80, 200, 0.1);
}
.tline-card-year {
  font-size: 8.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(160, 110, 240, 0.5);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.tline-card-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
  font-family: Georgia, serif;
}
.tline-badge {
  display: inline-block;
  font-size: 7.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 2px 7px;
  border-radius: 3px;
  margin-top: 7px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tline-badge-mile { background: rgba(80, 160, 80, 0.15); color: rgba(120, 200, 120, 0.8); border: 1px solid rgba(80, 160, 80, 0.2); }
.tline-badge-prod { background: rgba(80, 120, 200, 0.15); color: rgba(120, 160, 240, 0.8); border: 1px solid rgba(80, 120, 200, 0.2); }
.tline-badge-acq  { background: rgba(200, 120, 40, 0.15); color: rgba(240, 160, 80, 0.8); border: 1px solid rgba(200, 120, 40, 0.2); }
.tline-badge-ipo  { background: rgba(160, 80, 200, 0.15); color: rgba(200, 120, 240, 0.8); border: 1px solid rgba(160, 80, 200, 0.2); }
.tline-body {
  padding: 9px 13px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
  border-bottom: 1px solid rgba(120, 80, 200, 0.06);
  font-style: italic;
  font-family: Georgia, serif;
}
.tline-impact {
  padding: 9px 13px;
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.tline-impact-label {
  color: rgba(120, 80, 200, 0.5);
}
.tline-impact-val {
  color: rgba(200, 160, 255, 0.7);
}
```

### 20. Icon Toolbar

**Type:** Pure CSS
**Description:** Unlabeled toolbar icons — bold, italic, link, image, code, list, settings — that reveal their action name on hover. The tooltip is a compact dark pill with a tail arrow, the workhorse pattern every desktop app ships and every web app should. For editors, design tools, dashboards.

**HTML:**
```html
<div class="tbar-stage">
  <div class="tbar-wrap">
    <div class="tbar-bar">
      <span class="tbar-t">
        <button class="tbar-btn tbar-btn-active">B</button>
        <span class="tbar-tip">Bold</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn" style="font-style:italic">I</button>
        <span class="tbar-tip">Italic</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn" style="text-decoration:underline">U</button>
        <span class="tbar-tip">Underline</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn" style="text-decoration:line-through;color:#666">S</button>
        <span class="tbar-tip">Strikethrough</span>
      </span>
      <span class="tbar-sep"></span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9v.5A2 2 0 0 1 7 9.5H4a2 2 0 0 1 0-4h1.535c.218-.376.495-.717.82-1z"/><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4 4 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/></svg></button>
        <span class="tbar-tip">Insert link</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/><path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/></svg></button>
        <span class="tbar-tip">Insert image</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn tbar-btn-code">&lt;/&gt;</button>
        <span class="tbar-tip">Code block</span>
      </span>
      <span class="tbar-sep"></span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg></button>
        <span class="tbar-tip">Bullet list</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z"/></svg></button>
        <span class="tbar-tip">Checklist</span>
      </span>
      <span class="tbar-sep"></span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg></button>
        <span class="tbar-tip">Preferences</span>
      </span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tbar-stage {
  background: #141414;
  /* Top room — labels pop UP from each button, ~30px tall. */
  padding: 80px 28px 60px;
  font-family: system-ui, -apple-system, sans-serif;
}
.tbar-wrap {
  display: flex;
  justify-content: center;
}
.tbar-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #1f1f1f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 5px;
}
.tbar-sep {
  width: 1px;
  height: 20px;
  background: #2e2e2e;
  margin: 0 4px;
  flex-shrink: 0;
  display: inline-block;
}
.tbar-t {
  position: relative;
  display: inline-block;
}
.tbar-btn {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, color .12s;
  border: none;
  background: transparent;
  letter-spacing: 0;
  font-family: inherit;
}
.tbar-btn:hover {
  background: #2a2a2a;
  color: #e0e0e0;
}
.tbar-btn-active {
  background: #2a2a2a;
  color: #fff;
}
.tbar-btn-code {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
}
.tbar-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.tbar-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #18181b;
  color: #fff;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .14s,
    transform .14s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .14s;
  z-index: 100;
  line-height: 1;
  display: block;
}
.tbar-t:hover .tbar-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.tbar-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #18181b;
}
```

### 21. Form Field Help

**Type:** Pure CSS
**Description:** Small ? circles next to form labels that reveal a one-line hint on hover — username rules, email visibility, time-zone purpose. The tooltip pops to the right with a side-arrow tail so the form line stays uninterrupted. For settings panels, sign-up forms, profile editors.

**HTML:**
```html
<div class="fhelp-stage">
  <div class="fhelp-form">
    <div class="fhelp-field">
      <div class="fhelp-label">
        Username
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Letters, numbers, and underscores only. 3–20 characters.</span>
        </span>
      </div>
      <input class="fhelp-input" type="text" value="kalani_a" readonly>
    </div>
    <div class="fhelp-field">
      <div class="fhelp-label">
        Email address
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Used for login and account recovery. Never shown publicly.</span>
        </span>
      </div>
      <input class="fhelp-input" type="email" value="kalani@example.com" readonly>
    </div>
    <div class="fhelp-field">
      <div class="fhelp-label">
        Website
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Include https:// — displayed on your public profile page.</span>
        </span>
      </div>
      <input class="fhelp-input" type="text" value="https://kalani.dev" readonly>
    </div>
    <div class="fhelp-field">
      <div class="fhelp-label">
        Bio
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Shown below your name on your profile. Max 160 characters.</span>
        </span>
      </div>
      <input class="fhelp-input" type="text" value="Building things on the web. Based in Honolulu." readonly>
    </div>
    <div class="fhelp-field fhelp-field-last">
      <div class="fhelp-label">
        Time zone
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Used to display timestamps and schedule notifications correctly.</span>
        </span>
      </div>
      <input class="fhelp-input" type="text" value="Pacific/Honolulu (UTC −10:00)" readonly>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fhelp-stage {
  background: #fff;
  /* Right room — help tooltips pop to the RIGHT of each ? icon,
     ~280px wide single-line pills. Padding the right side gives them
     room to extend without getting clipped by the gallery card. */
  padding: 40px 320px 40px 28px;
  font-family: system-ui, -apple-system, sans-serif;
}
.fhelp-form {
  max-width: 400px;
  margin: 0 auto;
}
.fhelp-field {
  margin-bottom: 18px;
}
.fhelp-field-last {
  margin-bottom: 0;
}
.fhelp-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #111;
  margin-bottom: 6px;
}
.fhelp-t {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.fhelp-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  line-height: 1;
}
.fhelp-t:hover .fhelp-icon {
  background: #d1d5db;
  color: #374151;
}
.fhelp-tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
  background: #18181b;
  color: #fff;
  font-size: 11.5px;
  padding: 7px 11px;
  border-radius: 5px;
  width: 240px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .14s,
    transform .14s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .14s;
  z-index: 100;
  line-height: 1.4;
  display: block;
}
.fhelp-t:hover .fhelp-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.fhelp-tip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #18181b;
}
.fhelp-input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12.5px;
  color: #374151;
  background: #fafafa;
  outline: none;
  font-family: inherit;
}
.fhelp-input:focus {
  border-color: #6366f1;
  background: #fff;
}
```

---
## 22 CSS Transition Effects

URL: https://codefronts.com/motion/css-transition-designs/
Description: 22 hand-coded CSS transition effects covering every production motion pattern in 2026 — button hover transitions (9 polished variants: fill sweep, slide-up, neon glow, rotate, border draw, 3D depth, ripple, shimmer, split wipe), scroll-reveal animation, 3D flip card, text reveal with mask clip, image zoom on hover, background color crossfade, border draw animation, fade in/out, navigation menu hover, loading skeleton shimmer, modal open/close, page transitions (Next/Vue/Astro view-transition pattern), ripple effect on click, underline animation, animated number counter, 3D mousemove card tilt, glassmorphism hover, staggered IntersectionObserver list animation, cursor trail effect, magnetic button hover, split text reveal (GSAP-style), and animated progress bars. All GPU-accelerated via transform + opacity only (compositor-thread, no layout thrashing — INP-friendly), respect prefers-reduced-motion, and ship MIT-licensed with zero framework dependencies. 9 demos are 100% pure CSS; 13 use vanilla JavaScript for IntersectionObserver, mousemove, or click coordinates.
Demo count: 22

### 01. Button Hover Transitions

**Type:** Pure CSS
**Description:** Nine polished button hover effects: fill sweep, slide-up, neon glow, rotate icon, border draw, 3D depth, ripple ring, shimmer and split wipe.

**HTML:**
```html
<div class="trn-01">
  <div class="trn-01__title">
    <h1>Button Hover Transitions</h1>
    <p>9 production-ready CSS transition hover effects — hover each button</p>
  </div>
  <div class="trn-01__grid">
    <div>
      <button class="btn btn-fill"><span>Fill Sweep</span></button>
      <span class="btn-label">Fill sweep</span>
    </div>
    <div>
      <button class="btn btn-slide" data-text="Slide Up"><span>Slide Up</span></button>
      <span class="btn-label">Slide up</span>
    </div>
    <div>
      <button class="btn btn-glow">Neon Glow</button>
      <span class="btn-label">Neon glow</span>
    </div>
    <div>
      <button class="btn btn-rotate"><span class="icon">⚙</span> <span>Rotate</span></button>
      <span class="btn-label">Rotate icon</span>
    </div>
    <div>
      <button class="btn btn-draw">
        <span>Border Draw</span>
        <span class="top"></span><span class="bot"></span>
        <span class="lft"></span><span class="rgt"></span>
      </button>
      <span class="btn-label">Border draw</span>
    </div>
    <div>
      <button class="btn btn-depth">3D Push</button>
      <span class="btn-label">3D depth</span>
    </div>
    <div>
      <button class="btn btn-ripple">Ripple Ring</button>
      <span class="btn-label">Ripple ring</span>
    </div>
    <div>
      <button class="btn btn-shimmer"><span>Shimmer</span></button>
      <span class="btn-label">Shimmer</span>
    </div>
    <div>
      <button class="btn btn-split"><span>Split Wipe</span></button>
      <span class="btn-label">Split wipe</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0a0a0f;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.trn-01{width:100%;max-width:900px}
.trn-01__title{text-align:center;margin-bottom:48px}
.trn-01__title h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:8px}
.trn-01__title p{color:#666;font-size:1rem}
.trn-01__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}

/* BASE */
.btn{font-family:'Inter';font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:16px 32px;border:none;cursor:pointer;border-radius:4px;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}

/* 1 — Fill sweep left-to-right */
.btn-fill{background:transparent;color:#6c63ff;border:2px solid #6c63ff;transition:color .35s ease}
.btn-fill::before{content:'';position:absolute;inset:0;background:#6c63ff;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.btn-fill:hover::before{transform:scaleX(1)}
.btn-fill span{position:relative;z-index:1}
.btn-fill:hover{color:#fff}

/* 2 — Slide up reveal */
.btn-slide{background:#ff3c78;color:#fff;transition:transform .3s ease,box-shadow .3s ease}
.btn-slide::after{content:attr(data-text);position:absolute;inset:0;background:#ff3c78;display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .3s cubic-bezier(.7,0,.2,1)}
.btn-slide:hover{box-shadow:0 20px 40px rgba(255,60,120,.4)}
.btn-slide:hover::after{transform:translateY(0)}
.btn-slide:hover span{transform:translateY(-100%)}
.btn-slide span{display:inline-block;transition:transform .3s cubic-bezier(.7,0,.2,1)}

/* 3 — Neon glow pulse */
.btn-glow{background:#0d1117;color:#00ffcc;border:2px solid #00ffcc;transition:box-shadow .4s ease,background .4s ease,color .4s ease}
.btn-glow:hover{background:#00ffcc;color:#0d1117;box-shadow:0 0 20px #00ffcc,0 0 60px rgba(0,255,204,.4),inset 0 0 20px rgba(0,255,204,.1)}

/* 4 — Rotate icon */
.btn-rotate{background:#f59e0b;color:#1c1003;transition:background .3s,box-shadow .3s}
.btn-rotate .icon{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.btn-rotate:hover .icon{transform:rotate(180deg)}
.btn-rotate:hover{background:#fbbf24;box-shadow:0 12px 30px rgba(245,158,11,.4)}

/* 5 — Border draw */
.btn-draw{background:transparent;color:#e879f9;font-weight:700}
.btn-draw::before,.btn-draw::after{content:'';position:absolute;width:0;height:2px;background:#e879f9;transition:width .3s ease}
.btn-draw .top,.btn-draw .bot{position:absolute;left:0;right:0;height:2px;background:#e879f9;transform:scaleX(0);transition:transform .3s ease}
.btn-draw .top{top:0;transform-origin:right}
.btn-draw .bot{bottom:0;transform-origin:left}
.btn-draw .lft,.btn-draw .rgt{position:absolute;top:0;bottom:0;width:2px;background:#e879f9;transform:scaleY(0);transition:transform .3s .3s ease}
.btn-draw .lft{left:0;transform-origin:bottom}
.btn-draw .rgt{right:0;transform-origin:top}
.btn-draw:hover .top{transform:scaleX(1);transform-origin:left}
.btn-draw:hover .bot{transform:scaleX(1);transform-origin:right}
.btn-draw:hover .lft{transform:scaleY(1)}
.btn-draw:hover .rgt{transform:scaleY(1)}
.btn-draw span{position:relative;z-index:1}

/* 6 — 3D push depth */
.btn-depth{background:#3b82f6;color:#fff;box-shadow:0 6px 0 #1d4ed8,0 8px 16px rgba(59,130,246,.3);transition:transform .1s,box-shadow .1s}
.btn-depth:hover{transform:translateY(3px);box-shadow:0 3px 0 #1d4ed8,0 4px 8px rgba(59,130,246,.3)}
.btn-depth:active{transform:translateY(6px);box-shadow:0 0 0 #1d4ed8,0 2px 6px rgba(59,130,246,.2)}

/* 7 — Magnetic ripple */
.btn-ripple{background:#10b981;color:#fff;transition:background .3s,box-shadow .3s}
.btn-ripple:hover{background:#059669;box-shadow:0 0 0 8px rgba(16,185,129,.15),0 0 0 16px rgba(16,185,129,.08)}

/* 8 — Text scramble shimmer */
.btn-shimmer{background:linear-gradient(135deg,#1e1b4b,#312e81);color:#c7d2fe;border:1px solid rgba(199,210,254,.2);overflow:hidden}
.btn-shimmer::before{content:'';position:absolute;top:-50%;left:-150%;width:60%;height:200%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-15deg);transition:left .6s ease}
.btn-shimmer:hover::before{left:150%}
.btn-shimmer span{position:relative;z-index:1}

/* 9 — Split diagonal wipe */
.btn-split{background:transparent;color:#f97316;border:2px solid #f97316;overflow:hidden}
.btn-split::before,.btn-split::after{content:'';position:absolute;inset:0;background:#f97316;transform:scaleX(0);transition:transform .3s cubic-bezier(.7,0,.2,1)}
.btn-split::before{transform-origin:right;clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
.btn-split::after{transform-origin:left;clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}
.btn-split:hover::before,.btn-split:hover::after{transform:scaleX(1)}
.btn-split:hover{color:#fff}
.btn-split span{position:relative;z-index:1;transition:color .3s}

/* labels */
.btn-label{display:block;text-align:center;margin-top:8px;font-size:.68rem;color:#555;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:600px){.trn-01__grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.btn,.btn::before,.btn::after,.btn *{transition:none !important}}
```

### 02. Slide-In Animation on Scroll

**Type:** CSS + JS
**Description:** Intersection Observer scroll reveal with six directions — left, right, bottom, top, scale-up and rotate-in — plus stagger delay classes.

**HTML:**
```html
<div class="hero">
  <div class="reveal from-bottom" style="transition-delay:0s">
    <div style="font-family:'Syne Mono';font-size:.75rem;letter-spacing:.3em;color:#a78bfa;margin-bottom:16px;text-transform:uppercase">Scroll animation demo</div>
  </div>
  <div class="reveal from-bottom delay-1">
    <h1>Slide In<em>On Scroll</em></h1>
  </div>
  <div class="reveal from-bottom delay-2">
    <p>Elements animate into view as you scroll down the page — six different entrance directions, all pure CSS transitions triggered by an Intersection Observer.</p>
  </div>
  <div class="reveal from-bottom delay-3">
    <div class="hero-hint">↓ SCROLL DOWN ↓</div>
  </div>
</div>

<section>
  <div class="reveal from-left"><div class="section-label">Features</div></div>
  <div class="reveal from-left delay-1"><h2 class="section-title">Six entrance styles</h2></div>
  <div class="cards">
    <div class="card reveal from-bottom delay-1"><div class="num">01</div><h3>Slide from Left</h3><p>Elements enter from the left edge with a smooth easing curve.</p></div>
    <div class="card reveal from-bottom delay-2"><div class="num">02</div><h3>Slide from Right</h3><p>Content appears from the right, ideal for alternating layouts.</p></div>
    <div class="card reveal from-bottom delay-3"><div class="num">03</div><h3>Slide from Bottom</h3><p>Classic upward reveal — the most widely used scroll animation.</p></div>
    <div class="card reveal scale-up delay-4"><div class="num">04</div><h3>Scale Up</h3><p>Items grow from 88% to 100% for a subtle but satisfying pop.</p></div>
    <div class="card reveal rotate-in delay-5"><div class="num">05</div><h3>Rotate In</h3><p>A slight rotation combined with scale creates a card-flip feel.</p></div>
    <div class="card reveal from-top delay-6"><div class="num">06</div><h3>Slide from Top</h3><p>Dropping elements downward — great for headings and badges.</p></div>
  </div>

  <div class="feature reveal from-bottom">
    <div>
      <h2>Staggered delay system</h2>
      <p>Add <code>.delay-1</code> through <code>.delay-6</code> to children for a choreographed cascade effect. Each step adds 100ms of delay, giving groups of elements a natural rhythm.</p>
    </div>
    <div class="feature-visual">
      <div class="fv-box reveal scale-up delay-1">🎯</div>
      <div class="fv-box reveal scale-up delay-2">✦</div>
      <div class="fv-box reveal scale-up delay-3">◈</div>
      <div class="fv-box reveal scale-up delay-4">⬡</div>
    </div>
  </div>

  <div class="reveal from-left"><div class="section-label">Social proof</div></div>
  <div class="reveal from-left delay-1"><h2 class="section-title">Used by thousands</h2></div>
  <div class="testimonials">
    <div class="testi reveal from-left delay-1"><p>"The stagger delays make the whole page feel alive. Replaced our GSAP dependency with this pure CSS approach."</p><div class="testi-author"><div class="testi-avatar">AK</div><div><div class="testi-name">Alex Kim</div><div class="testi-role">Lead Developer</div></div></div></div>
    <div class="testi reveal from-bottom delay-2"><p>"Buttery smooth on mobile. The reduced-motion support is exactly what we needed for accessibility compliance."</p><div class="testi-author"><div class="testi-avatar">SL</div><div><div class="testi-name">Sara Liu</div><div class="testi-role">UX Engineer</div></div></div></div>
    <div class="testi reveal from-right delay-3"><p>"Implemented in 20 minutes. The Intersection Observer approach means zero layout jank during scroll."</p><div class="testi-author"><div class="testi-avatar">MR</div><div><div class="testi-name">Marcus Reid</div><div class="testi-role">Frontend Architect</div></div></div></div>
  </div>

  <div class="stats reveal scale-up">
    <div class="stat"><div class="big">98%</div><span>Lighthouse score</span></div>
    <div class="stat"><div class="big">6</div><span>Animation types</span></div>
    <div class="stat"><div class="big">0kb</div><span>Dependencies</span></div>
    <div class="stat"><div class="big">A11y</div><span>Reduced motion</span></div>
  </div>
</section>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Syne+Mono&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Syne',sans-serif;background:#f5f0e8;color:#1a1a1a;overflow-x:hidden}

/* scroll reveal base */
.reveal{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.from-left{transform:translateX(-60px)}
.reveal.from-right{transform:translateX(60px)}
.reveal.from-bottom{transform:translateY(50px)}
.reveal.from-top{transform:translateY(-50px)}
.reveal.scale-up{transform:scale(.88)}
.reveal.rotate-in{transform:rotate(-8deg) scale(.9)}
.reveal.visible{opacity:1 !important;transform:none !important}

/* delays */
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}.delay-5{transition-delay:.5s}.delay-6{transition-delay:.6s}

/* page layout */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;background:linear-gradient(160deg,#0f0f1a,#1a0a2e)}
.hero h1{font-size:clamp(3rem,10vw,7rem);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:.9;margin-bottom:24px}
.hero h1 em{color:#a78bfa;font-style:normal;display:block}
.hero p{color:#9ca3af;font-size:1.1rem;max-width:50ch;margin-bottom:32px}
.hero-hint{color:#6b7280;font-family:'Syne Mono';font-size:.8rem;letter-spacing:.2em;animation:trn02-bounce 2s ease-in-out infinite}
@keyframes trn02-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

section{padding:80px 24px;max-width:1100px;margin:0 auto}

.section-label{font-family:'Syne Mono';font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:#a78bfa;margin-bottom:12px}
.section-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:40px;color:#1a1a1a}

/* card grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-bottom:80px}
.card{background:#fff;border-radius:20px;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,.07);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent,#a78bfa)}
.card .num{font-size:3.5rem;font-weight:800;color:var(--accent,#a78bfa);opacity:.15;line-height:1;margin-bottom:8px}
.card h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.card p{font-size:.9rem;color:#666;line-height:1.6}
.card:nth-child(1){--accent:#a78bfa}
.card:nth-child(2){--accent:#34d399}
.card:nth-child(3){--accent:#f97316}
.card:nth-child(4){--accent:#f472b6}
.card:nth-child(5){--accent:#38bdf8}
.card:nth-child(6){--accent:#fbbf24}

/* feature strip */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:80px;padding:48px;background:#1a0a2e;border-radius:24px;color:#fff}
@media(max-width:640px){.feature{grid-template-columns:1fr}}
.feature h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin-bottom:16px}
.feature p{color:#9ca3af;line-height:1.7}
.feature-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fv-box{background:linear-gradient(135deg,var(--c1),var(--c2));border-radius:16px;aspect-ratio:1;display:grid;place-items:center;font-size:2rem}
.fv-box:nth-child(1){--c1:#7c3aed;--c2:#a78bfa}
.fv-box:nth-child(2){--c1:#0ea5e9;--c2:#38bdf8}
.fv-box:nth-child(3){--c1:#f97316;--c2:#fb923c}
.fv-box:nth-child(4){--c1:#10b981;--c2:#34d399}

/* testimonial row */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:80px}
.testi{background:#1a1a1a;border-radius:16px;padding:28px;color:#fff}
.testi p{font-size:.95rem;line-height:1.6;color:#d1d5db;margin-bottom:16px}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{width:36px;height:36px;border-radius:50%;background:var(--c,#a78bfa);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.testi:nth-child(1) .testi-avatar{--c:#7c3aed}
.testi:nth-child(2) .testi-avatar{--c:#0ea5e9}
.testi:nth-child(3) .testi-avatar{--c:#10b981}
.testi-name{font-size:.82rem;font-weight:700;color:#f9fafb}
.testi-role{font-size:.72rem;color:#6b7280}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;background:#fff;border-radius:24px;padding:40px;box-shadow:0 4px 30px rgba(0,0,0,.07)}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr}}
.stat{text-align:center}
.stat .big{font-size:clamp(2rem,5vw,3rem);font-weight:800;color:var(--c,#7c3aed)}
.stat:nth-child(1){--c:#7c3aed}
.stat:nth-child(2){--c:#0ea5e9}
.stat:nth-child(3){--c:#f97316}
.stat:nth-child(4){--c:#10b981}
.stat span{display:block;font-size:.8rem;color:#888;margin-top:4px}

@media (prefers-reduced-motion:reduce){.reveal{transition:none !important;opacity:1 !important;transform:none !important}}
```

**JS:**
```js
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => { if(e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Trigger hero items which are already in view
document.querySelectorAll('.hero .reveal').forEach(el => el.classList.add('visible'));
```

### 03. Flip Card 3D Transition

**Type:** Pure CSS
**Description:** Six 3D flip cards using rotateY and rotateX variants with unique dark gradients, perspective depth and backface-visibility control.

**HTML:**
```html
<div class="label">CSS 3D transitions</div>
<h1>Flip Card Effects</h1>
<p class="subtitle">Hover any card to reveal the back face — built with CSS perspective and rotateY</p>

<div class="section"><div class="label">Standard — rotateY, 700ms ease</div></div>
<div class="grid">
  <div class="flip-scene c1">
    <div class="flip-card">
      <div class="flip-front c1">
        <div class="emoji">🌊</div>
        <div>
          <div class="hint">Hover to flip →</div>
          <h2>Ocean Data Analytics</h2>
        </div>
      </div>
      <div class="flip-back c1">
        <h3>Ocean Data Analytics</h3>
        <p>Real-time monitoring of 47 ocean buoys across the Pacific, tracking temperature, salinity and current velocity at 15-minute intervals.</p>
        <span class="tag">📊 View Dashboard →</span>
      </div>
    </div>
  </div>

  <div class="flip-scene c2">
    <div class="flip-card">
      <div class="flip-front c2">
        <div class="emoji">🔥</div>
        <div>
          <div class="hint">Hover to flip →</div>
          <h2>Wildfire Risk Index</h2>
        </div>
      </div>
      <div class="flip-back c2">
        <h3>Wildfire Risk Index</h3>
        <p>ML-powered prediction model combining satellite imagery, wind patterns and fuel moisture data to forecast wildfire probability zones.</p>
        <span class="tag">🛰️ View Model →</span>
      </div>
    </div>
  </div>

  <div class="flip-scene c3">
    <div class="flip-card">
      <div class="flip-front c3">
        <div class="emoji">🧬</div>
        <div>
          <div class="hint">Hover to flip →</div>
          <h2>Genomics Pipeline</h2>
        </div>
      </div>
      <div class="flip-back c3">
        <h3>Genomics Pipeline</h3>
        <p>End-to-end DNA sequencing workflow processing 2.4TB daily, with automated QC, variant calling and clinical report generation.</p>
        <span class="tag">🧪 Explore Pipeline →</span>
      </div>
    </div>
  </div>

  <div class="flip-scene c4 flip-fast">
    <div class="flip-card">
      <div class="flip-front c4">
        <div class="emoji">🤖</div>
        <div>
          <div class="hint">Fast flip →</div>
          <h2>Neural Inference Engine</h2>
        </div>
      </div>
      <div class="flip-back c4">
        <h3>Neural Inference Engine</h3>
        <p>Edge-optimised transformer models with sub-10ms latency, running natively in the browser via WebAssembly and WebGPU.</p>
        <span class="tag">⚡ Benchmark →</span>
      </div>
    </div>
  </div>
</div>

<div class="section" style="margin-top:48px"><div class="label">Vertical flip — rotateX</div></div>
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))">
  <div class="flip-scene flip-x c1">
    <div class="flip-card">
      <div class="flip-front c1">
        <div class="emoji">🌿</div>
        <div><div class="hint">Flip over ↕</div><h2>Carbon Offset Tracker</h2></div>
      </div>
      <div class="flip-back c1" style="transform:rotateX(180deg)">
        <h3>Carbon Offset Tracker</h3>
        <p>Monitor reforestation credits, renewable energy certificates and direct air capture projects across your entire portfolio.</p>
        <span class="tag">🌍 Track Offsets →</span>
      </div>
    </div>
  </div>
  <div class="flip-scene flip-x c3">
    <div class="flip-card">
      <div class="flip-front c3">
        <div class="emoji">📡</div>
        <div><div class="hint">Flip over ↕</div><h2>Satellite Telemetry</h2></div>
      </div>
      <div class="flip-back c3" style="transform:rotateX(180deg)">
        <h3>Satellite Telemetry</h3>
        <p>Low-latency uplink/downlink monitoring across 12 ground stations. Live attitude, power and comms data streams.</p>
        <span class="tag">🛰 View Telemetry →</span>
      </div>
    </div>
  </div>
</div>

<div class="stats">
  <div class="stat"><b>700ms</b><span>Default duration</span></div>
  <div class="stat"><b>1000px</b><span>Perspective</span></div>
  <div class="stat"><b>rotateY/X</b><span>Transforms</span></div>
  <div class="stat"><b>0 JS</b><span>Flip is pure CSS</span></div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);min-height:100vh;padding:60px 24px;display:flex;flex-direction:column;align-items:center}
h1{font-family:'DM Serif Display';font-size:clamp(2rem,5vw,3.2rem);color:#fff;text-align:center;margin-bottom:8px;letter-spacing:-.02em}
.subtitle{color:#7fb3c8;font-size:1rem;text-align:center;margin-bottom:60px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;width:100%;max-width:1100px}

/* 3D flip core */
.flip-scene{perspective:1000px;height:300px}
.flip-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1);cursor:pointer}
.flip-scene:hover .flip-card,.flip-scene:focus-within .flip-card{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.flip-back{transform:rotateY(180deg)}

/* card 1 — teal / dark */
.c1 .flip-front{background:linear-gradient(145deg,#1a9b9b,#0e6464);box-shadow:0 20px 60px rgba(14,100,100,.5)}
.c1 .flip-front .emoji{font-size:3.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.c1 .flip-front h2{font-family:'DM Serif Display';font-size:1.6rem;color:#fff;line-height:1.1}
.c1 .flip-front .hint{font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.c1 .flip-back{background:#0d3b3b;border:1px solid rgba(26,155,155,.3);box-shadow:0 20px 60px rgba(14,100,100,.5)}

/* card 2 — amber / dark purple */
.c2 .flip-front{background:linear-gradient(145deg,#d97706,#92400e);box-shadow:0 20px 60px rgba(217,119,6,.4)}
.c2 .flip-front .emoji{font-size:3.5rem}
.c2 .flip-front h2{font-family:'DM Serif Display';font-size:1.6rem;color:#fff;line-height:1.1}
.c2 .flip-front .hint{font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.c2 .flip-back{background:#3b1a04;border:1px solid rgba(217,119,6,.3);box-shadow:0 20px 60px rgba(217,119,6,.4)}

/* card 3 — rose / dark */
.c3 .flip-front{background:linear-gradient(145deg,#e11d48,#9f1239);box-shadow:0 20px 60px rgba(225,29,72,.4)}
.c3 .flip-front .emoji{font-size:3.5rem}
.c3 .flip-front h2{font-family:'DM Serif Display';font-size:1.6rem;color:#fff;line-height:1.1}
.c3 .flip-front .hint{font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.c3 .flip-back{background:#3b0618;border:1px solid rgba(225,29,72,.3);box-shadow:0 20px 60px rgba(225,29,72,.4)}

/* card 4 — indigo */
.c4 .flip-front{background:linear-gradient(145deg,#4f46e5,#1e1b4b);box-shadow:0 20px 60px rgba(79,70,229,.4)}
.c4 .flip-front .emoji{font-size:3.5rem}
.c4 .flip-front h2{font-family:'DM Serif Display';font-size:1.6rem;color:#fff;line-height:1.1}
.c4 .flip-front .hint{font-size:.74rem;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.c4 .flip-back{background:#0d0b2e;border:1px solid rgba(79,70,229,.3);box-shadow:0 20px 60px rgba(79,70,229,.4)}

/* back side shared */
.flip-back h3{font-family:'DM Serif Display';font-size:1.3rem;color:#fff;margin-bottom:12px}
.flip-back p{font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:16px}
.flip-back .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:20px}

/* vertical flip variant */
.flip-scene.flip-x .flip-card{transition:transform .7s cubic-bezier(.4,0,.2,1)}
.flip-scene.flip-x:hover .flip-card{transform:rotateX(180deg)}
.flip-scene.flip-x .flip-back{transform:rotateX(180deg)}

/* horizontal flip with different easing */
.flip-scene.flip-fast .flip-card{transition:transform .4s cubic-bezier(.7,0,.2,1)}

/* section titles */
.section{width:100%;max-width:1100px;margin:0 0 16px}
.section h2{font-family:'DM Serif Display';font-size:1.5rem;color:rgba(255,255,255,.4);font-weight:400}
.label{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7fb3c8;margin-bottom:8px}

/* stats bar */
.stats{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:48px;background:rgba(255,255,255,.05);border-radius:16px;padding:24px 32px;width:100%;max-width:1100px;border:1px solid rgba(255,255,255,.08)}
.stat{text-align:center}
.stat b{display:block;font-size:1.8rem;font-weight:700;color:#fff}
.stat span{font-size:.75rem;color:#7fb3c8;letter-spacing:.12em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){.flip-card{transition:none !important}}
```

### 04. Text Reveal Animation

**Type:** Pure CSS
**Description:** Clip-path translateY hero reveal, wipe-over hover on list rows, shimmer sweep on cards and animated grain background texture.

**HTML:**
```html
<div class="hero">
  <div class="eyebrow"><div class="reveal-clip"><span>Text Reveal Transitions</span></div></div>
  <h1>
    <div class="big-word"><div class="reveal-clip"><span>Type</span></div></div>
    <div class="big-word"><div class="reveal-clip"><span><em>In</em></span></div></div>
    <div class="big-word"><div class="reveal-clip"><span>Mo</span></div></div>
    <div class="big-word"><div class="reveal-clip"><span>tion.</span></div></div>
  </h1>
  <div class="desc-wrap"><p class="desc">Clip-mask reveals, wipe-overs and shimmer transitions for every text element on your page — zero JavaScript, pure CSS.</p></div>
</div>

<div class="marquee-strip">
  <div class="marquee-inner">
    <span><b>Reveal</b> · Typography · Animation · CSS · Transitions · Text Motion ·</span>
    <span>Clip Reveal · Wipe · Blur · Shimmer · <b>Stagger</b> · Entrance ·</span>
    <span><b>Reveal</b> · Typography · Animation · CSS · Transitions · Text Motion ·</span>
    <span>Clip Reveal · Wipe · Blur · Shimmer · <b>Stagger</b> · Entrance ·</span>
  </div>
</div>

<section>
  <div style="font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:#c9b99a;margin-bottom:12px">Hover wipe technique</div>
  <h2 style="font-family:'Playfair Display';font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;margin-bottom:40px;letter-spacing:-.02em">Selected Work</h2>

  <div class="wipe-wrap">
    <div class="wipe-item"><span class="wipe-num">01</span><span class="wipe-title">Brand Identity Systems</span><span class="wipe-arrow">→</span></div>
    <div class="wipe-item"><span class="wipe-num">02</span><span class="wipe-title">Editorial Typography</span><span class="wipe-arrow">→</span></div>
    <div class="wipe-item"><span class="wipe-num">03</span><span class="wipe-title">Motion Design Reels</span><span class="wipe-arrow">→</span></div>
    <div class="wipe-item"><span class="wipe-num">04</span><span class="wipe-title">Interactive Installations</span><span class="wipe-arrow">→</span></div>
    <div class="wipe-item"><span class="wipe-num">05</span><span class="wipe-title">Digital Art Direction</span><span class="wipe-arrow">→</span></div>
  </div>

  <div class="scramble-grid">
    <div class="sc-card">
      <div class="sc-num">01</div>
      <div class="sc-title-wrap">
        <div class="sc-label">Technique</div>
        <div class="sc-title">Clip-Path Reveal</div>
        <p class="sc-desc">translateY from 110% behind overflow:hidden — the cleanest, most performant text entrance.</p>
      </div>
    </div>
    <div class="sc-card">
      <div class="sc-num">02</div>
      <div class="sc-title-wrap">
        <div class="sc-label">Technique</div>
        <div class="sc-title">Wipe Background</div>
        <p class="sc-desc">scaleX on a pseudo-element creates a horizontal colour wipe over the entire row.</p>
      </div>
    </div>
    <div class="sc-card">
      <div class="sc-num">03</div>
      <div class="sc-title-wrap">
        <div class="sc-label">Technique</div>
        <div class="sc-title">Shimmer Sweep</div>
        <p class="sc-desc">A translucent gradient swept left-to-right with a left-position transition — zero opacity tricks.</p>
      </div>
    </div>
    <div class="sc-card">
      <div class="sc-num">04</div>
      <div class="sc-title-wrap">
        <div class="sc-label">Technique</div>
        <div class="sc-title">Blur Defocus</div>
        <p class="sc-desc">filter:blur(8px) → blur(0) combined with opacity creates a soft focus-pull entrance for characters.</p>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Montserrat:wght@400;600;700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',sans-serif;background:#faf8f3;overflow-x:hidden}

/* Hero */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;background:#0c0b0a;position:relative;overflow:hidden}

/* animated grain overlay */
.hero::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;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.06'/%3E%3C/svg%3E");opacity:.4;animation:trn04-grain .4s steps(2) infinite}
@keyframes trn04-grain{0%{transform:translate(0)}25%{transform:translate(-2%,2%)}50%{transform:translate(3%,-1%)}75%{transform:translate(-1%,3%)}100%{transform:translate(2%,-2%)}}

/* Clip reveal — the main technique: overflow:hidden + translate */
.reveal-clip{overflow:hidden;display:block}
.reveal-clip span{display:block;transform:translateY(110%);animation:trn04-clipup .9s cubic-bezier(.22,1,.36,1) forwards}

.hero .eyebrow .reveal-clip span{animation-delay:.1s;font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;color:#c9b99a}
.big-word{margin-bottom:4px}
.big-word:nth-child(2) .reveal-clip span{animation-delay:.25s}
.big-word:nth-child(3) .reveal-clip span{animation-delay:.4s}
.big-word:nth-child(4) .reveal-clip span{animation-delay:.55s}
@keyframes trn04-clipup{to{transform:translateY(0)}}

.hero h1{font-family:'Playfair Display';font-size:clamp(5rem,16vw,12rem);line-height:.85;letter-spacing:-.04em;color:#fff;font-weight:900}
.hero h1 em{color:#c9b99a;font-style:italic}
.hero .desc-wrap{overflow:hidden;margin-top:40px}
.hero .desc{color:#888;font-size:1rem;transform:translateY(60px);animation:trn04-clipup .8s .75s cubic-bezier(.22,1,.36,1) forwards;max-width:50ch;margin:0 auto}

/* Sections */
section{padding:100px 24px;max-width:1200px;margin:0 auto}

/* Wipe reveal — box-shadow wipe on hover */
.wipe-wrap{display:flex;flex-direction:column;gap:0;border-top:1px solid #e0d9cc}
.wipe-item{border-bottom:1px solid #e0d9cc;padding:24px 0;display:flex;align-items:center;gap:24px;cursor:default;position:relative;overflow:hidden;transition:padding .3s}
.wipe-item::before{content:'';position:absolute;inset:0;background:#1a1a1a;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:0}
.wipe-item:hover::before{transform:scaleX(1)}
.wipe-item:hover{padding-left:20px}
.wipe-num{font-size:.7rem;font-weight:700;letter-spacing:.2em;color:#c9b99a;min-width:32px;position:relative;z-index:1;transition:color .3s .1s}
.wipe-item:hover .wipe-num{color:#c9b99a}
.wipe-title{font-family:'Playfair Display';font-size:clamp(1.4rem,4vw,2.4rem);font-weight:700;position:relative;z-index:1;transition:color .3s .1s}
.wipe-item:hover .wipe-title{color:#fff}
.wipe-arrow{margin-left:auto;font-size:1.4rem;position:relative;z-index:1;transition:transform .3s .1s,color .3s .1s}
.wipe-item:hover .wipe-arrow{transform:translateX(8px) rotate(-45deg);color:#fff}

/* Scramble on hover — CSS only shimmer */
.scramble-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;margin-top:64px}
.sc-card{background:#1a1a1a;padding:32px;position:relative;overflow:hidden;cursor:default}
.sc-card::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,185,154,.12),transparent);transition:left .6s ease}
.sc-card:hover::after{left:150%}
.sc-card .sc-num{font-size:4rem;font-weight:900;color:rgba(201,185,154,.08);line-height:1;font-family:'Playfair Display'}
.sc-card .sc-label{font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:#c9b99a;margin-bottom:8px}
.sc-card .sc-title{font-family:'Playfair Display';font-size:1.3rem;color:#fff;line-height:1.2;margin-bottom:10px}
.sc-card .sc-desc{font-size:.82rem;color:#666;line-height:1.6}
.sc-title-wrap{position:relative;z-index:1}

/* blur-in chars */
.char-reveal{display:inline-flex;flex-wrap:wrap;gap:0}
.char{display:inline-block;opacity:0;filter:blur(8px);transition:opacity .4s,filter .4s,transform .4s}
.char.visible{opacity:1;filter:blur(0);transform:none}
.char-row{overflow:hidden}

/* marquee strip */
.marquee-strip{background:#1a1a1a;overflow:hidden;padding:18px 0;display:flex;gap:0;white-space:nowrap}
.marquee-inner{display:inline-flex;gap:0;animation:trn04-marq 14s linear infinite}
@keyframes trn04-marq{to{transform:translateX(-50%)}}
.marquee-inner span{font-family:'Playfair Display';font-size:1.1rem;font-style:italic;color:rgba(201,185,154,.6);padding:0 32px}
.marquee-inner b{color:#c9b99a}

@media (prefers-reduced-motion:reduce){.reveal-clip span,.hero .desc,.hero::before,.marquee-inner,.char{animation:none !important;transform:none !important;opacity:1 !important;filter:none !important}}
```

### 05. Image Zoom Hover Transition

**Type:** Pure CSS
**Description:** Nine zoom techniques: standard, rotate-and-zoom, zoom-out, colour overlay, Ken Burns pan, 3D tilt, blur-on-zoom, desaturate and clip-path inset.

**HTML:**
```html
<h1>Image Zoom Hover Transitions</h1>
<p class="sub">9 CSS zoom effects — hover each image to see the transition</p>

<div class="grid-main" style="max-width:1100px;margin:0 auto">

  <div class="zoom-std">
    <div class="img-wrap pal1">
      <div class="img-fake pal1"><div class="img-icon">🏔️</div></div>
      <div class="technique-tag">Scale 1→1.4</div>
      <div class="img-overlay"><h3>Standard Zoom</h3><span>scale(1.4) ease</span></div>
    </div>
  </div>

  <div class="zoom-rot">
    <div class="img-wrap pal2">
      <div class="img-fake pal2"><div class="img-icon">🌺</div></div>
      <div class="technique-tag">Scale + Rotate</div>
      <div class="img-overlay"><h3>Rotate Zoom</h3><span>scale(1.35) rotate(5deg)</span></div>
    </div>
  </div>

  <div class="zoom-out">
    <div class="img-wrap pal3">
      <div class="img-fake pal3"><div class="img-icon">🦋</div></div>
      <div class="technique-tag">Zoom Out</div>
      <div class="img-overlay"><h3>Zoom Out</h3><span>Starts at 1.4, shrinks to 1</span></div>
    </div>
  </div>

  <div class="zoom-color">
    <div class="img-wrap pal4">
      <div class="img-fake pal4"><div class="img-icon">🌊</div></div>
      <div class="technique-tag">Colour Overlay</div>
      <div class="img-overlay"><h3>Colour Tint</h3><span>scale(1.35) + tint</span></div>
    </div>
  </div>

  <div class="zoom-pan">
    <div class="img-wrap pal5">
      <div class="img-fake pal5"><div class="img-icon">🌿</div></div>
      <div class="technique-tag">Pan Left</div>
      <div class="img-overlay"><h3>Ken Burns Pan</h3><span>scale(1.5) + translateX(-15%)</span></div>
    </div>
  </div>

  <div class="zoom-tilt">
    <div class="img-wrap pal6">
      <div class="img-fake pal6"><div class="img-icon">🌅</div></div>
      <div class="technique-tag">3D Tilt</div>
      <div class="img-overlay"><h3>Perspective Tilt</h3><span>rotateY(12deg) + scale(1.18)</span></div>
    </div>
  </div>

  <div class="zoom-blur">
    <div class="img-wrap pal7">
      <div class="img-fake pal7"><div class="img-icon">🌌</div></div>
      <div class="technique-tag">Blur Out</div>
      <div class="img-overlay"><h3>Blur on Zoom</h3><span>scale(1.3) + blur(5px)</span></div>
    </div>
  </div>

  <div class="zoom-sat">
    <div class="img-wrap pal8">
      <div class="img-fake pal8"><div class="img-icon">❄️</div></div>
      <div class="technique-tag">Desaturate</div>
      <div class="img-overlay"><h3>Greyscale Zoom</h3><span>scale(1.3) + saturate(0)</span></div>
    </div>
  </div>

  <div class="zoom-clip">
    <div class="img-wrap pal9">
      <div class="img-fake pal9"><div class="img-icon">🔥</div></div>
      <div class="technique-tag">Clip Inset</div>
      <div class="img-overlay"><h3>Clip Reveal</h3><span>scale(1.35) + clip 10%</span></div>
    </div>
  </div>

</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',sans-serif;background:#111116;color:#fff;padding:60px 24px}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.03em}
.sub{text-align:center;color:#666;margin-bottom:56px;font-size:.95rem}
.label{font-size:.68rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#666;margin-bottom:8px;display:block}
.section-title{font-size:1.3rem;font-weight:700;margin-bottom:24px;color:#fff}

/* IMAGE PLACEHOLDER (colored gradient as image substitute) */
.img-wrap{overflow:hidden;position:relative;border-radius:12px}
.img-fake{width:100%;aspect-ratio:4/3;display:block;transition:transform .6s cubic-bezier(.25,0,.25,1);background:var(--bg)}

/* label overlay */
.img-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
  pointer-events:none}
.img-overlay h3{font-size:1rem;font-weight:700;color:#fff;line-height:1.2}
.img-overlay span{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:3px}

/* 1 — Standard zoom (boosted 1.1 → 1.4 for clearly visible effect) */
.zoom-std .img-wrap:hover .img-fake{transform:scale(1.4)}

/* 2 — Zoom + rotate (boosted 1.12/2deg → 1.35/5deg) */
.zoom-rot .img-wrap:hover .img-fake{transform:scale(1.35) rotate(5deg)}

/* 3 — Zoom out on hover (boosted starting 1.12 → 1.4) */
.zoom-out .img-fake{transform:scale(1.4)}
.zoom-out .img-wrap:hover .img-fake{transform:scale(1)}

/* 4 — Zoom with colour overlay (boosted 1.1 → 1.35, overlay 0.45 → 0.55) */
.zoom-color .img-wrap::after{content:'';position:absolute;inset:0;background:rgba(129,140,248,.55);opacity:0;transition:opacity .5s}
.zoom-color .img-wrap:hover::after{opacity:1}
.zoom-color .img-wrap:hover .img-fake{transform:scale(1.35)}

/* 5 — Ken Burns pan (boosted 1.2/-8% → 1.5/-15% for dramatic pan) */
.zoom-pan .img-fake{transform:scale(1.5) translateX(0);transition:transform .8s cubic-bezier(.25,0,.25,1)}
.zoom-pan .img-wrap:hover .img-fake{transform:scale(1.5) translateX(-15%)}

/* 6 — Tilt 3D (boosted 1.06/6deg → 1.18/12deg) */
.zoom-tilt .img-wrap{perspective:800px}
.zoom-tilt .img-wrap:hover .img-fake{transform:scale(1.18) perspective(800px) rotateY(12deg)}

/* 7 — Blur to sharp (boosted 1.08/2px → 1.3/5px) */
.zoom-blur .img-fake{filter:blur(0);transition:transform .6s cubic-bezier(.25,0,.25,1),filter .6s}
.zoom-blur .img-wrap:hover .img-fake{transform:scale(1.3);filter:blur(5px)}

/* 8 — Desaturate on hover (boosted 1.08 → 1.3) */
.zoom-sat .img-fake{transition:transform .6s cubic-bezier(.25,0,.25,1),filter .6s}
.zoom-sat .img-wrap:hover .img-fake{transform:scale(1.3);filter:saturate(0) brightness(1.1)}

/* 9 — Clip zoom (boosted 1.1/6% → 1.35/10%) */
.zoom-clip .img-wrap{border-radius:0}
.zoom-clip .img-fake{clip-path:inset(0% round 0px);transition:transform .6s cubic-bezier(.25,0,.25,1),clip-path .6s cubic-bezier(.25,0,.25,1)}
.zoom-clip .img-wrap:hover .img-fake{transform:scale(1.35);clip-path:inset(10% round 16px)}

/* Grid layout */
.grid-main{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}
@media(max-width:800px){.grid-main{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.grid-main{grid-template-columns:1fr}}

/* Color palettes for fake images */
.pal1{--bg:linear-gradient(135deg,#667eea,#764ba2)}
.pal2{--bg:linear-gradient(135deg,#f6d365,#fda085)}
.pal3{--bg:linear-gradient(135deg,#a18cd1,#fbc2eb)}
.pal4{--bg:linear-gradient(135deg,#4facfe,#00f2fe)}
.pal5{--bg:linear-gradient(135deg,#43e97b,#38f9d7)}
.pal6{--bg:linear-gradient(135deg,#fa709a,#fee140)}
.pal7{--bg:linear-gradient(135deg,#30cfd0,#330867)}
.pal8{--bg:linear-gradient(135deg,#a1c4fd,#c2e9fb)}
.pal9{--bg:linear-gradient(135deg,#fd7043,#e53935)}

.img-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.5rem;pointer-events:none;transition:opacity .3s}
.img-wrap:hover .img-icon{opacity:.3}

.technique-tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.7);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:6px;backdrop-filter:blur(8px)}

@media (prefers-reduced-motion:reduce){.img-fake,.img-wrap::after{transition:none !important}}
```

### 06. Background Color Transition

**Type:** Pure CSS
**Description:** Eight background-color techniques: smooth swap, gradient shift, left-to-right sweep, top-to-bottom fill, radial burst, diagonal shimmer, colour cycle and pricing card.

**HTML:**
```html
<div class="wrap">
  <h1>Background Color Transitions</h1>
  <p class="sub">8 techniques for transitioning background colors on hover — all pure CSS</p>

  <div class="section">
    <div class="section-head">Core techniques</div>
    <div class="grid-2">
      <div class="bg-swap"><span>Smooth colour swap</span><span class="tag">transition: background .4s</span></div>
      <div class="bg-grad"><span>Gradient shift</span><span class="tag">linear-gradient swap</span></div>
    </div>
    <div class="grid-2">
      <div class="bg-sweep"><span>Left-to-right sweep</span><span class="tag">background-position slide</span></div>
      <div class="bg-fill-v"><span>Top-to-bottom fill</span><span class="tag">background-position vertical</span></div>
    </div>
    <div class="grid-3">
      <div class="bg-radial"><span>Radial burst</span><span class="tag" style="display:block;margin-top:4px">pseudo-element scale</span></div>
      <div class="bg-diag"><span>Diagonal shimmer</span><span class="tag" style="display:block;margin-top:4px">translateX sweep</span></div>
      <div class="bg-multi"><span>Colour cycle</span><span class="tag" style="display:block;margin-top:4px">animation on hover</span></div>
    </div>
  </div>

  <div class="section">
    <div class="section-head">Navigation — background colour hover</div>
    <div class="nav-demo">
      <div class="nav-item active">Home</div>
      <div class="nav-item">Products</div>
      <div class="nav-item">Pricing</div>
      <div class="nav-item">About</div>
      <div class="nav-item">Blog</div>
      <div class="nav-item">Contact</div>
    </div>
  </div>

  <div class="section">
    <div class="section-head">Pricing cards — full card bg transition</div>
    <div class="pricing-grid">
      <div class="price-card"><h3>Starter</h3><div class="price">$9<span style="font-size:1rem;font-weight:400">/mo</span></div><p>Perfect for individuals and small projects getting off the ground.</p></div>
      <div class="price-card" style="border-color:#2563eb"><h3>Pro</h3><div class="price">$29<span style="font-size:1rem;font-weight:400">/mo</span></div><p>For growing teams who need collaboration features and advanced analytics.</p></div>
      <div class="price-card"><h3>Enterprise</h3><div class="price">$99<span style="font-size:1rem;font-weight:400">/mo</span></div><p>Unlimited seats, SSO, audit logs and dedicated support for large orgs.</p></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',sans-serif;background:#e8f4f8;min-height:100vh;padding:60px 24px}
.wrap{max-width:1100px;margin:0 auto}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;text-align:center;margin-bottom:8px;color:#0f172a;letter-spacing:-.03em}
.sub{text-align:center;color:#64748b;margin-bottom:56px}

/* 1 — Smooth colour swap */
.bg-swap{background:#e0f2fe;color:#0369a1;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:background .4s ease,color .4s ease;display:flex;align-items:center;justify-content:space-between}
.bg-swap:hover{background:#0369a1;color:#e0f2fe}

/* 2 — Gradient shift */
.bg-grad{background:linear-gradient(135deg,#fdf4ff,#f0e6ff);color:#7c3aed;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:background .5s ease,color .4s ease}
.bg-grad:hover{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fdf4ff}

/* 3 — Left-to-right sweep via gradient background-position */
.bg-sweep{background:linear-gradient(to right,#0f172a 50%,#fef3c7 50%);background-size:200% 100%;background-position:right;color:#0f172a;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:background-position .5s cubic-bezier(.7,0,.2,1),color .3s .2s}
.bg-sweep:hover{background-position:left;color:#fef3c7}

/* 4 — Radial burst from center */
.bg-radial{background:#fff;color:#059669;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;position:relative;overflow:hidden}
.bg-radial::before{content:'';position:absolute;inset:-50%;background:radial-gradient(circle,#059669,#047857);border-radius:50%;transform:scale(0);transition:transform .6s cubic-bezier(.22,1,.36,1);z-index:0}
.bg-radial:hover::before{transform:scale(3)}
.bg-radial span{position:relative;z-index:1;transition:color .2s .2s}
.bg-radial:hover span{color:#fff}

/* 5 — Top-to-bottom fill */
.bg-fill-v{background:#fff;color:#ea580c;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;background:linear-gradient(to bottom,#ea580c 50%,#fff5f1 50%);background-size:100% 200%;background-position:bottom;transition:background-position .4s cubic-bezier(.7,0,.2,1),color .3s .2s}
.bg-fill-v:hover{background-position:top;color:#fff}

/* 6 — Hue rotate animation on hover */
.bg-hue{background:linear-gradient(135deg,#f43f5e,#ec4899);color:#fff;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:filter .2s}
.bg-hue:hover{animation:trn06-huecycle 1.5s linear infinite}
@keyframes trn06-huecycle{to{filter:hue-rotate(360deg)}}

/* 7 — Multi-step colour */
.bg-multi{background:#fff;color:#0f172a;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;transition:background 1.2s ease,color .3s}
.bg-multi:hover{background:#38bdf8;color:#0f172a;animation:trn06-steps 2.4s ease infinite}
@keyframes trn06-steps{0%{background:#38bdf8}25%{background:#a78bfa}50%{background:#34d399}75%{background:#fb923c}100%{background:#38bdf8}}

/* 8 — Diagonal sweep */
.bg-diag{background:#1e1b4b;color:#a5b4fc;padding:24px 32px;border-radius:12px;font-weight:600;font-size:1.05rem;cursor:default;position:relative;overflow:hidden}
.bg-diag::before{content:'';position:absolute;top:-100%;left:-100%;width:300%;height:300%;background:linear-gradient(135deg,transparent 40%,#a5b4fc 50%,transparent 60%);transition:transform .6s ease}
.bg-diag:hover::before{transform:translateX(100%)}
.bg-diag span{position:relative;z-index:1}

/* section labels */
.section{margin-bottom:48px}
.section-head{font-size:.72rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#94a3b8;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}
.tag{font-size:.7rem;color:inherit;opacity:.6;letter-spacing:.08em}

/* Navigation row demo */
.nav-demo{background:#0f172a;border-radius:16px;padding:8px;display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px}
.nav-item{padding:10px 20px;border-radius:10px;font-weight:600;font-size:.9rem;color:#94a3b8;cursor:pointer;transition:background .3s,color .3s}
.nav-item:hover,.nav-item.active{background:#1e40af;color:#fff}
.nav-item.active{background:#2563eb}

/* Pricing cards */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.pricing-grid{grid-template-columns:1fr}}
.price-card{padding:32px 24px;border-radius:16px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);cursor:default;transition:background .4s,color .4s,box-shadow .4s;border:2px solid transparent}
.price-card:hover{background:#0f172a;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.3);border-color:#334155}
.price-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px;transition:color .4s}
.price-card:hover h3{color:#fff}
.price-card .price{font-size:2.4rem;font-weight:700;color:#2563eb;transition:color .4s}
.price-card:hover .price{color:#93c5fd}
.price-card p{font-size:.85rem;color:#64748b;transition:color .4s;margin-top:8px}
.price-card:hover p{color:#94a3b8}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
```

### 07. Border Animation Transition

**Type:** Pure CSS
**Description:** Eight border effects: clockwise draw, glow pulse, rotating gradient border, corner expand, width pulse, dashed-to-solid, colour shift, double ring plus input focus states.

**HTML:**
```html
<div class="wrap">
  <h1>CSS Border Animations</h1>
  <p class="sub">8 border transition techniques — hover each card to trigger the effect</p>

  <span class="sl">Card border effects</span>
  <div class="grid">
    <div class="bcard b-draw">
      <span class="side-l"></span><span class="side-r"></span>
      <h3>Draw Border</h3><p>The border draws itself clockwise from top-left using pseudo-elements with width/height transitions.</p>
    </div>
    <div class="bcard b-glow">
      <h3>Glow Pulse</h3><p>Border fades from dim to bright with a multi-layer box-shadow for the neon bloom effect.</p>
    </div>
    <div class="bcard b-rotate">
      <h3>Gradient Border</h3><p>gradient-border via background-clip:border-box — animates through the colour wheel on hover.</p>
    </div>
    <div class="bcard b-corner">
      <h3>Corner Expand</h3><p>Corner tick marks grow to trace the full perimeter — two pseudo-elements, staggered transitions.</p>
    </div>
    <div class="bcard b-pulse">
      <h3>Width Pulse</h3><p>Border-width grows from 1px to 3px instantly and color brightens for a sharp attention signal.</p>
    </div>
    <div class="bcard b-style">
      <h3>Dashed → Solid</h3><p>Dashed border snaps to solid and gains a soft inset glow on hover.</p>
    </div>
    <div class="bcard b-wipe">
      <h3>Colour Shift</h3><p>The simplest border transition — just a color change, but well-timed it feels polished.</p>
    </div>
    <div class="bcard b-double">
      <h3>Double Ring</h3><p>Outline expands outward from the border — outline-offset creates the gap ring effect.</p>
    </div>
  </div>

  <span class="sl">Input field border focus states</span>
  <div class="inputs-row">
    <div class="input-group">
      <label>Glow focus</label>
      <input class="inp inp-1" type="text" placeholder="click to focus…">
    </div>
    <div class="input-group">
      <label>Underline focus</label>
      <input class="inp inp-2" type="text" placeholder="click to focus…">
    </div>
    <div class="input-group">
      <label>Gradient border</label>
      <input class="inp inp-3" type="text" placeholder="click to focus…">
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@400;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:#08090e;color:#e8eaf6;min-height:100vh;padding:60px 24px}
.wrap{max-width:1100px;margin:0 auto}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.03em}
.sub{text-align:center;color:#6b7280;margin-bottom:56px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-bottom:48px}
.grid-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:48px}
.sl{font-size:.68rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#6b7280;margin-bottom:12px;display:block}
h2{font-size:1.3rem;font-weight:700;margin-bottom:20px}

/* shared card base */
.bcard{padding:28px 24px;border-radius:12px;cursor:default;position:relative}
.bcard h3{font-size:1rem;font-weight:700;margin-bottom:6px}
.bcard p{font-size:.82rem;color:#9ca3af;line-height:1.5}

/* 1 — Draw border with clip-path */
.b-draw{border:2px solid transparent;transition:border-color .4s}
.b-draw::before,.b-draw::after{content:'';position:absolute;transition:width .3s ease,height .3s ease;background:#818cf8}
.b-draw::before{top:0;left:0;width:0;height:2px}
.b-draw::after{bottom:0;right:0;width:0;height:2px}
.b-draw .side-l,.b-draw .side-r{position:absolute;background:#818cf8}
.b-draw .side-l{top:0;left:0;width:2px;height:0;transition:height .3s .3s ease}
.b-draw .side-r{bottom:0;right:0;width:2px;height:0;transition:height .3s .3s ease}
.b-draw:hover::before,.b-draw:hover::after{width:100%}
.b-draw:hover .side-l,.b-draw:hover .side-r{height:100%}

/* 2 — Glow border pulse */
.b-glow{border:2px solid rgba(52,211,153,.2);background:rgba(52,211,153,.04);transition:border-color .3s,box-shadow .3s}
.b-glow:hover{border-color:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.1),0 0 20px rgba(52,211,153,.2)}

/* 3 — Gradient rotating border */
.b-rotate{border:2px solid transparent;background:linear-gradient(#0d0e14,#0d0e14) padding-box,linear-gradient(135deg,#f97316,#ec4899) border-box}
.b-rotate:hover{background:linear-gradient(#0d0e14,#0d0e14) padding-box,linear-gradient(315deg,#f97316,#ec4899,#a78bfa,#f97316) border-box;animation:trn07-spin 2s linear infinite}
@keyframes trn07-spin{to{background:linear-gradient(#0d0e14,#0d0e14) padding-box,linear-gradient(315deg,#ec4899,#a78bfa,#f97316,#ec4899) border-box}}

/* 4 — Shrink corner markers */
.b-corner{border:none;background:#0d0e14}
.b-corner::before,.b-corner::after{content:'';position:absolute;width:24px;height:24px;transition:width .3s,height .3s}
.b-corner::before{top:0;left:0;border-top:2px solid #a78bfa;border-left:2px solid #a78bfa}
.b-corner::after{bottom:0;right:0;border-bottom:2px solid #a78bfa;border-right:2px solid #a78bfa}
.b-corner:hover::before,.b-corner:hover::after{width:calc(100% - 2px);height:calc(100% - 2px)}

/* 5 — Border width pulse */
.b-pulse{border:1px solid rgba(245,158,11,.3);transition:border-width .2s,border-color .2s,box-shadow .2s}
.b-pulse:hover{border-width:3px;border-color:#f59e0b;box-shadow:inset 0 0 20px rgba(245,158,11,.08)}

/* 6 — Dotted to solid */
.b-style{border:2px dashed rgba(20,184,166,.4);transition:border-style .01s,border-color .3s,box-shadow .3s}
.b-style:hover{border-style:solid;border-color:#14b8a6;box-shadow:0 0 0 6px rgba(20,184,166,.08)}

/* 7 — Colour shift wipe */
.b-wipe{border:2px solid #334155;transition:border-color .4s}
.b-wipe:hover{border-color:#f43f5e}

/* 8 — Double border expand */
.b-double{border:2px solid rgba(99,102,241,.3);outline:2px solid transparent;outline-offset:0;transition:outline-color .3s,outline-offset .3s,border-color .3s}
.b-double:hover{border-color:#6366f1;outline-color:rgba(99,102,241,.2);outline-offset:6px}

/* Input fields with border transitions */
.inputs{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.input-group{display:flex;flex-direction:column;gap:6px}
.input-group label{font-size:.78rem;font-weight:600;letter-spacing:.08em;color:#9ca3af}
.inp{background:#0d0e14;color:#e8eaf6;font-family:'Outfit';font-size:.95rem;padding:14px 16px;border-radius:8px;outline:none;width:100%}

.inp-1{border:2px solid #1e2030;transition:border-color .3s,box-shadow .3s}
.inp-1:focus{border-color:#818cf8;box-shadow:0 0 0 4px rgba(129,140,248,.15)}

.inp-2{border:1px solid #1e2030;border-bottom:2px solid #334155;border-radius:8px 8px 0 0;transition:border-bottom-color .3s}
.inp-2:focus{border-bottom-color:#34d399}

.inp-3{border:2px solid transparent;background-color:#0d0e14;background-image:linear-gradient(#0d0e14,#0d0e14),linear-gradient(135deg,#1e2030,#1e2030);background-clip:padding-box,border-box;background-origin:border-box;transition:background-image .4s}
.inp-3:focus{background-image:linear-gradient(#0d0e14,#0d0e14),linear-gradient(135deg,#f97316,#ec4899)}

.inputs-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:640px){.inputs-row{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
```

### 08. Fade In Fade Out Transition

**Type:** CSS + JS
**Description:** Aurora hero, card crossfade overlays, JS-driven fade tabs with four panels and staggered notification stack with opacity transitions.

**HTML:**
```html
<div class="hero">
  <div class="aurora">
    <span></span><span></span><span></span>
  </div>
  <h1>Fade <em>In</em><br>Fade Out</h1>
</div>

<section>
  <span class="sl">Hover to crossfade</span>
  <h2 class="sh">Card fade overlays</h2>
  <div class="fade-grid">
    <div class="fade-card fc1">
      <div class="base-emoji">🌊</div>
      <div class="base"><h3>Hover me →</h3></div>
      <div class="over"><h3>Ocean Drift</h3><p>Opacity fade from 0 to 1 on the overlay, simultaneous 1 to 0 on the base.</p></div>
    </div>
    <div class="fade-card fc2">
      <div class="base-emoji">☀️</div>
      <div class="base"><h3>Hover me →</h3></div>
      <div class="over"><h3>Desert Gold</h3><p>Crossfade with contrasting background — both panels use the same opacity transition.</p></div>
    </div>
    <div class="fade-card fc3">
      <div class="base-emoji">🌌</div>
      <div class="base"><h3>Hover me →</h3></div>
      <div class="over"><h3>Nebula Deep</h3><p>Delayed overlay fade (.5s vs .4s) gives the entrance a fraction of lag for depth.</p></div>
    </div>
    <div class="fade-card fc4">
      <div class="base-emoji">🌿</div>
      <div class="base"><h3>Hover me →</h3></div>
      <div class="over"><h3>Forest Canopy</h3><p>The emoji silhouette fades with the base layer — children inherit the parent opacity.</p></div>
    </div>
  </div>

  <span class="sl">Tabs — fade between panels</span>
  <h2 class="sh">Tab content fades</h2>
  <div class="tabs" id="tabs">
    <div class="tab active" data-tab="0">Features</div>
    <div class="tab" data-tab="1">Pricing</div>
    <div class="tab" data-tab="2">Roadmap</div>
    <div class="tab" data-tab="3">Changelog</div>
  </div>
  <div class="tab-panels">
    <div class="tab-panel tp1 active"><h3>Features</h3><p>Powerful tools built for modern workflows. Every interaction is smooth, deliberate and accessible.</p></div>
    <div class="tab-panel tp2"><h3>Pricing</h3><p>Simple, transparent pricing with no hidden fees. Scale as you grow — pay only for what you use.</p></div>
    <div class="tab-panel tp3"><h3>Roadmap</h3><p>Q3 2026: multi-region sync. Q4 2026: AI-assisted workflows. 2027: real-time collaboration mode.</p></div>
    <div class="tab-panel tp4"><h3>Changelog</h3><p>v4.2 — Redesigned dashboard, 40% faster load times, new API endpoints for bulk operations.</p></div>
  </div>
</section>

<section style="padding-top:0">
  <span class="sl">Staggered fade-in</span>
  <h2 class="sh">Notification stack</h2>
  <div class="notif-demo">
    <div class="notif"><div class="ni">✅</div><div><div class="nt">Deploy succeeded</div><div class="nd">Production · 2 min ago</div></div></div>
    <div class="notif"><div class="ni">💬</div><div><div class="nt">New comment on issue #418</div><div class="nd">Yuki M. · 5 min ago</div></div></div>
    <div class="notif"><div class="ni">⚠️</div><div><div class="nt">High memory on worker-3</div><div class="nd">Infra alert · 12 min ago</div></div></div>
    <div class="notif"><div class="ni">🔴</div><div><div class="nt">API latency spike detected</div><div class="nd">Monitor · 18 min ago</div></div></div>
  </div>
</section>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,700;1,300;1,700&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'IBM Plex Sans',sans-serif;background:#fafaf8;color:#1c1c1e;overflow-x:hidden}

/* hero */
.hero{background:#1c1c1e;min-height:90vh;display:flex;align-items:center;justify-content:center;padding:60px 24px;position:relative;overflow:hidden}
.hero h1{font-family:'Fraunces';font-size:clamp(3rem,10vw,7.5rem);font-weight:700;color:#fff;text-align:center;line-height:.85;letter-spacing:-.04em;position:relative;z-index:1}
.hero h1 em{font-style:italic;color:#d4a853}

/* aurora bg */
.aurora{position:absolute;inset:0;z-index:0;opacity:.3}
.aurora span{position:absolute;border-radius:50%;filter:blur(80px);animation:trn08-drift 8s ease-in-out infinite}
.aurora span:nth-child(1){width:50vw;height:50vw;background:#7c3aed;top:-10%;left:-10%;animation-duration:9s}
.aurora span:nth-child(2){width:40vw;height:40vw;background:#0ea5e9;bottom:-10%;right:-10%;animation-duration:11s;animation-delay:-3s}
.aurora span:nth-child(3){width:30vw;height:30vw;background:#d4a853;top:50%;left:50%;animation-duration:7s;animation-delay:-5s}
@keyframes trn08-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(4%,6%)}}

section{padding:80px 24px;max-width:1100px;margin:0 auto}
.sl{font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#9ca3af;margin-bottom:12px;display:block}
.sh{font-family:'Fraunces';font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;margin-bottom:36px;letter-spacing:-.03em}

/* FADE OVERLAYS on cards */
.fade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:56px}
.fade-card{position:relative;height:260px;border-radius:20px;overflow:hidden;cursor:default;background:var(--bg)}
.fade-card .base{position:absolute;inset:0;display:flex;align-items:flex-end;padding:24px;transition:opacity .4s}
.fade-card .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;opacity:0;transition:opacity .5s}
.fade-card:hover .base{opacity:0}
.fade-card:hover .over{opacity:1}

.fc1{--bg:linear-gradient(145deg,#1e3a5f,#0c1a2e)}
.fc1 .base h3{color:#fff;font-size:1.1rem;font-weight:600}
.fc1 .over{background:rgba(14,165,233,.95)}
.fc1 .over h3{color:#fff;font-family:'Fraunces';font-size:1.5rem;margin-bottom:8px}
.fc1 .over p{color:rgba(255,255,255,.8);font-size:.85rem;line-height:1.5}

.fc2{--bg:linear-gradient(145deg,#3b1a08,#1c0d04)}
.fc2 .base h3{color:#d4a853;font-size:1.1rem;font-weight:600}
.fc2 .over{background:rgba(212,168,83,.95)}
.fc2 .over h3{color:#1c0d04;font-family:'Fraunces';font-size:1.5rem;margin-bottom:8px}
.fc2 .over p{color:rgba(28,13,4,.75);font-size:.85rem;line-height:1.5}

.fc3{--bg:linear-gradient(145deg,#1a1a2e,#0f0e17)}
.fc3 .base h3{color:#a78bfa;font-size:1.1rem;font-weight:600}
.fc3 .over{background:rgba(124,58,237,.95)}
.fc3 .over h3{color:#fff;font-family:'Fraunces';font-size:1.5rem;margin-bottom:8px}
.fc3 .over p{color:rgba(255,255,255,.8);font-size:.85rem;line-height:1.5}

.fc4{--bg:linear-gradient(145deg,#0a2a1f,#04140e)}
.fc4 .base h3{color:#34d399;font-size:1.1rem;font-weight:600}
.fc4 .over{background:rgba(5,150,105,.95)}
.fc4 .over h3{color:#fff;font-family:'Fraunces';font-size:1.5rem;margin-bottom:8px}
.fc4 .over p{color:rgba(255,255,255,.8);font-size:.85rem;line-height:1.5}

/* base decoration */
.fade-card .base-emoji{font-size:3rem;position:absolute;top:24px;right:24px;opacity:.3}

/* FADE tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tab{padding:10px 20px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:2px solid #e5e7eb;color:#6b7280;transition:all .3s}
.tab.active,.tab:hover{background:#1c1c1e;color:#fff;border-color:#1c1c1e}
.tab-panels{position:relative;height:200px;background:#fff;border-radius:16px;border:2px solid #e5e7eb;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.tab-panel{position:absolute;inset:0;padding:32px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.tab-panel.active{opacity:1;pointer-events:auto}
.tab-panel h3{font-family:'Fraunces';font-size:1.4rem;margin-bottom:8px}
.tab-panel p{color:#6b7280;font-size:.9rem;line-height:1.6}
.tp1{background:linear-gradient(135deg,#eff6ff,#dbeafe)}
.tp2{background:linear-gradient(135deg,#fdf4ff,#f3e8ff)}
.tp3{background:linear-gradient(135deg,#f0fdf4,#dcfce7)}
.tp4{background:linear-gradient(135deg,#fff7ed,#fed7aa)}

/* Notification fade stack */
.notif-demo{max-width:380px;display:flex;flex-direction:column;gap:12px}
.notif{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:16px;box-shadow:0 4px 20px rgba(0,0,0,.08);border-left:4px solid var(--c);animation:trn08-fadein .5s cubic-bezier(.22,1,.36,1) both}
.notif:nth-child(1){animation-delay:.1s;--c:#3b82f6}
.notif:nth-child(2){animation-delay:.3s;--c:#10b981}
.notif:nth-child(3){animation-delay:.5s;--c:#f59e0b}
.notif:nth-child(4){animation-delay:.7s;--c:#ef4444}
@keyframes trn08-fadein{from{opacity:0;transform:translateX(30px)}}
.notif .ni{font-size:1.4rem}
.notif .nt{font-size:.88rem;font-weight:600;color:#1c1c1e}
.notif .nd{font-size:.75rem;color:#9ca3af;margin-top:2px}

@media (prefers-reduced-motion:reduce){.aurora span,.notif,.fade-card .base,.fade-card .over{animation:none !important;transition:none !important;opacity:1 !important}}
```

**JS:**
```js
document.getElementById('tabs').addEventListener('click',e=>{
  const tab = e.target.closest('[data-tab]'); if(!tab) return;
  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
  document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
  tab.classList.add('active');
  document.querySelectorAll('.tab-panel')[+tab.dataset.tab].classList.add('active');
});
```

### 09. Navigation Hover Transition

**Type:** Pure CSS
**Description:** Five navigation styles: sliding pill, underline slide, diagonal wipe, translateX sidebar and mega dropdown reveal with smooth transitions.

**HTML:**
```html
<div class="intro">
  <h1>Navigation Hover Transitions</h1>
  <p>5 polished CSS navigation styles — hover the links in each navbar</p>
</div>

<div class="nav-showcase">
  <div class="ns-label">Style 01 — Sliding pill (light)</div>
  <nav class="nav1">
    <div class="nav1-logo">◈ Studio</div>
    <div class="nav1-links">
      <div class="nav1-link active">Home</div>
      <div class="nav1-link">Work</div>
      <div class="nav1-link">About</div>
      <div class="nav1-link">Journal</div>
      <div class="nav1-link">Contact</div>
    </div>
    <button class="nav1-cta">Get started</button>
  </nav>

  <div class="ns-label">Style 02 — Underline slide (dark)</div>
  <nav class="nav2">
    <div class="nav2-logo">◈ Nexus</div>
    <div class="nav2-link active">Dashboard</div>
    <div class="nav2-link">Analytics</div>
    <div class="nav2-link">Campaigns</div>
    <div class="nav2-link">Audience</div>
    <div class="nav2-link">Settings</div>
  </nav>

  <div class="ns-label">Style 03 — Diagonal wipe</div>
  <nav class="nav3">
    <div class="nav3-logo">◈ BOLD</div>
    <div class="nav3-links">
      <div class="nav3-link"><span>Work</span></div>
      <div class="nav3-link"><span>Studio</span></div>
      <div class="nav3-link"><span>Awards</span></div>
      <div class="nav3-link"><span>Journal</span></div>
      <div class="nav3-link"><span>Contact</span></div>
    </div>
    <button class="nav3-cta">Hire us</button>
  </nav>

  <div class="ns-label">Style 04 — Vertical sidebar with slide</div>
  <div class="layout4">
    <aside class="sidebar">
      <div class="sidebar-head">Main menu</div>
      <div class="sidebar-link active"><span class="icon">🏠</span>Overview</div>
      <div class="sidebar-link"><span class="icon">📊</span>Analytics</div>
      <div class="sidebar-link"><span class="icon">🗂️</span>Projects</div>
      <div class="sidebar-link"><span class="icon">👥</span>Team</div>
      <div class="sidebar-link"><span class="icon">💬</span>Messages</div>
      <div class="sidebar-link"><span class="icon">⚙️</span>Settings</div>
    </aside>
    <div class="sidebar-content"><p>Sidebar links slide right on hover<br>with a soft purple background</p></div>
  </div>

  <div class="ns-label">Style 05 — Mega dropdown reveal</div>
  <nav class="nav5">
    <div class="nav5-logo">◈ Orbit</div>
    <div class="nav5-item">
      <div class="nav5-link">Products <span class="arr">▾</span></div>
      <div class="nav5-drop">
        <div class="drop-item"><div class="drop-icon" style="--c:#eff6ff">📊</div><div><div class="drop-title">Analytics Suite</div><div class="drop-desc">Real-time dashboards and reports</div></div></div>
        <div class="drop-item"><div class="drop-icon" style="--c:#f0fdf4">🤖</div><div><div class="drop-title">AI Automation</div><div class="drop-desc">Intelligent workflow automation</div></div></div>
        <div class="drop-item"><div class="drop-icon" style="--c:#fdf4ff">🔗</div><div><div class="drop-title">Integrations</div><div class="drop-desc">Connect 200+ tools seamlessly</div></div></div>
      </div>
    </div>
    <div class="nav5-item">
      <div class="nav5-link">Solutions <span class="arr">▾</span></div>
      <div class="nav5-drop">
        <div class="drop-item"><div class="drop-icon" style="--c:#fff7ed">🏢</div><div><div class="drop-title">Enterprise</div><div class="drop-desc">SSO, audit logs, 99.9% SLA</div></div></div>
        <div class="drop-item"><div class="drop-icon" style="--c:#f0fdf4">🚀</div><div><div class="drop-title">Startups</div><div class="drop-desc">Ship faster, scale smarter</div></div></div>
      </div>
    </div>
    <div class="nav5-item"><div class="nav5-link">Pricing</div></div>
    <div class="nav5-item"><div class="nav5-link">Docs</div></div>
  </nav>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f1f5f9;color:#0f172a;min-height:100vh;padding:0}

/* page intro */
.intro{padding:60px 24px 40px;text-align:center;max-width:800px;margin:0 auto}
.intro h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:8px;letter-spacing:-.03em}
.intro p{color:#64748b;font-size:.95rem}

/* nav containers */
.nav-showcase{display:flex;flex-direction:column;gap:0}
.ns-label{font-size:.65rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#94a3b8;padding:24px 40px 10px;background:#f1f5f9}

/* ──────────────────────── */
/* NAV 1 — Sliding pill indicator (like Apple) */
.nav1{background:#fff;padding:12px 32px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 0 #e2e8f0;position:sticky;top:0;z-index:10}
.nav1-logo{font-weight:800;font-size:1.1rem;letter-spacing:-.02em}
.nav1-links{display:flex;gap:4px;background:#f8fafc;border-radius:30px;padding:4px}
.nav1-link{padding:8px 18px;border-radius:26px;font-size:.88rem;font-weight:500;color:#64748b;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.nav1-link:hover,.nav1-link.active{background:#0f172a;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.nav1-link.active{color:#fff}
.nav1-cta{background:#3b82f6;color:#fff;border-radius:20px;padding:9px 20px;font-size:.88rem;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:background .2s,transform .1s}
.nav1-cta:hover{background:#2563eb;transform:translateY(-1px)}

/* ──────────────────────── */
/* NAV 2 — Underline slide (bold agency style) */
.nav2{background:#0f172a;padding:0 40px;display:flex;align-items:center;gap:0}
.nav2-logo{font-weight:800;font-size:1.1rem;color:#fff;margin-right:auto;padding:20px 0}
.nav2-link{display:flex;align-items:center;padding:20px 20px;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;position:relative;transition:color .3s}
.nav2-link::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:3px;background:#38bdf8;transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.nav2-link:hover{color:#fff}
.nav2-link:hover::after{transform:scaleX(1)}
.nav2-link.active{color:#fff}
.nav2-link.active::after{transform:scaleX(1)}

/* ──────────────────────── */
/* NAV 3 — Diagonal wipe (retro bold) */
.nav3{background:#18181b;padding:0 40px;display:flex;align-items:center;gap:0;overflow:hidden}
.nav3-logo{font-weight:800;font-size:1.1rem;color:#fff;margin-right:40px;padding:18px 0;letter-spacing:-.02em}
.nav3-links{display:flex;gap:0}
.nav3-link{padding:18px 22px;font-size:.9rem;font-weight:600;color:#71717a;cursor:pointer;position:relative;overflow:hidden;transition:color .3s}
.nav3-link::before{content:'';position:absolute;inset:-4px;background:#fbbf24;transform:skewX(-12deg) scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.nav3-link:hover{color:#18181b}
.nav3-link:hover::before{transform:skewX(-12deg) scaleX(1.3);transform-origin:left}
.nav3-link span{position:relative;z-index:1}
.nav3-cta{margin-left:auto;padding:10px 22px;background:#fff;color:#18181b;font-size:.88rem;font-weight:700;border:none;font-family:inherit;cursor:pointer;transition:background .2s}
.nav3-cta:hover{background:#fbbf24}

/* ──────────────────────── */
/* NAV 4 — Vertical sidebar nav */
.layout4{display:grid;grid-template-columns:240px 1fr;min-height:300px}
.sidebar{background:#faf5ff;border-right:1px solid #e9d5ff;padding:24px 16px;display:flex;flex-direction:column;gap:4px}
.sidebar-head{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#a78bfa;padding:8px 12px;margin-bottom:8px}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;font-size:.9rem;font-weight:500;color:#6b21a8;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.sidebar-link:hover{background:#ede9fe;transform:translateX(4px)}
.sidebar-link.active{background:#7c3aed;color:#fff}
.sidebar-link .icon{font-size:1rem;width:20px;text-align:center}
.sidebar-content{padding:32px;display:flex;align-items:center;justify-content:center;background:#fff}
.sidebar-content p{color:#94a3b8;font-size:.9rem;text-align:center}

/* ──────────────────────── */
/* NAV 5 — Mega hover dropdown */
.nav5{background:#fff;padding:0 40px;display:flex;align-items:center;border-bottom:1px solid #e2e8f0;position:relative;z-index:20}
.nav5-logo{font-weight:800;font-size:1.1rem;margin-right:40px;padding:18px 0;letter-spacing:-.02em}
.nav5-item{position:relative;padding:18px 0;margin-right:8px}
.nav5-link{display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:6px;font-size:.88rem;font-weight:500;color:#475569;cursor:pointer;transition:background .2s,color .2s}
.nav5-link:hover,.nav5-item:hover .nav5-link{background:#f1f5f9;color:#0f172a}
.nav5-link .arr{font-size:.65rem;transition:transform .2s;display:inline-block}
.nav5-item:hover .nav5-link .arr{transform:rotate(180deg)}
.nav5-drop{position:absolute;top:calc(100% - 8px);left:0;min-width:280px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;box-shadow:0 20px 40px rgba(0,0,0,.1);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(-8px)}
.nav5-item:hover .nav5-drop{opacity:1;pointer-events:auto;transform:translateY(0)}
.drop-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s}
.drop-item:hover{background:#f8fafc}
.drop-icon{width:36px;height:36px;border-radius:8px;background:var(--c,#eff6ff);display:grid;place-items:center;font-size:1rem;flex:0 0 auto}
.drop-title{font-size:.88rem;font-weight:600;color:#0f172a}
.drop-desc{font-size:.75rem;color:#64748b;margin-top:1px}

@media(max-width:700px){.layout4{grid-template-columns:1fr}.nav5-drop{left:-20px;right:0;min-width:260px}}
@media(max-width:540px){.nav2,.nav3{padding:0 16px}.nav2-link,.nav3-link{padding:16px 12px;font-size:.8rem}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
```

### 10. Loading Skeleton Transition

**Type:** CSS + JS
**Description:** Shimmer, wave and pulse skeleton variants with toggle to reveal loaded content across card grid and data table layouts.

**HTML:**
```html
<div class="wrap">
  <h1>CSS Loading Skeleton</h1>
  <p class="sub">Shimmer, wave and pulse skeleton screens — pure CSS, no JS for the animations</p>

  <div class="toggle-wrap">
    <span class="toggle-label">Mode:</span>
    <button class="toggle-btn skeleton-mode" id="toggleBtn" onclick="toggleLoaded()">Showing skeleton → click to load</button>
  </div>

  <span class="sl">Card skeletons — shimmer variant</span>
  <div class="grid-3" id="cardGrid">
    <div class="skel-card state-panel">
      <div class="skeleton-state">
        <div class="skel skel-r skel-img"></div>
        <div class="skel-row"><div class="skel skel-round skel-avatar"></div><div class="skel-lines"><div class="skel skel-r skel-h1"></div><div class="skel skel-r skel-h2"></div></div></div>
        <div class="skel-tags"><div class="skel skel-tag"></div><div class="skel skel-tag"></div></div>
      </div>
      <div class="loaded-state">
        <div class="lc-img" style="--bg:linear-gradient(135deg,#7c3aed,#a78bfa)">🚀</div>
        <div class="lc-row"><div class="lc-avatar" style="--av:#7c3aed">M</div><div><div class="lc-name">Marcus Reid</div><div class="lc-role">Frontend Engineer</div></div></div>
        <div class="lc-tags"><span class="lc-tag" style="--tc:#7c3aed">CSS</span><span class="lc-tag" style="--tc:#0ea5e9">React</span></div>
      </div>
    </div>
    <div class="skel-card state-panel">
      <div class="skeleton-state">
        <div class="skel skel-r skel-img"></div>
        <div class="skel-row"><div class="skel skel-round skel-avatar"></div><div class="skel-lines"><div class="skel skel-r skel-h1"></div><div class="skel skel-r skel-h2"></div></div></div>
        <div class="skel-tags"><div class="skel skel-tag"></div><div class="skel skel-tag"></div></div>
      </div>
      <div class="loaded-state">
        <div class="lc-img" style="--bg:linear-gradient(135deg,#0ea5e9,#38bdf8)">🌊</div>
        <div class="lc-row"><div class="lc-avatar" style="--av:#0ea5e9">Y</div><div><div class="lc-name">Yuki Mori</div><div class="lc-role">Data Scientist</div></div></div>
        <div class="lc-tags"><span class="lc-tag" style="--tc:#0ea5e9">Python</span><span class="lc-tag" style="--tc:#10b981">ML</span></div>
      </div>
    </div>
    <div class="skel-card state-panel">
      <div class="skeleton-state">
        <div class="skel skel-r skel-img"></div>
        <div class="skel-row"><div class="skel skel-round skel-avatar"></div><div class="skel-lines"><div class="skel skel-r skel-h1"></div><div class="skel skel-r skel-h2"></div></div></div>
        <div class="skel-tags"><div class="skel skel-tag"></div><div class="skel skel-tag"></div></div>
      </div>
      <div class="loaded-state">
        <div class="lc-img" style="--bg:linear-gradient(135deg,#f97316,#fb923c)">🔥</div>
        <div class="lc-row"><div class="lc-avatar" style="--av:#f97316">A</div><div><div class="lc-name">Amara Cole</div><div class="lc-role">Product Designer</div></div></div>
        <div class="lc-tags"><span class="lc-tag" style="--tc:#f97316">Figma</span><span class="lc-tag" style="--tc:#ec4899">Motion</span></div>
      </div>
    </div>
  </div>

  <span class="sl">Table skeleton — wave variant</span>
  <div class="skel-table" style="margin-bottom:48px">
    <div class="skel-thead">
      <div class="skel skel-wave skel-round skel-avatar-sm"></div>
      <div class="skel skel-wave skel-cell"></div>
      <div class="skel skel-wave skel-cell-sm"></div>
      <div class="skel skel-wave skel-cell-sm"></div>
      <div class="skel skel-wave skel-cell-sm"></div>
      <div class="skel skel-wave skel-cell-sm"></div>
    </div>
    <div class="skel-tbody-row"><div class="skel skel-wave skel-round skel-avatar-sm"></div><div class="skel skel-wave skel-cell"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div></div>
    <div class="skel-tbody-row"><div class="skel skel-wave skel-round skel-avatar-sm"></div><div class="skel skel-wave skel-cell"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div></div>
    <div class="skel-tbody-row"><div class="skel skel-wave skel-round skel-avatar-sm"></div><div class="skel skel-wave skel-cell"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div></div>
    <div class="skel-tbody-row"><div class="skel skel-wave skel-round skel-avatar-sm"></div><div class="skel skel-wave skel-cell"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div><div class="skel skel-wave skel-cell-sm"></div></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Nunito',sans-serif;background:#0f0f1a;color:#e2e8f0;min-height:100vh;padding:60px 24px}
.wrap{max-width:1100px;margin:0 auto}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.03em}
.sub{text-align:center;color:#6b7280;margin-bottom:56px}
.sl{font-size:.68rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#6b7280;margin-bottom:16px;display:block}
h2{font-size:1.3rem;font-weight:700;margin-bottom:24px}

/* THE SKELETON CORE */
.skel{background:linear-gradient(90deg,#1e1e2e 25%,#2a2a40 50%,#1e1e2e 75%);background-size:200% 100%;animation:trn10-shimmer 1.4s infinite}
@keyframes trn10-shimmer{to{background-position:-200% 0}}
.skel-r{border-radius:4px}
.skel-round{border-radius:50%}

/* variant 2 — wave on dark */
.skel-wave{background:linear-gradient(90deg,#1a1a2e 25%,#252540 50%,#1a1a2e 75%);background-size:400% 100%;animation:trn10-wave 1.8s ease-in-out infinite}
@keyframes trn10-wave{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* variant 3 — pulse */
.skel-pulse{animation:trn10-pulse 1.5s ease-in-out infinite}
@keyframes trn10-pulse{0%,100%{opacity:.4}50%{opacity:.9}}

/* grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:48px}
@media(max-width:800px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* SKELETON CARD */
.skel-card{background:#13132a;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,.04)}
.skel-img{height:180px;border-radius:10px}
.skel-avatar{width:44px;height:44px;flex:0 0 44px}
.skel-row{display:flex;align-items:center;gap:12px}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:8px}
.skel-h1{height:14px}
.skel-h2{height:12px;width:70%}
.skel-h3{height:12px;width:50%}
.skel-tag{height:24px;width:80px;border-radius:20px}
.skel-tags{display:flex;gap:8px}
.skel-btn{height:38px;border-radius:8px;width:120px}

/* ARTICLE skeleton */
.skel-article{background:#13132a;border-radius:16px;padding:28px;border:1px solid rgba(255,255,255,.04)}
.skel-title{height:28px;margin-bottom:8px}
.skel-title2{height:28px;width:70%;margin-bottom:24px}
.skel-para{height:12px;margin-bottom:8px}
.skel-para-short{height:12px;width:75%}

/* PROFILE skeleton */
.skel-profile{background:#13132a;border-radius:16px;padding:28px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;border:1px solid rgba(255,255,255,.04)}
.skel-avatar-lg{width:80px;height:80px;flex:0 0 80px;border-radius:50%}
.skel-name{height:18px;width:140px}
.skel-sub{height:12px;width:100px}
.skel-stat-row{display:flex;gap:24px;margin-top:8px}
.skel-stat{display:flex;flex-direction:column;align-items:center;gap:8px}
.skel-stat-n{height:22px;width:44px}
.skel-stat-l{height:10px;width:44px}
.skel-follow{height:40px;width:140px;border-radius:20px}

/* DATA TABLE skeleton */
.skel-table{background:#13132a;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.skel-thead{display:grid;grid-template-columns:44px 1.5fr 1fr 1fr 1fr 80px;gap:16px;padding:14px 20px;background:#1e1e2e;align-items:center}
.skel-tbody-row{display:grid;grid-template-columns:44px 1.5fr 1fr 1fr 1fr 80px;gap:16px;padding:14px 20px;align-items:center;border-top:1px solid rgba(255,255,255,.04)}
.skel-cell{height:12px;border-radius:4px}
.skel-cell-sm{height:12px;width:70%;border-radius:4px}
.skel-avatar-sm{width:32px;height:32px;border-radius:50%}
@media(max-width:600px){.skel-thead,.skel-tbody-row{grid-template-columns:44px 1fr 1fr}}

/* the toggle to see loaded state */
.toggle-wrap{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:48px}
.toggle-label{font-size:.88rem;font-weight:600;color:#6b7280}
.toggle-btn{padding:10px 24px;border-radius:20px;border:none;font-family:'Nunito';font-weight:700;font-size:.88rem;cursor:pointer;transition:all .2s}
.toggle-btn.skeleton-mode{background:#7c3aed;color:#fff}
.toggle-btn.loaded-mode{background:#10b981;color:#fff}

/* loaded state cards (hidden by default) */
.loaded-card{background:#13132a;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,.04);opacity:0;transition:opacity .4s}
.loaded-card.visible{opacity:1}
.lc-img{height:180px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-size:3rem}
.lc-row{display:flex;align-items:center;gap:12px}
.lc-avatar{width:44px;height:44px;border-radius:50%;background:var(--av);display:grid;place-items:center;font-size:1.2rem;flex:0 0 44px}
.lc-name{font-weight:700;font-size:.9rem}
.lc-role{font-size:.75rem;color:#9ca3af}
.lc-tags{display:flex;gap:8px;flex-wrap:wrap}
.lc-tag{font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:16px;background:var(--tc);color:#fff}
.lc-title{font-weight:700;font-size:1rem;color:#f1f5f9}
.lc-desc{font-size:.82rem;color:#94a3b8;line-height:1.5}
.lc-btn{align-self:flex-start;padding:9px 20px;border-radius:8px;background:#7c3aed;color:#fff;font-family:'Nunito';font-weight:700;font-size:.82rem;border:none;cursor:pointer}

.state-panel{position:relative}
.state-panel .skeleton-state,.state-panel .loaded-state{position:absolute;inset:0;transition:opacity .4s}
.state-panel .skeleton-state{opacity:1}
.state-panel .loaded-state{opacity:0}
.state-panel.is-loaded .skeleton-state{opacity:0}
.state-panel.is-loaded .loaded-state{opacity:1}
.state-panel{min-height:280px}

@media (prefers-reduced-motion:reduce){.skel,.skel-wave,.skel-pulse{animation:none !important}}
```

**JS:**
```js
function toggleLoaded(){
  const panels = document.querySelectorAll('.state-panel');
  const btn = document.getElementById('toggleBtn');
  const isLoaded = panels[0].classList.contains('is-loaded');
  panels.forEach(p => p.classList.toggle('is-loaded', !isLoaded));
  if(!isLoaded){
    btn.className='toggle-btn loaded-mode';
    btn.textContent='Showing loaded → click to show skeleton';
  } else {
    btn.className='toggle-btn skeleton-mode';
    btn.textContent='Showing skeleton → click to load';
  }
}
```

### 11. Modal Open Close Transition

**Type:** CSS + JS
**Description:** Six modal entrance animations: scale-in, slide-up, flip-in, bounce overshoot, slide-right and unfold, with backdrop-filter blur overlay.

**HTML:**
```html
<div class="wrap">
  <h1>Modal Transitions</h1>
  <p class="sub">6 CSS transition effects for opening and closing modals — click each to preview</p>

  <div id="animInfo" class="anim-info">Click any button below to open its modal variant</div>

  <span class="sl">Open a modal</span>
  <h2>6 entrance animations</h2>
  <div class="grid">
    <button class="trig-btn" style="--c:#059669" onclick="openModal('m1')">⬆ Scale in</button>
    <button class="trig-btn" style="--c:#7c3aed" onclick="openModal('m2')">⬆ Slide up</button>
    <button class="trig-btn" style="--c:#0ea5e9" onclick="openModal('m3')">↻ Flip in</button>
    <button class="trig-btn" style="--c:#f97316" onclick="openModal('m4')">🎯 Bounce</button>
    <button class="trig-btn" style="--c:#ec4899" onclick="openModal('m5')">→ Slide right</button>
    <button class="trig-btn" style="--c:#d97706" onclick="openModal('m6')">⬇ Unfold</button>
  </div>
</div>

<!-- Modal 1 — Scale in (success) -->
<div class="overlay" id="m1" onclick="if(event.target===this)closeModal('m1')">
  <div class="modal m-scale">
    <button class="mclose" onclick="closeModal('m1')">✕</button>
    <div class="modal-type">Scale entrance</div>
    <span class="modal-icon">✅</span>
    <h3>Deployment complete</h3>
    <p>Your application has been deployed to production successfully. All 4 health checks passed with zero downtime.</p>
    <div class="modal-actions">
      <button class="m-primary" onclick="closeModal('m1')">View deployment</button>
      <button class="m-secondary" onclick="closeModal('m1')">Dismiss</button>
    </div>
  </div>
</div>

<!-- Modal 2 — Slide up (default) -->
<div class="overlay" id="m2" onclick="if(event.target===this)closeModal('m2')">
  <div class="modal m-slideup">
    <button class="mclose" onclick="closeModal('m2')">✕</button>
    <div class="modal-type">Slide up entrance</div>
    <span class="modal-icon">🚀</span>
    <h3>Start your free trial</h3>
    <p>Get full access to all Pro features for 14 days. No credit card required. Cancel any time.</p>
    <div class="modal-actions">
      <button class="m-primary" onclick="closeModal('m2')">Start free trial</button>
      <button class="m-secondary" onclick="closeModal('m2')">Maybe later</button>
    </div>
  </div>
</div>

<!-- Modal 3 — Flip in (info) -->
<div class="overlay" id="m3" onclick="if(event.target===this)closeModal('m3')">
  <div class="modal m-flip var-info">
    <button class="mclose" onclick="closeModal('m3')">✕</button>
    <div class="modal-type">Flip entrance</div>
    <span class="modal-icon">ℹ️</span>
    <h3>Update available</h3>
    <p>Version 4.2.0 is ready to install. This update includes performance improvements and 3 bug fixes.</p>
    <div class="modal-actions">
      <button class="m-primary" onclick="closeModal('m3')">Install now</button>
      <button class="m-secondary" onclick="closeModal('m3')">Remind later</button>
    </div>
  </div>
</div>

<!-- Modal 4 — Bounce -->
<div class="overlay" id="m4" onclick="if(event.target===this)closeModal('m4')">
  <div class="modal m-bounce">
    <button class="mclose" onclick="closeModal('m4')">✕</button>
    <div class="modal-type">Bounce entrance</div>
    <span class="modal-icon">🎉</span>
    <h3>Congratulations!</h3>
    <p>You've unlocked the Pro tier. All premium features are now active on your account.</p>
    <div class="modal-actions">
      <button class="m-primary" onclick="closeModal('m4')">Explore features</button>
      <button class="m-secondary" onclick="closeModal('m4')">Close</button>
    </div>
  </div>
</div>

<!-- Modal 5 — Slide from right -->
<div class="overlay" id="m5" onclick="if(event.target===this)closeModal('m5')">
  <div class="modal m-right var-err">
    <button class="mclose" onclick="closeModal('m5')">✕</button>
    <div class="modal-type">Slide right entrance</div>
    <span class="modal-icon">⚠️</span>
    <h3>Delete this workspace?</h3>
    <p>This action cannot be undone. All projects, data and team members will be permanently removed.</p>
    <div class="modal-actions">
      <button class="m-primary" onclick="closeModal('m5')">Delete permanently</button>
      <button class="m-secondary" onclick="closeModal('m5')">Cancel</button>
    </div>
  </div>
</div>

<!-- Modal 6 — Unfold -->
<div class="overlay" id="m6" onclick="if(event.target===this)closeModal('m6')">
  <div class="modal m-unfold var-warn" style="max-width:480px">
    <button class="mclose" onclick="closeModal('m6')">✕</button>
    <div class="modal-type">Unfold entrance</div>
    <span class="modal-icon">⚡</span>
    <h3>Usage limit approaching</h3>
    <p>You've used 89% of your monthly API quota. Upgrade to Pro to avoid service interruption.</p>
    <div class="modal-actions">
      <button class="m-primary" onclick="closeModal('m6')">Upgrade plan</button>
      <button class="m-secondary" onclick="closeModal('m6')">Dismiss</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Epilogue',sans-serif;background:#ecfdf5;color:#0f172a;min-height:100vh;padding:60px 24px}
.wrap{max-width:1000px;margin:0 auto}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.03em;color:#0f172a}
.sub{text-align:center;color:#64748b;margin-bottom:56px}
.sl{font-size:.68rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#10b981;margin-bottom:12px;display:block}
h2{font-size:1.15rem;font-weight:700;margin-bottom:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:48px}
.trig-btn{padding:14px 24px;border-radius:10px;font-family:'Epilogue';font-weight:700;font-size:.9rem;cursor:pointer;border:none;background:var(--c,#059669);color:#fff;transition:transform .1s,filter .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.trig-btn:hover{filter:brightness(1.1)}
.trig-btn:active{transform:scale(.97)}

/* OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.open{opacity:1;pointer-events:auto}

/* MODAL BASE */
.modal{background:#fff;border-radius:20px;padding:36px;width:100%;max-width:480px;position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.25)}

/* Modal close btn */
.mclose{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#f1f5f9;border:none;font-size:1rem;cursor:pointer;display:grid;place-items:center;color:#64748b;transition:background .2s}
.mclose:hover{background:#e2e8f0;color:#0f172a}

/* M1 — Scale in */
.m-scale{transform:scale(.85);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.overlay.open .m-scale{transform:scale(1)}
.overlay:not(.open) .m-scale{transform:scale(.85)}

/* M2 — Slide up */
.m-slideup{transform:translateY(60px);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s}
.overlay.open .m-slideup{transform:translateY(0);opacity:1}

/* M3 — Flip in */
.m-flip{transform:perspective(800px) rotateX(-20deg);opacity:0;transform-origin:top;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s}
.overlay.open .m-flip{transform:perspective(800px) rotateX(0);opacity:1}

/* M4 — Bounce */
.m-bounce{transform:scale(.3);opacity:0;transition:transform .5s cubic-bezier(.34,1.8,.64,1),opacity .2s}
.overlay.open .m-bounce{transform:scale(1);opacity:1}

/* M5 — Slide from right */
.m-right{transform:translateX(80px);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s}
.overlay.open .m-right{transform:translateX(0);opacity:1}

/* M6 — Unfold (height expand) */
.m-unfold{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s .1s;padding:0 36px}
.overlay.open .m-unfold{max-height:500px;opacity:1;padding:36px}

/* modal content shared */
.modal h3{font-size:1.25rem;font-weight:700;margin-bottom:8px}
.modal p{font-size:.9rem;color:#64748b;line-height:1.6;margin-bottom:20px}
.modal-actions{display:flex;gap:10px}
.m-primary{flex:1;padding:12px;border-radius:8px;background:#059669;color:#fff;font-family:'Epilogue';font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:background .2s}
.m-primary:hover{background:#047857}
.m-secondary{flex:1;padding:12px;border-radius:8px;background:#f1f5f9;color:#0f172a;font-family:'Epilogue';font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:background .2s}
.m-secondary:hover{background:#e2e8f0}
.modal-type{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#10b981;margin-bottom:12px}
.modal-icon{font-size:2.5rem;margin-bottom:12px;display:block}

/* variant colours */
.var-warn h3{color:#d97706}
.var-warn .m-primary{background:#d97706}
.var-warn .m-primary:hover{background:#b45309}
.var-warn .modal-type{color:#d97706}
.var-err h3{color:#dc2626}
.var-err .m-primary{background:#dc2626}
.var-err .m-primary:hover{background:#b91c1c}
.var-err .modal-type{color:#dc2626}
.var-info h3{color:#2563eb}
.var-info .m-primary{background:#2563eb}
.var-info .m-primary:hover{background:#1d4ed8}
.var-info .modal-type{color:#2563eb}

/* current info badge */
.anim-info{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px 16px;font-size:.8rem;color:#166534;margin-bottom:40px}

@media (prefers-reduced-motion:reduce){.modal,.overlay{transition:none !important;transform:none !important}}
```

**JS:**
```js
function openModal(id){
  document.getElementById(id).classList.add('open');
  document.getElementById('animInfo').textContent='Transition: ' + {m1:'scale(.85) → scale(1)',m2:'translateY(60px) → translateY(0)',m3:'perspective rotateX(-20deg) → rotateX(0)',m4:'scale(.3) → scale(1) with overshoot',m5:'translateX(80px) → translateX(0)',m6:'max-height 0 → 500px'}[id];
}
function closeModal(id){ document.getElementById(id).classList.remove('open'); }
document.addEventListener('keydown', e=>{ if(e.key==='Escape') document.querySelectorAll('.overlay.open').forEach(m=>m.classList.remove('open')); });
```

### 12. Page Transition Effect

**Type:** CSS + JS
**Description:** Four pages with four transition types each: horizontal wipe, curtain, circle burst and vertical-slices stagger — with type selector and dot nav.

**HTML:**
```html
<div class="type-select" id="typeSelect">
  <button class="ts-btn active" data-type="wipe">Wipe</button>
  <button class="ts-btn" data-type="curtain">Curtain</button>
  <button class="ts-btn" data-type="circle">Circle</button>
  <button class="ts-btn" data-type="slices">Slices</button>
</div>

<div class="page-app">
  <div class="page pg1 active" data-page="0">
    <div class="page-num">01 / 04</div>
    <h2>Page Transitions</h2>
    <p>CSS-powered page transition effects. Choose a style above, then click Next to see it play.</p>
    <button class="next-btn" onclick="nextPage()">Next page →</button>
  </div>
  <div class="page pg2" data-page="1">
    <div class="page-num">02 / 04</div>
    <h2>Smooth Moves</h2>
    <p>Four transition types: horizontal wipe, curtain open, radial circle burst, and vertical slices.</p>
    <button class="next-btn" onclick="nextPage()">Next page →</button>
  </div>
  <div class="page pg3" data-page="2">
    <div class="page-num">03 / 04</div>
    <h2>Full Coverage</h2>
    <p>Each effect uses pure CSS animations on a fixed overlay that covers the viewport during the swap.</p>
    <button class="next-btn" onclick="nextPage()">Next page →</button>
  </div>
  <div class="page pg4" data-page="3">
    <div class="page-num">04 / 04</div>
    <h2>Cycle Back</h2>
    <p>Click below to loop back to the start, or select a different transition type above.</p>
    <button class="next-btn" onclick="nextPage()">Back to start →</button>
  </div>
</div>

<div class="t-overlay" id="overlay">
  <div class="t-wipe" style="position:absolute;inset:0;transform:translateX(-100%);--c:#a78bfa"></div>
  <div class="t-curtain-l" style="--c:#f97316;transform:translateX(-100%)"></div>
  <div class="t-curtain-r" style="--c:#f97316;transform:translateX(100%)"></div>
  <div class="t-circle" style="width:200vmax;height:200vmax;--c:#10b981"></div>
  <div class="t-slices" style="--c:#38bdf8">
    <div class="t-slice" style="transform:scaleY(0);transform-origin:top"></div>
    <div class="t-slice" style="transform:scaleY(0);transform-origin:top"></div>
    <div class="t-slice" style="transform:scaleY(0);transform-origin:top"></div>
    <div class="t-slice" style="transform:scaleY(0);transform-origin:top"></div>
    <div class="t-slice" style="transform:scaleY(0);transform-origin:top"></div>
  </div>
</div>

<div class="dots" id="dots"></div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Lexend',sans-serif;background:#0d0d14;color:#f1f5f9;min-height:100vh;overflow:hidden}

/* page wrapper */
.page-app{width:100%;height:100vh;position:relative}

/* pages */
.page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;opacity:0;pointer-events:none;transition:opacity .01s 1s}
.page.active{opacity:1;pointer-events:auto;transition:opacity .01s}
.page h2{font-size:clamp(2.5rem,8vw,5rem);font-weight:800;margin-bottom:16px;letter-spacing:-.04em}
.page p{font-size:1rem;max-width:50ch;opacity:.6;line-height:1.6;margin-bottom:40px}
.page-num{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.4;margin-bottom:16px}
.next-btn{padding:14px 36px;border-radius:30px;border:2px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-family:'Lexend';font-weight:600;font-size:.9rem;cursor:pointer;transition:background .2s,border-color .2s}
.next-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}

/* page backgrounds */
.pg1{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}
.pg2{background:linear-gradient(135deg,#0a2e1a,#116545,#0d4a32)}
.pg3{background:linear-gradient(135deg,#2d0518,#7b0d2b,#4a0a1e)}
.pg4{background:linear-gradient(135deg,#0d1a3a,#1a3a6b,#0a2550)}

/* TRANSITION OVERLAY */
.t-overlay{position:fixed;inset:0;z-index:200;pointer-events:none}

/* Wipe variants */
.t-wipe{background:var(--c,#a78bfa)}

/* Curtain pair */
.t-curtain-l,.t-curtain-r{position:absolute;top:0;bottom:0;width:51%;background:var(--c,#f97316)}
.t-curtain-l{left:0}
.t-curtain-r{right:0}

/* Circle burst */
.t-circle{position:absolute;top:50%;left:50%;border-radius:50%;background:var(--c,#10b981);transform:translate(-50%,-50%) scale(0)}

/* Vertical slices */
.t-slices{display:flex;position:absolute;inset:0}
.t-slice{flex:1;background:var(--c,#38bdf8)}

/* ANIMATIONS triggered by .animating class */
/* 1 — horizontal wipe */
.anim-wipe.enter .t-wipe{animation:trn12-wipeEnter .5s cubic-bezier(.7,0,.2,1) forwards}
.anim-wipe.exit .t-wipe{animation:trn12-wipeExit .5s .4s cubic-bezier(.7,0,.2,1) forwards}
@keyframes trn12-wipeEnter{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes trn12-wipeExit{from{transform:translateX(0)}to{transform:translateX(100%)}}

/* 2 — curtain */
.anim-curtain.enter .t-curtain-l{animation:trn12-curtLEnter .45s cubic-bezier(.7,0,.2,1) forwards}
.anim-curtain.enter .t-curtain-r{animation:trn12-curtREnter .45s .05s cubic-bezier(.7,0,.2,1) forwards}
.anim-curtain.exit .t-curtain-l{animation:trn12-curtLExit .45s .4s cubic-bezier(.7,0,.2,1) forwards}
.anim-curtain.exit .t-curtain-r{animation:trn12-curtRExit .45s .45s cubic-bezier(.7,0,.2,1) forwards}
@keyframes trn12-curtLEnter{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes trn12-curtREnter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes trn12-curtLExit{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes trn12-curtRExit{from{transform:translateX(0)}to{transform:translateX(100%)}}

/* 3 — circle */
.anim-circle.enter .t-circle{animation:trn12-circleIn .5s cubic-bezier(.22,1,.36,1) forwards}
.anim-circle.exit .t-circle{animation:trn12-circleOut .5s .4s cubic-bezier(.7,0,.2,1) forwards;transform:translate(-50%,-50%) scale(3)}
@keyframes trn12-circleIn{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(3)}}
@keyframes trn12-circleOut{from{transform:translate(-50%,-50%) scale(3)}to{transform:translate(-50%,-50%) scale(0)}}

/* 4 — slices stagger */
.anim-slices.enter .t-slice:nth-child(1){animation:trn12-sliceIn .4s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.enter .t-slice:nth-child(2){animation:trn12-sliceIn .4s .05s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.enter .t-slice:nth-child(3){animation:trn12-sliceIn .4s .1s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.enter .t-slice:nth-child(4){animation:trn12-sliceIn .4s .15s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.enter .t-slice:nth-child(5){animation:trn12-sliceIn .4s .2s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.exit .t-slice:nth-child(1){animation:trn12-sliceOut .4s .4s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.exit .t-slice:nth-child(2){animation:trn12-sliceOut .4s .45s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.exit .t-slice:nth-child(3){animation:trn12-sliceOut .4s .5s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.exit .t-slice:nth-child(4){animation:trn12-sliceOut .4s .55s cubic-bezier(.7,0,.2,1) forwards}
.anim-slices.exit .t-slice:nth-child(5){animation:trn12-sliceOut .4s .6s cubic-bezier(.7,0,.2,1) forwards}
@keyframes trn12-sliceIn{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1)}}
@keyframes trn12-sliceOut{from{transform:scaleY(1);transform-origin:bottom}to{transform:scaleY(0)}}

/* transition type selector */
.type-select{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:300;display:flex;gap:8px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);padding:8px;border-radius:30px;border:1px solid rgba(255,255,255,.12)}
.ts-btn{padding:8px 16px;border-radius:22px;border:none;background:transparent;color:rgba(255,255,255,.5);font-family:'Lexend';font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.ts-btn.active,.ts-btn:hover{background:rgba(255,255,255,.15);color:#fff}

/* page indicator */
.dots{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:300;display:flex;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .3s,transform .3s;cursor:pointer}
.dot.active{background:#fff;transform:scale(1.3)}

@media (prefers-reduced-motion:reduce){.t-overlay *{animation:none !important}}
```

**JS:**
```js
let currentPage = 0;
let currentType = 'wipe';
let animating = false;
const pages = document.querySelectorAll('.page');
const overlay = document.getElementById('overlay');
const dotsEl = document.getElementById('dots');

// Build dots
pages.forEach((_,i) => {
  const d = document.createElement('div');
  d.className = 'dot' + (i===0?' active':'');
  d.onclick = () => goToPage(i);
  dotsEl.appendChild(d);
});

// Type selector
document.getElementById('typeSelect').addEventListener('click', e => {
  const btn = e.target.closest('[data-type]');
  if(!btn) return;
  currentType = btn.dataset.type;
  document.querySelectorAll('.ts-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
});

function nextPage(){ goToPage((currentPage+1) % pages.length); }

function goToPage(next){
  if(animating || next === currentPage) return;
  animating = true;
  overlay.className = 't-overlay anim-' + currentType + ' enter';
  setTimeout(() => {
    pages[currentPage].classList.remove('active');
    currentPage = next;
    pages[currentPage].classList.add('active');
    document.querySelectorAll('.dot').forEach((d,i) => d.classList.toggle('active', i===currentPage));
    overlay.classList.remove('enter');
    overlay.classList.add('exit');
    setTimeout(() => { overlay.className = 't-overlay'; animating = false; }, 1000);
  }, 480);
}
```

### 13. Ripple Effect on Click

**Type:** CSS + JS
**Description:** Material Design ripple: JS inserts a wave span at click coordinates with contained, outlined and text buttons, FABs, chips, list items and cards.

**HTML:**
```html
<div class="wrap">
  <h1>CSS Ripple Effect</h1>
  <p class="sub">Material Design ripple on click — click any element below to trigger the wave</p>

  <span class="sl">Contained buttons</span>
  <div class="grid">
    <button class="mat-btn mat-contained ripple c-purple"><span>Primary</span></button>
    <button class="mat-btn mat-contained ripple c-pink"><span>Secondary</span></button>
    <button class="mat-btn mat-contained ripple c-teal"><span>Success</span></button>
    <button class="mat-btn mat-contained ripple c-orange"><span>Warning</span></button>
  </div>

  <span class="sl">Outlined + text buttons</span>
  <div class="grid">
    <button class="mat-btn mat-outlined ripple c-purple"><span>Outlined</span></button>
    <button class="mat-btn mat-outlined ripple c-pink"><span>Outlined</span></button>
    <button class="mat-btn mat-text ripple c-teal"><span>Text button</span></button>
    <button class="mat-btn mat-text ripple c-orange"><span>Text button</span></button>
  </div>

  <span class="sl">FABs + chips</span>
  <div style="display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:48px">
    <button class="mat-fab ripple c-purple">✚</button>
    <button class="mat-fab ripple c-pink">♥</button>
    <button class="mat-fab ripple c-teal">↑</button>
    <button class="mat-fab ripple c-orange">✎</button>
  </div>

  <span class="sl">Filter chips</span>
  <div class="mat-chips" id="chips">
    <div class="mat-chip ripple selected c-purple" data-chip>All</div>
    <div class="mat-chip ripple" data-chip>Design</div>
    <div class="mat-chip ripple" data-chip>Development</div>
    <div class="mat-chip ripple" data-chip>Marketing</div>
    <div class="mat-chip ripple" data-chip>Research</div>
    <div class="mat-chip ripple" data-chip>Strategy</div>
  </div>

  <span class="sl">List items</span>
  <div class="mat-list">
    <div class="mat-list-item ripple"><div class="mat-list-icon" style="--ic:#e8eaf6">📧</div><div class="mat-list-text"><div class="mat-list-title">Inbox</div><div class="mat-list-sub">3 unread messages</div></div></div>
    <div class="mat-list-item ripple"><div class="mat-list-icon" style="--ic:#fce4ec">⭐</div><div class="mat-list-text"><div class="mat-list-title">Starred</div><div class="mat-list-sub">12 starred items</div></div></div>
    <div class="mat-list-item ripple"><div class="mat-list-icon" style="--ic:#e0f7fa">📤</div><div class="mat-list-text"><div class="mat-list-title">Sent</div><div class="mat-list-sub">All sent messages</div></div></div>
    <div class="mat-list-item ripple"><div class="mat-list-icon" style="--ic:#fff3e0">🗑️</div><div class="mat-list-text"><div class="mat-list-title">Trash</div><div class="mat-list-sub">Auto-deleted in 30 days</div></div></div>
  </div>

  <span class="sl">Cards</span>
  <div class="grid-2">
    <div class="mat-card ripple"><h3>📊 Analytics Report</h3><p>Monthly performance summary across all tracked campaigns and organic channels.</p></div>
    <div class="mat-card ripple"><h3>🚀 Deploy Pipeline</h3><p>Automated CI/CD with staging, canary release and one-click rollback capability.</p></div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Roboto',sans-serif;background:#fafafa;color:#212121;min-height:100vh;padding:60px 24px}
.wrap{max-width:1000px;margin:0 auto}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:700;text-align:center;margin-bottom:8px;letter-spacing:-.02em}
.sub{text-align:center;color:#757575;margin-bottom:56px}
.sl{font-size:.65rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#9e9e9e;margin-bottom:16px;display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:48px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:48px}
@media(max-width:600px){.grid-2{grid-template-columns:1fr}}

/* RIPPLE CORE */
.ripple{position:relative;overflow:hidden;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:trn13-ripple .6s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
@keyframes trn13-ripple{to{transform:scale(4);opacity:0}}

/* Material Buttons */
.mat-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Roboto';font-weight:500;font-size:.875rem;letter-spacing:.089em;text-transform:uppercase;padding:0 24px;height:36px;border:none;border-radius:4px;cursor:pointer;position:relative;overflow:hidden;transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}
.mat-btn span{position:relative;z-index:1}

/* Contained */
.mat-contained{background:var(--c,#6200ea);color:#fff;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}
.mat-contained:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}
.mat-contained .ripple-wave{background:rgba(255,255,255,.3)}

/* Outlined */
.mat-outlined{background:transparent;color:var(--c,#6200ea);border:1px solid currentColor}
.mat-outlined .ripple-wave{background:rgba(var(--crgb,98,0,234),.12)}

/* Text */
.mat-text{background:transparent;color:var(--c,#6200ea)}
.mat-text .ripple-wave{background:rgba(var(--crgb,98,0,234),.12)}

/* FAB */
.mat-fab{width:56px;height:56px;border-radius:50%;background:var(--c,#6200ea);color:#fff;font-size:1.2rem;border:none;cursor:pointer;position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);transition:box-shadow .28s}
.mat-fab:hover{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}
.mat-fab .ripple-wave{background:rgba(255,255,255,.3)}

/* Card ripple */
.mat-card{background:#fff;border-radius:4px;padding:24px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s}
.mat-card:hover{box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12)}
.mat-card .ripple-wave{background:rgba(0,0,0,.08)}
.mat-card h3{font-size:1rem;font-weight:500;margin-bottom:8px;position:relative;z-index:1}
.mat-card p{font-size:.875rem;color:#757575;line-height:1.5;position:relative;z-index:1}

/* List ripple */
.mat-list{background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);margin-bottom:48px}
.mat-list-item{display:flex;align-items:center;gap:16px;padding:16px;cursor:pointer;position:relative;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.12);transition:background .15s}
.mat-list-item:last-child{border:0}
.mat-list-item:hover{background:rgba(0,0,0,.04)}
.mat-list-item .ripple-wave{background:rgba(0,0,0,.08)}
.mat-list-icon{width:40px;height:40px;border-radius:50%;background:var(--ic,#e8eaf6);display:grid;place-items:center;font-size:1.1rem;flex:0 0 40px;position:relative;z-index:1}
.mat-list-text{position:relative;z-index:1}
.mat-list-title{font-size:.875rem;font-weight:500}
.mat-list-sub{font-size:.75rem;color:#757575;margin-top:2px}

/* Chip ripple */
.mat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:48px}
.mat-chip{display:inline-flex;align-items:center;gap:6px;padding:0 12px;height:32px;border-radius:16px;background:#e0e0e0;font-size:.875rem;font-weight:500;cursor:pointer;position:relative;overflow:hidden;transition:background .2s}
.mat-chip:hover,.mat-chip.selected{background:#bdbdbd}
.mat-chip.selected{background:var(--c,#6200ea);color:#fff}
.mat-chip .ripple-wave{background:rgba(0,0,0,.1)}
.mat-chip.selected .ripple-wave{background:rgba(255,255,255,.3)}

/* colours */
.c-purple{--c:#6200ea;--crgb:98,0,234}
.c-pink{--c:#e91e63;--crgb:233,30,99}
.c-teal{--c:#009688;--crgb:0,150,136}
.c-orange{--c:#ff5722;--crgb:255,87,34}
.c-indigo{--c:#3f51b5;--crgb:63,81,181}

@media (prefers-reduced-motion:reduce){.ripple-wave{animation:none !important}}
```

**JS:**
```js
// Ripple on click
document.querySelectorAll('.ripple').forEach(el => {
  el.addEventListener('click', e => {
    const rect = el.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const size = Math.max(rect.width, rect.height) * 2;
    const wave = document.createElement('span');
    wave.className = 'ripple-wave';
    wave.style.cssText = `width:${size}px;height:${size}px;left:${x - size/2}px;top:${y - size/2}px`;
    el.appendChild(wave);
    wave.addEventListener('animationend', () => wave.remove());
  });
});
// Chip toggle
document.getElementById('chips').addEventListener('click', e => {
  const chip = e.target.closest('[data-chip]');
  if(!chip) return;
  chip.classList.toggle('selected');
});
```

### 14. Underline Animation Hover

**Type:** Pure CSS
**Description:** Ten underline variants: left-grow, center-out, RTL, thick bar, double line, fill-from-bottom, dot fade, strikethrough, rainbow gradient and fade-up.

**HTML:**
```html
<div class="wrap">
  <div class="hero">
    <h1>Under<em>line</em><br>Animations</h1>
    <p>Ten CSS underline transition effects — the most typographically considered hover system for links, navigation and headings.</p>
  </div>

  <span class="sl">10 underline variants — hover each</span>
  <div class="inline-demo">
    <a class="ul-base ul-grow" href="#">Left grow</a>
    <a class="ul-base ul-center" href="#">Center out</a>
    <a class="ul-base ul-rtl" href="#">Right to left</a>
    <a class="ul-base ul-thick" href="#">Thick bar</a>
    <a class="ul-base ul-double" href="#">Double line</a>
    <a class="ul-base ul-fill" href="#">Fill behind</a>
    <a class="ul-base ul-dot" href="#">Dot fade in</a>
    <a class="ul-base ul-strike" href="#">Strikethrough</a>
    <a class="ul-base ul-rainbow" href="#">Rainbow</a>
    <a class="ul-base ul-fade" href="#">Fade up</a>
  </div>

  <span class="sl">Navigation with center-out</span>
  <nav class="nav-demo">
    <div class="nav-link ul-base ul-center act">Editorial</div>
    <div class="nav-link ul-base ul-center">Culture</div>
    <div class="nav-link ul-base ul-center">Design</div>
    <div class="nav-link ul-base ul-center">Technology</div>
    <div class="nav-link ul-base ul-center">Archive</div>
  </nav>

  <span class="sl">Article links — fill-from-bottom highlight</span>
  <p class="article-body">
    We spent three weeks in <a class="ul-base ul-fill" href="#" style="--ul:#fef08a">rural Oaxaca</a>, watching the way light falls at six in the evening across the valley. Every designer should experience that quality of warmth at least once — it informs how you approach <a class="ul-base ul-fill" href="#">colour theory</a> forever. The trip also introduced us to <a class="ul-base ul-fill" href="#">Zapotec textile traditions</a>, whose geometric logic rhymes unexpectedly with the grid systems we reach for daily.
  </p>

  <span class="sl">Article cards — thick underline on heading</span>
  <div class="link-grid">
    <div class="link-card"><div class="lc-cat">Design</div><h3><a class="ul-base ul-thick" href="#" style="--ul:#fbbf24">The Grid Is a Moral Argument</a></h3><div class="meta">Apr 2026 · 8 min read</div></div>
    <div class="link-card"><div class="lc-cat">Technology</div><h3><a class="ul-base ul-thick" href="#" style="--ul:#c084fc">WebGPU and the End of JS Bottlenecks</a></h3><div class="meta">Mar 2026 · 12 min read</div></div>
    <div class="link-card"><div class="lc-cat">Culture</div><h3><a class="ul-base ul-thick" href="#" style="--ul:#86efac">Post-Digital Craft Movements</a></h3><div class="meta">Feb 2026 · 6 min read</div></div>
    <div class="link-card"><div class="lc-cat">Editorial</div><h3><a class="ul-base ul-thick" href="#" style="--ul:#f9a8d4">The Last Magazine Issue</a></h3><div class="meta">Jan 2026 · 10 min read</div></div>
  </div>

  <span class="sl">Hero headings — rainbow underline</span>
  <div class="type-scale">
    <h2 class="ul-base ul-rainbow">Exhibitions</h2>
    <h2 class="ul-base ul-rainbow">Collections</h2>
    <h2 class="ul-base ul-rainbow">Publications</h2>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,600&family=Jost:wght@300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Jost',sans-serif;background:#faf9f7;color:#1a1a1a;padding:60px 24px;min-height:100vh}
.wrap{max-width:1100px;margin:0 auto}
.hero{padding:80px 0 60px;border-bottom:1px solid #e5e0d8}
.hero h1{font-family:'Cormorant Garamond';font-size:clamp(3rem,9vw,6.5rem);font-weight:300;line-height:.9;letter-spacing:-.03em;margin-bottom:24px}
.hero h1 em{font-style:italic}
.hero p{font-size:1rem;color:#888;max-width:50ch;line-height:1.7}
.sl{font-size:.65rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#aaa;margin-bottom:12px;display:block;margin-top:56px}

/* ─────────────────────────── */
/* All underline variants */
/* ─────────────────────────── */
.ul-base{display:inline-block;position:relative;cursor:pointer;text-decoration:none;color:inherit}

/* 1 — left to right grow */
.ul-grow::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:currentColor;transition:width .3s cubic-bezier(.7,0,.2,1)}
.ul-grow:hover::after{width:100%}

/* 2 — center out */
.ul-center::after{content:'';position:absolute;left:50%;right:50%;bottom:-2px;height:2px;background:currentColor;transition:left .3s cubic-bezier(.7,0,.2,1),right .3s cubic-bezier(.7,0,.2,1)}
.ul-center:hover::after{left:0;right:0}

/* 3 — right to left */
.ul-rtl::after{content:'';position:absolute;right:0;bottom:-2px;width:0;height:2px;background:currentColor;transition:width .3s cubic-bezier(.7,0,.2,1)}
.ul-rtl:hover::after{width:100%}

/* 4 — thick chunky highlight */
.ul-thick::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:4px;background:var(--ul,#fbbf24);transition:width .4s cubic-bezier(.7,0,.2,1)}
.ul-thick:hover::after{width:100%}

/* 5 — double line slide */
.ul-double::before,.ul-double::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:currentColor;transition:width .3s cubic-bezier(.7,0,.2,1)}
.ul-double::before{bottom:-6px;transition-delay:.08s}
.ul-double:hover::before,.ul-double:hover::after{width:100%}

/* 6 — fill from bottom (background highlight) */
.ul-fill{overflow:hidden}
.ul-fill::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:0;background:var(--ul,#fef08a);z-index:-1;transition:height .35s cubic-bezier(.7,0,.2,1)}
.ul-fill:hover::before{height:80%}

/* 7 — dot underline grows */
.ul-dot{border-bottom:2px dotted transparent;transition:border-color .3s}
.ul-dot:hover{border-color:currentColor}

/* 8 — strikethrough on hover */
.ul-strike::after{content:'';position:absolute;left:50%;top:50%;width:0;height:2px;background:currentColor;transition:left .3s,right .3s,width .3s}
.ul-strike:hover::after{left:0;width:100%}

/* 9 — rainbow gradient underline */
.ul-rainbow::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:3px;background:linear-gradient(90deg,#f97316,#ec4899,#a78bfa,#38bdf8,#34d399);transition:width .4s cubic-bezier(.7,0,.2,1)}
.ul-rainbow:hover::after{width:100%}

/* 10 — fade on scroll underline (always visible, fades) */
.ul-fade{border-bottom:1px solid rgba(0,0,0,.2);transition:border-color .3s}
.ul-fade:hover{border-color:currentColor}

/* ─────────────────────────── */
/* Showcase layouts */
/* ─────────────────────────── */
.inline-demo{display:flex;flex-wrap:wrap;gap:32px;font-size:1.2rem;font-weight:500;margin-bottom:48px}
.nav-demo{display:flex;gap:0;flex-wrap:wrap;margin-bottom:48px;border-bottom:1px solid #e5e0d8}
.nav-link{padding:16px 24px;font-size:.95rem;font-weight:500;color:#888;cursor:pointer;position:relative}
.nav-link.ul-center::after{height:3px;background:#1a1a1a;bottom:0}
.nav-link:hover,.nav-link.act{color:#1a1a1a}
.article-body{max-width:700px;font-family:'Cormorant Garamond';font-size:1.3rem;line-height:1.8;color:#333;margin-bottom:48px}
.article-body a{--ul:#fef08a}
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:48px}
.link-card{padding:24px;background:#fff;border:1px solid #e5e0d8;border-radius:12px}
.link-card .lc-cat{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#aaa;margin-bottom:8px}
.link-card h3{font-family:'Cormorant Garamond';font-size:1.6rem;font-weight:600;line-height:1.1;margin-bottom:8px}
.link-card h3 a{--ul:#fbbf24}
.link-card .meta{font-size:.78rem;color:#aaa}

/* type scale showcase */
.type-scale{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.type-scale h2{font-family:'Cormorant Garamond';font-size:clamp(2rem,6vw,4rem);font-weight:300;letter-spacing:-.02em;cursor:pointer;display:inline-block}

@media (prefers-reduced-motion:reduce){.ul-base::before,.ul-base::after{transition:none !important}.ul-dot,.ul-fade{transition:none !important}}
```

### 15. Number Counter Animation

**Type:** CSS + JS
**Description:** Stat grid counters animating on load, live odometer incrementing every three seconds and SVG circular progress rings with stroke-dashoffset transition.

**HTML:**
```html
<div class="wrap">
  <div class="hero">
    <h1>Number <span>Counter</span><br>Animations</h1>
    <p>CSS-powered counters, odometers and progress rings — JavaScript drives the count, CSS handles the motion.</p>
  </div>

  <div class="stat-grid">
    <div class="stat-cell"><div class="stat-num counter-num" data-target="48200" data-suffix=""><span class="stat-num" style="color:#818cf8">0</span></div><span class="stat-suffix" style="color:#818cf8">+</span><div class="stat-label">Active Users</div><div class="stat-delta">↑ 24% this month</div></div>
    <div class="stat-cell"><div class="stat-num counter-num" data-target="99.97"><span style="color:#34d399;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(3rem,7vw,5rem)">0</span><span style="color:#34d399;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(1.5rem,4vw,2.5rem)">%</span></div><div class="stat-label">Uptime SLA</div><div class="stat-delta" style="--dc:rgba(52,211,153,.15);--dcc:#34d399">↑ 0.02% vs last quarter</div></div>
    <div class="stat-cell"><div class="stat-num counter-num"><span style="color:#fb923c;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(3rem,7vw,5rem)">0</span><span style="color:#fb923c;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(1.5rem,4vw,2.5rem)">ms</span></div><div class="stat-label">Avg. Response</div><div class="stat-delta" style="--dc:rgba(251,146,60,.15);--dcc:#fb923c">↓ 18ms faster</div></div>
    <div class="stat-cell"><div class="stat-num counter-num"><span style="color:#f472b6;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(3rem,7vw,5rem)">0</span><span style="color:#f472b6;font-family:'Barlow Condensed';font-weight:900;font-size:clamp(1.5rem,4vw,2.5rem)">M</span></div><div class="stat-label">API Calls / Day</div><div class="stat-delta" style="--dc:rgba(244,114,182,.15);--dcc:#f472b6">↑ 3.2M new</div></div>
  </div>

  <div class="odometer" id="odo">
    <div>
      <span style="color:rgba(255,255,255,.2)">$</span><span id="odoNum" style="color:#818cf8;font-size:inherit">0</span><span style="color:rgba(255,255,255,.2)">.00</span>
    </div>
    <span class="odometer-label">Total transaction volume (live demo)</span>
  </div>

  <div class="circles" id="circles">
    <div class="circle-wrap">
      <svg class="circle-svg" viewBox="0 0 100 100">
        <circle class="circle-bg" cx="50" cy="50" r="45"/>
        <circle class="circle-progress" cx="50" cy="50" r="45" stroke="#818cf8" style="--pct:.82;--delay:0s"/>
        <text x="50" y="35" text-anchor="middle" class="circle-val" transform="rotate(90,50,50)" dy="4">82%</text>
        <text x="50" y="50" text-anchor="middle" class="circle-label" transform="rotate(90,50,50)" dy="4">Performance</text>
      </svg>
      <div class="circle-title">Performance</div>
    </div>
    <div class="circle-wrap">
      <svg class="circle-svg" viewBox="0 0 100 100">
        <circle class="circle-bg" cx="50" cy="50" r="45"/>
        <circle class="circle-progress" cx="50" cy="50" r="45" stroke="#34d399" style="--pct:.95;--delay:.2s"/>
        <text x="50" y="35" text-anchor="middle" class="circle-val" transform="rotate(90,50,50)" dy="4">95%</text>
        <text x="50" y="50" text-anchor="middle" class="circle-label" transform="rotate(90,50,50)" dy="4">Accessibility</text>
      </svg>
      <div class="circle-title">Accessibility</div>
    </div>
    <div class="circle-wrap">
      <svg class="circle-svg" viewBox="0 0 100 100">
        <circle class="circle-bg" cx="50" cy="50" r="45"/>
        <circle class="circle-progress" cx="50" cy="50" r="45" stroke="#fb923c" style="--pct:.68;--delay:.4s"/>
        <text x="50" y="35" text-anchor="middle" class="circle-val" transform="rotate(90,50,50)" dy="4">68%</text>
        <text x="50" y="50" text-anchor="middle" class="circle-label" transform="rotate(90,50,50)" dy="4">SEO Score</text>
      </svg>
      <div class="circle-title">SEO Score</div>
    </div>
    <div class="circle-wrap">
      <svg class="circle-svg" viewBox="0 0 100 100">
        <circle class="circle-bg" cx="50" cy="50" r="45"/>
        <circle class="circle-progress" cx="50" cy="50" r="45" stroke="#f472b6" style="--pct:.91;--delay:.6s"/>
        <text x="50" y="35" text-anchor="middle" class="circle-val" transform="rotate(90,50,50)" dy="4">91%</text>
        <text x="50" y="50" text-anchor="middle" class="circle-label" transform="rotate(90,50,50)" dy="4">Best Practices</text>
      </svg>
      <div class="circle-title">Best Practices</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;900&family=Barlow:wght@300;400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Barlow',sans-serif;background:#050810;color:#f8fafc;min-height:100vh;padding:60px 24px}
.wrap{max-width:1200px;margin:0 auto}
.hero{text-align:center;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:60px}
.hero h1{font-family:'Barlow Condensed';font-size:clamp(3rem,9vw,6rem);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:.9;margin-bottom:16px}
.hero h1 span{color:#818cf8}
.hero p{color:#6b7280;font-size:1rem;max-width:50ch;margin:0 auto}

/* COUNTER CORE */
.counter-num{font-family:'Barlow Condensed';font-weight:900;line-height:1;display:inline-block;transition:opacity .3s}

/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;margin-bottom:56px}
.stat-cell{background:#0a0c14;padding:40px 32px;text-align:center;position:relative;overflow:hidden}
.stat-cell::before{content:'';position:absolute;inset:0;background:var(--glow,transparent);opacity:.06;pointer-events:none}
.stat-cell:hover::before{opacity:.12}
.stat-cell:nth-child(1){--glow:radial-gradient(circle,#818cf8,transparent 60%)}
.stat-cell:nth-child(2){--glow:radial-gradient(circle,#34d399,transparent 60%)}
.stat-cell:nth-child(3){--glow:radial-gradient(circle,#fb923c,transparent 60%)}
.stat-cell:nth-child(4){--glow:radial-gradient(circle,#f472b6,transparent 60%)}
.stat-num{font-size:clamp(3rem,7vw,5rem);color:var(--nc,#818cf8)}
.stat-suffix{font-family:'Barlow Condensed';font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;color:var(--nc,#818cf8)}
.stat-label{font-size:.8rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#6b7280;margin-top:8px}
.stat-delta{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;margin-top:8px;padding:3px 8px;border-radius:20px;background:var(--dc,rgba(52,211,153,.15));color:var(--dcc,#34d399)}

/* TICKER rows */
.ticker-section{margin-bottom:56px}
.ticker-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ticker-row:last-child{border:0}
.ticker-name{font-weight:500;font-size:1rem}
.ticker-symbol{font-size:.78rem;color:#6b7280;font-weight:400}
.ticker-val{font-family:'Barlow Condensed';font-size:1.4rem;font-weight:700;color:var(--tv,#f8fafc)}
.ticker-chg{font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--cb,rgba(52,211,153,.12));color:var(--cc,#34d399)}

/* ODOMETER style */
.odometer{font-family:'Barlow Condensed';font-size:clamp(4rem,12vw,8rem);font-weight:900;text-align:center;letter-spacing:.02em;padding:48px;background:linear-gradient(135deg,#0e1020,#12142a);border-radius:20px;margin-bottom:56px;border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.odometer::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(129,140,248,.1),transparent 60%)}
.odometer-label{font-family:'Barlow';font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:#6b7280;display:block;margin-top:8px}
.odo-num{display:inline-block;position:relative}
.odo-col{display:inline-flex;flex-direction:column;overflow:hidden;height:1em;vertical-align:top}
.odo-col-inner{display:flex;flex-direction:column;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.odo-digit{height:1em;display:flex;align-items:center;justify-content:center}
.od-active{color:#818cf8}
.odo-sep{color:rgba(255,255,255,.2)}

/* circular progress */
.circles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin-bottom:56px}
.circle-wrap{text-align:center}
.circle-svg{width:120px;height:120px;transform:rotate(-90deg)}
.circle-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:8}
.circle-progress{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:var(--dash,283);stroke-dashoffset:var(--off,283);transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1) var(--delay,0s)}
.circle-progress.animated{stroke-dashoffset:calc(283 - 283 * var(--pct,.7))}
.circle-val{font-family:'Barlow Condensed';font-size:1.6rem;font-weight:900;fill:#f8fafc}
.circle-label{font-size:.75rem;fill:#6b7280;font-size:9px}
.circle-title{margin-top:12px;font-size:.82rem;font-weight:500;color:#9ca3af}

@media (prefers-reduced-motion:reduce){.counter-num,.circle-progress,.odo-col-inner{transition:none !important}}
```

**JS:**
```js
// Animate stat numbers
function animateCounter(el, target, decimals, duration){
  let start = 0, startTime = null;
  const step = timestamp => {
    if(!startTime) startTime = timestamp;
    const p = Math.min((timestamp - startTime) / duration, 1);
    const ease = 1 - Math.pow(1-p, 3);
    const val = ease * target;
    el.textContent = decimals ? val.toFixed(2) : Math.floor(val).toLocaleString();
    if(p < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}

const statCells = document.querySelectorAll('.stat-cell');
const targets = [[48200, 0], [99.97, 2], [12, 0], [4.8, 0]];
const labels = [null, null, null, null];
const statNums = document.querySelectorAll('.stat-cell span[style*="font-family"]');

// Count up on load with slight stagger
const pairs = [
  {el: statNums[0], val: 48200, dec: 0},
  {el: statNums[1], val: 99.97, dec: 2},
  {el: statNums[2], val: 12, dec: 0},
  {el: statNums[3], val: 4.8, dec: 1},
];
pairs.forEach((p, i) => {
  if(p.el) setTimeout(() => animateCounter(p.el, p.val, p.dec, 1800), i * 200);
});

// Odometer random increment
let odo = 1284739;
const odoEl = document.getElementById('odoNum');
animateCounter(odoEl, odo, 0, 2000);
setInterval(() => {
  odo += Math.floor(Math.random() * 8000 + 2000);
  animateCounter(odoEl, odo, 0, 800);
}, 3000);

// Trigger circle animations on load
setTimeout(() => {
  document.querySelectorAll('.circle-progress').forEach(c => c.classList.add('animated'));
}, 300);
```

### 16. Card Tilt 3D Hover

**Type:** CSS + JS
**Description:** Four cards with CSS custom property glare driven by --gx/--gy, floating gradient orbs with parallax offset, JS mousemove rotating up to 18 degrees.

**HTML:**
```html
<h1>3D Card Tilt Effect</h1>
<p class="sub">Move your cursor over each card — perspective tilt with specular glare highlight</p>

<div class="grid">
  <div class="tilt-wrap tc1" id="c1">
    <div class="tilt-card">
      <div class="tilt-glare"></div>
      <div class="tilt-inner">
        <div class="tc-float" style="width:120px;height:120px;background:radial-gradient(#a78bfa,transparent);top:-30px;right:-30px;opacity:.4"></div>
        <div><div class="tc-badge">✦ Premium</div></div>
        <div>
          <span class="tc-icon">💎</span>
          <div class="tc-title">Holographic Card</div>
          <div class="tc-desc">CSS 3D tilt with a rotating conic gradient shimmer and a radial specular glare that follows your cursor.</div>
        </div>
        <div class="tc-footer">
          <span class="tc-action">Explore → </span>
          <span class="tc-stat">perspective: 1000px</span>
        </div>
      </div>
    </div>
  </div>

  <div class="tilt-wrap tc2" id="c2">
    <div class="tilt-card">
      <div class="tilt-glare"></div>
      <div class="tilt-inner">
        <div class="tc-float" style="width:100px;height:100px;background:radial-gradient(#fbbf24,transparent);bottom:-20px;left:-20px;opacity:.3"></div>
        <div><div class="tc-badge">★ Gold tier</div></div>
        <div>
          <span class="tc-icon">🏆</span>
          <div class="tc-title">Gold Edition</div>
          <div class="tc-desc">Warm amber gradient with a soft radial bloom. The tilt depth is controlled by JavaScript reading mousemove coordinates.</div>
        </div>
        <div class="tc-footer">
          <span class="tc-action">Unlock →</span>
          <span class="tc-stat">rotateX + rotateY</span>
        </div>
      </div>
    </div>
  </div>

  <div class="tilt-wrap tc3" id="c3">
    <div class="tilt-card">
      <div class="tilt-glare"></div>
      <div class="tilt-inner">
        <div class="tc-float" style="width:80px;height:80px;background:radial-gradient(#34d399,transparent);top:50%;right:10%;opacity:.25"></div>
        <div><div class="tc-badge">◈ Active</div></div>
        <div>
          <span class="tc-icon">⚡</span>
          <div class="tc-title">Neon Green</div>
          <div class="tc-desc">Deep forest background with teal glow accents. Floating gradient orbs shift with a parallax offset during tilt.</div>
        </div>
        <div class="tc-footer">
          <span class="tc-action">Connect →</span>
          <span class="tc-stat">will-change: transform</span>
        </div>
      </div>
    </div>
  </div>

  <div class="tilt-wrap tc4" id="c4">
    <div class="tilt-card">
      <div class="tilt-glare"></div>
      <div class="tilt-inner">
        <div class="tc-float" style="width:160px;height:160px;background:radial-gradient(rgba(148,163,184,.15),transparent);top:-40px;left:-40px"></div>
        <div><div class="tc-badge">◻ Standard</div></div>
        <div>
          <span class="tc-icon">🔮</span>
          <div class="tc-title">Chrome Grid</div>
          <div class="tc-desc">Diagonal grid texture with silver accents. The glare layer uses a CSS custom property for real-time cursor tracking.</div>
        </div>
        <div class="tc-footer">
          <span class="tc-action">Preview →</span>
          <span class="tc-stat">--gx/--gy props</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;600;700&family=General+Sans:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:radial-gradient(ellipse at 30% 40%,#1a0533,#0d0d1a 60%,#000510);min-height:100vh;padding:60px 24px;display:flex;flex-direction:column;align-items:center}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;color:#fff;text-align:center;margin-bottom:8px;letter-spacing:-.03em}
.sub{color:#6b7280;text-align:center;margin-bottom:60px;font-size:.9rem}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;width:100%;max-width:1100px;perspective:2000px}

/* TILT CARD */
.tilt-wrap{perspective:1000px;width:100%}
.tilt-card{width:100%;border-radius:20px;position:relative;transform-style:preserve-3d;cursor:pointer;transition:transform .1s ease-out;will-change:transform}

/* glare layer */
.tilt-glare{position:absolute;inset:0;border-radius:20px;overflow:hidden;pointer-events:none;z-index:5}
.tilt-glare::after{content:'';position:absolute;width:100%;height:100%;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.18),transparent 70%);opacity:0;transition:opacity .3s}
.tilt-wrap:hover .tilt-glare::after{opacity:1}

/* card content */
.tilt-inner{border-radius:20px;padding:32px;position:relative;overflow:hidden;height:340px;display:flex;flex-direction:column;justify-content:space-between}

/* Card 1 — Holographic */
.tc1 .tilt-inner{background:linear-gradient(135deg,#1a0533,#280648,#1a0533);border:1px solid rgba(167,139,250,.3)}
.tc1 .tilt-inner::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg at 50% 50%,rgba(167,139,250,.08),rgba(236,72,153,.06),rgba(56,189,248,.08),rgba(167,139,250,.08));animation:trn16-holo 6s linear infinite}
@keyframes trn16-holo{to{transform:rotate(360deg)}}

/* Card 2 — Gold */
.tc2 .tilt-inner{background:linear-gradient(145deg,#1a1008,#2d1c06,#1a1008);border:1px solid rgba(251,191,36,.2)}
.tc2 .tilt-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(251,191,36,.1),transparent 50%)}

/* Card 3 — Neon */
.tc3 .tilt-inner{background:linear-gradient(145deg,#001a14,#003020,#001a14);border:1px solid rgba(52,211,153,.25)}
.tc3 .tilt-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 70%,rgba(52,211,153,.08),transparent 50%)}

/* Card 4 — Chrome */
.tc4 .tilt-inner{background:linear-gradient(145deg,#111827,#1f2937,#111827);border:1px solid rgba(148,163,184,.15)}
.tc4 .tilt-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.04) 75%,transparent 75%);background-size:20px 20px}

/* card elements */
.tc-badge{font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;position:relative;z-index:2}
.tc1 .tc-badge{background:rgba(167,139,250,.15);color:#c4b5fd;border:1px solid rgba(167,139,250,.2)}
.tc2 .tc-badge{background:rgba(251,191,36,.12);color:#fde68a;border:1px solid rgba(251,191,36,.2)}
.tc3 .tc-badge{background:rgba(52,211,153,.12);color:#6ee7b7;border:1px solid rgba(52,211,153,.2)}
.tc4 .tc-badge{background:rgba(148,163,184,.1);color:#cbd5e1;border:1px solid rgba(148,163,184,.15)}

.tc-icon{font-size:3.5rem;display:block;position:relative;z-index:2;filter:drop-shadow(0 4px 16px rgba(0,0,0,.4))}
.tc-title{font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:6px;position:relative;z-index:2}
.tc-desc{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.5;position:relative;z-index:2}
.tc-footer{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.tc-action{font-size:.8rem;font-weight:600;color:var(--ac,#c4b5fd);display:flex;align-items:center;gap:6px}
.tc1{--ac:#c4b5fd}.tc2{--ac:#fde68a}.tc3{--ac:#6ee7b7}.tc4{--ac:#cbd5e1}
.tc-stat{font-size:.75rem;color:rgba(255,255,255,.35)}

/* parallax floating elements inside card */
.tc-float{position:absolute;border-radius:50%;pointer-events:none;z-index:1;transition:transform .15s ease-out}
```

**JS:**
```js
document.querySelectorAll('.tilt-wrap').forEach(wrap => {
  const card = wrap.querySelector('.tilt-card');
  const glare = wrap.querySelector('.tilt-glare');
  const floats = wrap.querySelectorAll('.tc-float');
  const MAX_TILT = 18;

  wrap.addEventListener('mousemove', e => {
    const rect = wrap.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;
    const rotY = (x - .5) * MAX_TILT * 2;
    const rotX = (.5 - y) * MAX_TILT * 2;
    card.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg) scale(1.04)`;
    glare.style.setProperty('--gx', (x * 100) + '%');
    glare.style.setProperty('--gy', (y * 100) + '%');
    glare.querySelector('::after');
    // Parallax floats
    floats.forEach(f => {
      f.style.transform = `translate(${(x-.5)*20}px,${(y-.5)*20}px)`;
    });
  });

  wrap.addEventListener('mouseleave', () => {
    card.style.transform = 'rotateX(0) rotateY(0) scale(1)';
    floats.forEach(f => { f.style.transform = ''; });
  });
});
```

### 17. Glassmorphism Hover Transition

**Type:** Pure CSS
**Description:** Frost-reveal cards, layered depth buttons, profile cards with banner and avatar scale, and notification toasts with glass blur depth on hover.

**HTML:**
```html
<div class="glass-bg"></div>
<div class="page">
  <h1>Glassmorphism Hover Transitions</h1>
  <p class="subtitle">Frost, blur & depth effects on hover</p>

  <!-- 1. Frost-reveal -->
  <section>
    <h2>Frost-reveal Cards</h2>
    <div class="frost-grid">
      <div class="frost-card"><div class="icon">✦</div><h3>Design System</h3><p>Unified tokens and components for consistent UI.</p></div>
      <div class="frost-card"><div class="icon">⚡</div><h3>Performance</h3><p>Sub-50ms interactions with optimised rendering.</p></div>
      <div class="frost-card"><div class="icon">🔒</div><h3>Security</h3><p>End-to-end encryption and zero-trust architecture.</p></div>
      <div class="frost-card"><div class="icon">🌐</div><h3>Global CDN</h3><p>Edge nodes in 180+ countries for instant delivery.</p></div>
    </div>
  </section>

  <!-- 2. Glass buttons -->
  <section>
    <h2>Layered Depth Buttons</h2>
    <div class="btn-row">
      <button class="glass-btn">Get Started</button>
      <button class="glass-btn accent">Upgrade Plan</button>
      <button class="glass-btn">Learn More</button>
      <button class="glass-btn">View Docs</button>
    </div>
  </section>

  <!-- 3. Profile cards -->
  <section>
    <h2>Profile Cards</h2>
    <div class="profile-grid">
      <div class="profile-card">
        <div class="profile-banner pb-1"></div>
        <div class="profile-body">
          <div class="profile-avatar">👩‍🎨</div>
          <div class="profile-name">Aria Chen</div>
          <div class="profile-role">Senior Designer</div>
          <div class="profile-stats">
            <div class="stat"><div class="stat-n">128</div><div class="stat-l">Projects</div></div>
            <div class="stat"><div class="stat-n">4.9k</div><div class="stat-l">Followers</div></div>
            <div class="stat"><div class="stat-n">312</div><div class="stat-l">Likes</div></div>
          </div>
        </div>
      </div>
      <div class="profile-card">
        <div class="profile-banner pb-2"></div>
        <div class="profile-body">
          <div class="profile-avatar">👨‍💻</div>
          <div class="profile-name">Leo Marquez</div>
          <div class="profile-role">Full-Stack Engineer</div>
          <div class="profile-stats">
            <div class="stat"><div class="stat-n">94</div><div class="stat-l">Repos</div></div>
            <div class="stat"><div class="stat-n">2.1k</div><div class="stat-l">Stars</div></div>
            <div class="stat"><div class="stat-n">87</div><div class="stat-l">PRs</div></div>
          </div>
        </div>
      </div>
      <div class="profile-card">
        <div class="profile-banner pb-3"></div>
        <div class="profile-body">
          <div class="profile-avatar">🧠</div>
          <div class="profile-name">Nova Singh</div>
          <div class="profile-role">ML Researcher</div>
          <div class="profile-stats">
            <div class="stat"><div class="stat-n">41</div><div class="stat-l">Papers</div></div>
            <div class="stat"><div class="stat-n">8.7k</div><div class="stat-l">Citations</div></div>
            <div class="stat"><div class="stat-n">19</div><div class="stat-l">Models</div></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 4. Toasts -->
  <section>
    <h2>Notification Toasts</h2>
    <div class="toast-stack">
      <div class="toast"><div class="toast-icon">✅</div><div class="toast-text"><strong>Deployment successful</strong><span>Production v2.4.1 is now live</span></div><div class="toast-time">just now</div></div>
      <div class="toast"><div class="toast-icon">⚠️</div><div class="toast-text"><strong>High memory usage</strong><span>Server node-03 at 89% capacity</span></div><div class="toast-time">2m ago</div></div>
      <div class="toast"><div class="toast-icon">💬</div><div class="toast-text"><strong>New comment</strong><span>Aria replied to your design review</span></div><div class="toast-time">5m ago</div></div>
      <div class="toast"><div class="toast-icon">🔔</div><div class="toast-text"><strong>Reminder</strong><span>Sprint planning starts in 30 minutes</span></div><div class="toast-time">12m ago</div></div>
    </div>
  </section>
</div>
```

**CSS:**
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #0f0c29; min-height: 100vh; overflow-x: hidden; }

/* ── Shared animated background ── */
.glass-bg {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}
.glass-bg::before, .glass-bg::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.6;
  animation: orb-drift 12s ease-in-out infinite alternate;
}
.glass-bg::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #7928ca, #ff0080);
  top: -150px; left: -100px;
}
.glass-bg::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #00d2ff, #3a47d5);
  bottom: -100px; right: -100px;
  animation-delay: -6s;
}
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.15); }
}

.page { position: relative; z-index: 1; padding: 60px 40px; }
h1 { color: #fff; text-align: center; font-size: 2rem; margin-bottom: 8px; }
.subtitle { color: rgba(255,255,255,.5); text-align: center; margin-bottom: 50px; font-size: .95rem; }
section { margin-bottom: 70px; }
section > h2 { color: rgba(255,255,255,.7); font-size: .8rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 24px; }

/* ─────────────────────────────────────
   1. Frost-reveal cards
───────────────────────────────────── */
.frost-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.frost-card {
  border-radius: 20px; padding: 32px 24px; cursor: default;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .4s, backdrop-filter .4s, border-color .4s, transform .4s, box-shadow .4s;
}
.frost-card:hover {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.frost-card .icon { font-size: 2.2rem; margin-bottom: 14px; }
.frost-card h3 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.frost-card p  { color: rgba(255,255,255,.55); font-size: .82rem; line-height: 1.5; }

/* ─────────────────────────────────────
   2. Layered depth buttons
───────────────────────────────────── */
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.glass-btn {
  position: relative; overflow: hidden;
  padding: 14px 32px; border-radius: 50px; border: none; cursor: pointer;
  font-size: .95rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  transition: background .35s, border-color .35s, box-shadow .35s, transform .2s;
}
.glass-btn::before {
  content: ''; position: absolute;
  inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.glass-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1) inset;
  transform: translateY(-2px);
}
.glass-btn:hover::before { opacity: 1; }
.glass-btn.accent { background: rgba(121, 40, 202, .35); border-color: rgba(121,40,202,.5); }
.glass-btn.accent:hover { background: rgba(121,40,202,.6); border-color: rgba(200,120,255,.6); box-shadow: 0 8px 32px rgba(121,40,202,.4); }

/* ─────────────────────────────────────
   3. Profile / feature card big
───────────────────────────────────── */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.profile-card {
  border-radius: 24px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s, border-color .4s;
}
.profile-card:hover { transform: scale(1.03) translateY(-4px); border-color: rgba(255,255,255,.3); box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.profile-banner {
  height: 110px;
  transition: filter .4s;
}
.profile-card:hover .profile-banner { filter: brightness(1.2); }
.pb-1 { background: linear-gradient(135deg, #7928ca, #ff0080); }
.pb-2 { background: linear-gradient(135deg, #00d2ff, #3a47d5); }
.pb-3 { background: linear-gradient(135deg, #f7971e, #ffd200); }
.profile-body { padding: 20px; }
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  margin-top: -40px; margin-bottom: 12px;
  backdrop-filter: blur(10px);
  transition: border-color .4s, transform .4s;
}
.profile-card:hover .profile-avatar { border-color: rgba(255,255,255,.7); transform: scale(1.1); }
.profile-name { color: #fff; font-weight: 700; font-size: 1rem; }
.profile-role { color: rgba(255,255,255,.5); font-size: .8rem; margin-bottom: 14px; }
.profile-stats { display: flex; gap: 20px; }
.stat { text-align: center; }
.stat-n { color: #fff; font-weight: 700; font-size: 1rem; }
.stat-l { color: rgba(255,255,255,.45); font-size: .72rem; }

/* ─────────────────────────────────────
   4. Notification / toast strip
───────────────────────────────────── */
.toast-stack { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.toast {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.toast:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.3);
  transform: translateX(6px);
  box-shadow: -4px 0 0 rgba(255,255,255,.3), 0 8px 24px rgba(0,0,0,.2);
}
.toast-icon { font-size: 1.4rem; flex-shrink: 0; }
.toast-text strong { color: #fff; font-size: .9rem; display: block; }
.toast-text span   { color: rgba(255,255,255,.5); font-size: .8rem; }
.toast-time { margin-left: auto; color: rgba(255,255,255,.35); font-size: .75rem; white-space: nowrap; }
```

### 18. Staggered List Animation

**Type:** CSS + JS
**Description:** Sequential entrance for tasks (slide left), feature cards (scale up), navigation menu (slide right) and data table rows (fade up) with replay controls.

**HTML:**
```html
<div class="page">
  <h1>Staggered List Animation</h1>
  <p class="subtitle">Sequential entrance animations for lists, cards & rows</p>

  <!-- 1. Task list -->
  <section>
    <h2>Task List — Slide from Left</h2>
    <button class="trigger-btn" onclick="replayTasks()">↺ Replay</button>
    <ul class="task-list" id="taskList">
      <li class="task-item done"><span class="task-cb"></span><span class="task-label">Set up CI/CD pipeline</span><span class="task-badge badge-high">High</span></li>
      <li class="task-item"><span class="task-cb"></span><span class="task-label">Design system token audit</span><span class="task-badge badge-high">High</span></li>
      <li class="task-item"><span class="task-cb"></span><span class="task-label">Write API documentation</span><span class="task-badge badge-mid">Mid</span></li>
      <li class="task-item done"><span class="task-cb"></span><span class="task-label">Migrate legacy endpoints</span><span class="task-badge badge-mid">Mid</span></li>
      <li class="task-item"><span class="task-cb"></span><span class="task-label">Lighthouse performance audit</span><span class="task-badge badge-low">Low</span></li>
      <li class="task-item"><span class="task-cb"></span><span class="task-label">Update onboarding guide</span><span class="task-badge badge-low">Low</span></li>
    </ul>
  </section>

  <!-- 2. Feature cards -->
  <section>
    <h2>Feature Cards — Scale Up</h2>
    <button class="trigger-btn" onclick="replayCards()">↺ Replay</button>
    <div class="feat-grid" id="featGrid">
      <div class="feat-card"><div class="feat-icon">🚀</div><div class="feat-title">Instant Deploy</div><div class="feat-desc">Push to production in under 30 seconds.</div></div>
      <div class="feat-card"><div class="feat-icon">🔍</div><div class="feat-title">Smart Search</div><div class="feat-desc">Full-text search across all your content.</div></div>
      <div class="feat-card"><div class="feat-icon">📊</div><div class="feat-title">Analytics</div><div class="feat-desc">Real-time insights and custom dashboards.</div></div>
      <div class="feat-card"><div class="feat-icon">🤝</div><div class="feat-title">Collaboration</div><div class="feat-desc">Work together with your team in real time.</div></div>
      <div class="feat-card"><div class="feat-icon">🛡️</div><div class="feat-title">Security</div><div class="feat-desc">Enterprise-grade protection built in.</div></div>
      <div class="feat-card"><div class="feat-icon">🌍</div><div class="feat-title">Global CDN</div><div class="feat-desc">Serve from 180+ edge locations worldwide.</div></div>
    </div>
  </section>

  <!-- 3. Menu -->
  <section>
    <h2>Navigation Menu — Slide from Right</h2>
    <button class="trigger-btn" onclick="replayMenu()">↺ Replay</button>
    <ul class="menu-list" id="menuList">
      <li class="menu-item active"><div class="menu-icon mi-blue">🏠</div><div class="menu-text"><strong>Dashboard</strong><span>Overview & stats</span></div></li>
      <li class="menu-item"><div class="menu-icon mi-green">📁</div><div class="menu-text"><strong>Projects</strong><span>All your repos</span></div><span class="menu-badge">4</span></li>
      <li class="menu-item"><div class="menu-icon mi-purple">💬</div><div class="menu-text"><strong>Messages</strong><span>Team conversations</span></div><span class="menu-badge">12</span></li>
      <li class="menu-item"><div class="menu-icon mi-orange">🔔</div><div class="menu-text"><strong>Notifications</strong><span>Alerts & updates</span></div></li>
      <li class="menu-item"><div class="menu-icon mi-red">⚙️</div><div class="menu-text"><strong>Settings</strong><span>Account & preferences</span></div></li>
    </ul>
  </section>

  <!-- 4. Table -->
  <section>
    <h2>Data Table — Rows Fade Up</h2>
    <button class="trigger-btn" onclick="replayTable()">↺ Replay</button>
    <table class="data-table">
      <thead><tr><th>Service</th><th>Status</th><th>Uptime</th><th>Latency</th></tr></thead>
      <tbody id="tableBody">
        <tr><td>API Gateway</td><td><span class="status-dot dot-green"></span>Operational</td><td>99.98%</td><td>12ms</td></tr>
        <tr><td>Auth Service</td><td><span class="status-dot dot-green"></span>Operational</td><td>99.95%</td><td>18ms</td></tr>
        <tr><td>Storage CDN</td><td><span class="status-dot dot-yellow"></span>Degraded</td><td>99.41%</td><td>84ms</td></tr>
        <tr><td>Database</td><td><span class="status-dot dot-green"></span>Operational</td><td>100%</td><td>4ms</td></tr>
        <tr><td>Queue Worker</td><td><span class="status-dot dot-red"></span>Outage</td><td>97.12%</td><td>—</td></tr>
      </tbody>
    </table>
  </section>
</div>
```

**CSS:**
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #0d1117; color: #e6edf3; min-height: 100vh; }

.page { padding: 60px 40px; max-width: 1100px; margin: 0 auto; }
h1 { font-size: 2rem; text-align: center; margin-bottom: 8px; color: #fff; }
.subtitle { color: #8b949e; text-align: center; margin-bottom: 50px; }
section { margin-bottom: 64px; }
section > h2 { color: #58a6ff; font-size: .75rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid #21262d; }

/* ─── Trigger button ─── */
.trigger-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 8px; border: 1px solid #30363d;
  background: #161b22; color: #c9d1d9; font-size: .875rem; cursor: pointer;
  transition: background .2s, border-color .2s;
  margin-bottom: 20px;
}
.trigger-btn:hover { background: #21262d; border-color: #58a6ff; }

/* ─────────────────────────────────────
   1. Slide-in task list
───────────────────────────────────── */
.task-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.task-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 10px;
  background: #161b22; border: 1px solid #21262d;
  opacity: 0; transform: translateX(-40px);
  transition: opacity .5s ease, transform .5s ease, background .2s, border-color .2s;
}
.task-item.in { opacity: 1; transform: none; }
.task-item:hover { background: #1c2128; border-color: #30363d; }
.task-cb {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #30363d; flex-shrink: 0; cursor: pointer;
  transition: border-color .2s, background .2s;
  display: flex; align-items: center; justify-content: center; font-size: .65rem;
}
.task-item.done .task-cb { background: #238636; border-color: #238636; }
.task-item.done .task-cb::after { content: '✓'; color: #fff; }
.task-item.done .task-label { text-decoration: line-through; color: #484f58; }
.task-label { flex: 1; font-size: .9rem; }
.task-badge {
  font-size: .7rem; padding: 2px 8px; border-radius: 12px; font-weight: 600;
}
.badge-high { background: rgba(248,81,73,.15); color: #f85149; border: 1px solid rgba(248,81,73,.3); }
.badge-mid  { background: rgba(210,153,34,.15); color: #d2a004; border: 1px solid rgba(210,153,34,.3); }
.badge-low  { background: rgba(35,134,54,.15);  color: #3fb950; border: 1px solid rgba(35,134,54,.3); }

/* ─────────────────────────────────────
   2. Feature cards fan-in
───────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.feat-card {
  padding: 24px 20px; border-radius: 12px;
  background: #161b22; border: 1px solid #21262d;
  opacity: 0; transform: translateY(30px) scale(.94);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s;
  cursor: default;
}
.feat-card.in { opacity: 1; transform: none; }
.feat-card:hover { background: #1c2128; box-shadow: 0 0 0 1px #30363d, 0 8px 24px rgba(0,0,0,.4); }
.feat-icon { font-size: 1.8rem; margin-bottom: 12px; }
.feat-title { color: #e6edf3; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.feat-desc  { color: #8b949e; font-size: .8rem; line-height: 1.5; }

/* ─────────────────────────────────────
   3. Menu items
───────────────────────────────────── */
.menu-list { list-style: none; max-width: 340px; }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px;
  opacity: 0; transform: translateX(30px);
  transition: opacity .4s ease, transform .4s ease, background .2s;
  cursor: pointer;
}
.menu-item.in { opacity: 1; transform: none; }
.menu-item:hover { background: rgba(88,166,255,.08); }
.menu-item.active { background: rgba(88,166,255,.12); }
.menu-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.mi-blue   { background: rgba(88,166,255,.15); }
.mi-green  { background: rgba(63,185,80,.15); }
.mi-purple { background: rgba(188,140,255,.15); }
.mi-orange { background: rgba(255,166,87,.15); }
.mi-red    { background: rgba(248,81,73,.15); }
.menu-text strong { display: block; font-size: .875rem; color: #e6edf3; }
.menu-text span   { font-size: .75rem; color: #8b949e; }
.menu-badge { margin-left: auto; background: #58a6ff; color: #0d1117; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; }

/* ─────────────────────────────────────
   4. Table rows
───────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 10px 16px; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: #8b949e; border-bottom: 1px solid #21262d; }
.data-table td { padding: 14px 16px; font-size: .875rem; border-bottom: 1px solid #161b22; }
.data-table tbody tr {
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease, background .15s;
  cursor: default;
}
.data-table tbody tr.in { opacity: 1; transform: none; }
.data-table tbody tr:hover td { background: #161b22; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot-green  { background: #3fb950; }
.dot-yellow { background: #d2a004; }
.dot-red    { background: #f85149; }
```

**JS:**
```js
const DELAY = 80; // ms per item

  function stagger(items, delay = DELAY) {
    items.forEach((el, i) => {
      el.classList.remove('in');
      void el.offsetWidth;
      setTimeout(() => el.classList.add('in'), i * delay);
    });
  }
  function resetAndStagger(items, delay) {
    items.forEach(el => el.classList.remove('in'));
    requestAnimationFrame(() => stagger(items, delay));
  }

  function replayTasks()  { resetAndStagger([...document.querySelectorAll('#taskList .task-item')]); }
  function replayCards()  { resetAndStagger([...document.querySelectorAll('#featGrid .feat-card')], 90); }
  function replayMenu()   { resetAndStagger([...document.querySelectorAll('#menuList .menu-item')], 70); }
  function replayTable()  { resetAndStagger([...document.querySelectorAll('#tableBody tr')], 75); }

  // Auto-run on load
  replayTasks();
  setTimeout(replayCards, 200);
  setTimeout(replayMenu,  400);
  setTimeout(replayTable, 600);
```

### 19. Cursor Trail Effect

**Type:** CSS + JS
**Description:** Custom cursor dot and ring with four switchable trail modes: coloured dots, sparkle particles, comet streaks and rainbow — plus live position stats.

**HTML:**
```html
<div id="cursor-dot"></div>
<div id="cursor-ring"></div>

<div class="page">
  <h1>Cursor Trail Effect</h1>
  <p class="subtitle">Move your mouse to see different trail styles</p>

  <section>
    <h2>Trail Style</h2>
    <div class="mode-row">
      <button class="mode-btn active" data-mode="dots" onclick="setMode(this,'dots')">● Dots</button>
      <button class="mode-btn" data-mode="sparkle" onclick="setMode(this,'sparkle')">✦ Sparkle</button>
      <button class="mode-btn" data-mode="comet"   onclick="setMode(this,'comet')">— Comet</button>
      <button class="mode-btn" data-mode="rainbow" onclick="setMode(this,'rainbow')">🌈 Rainbow</button>
      <button class="mode-btn" data-mode="none"    onclick="setMode(this,'none')">✕ None</button>
    </div>
  </section>

  <section>
    <h2>Interactive Zones</h2>
    <div class="demo-zone" style="margin-bottom:16px;">
      <span class="zone-label">Hover a link</span>
      <a href="#" class="zone-link" onclick="return false;">Hover over me</a>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
      <div class="demo-zone">
        <span class="zone-label">Card</span>
        <div class="zone-card"><h3>Move freely</h3><p>The cursor ring expands when hovering interactive elements.</p></div>
      </div>
      <div class="demo-zone">
        <span class="zone-label">Button</span>
        <button class="neon-btn">Hover me</button>
      </div>
    </div>
  </section>

  <section>
    <h2>Stats</h2>
    <div class="info-grid">
      <div class="info-box"><div class="num" id="trailCount">0</div><p>Trail particles created</p></div>
      <div class="info-box"><div class="num" id="posX">0</div><p>Current X position</p></div>
      <div class="info-box"><div class="num" id="posY">0</div><p>Current Y position</p></div>
      <div class="info-box"><div class="num" id="speed">0</div><p>Cursor speed (px/frame)</p></div>
    </div>
  </section>
</div>
```

**CSS:**
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #060612; min-height: 100vh; overflow-x: hidden; cursor: none; }

/* ─── Custom cursor ─── */
#cursor-dot {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%);
  transition: width .15s, height .15s, background .15s;
  mix-blend-mode: difference;
}
#cursor-ring {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6);
  transform: translate(-50%, -50%);
  transition: transform .12s ease, width .25s, height .25s, border-color .25s;
  mix-blend-mode: difference;
}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring { width: 56px; height: 56px; border-color: rgba(255,255,255,.9); }
body:has(a:hover) #cursor-dot,
body:has(button:hover) #cursor-dot { width: 4px; height: 4px; }

/* ─── Trails ─── */
.trail-dot {
  position: fixed; z-index: 9990; pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .6s ease, transform .6s ease;
}

/* ─── Page layout ─── */
.page { position: relative; z-index: 1; padding: 80px 40px; min-height: 100vh; }

/* Background grid */
.page::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

h1 { color: #fff; text-align: center; font-size: 2rem; margin-bottom: 8px; position: relative; z-index: 2; }
.subtitle { color: rgba(255,255,255,.4); text-align: center; margin-bottom: 50px; position: relative; z-index: 2; }
section { margin-bottom: 60px; position: relative; z-index: 2; }
section > h2 { color: rgba(255,255,255,.35); font-size: .72rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; }

/* ─── Trail mode switcher ─── */
.mode-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.mode-btn {
  padding: 10px 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.7); font-size: .85rem; cursor: none;
  transition: background .2s, border-color .2s, color .2s;
}
.mode-btn.active { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); color: #fff; }

/* ─── Demo zones ─── */
.demo-zone {
  border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); padding: 40px;
  display: flex; align-items: center; justify-content: center; min-height: 200px;
  position: relative; overflow: hidden;
}
.zone-label { color: rgba(255,255,255,.25); font-size: .8rem; position: absolute; top: 14px; left: 16px; text-transform: uppercase; letter-spacing: 2px; }

/* Interactive elements inside zones */
.zone-link { color: #a78bfa; text-decoration: none; font-size: 1.1rem; padding: 12px 24px; border-radius: 8px; border: 1px solid rgba(167,139,250,.3); transition: background .2s; }
.zone-link:hover { background: rgba(167,139,250,.1); }

.zone-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 24px; text-align: center; max-width: 260px;
  transition: transform .3s, background .3s;
}
.zone-card:hover { transform: scale(1.03); background: rgba(255,255,255,.09); }
.zone-card h3 { color: #fff; margin-bottom: 8px; }
.zone-card p  { color: rgba(255,255,255,.5); font-size: .85rem; }

.neon-btn {
  padding: 14px 36px; border-radius: 50px; border: none; cursor: none; font-size: 1rem; font-weight: 600;
  background: linear-gradient(135deg, #7c3aed, #3b82f6); color: #fff;
  box-shadow: 0 0 0 rgba(124,58,237,0); transition: box-shadow .3s, transform .2s;
}
.neon-btn:hover { box-shadow: 0 0 32px rgba(124,58,237,.6), 0 0 64px rgba(59,130,246,.3); transform: scale(1.04); }

/* Info grid */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.info-box {
  border-radius: 12px; padding: 20px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.info-box .num { font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.info-box p { color: rgba(255,255,255,.5); font-size: .8rem; margin-top: 4px; }
```

**JS:**
```js
const dot  = document.getElementById('cursor-dot');
  const ring = document.getElementById('cursor-ring');
  let mx = 0, my = 0, px = 0, py = 0;
  let mode = 'dots';
  let total = 0;
  const TRAIL_COUNT = 20;

  // Move custom cursor
  document.addEventListener('mousemove', e => {
    mx = e.clientX; my = e.clientY;
    dot.style.left = mx + 'px';  dot.style.top = my + 'px';
    ring.style.left = mx + 'px'; ring.style.top = my + 'px';
    document.getElementById('posX').textContent = Math.round(mx);
    document.getElementById('posY').textContent = Math.round(my);
  });

  // Trail creation
  function createTrail(x, y, speed) {
    if (mode === 'none') return;
    const el = document.createElement('div');
    el.className = 'trail-dot';
    const size = mode === 'comet' ? Math.max(4, Math.min(speed * 2.5, 22)) : (mode === 'sparkle' ? 6 : 8);
    el.style.width  = size + 'px';
    el.style.height = size + 'px';

    if (mode === 'dots') {
      el.style.background = 'rgba(167,139,250,.8)';
    } else if (mode === 'sparkle') {
      const hue = Math.random() * 60 + 260;
      el.style.background = `hsl(${hue},90%,70%)`;
      el.style.borderRadius = Math.random() > .5 ? '0' : '50%';
      el.style.transform = `translate(-50%,-50%) rotate(${Math.random()*360}deg)`;
    } else if (mode === 'comet') {
      el.style.background = 'rgba(255,255,255,.6)';
      el.style.borderRadius = '2px';
      el.style.width = size * 3 + 'px';
    } else if (mode === 'rainbow') {
      const hue = (Date.now() / 5) % 360;
      el.style.background = `hsl(${hue},100%,65%)`;
    }

    el.style.left = x + 'px';
    el.style.top  = y + 'px';
    document.body.appendChild(el);
    total++;
    document.getElementById('trailCount').textContent = total;

    requestAnimationFrame(() => {
      el.style.opacity = '0';
      el.style.transform = `translate(-50%,-50%) scale(0)`;
    });

    setTimeout(() => el.remove(), 650);
  }

  // Throttled trail on mousemove
  let lastTrail = 0;
  document.addEventListener('mousemove', e => {
    const now = Date.now();
    const speed = Math.hypot(e.clientX - px, e.clientY - py);
    document.getElementById('speed').textContent = Math.round(speed);
    px = e.clientX; py = e.clientY;
    if (now - lastTrail > 30) {
      createTrail(e.clientX, e.clientY, speed);
      lastTrail = now;
    }
  });

  function setMode(btn, m) {
    document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    mode = m;
  }
```

### 20. Magnetic Button Effect

**Type:** CSS + JS
**Description:** Buttons, icon links, nav items and FABs that translate toward the cursor within a 120px radius using mousemove vector math and spring easing.

**HTML:**
```html
<div class="page">
  <h1>Magnetic Button Effect</h1>
  <p class="subtitle">Move your cursor near the buttons — they'll pull toward it</p>
  <p class="hint">↓ hover to activate magnetism</p>

  <!-- 1. CTA buttons -->
  <section>
    <h2>Call-to-Action Buttons</h2>
    <div class="cta-row">
      <div class="mag-wrap" data-strength="0.4">
        <button class="btn-mag btn-solid"><span class="label">Get Started</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.4">
        <button class="btn-mag btn-purple"><span class="label">Upgrade Plan</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.4">
        <button class="btn-mag btn-outline"><span class="label">Learn More</span></button>
      </div>
    </div>
  </section>

  <!-- 2. Icon buttons -->
  <section>
    <h2>Social / Icon Buttons</h2>
    <div class="icon-row">
      <div class="mag-wrap" data-strength="0.5">
        <button class="btn-icon bi-dark"><span class="label">🌐</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.5">
        <button class="btn-icon bi-blue"><span class="label">𝕏</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.5">
        <button class="btn-icon bi-insta"><span class="label">📸</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.5">
        <button class="btn-icon bi-gh"><span class="label">🐙</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.5">
        <button class="btn-icon bi-li"><span class="label">in</span></button>
      </div>
    </div>
  </section>

  <!-- 3. Nav -->
  <section>
    <h2>Navigation Items</h2>
    <nav class="nav-mag">
      <div class="mag-wrap" data-strength="0.25"><button class="nav-item active">Home</button></div>
      <div class="mag-wrap" data-strength="0.25"><button class="nav-item">Work</button></div>
      <div class="mag-wrap" data-strength="0.25"><button class="nav-item">About</button></div>
      <div class="mag-wrap" data-strength="0.25"><button class="nav-item">Blog</button></div>
      <div class="mag-wrap" data-strength="0.25"><button class="nav-item">Contact</button></div>
    </nav>
  </section>

  <!-- 4. FABs -->
  <section>
    <h2>Floating Action Buttons</h2>
    <div class="fab-cluster">
      <div class="mag-wrap" data-strength="0.45">
        <button class="btn-mag fab fab-primary"><span class="label">✚ New Project</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.5">
        <button class="btn-icon fab fab-sm"><span class="label">🔍</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.5">
        <button class="btn-icon fab fab-sm"><span class="label">⚙️</span></button>
      </div>
      <div class="mag-wrap" data-strength="0.5">
        <button class="btn-icon fab fab-sm"><span class="label">📤</span></button>
      </div>
    </div>
  </section>
</div>
```

**CSS:**
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #09090f; min-height: 100vh; overflow-x: hidden; }

.page { padding: 70px 40px; max-width: 1000px; margin: 0 auto; }
h1 { color: #fff; text-align: center; font-size: 2rem; margin-bottom: 8px; }
.subtitle { color: rgba(255,255,255,.4); text-align: center; margin-bottom: 50px; }
section { margin-bottom: 70px; }
section > h2 { color: rgba(255,255,255,.35); font-size: .72rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 28px; }

/* Shared magnetic wrapper */
.mag-wrap {
  display: inline-flex; position: relative;
  /* JS will translate this on mousemove */
  transition: transform .15s cubic-bezier(.25,.46,.45,.94);
}

/* ─────────────────────────────────────
   1. Primary call-to-action buttons
───────────────────────────────────── */
.cta-row { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }

.btn-mag {
  position: relative; overflow: hidden;
  padding: 16px 40px; border-radius: 50px; border: none; cursor: pointer;
  font-size: 1rem; font-weight: 700; letter-spacing: .5px;
  transition: transform .15s cubic-bezier(.25,.46,.45,.94), box-shadow .25s;
}
/* Inner text span — also shifts slightly */
.btn-mag .label {
  position: relative; z-index: 1; pointer-events: none;
  display: block; transition: transform .15s cubic-bezier(.25,.46,.45,.94);
}

.btn-solid {
  background: #fff; color: #09090f;
  box-shadow: 0 4px 24px rgba(255,255,255,.1);
}
.btn-solid:hover { box-shadow: 0 8px 40px rgba(255,255,255,.25); }

.btn-purple {
  background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
  box-shadow: 0 4px 24px rgba(124,58,237,.2);
}
.btn-purple:hover { box-shadow: 0 8px 40px rgba(124,58,237,.5); }

.btn-outline {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  box-shadow: none;
}
.btn-outline:hover { border-color: rgba(255,255,255,.8); box-shadow: 0 0 32px rgba(255,255,255,.1); }

/* Ripple on click */
.btn-mag .ripple-burst {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.3); pointer-events: none;
  transform: scale(0); animation: burst .55s ease-out forwards;
}
@keyframes burst {
  to { transform: scale(3); opacity: 0; }
}

/* ─────────────────────────────────────
   2. Icon / social buttons
───────────────────────────────────── */
.icon-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.btn-icon {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  transition: transform .15s cubic-bezier(.25,.46,.45,.94), box-shadow .25s;
}
.btn-icon .label { display: flex; align-items: center; justify-content: center; }

.bi-dark   { background: #1a1a2e; border: 1px solid rgba(255,255,255,.1); color: #fff; }
.bi-dark:hover { box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.bi-blue   { background: #1d9bf0; color: #fff; }
.bi-blue:hover { box-shadow: 0 8px 30px rgba(29,155,240,.4); }
.bi-insta  { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.bi-insta:hover { box-shadow: 0 8px 30px rgba(220,39,67,.4); }
.bi-gh     { background: #24292f; color: #fff; border: 1px solid rgba(255,255,255,.1); }
.bi-gh:hover { box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.bi-li     { background: #0077b5; color: #fff; }
.bi-li:hover { box-shadow: 0 8px 30px rgba(0,119,181,.4); }

/* ─────────────────────────────────────
   3. Nav links
───────────────────────────────────── */
.nav-mag {
  display: flex; gap: 0; align-items: center;
  background: rgba(255,255,255,.04); border-radius: 16px; padding: 6px;
  border: 1px solid rgba(255,255,255,.08); width: fit-content;
}
.nav-item {
  padding: 10px 22px; border-radius: 10px; border: none; cursor: pointer;
  background: transparent; color: rgba(255,255,255,.6); font-size: .875rem; font-weight: 500;
  transition: background .2s, color .2s, transform .15s cubic-bezier(.25,.46,.45,.94);
  position: relative;
}
.nav-item.active { background: rgba(255,255,255,.1); color: #fff; }

/* ─────────────────────────────────────
   4. Floating action cluster
───────────────────────────────────── */
.fab-cluster { display: flex; gap: 16px; align-items: center; }

.fab {
  border-radius: 18px; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 600; color: #fff;
  transition: transform .15s cubic-bezier(.25,.46,.45,.94), box-shadow .25s;
}
.fab-primary { padding: 14px 28px; background: linear-gradient(135deg,#10b981,#059669); }
.fab-primary:hover { box-shadow: 0 10px 40px rgba(16,185,129,.4); }
.fab-sm { width: 48px; height: 48px; border-radius: 14px; padding: 0; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: 1.1rem; }
.fab-sm:hover { background: rgba(255,255,255,.14); }

/* ─── Cursor hint ─── */
.hint { color: rgba(255,255,255,.2); font-size: .8rem; text-align: center; margin-top: -30px; margin-bottom: 50px; }
```

**JS:**
```js
const RADIUS = 120; // activation radius in px

  document.querySelectorAll('.mag-wrap').forEach(wrap => {
    const strength = parseFloat(wrap.dataset.strength) || 0.4;
    const btn = wrap.querySelector('button');
    const label = btn.querySelector('.label');

    wrap.addEventListener('mousemove', e => {
      const r = wrap.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top  + r.height / 2;
      const dx = e.clientX - cx;
      const dy = e.clientY - cy;
      const dist = Math.hypot(dx, dy);

      if (dist < RADIUS) {
        const factor = (1 - dist / RADIUS) * strength;
        const tx = dx * factor;
        const ty = dy * factor;
        wrap.style.transform = `translate(${tx}px, ${ty}px)`;
        if (label) label.style.transform = `translate(${tx * .4}px, ${ty * .4}px)`;
        btn.style.transform = '';
      }
    });

    wrap.addEventListener('mouseleave', () => {
      wrap.style.transform = '';
      if (label) label.style.transform = '';
    });

    // Ripple on click
    btn.addEventListener('click', e => {
      const r = btn.getBoundingClientRect();
      const x = e.clientX - r.left;
      const y = e.clientY - r.top;
      const span = document.createElement('span');
      span.className = 'ripple-burst';
      const s = Math.max(r.width, r.height);
      span.style.cssText = `width:${s}px;height:${s}px;left:${x - s/2}px;top:${y - s/2}px`;
      btn.appendChild(span);
      setTimeout(() => span.remove(), 600);
    });
  });

  // Nav active state
  document.querySelectorAll('.nav-item').forEach(b => {
    b.addEventListener('click', () => {
      document.querySelectorAll('.nav-item').forEach(x => x.classList.remove('active'));
      b.classList.add('active');
    });
  });
```

### 21. Split Text Reveal Transition

**Type:** CSS + JS
**Description:** Character-split hero headline, word-by-word reveal, rotating word swap, per-character colour wave and text scramble with progressive decode.

**HTML:**
```html
<div class="page">
  <h1>Split Text Reveal Transition</h1>
  <p class="subtitle">Characters, words and lines animated into view</p>

  <!-- 1. Hero -->
  <section>
    <h2>Hero Headline — Character Split</h2>
    <button class="replay-btn" onclick="runAll()">↺ Replay All</button>
    <div class="hero">
      <div class="big split-text from-below" id="heroL1"><div class="line"></div></div>
      <div class="big split-text from-below" id="heroL2"><div class="line"></div></div>
      <div class="sub split-text from-below" id="heroSub"><div class="line"></div></div>
    </div>
  </section>

  <!-- 2. Word reveal -->
  <section>
    <h2>Word-by-Word Reveal</h2>
    <div class="word-reveal" id="wordReveal"></div>
  </section>

  <!-- 3. Rotating swap -->
  <section>
    <h2>Rotating Word Swap</h2>
    <div class="swap-container">
      <span class="swap-static">We build</span>
      <div class="swap-word" id="swapWord"><span class="active">interfaces</span></div>
    </div>
  </section>

  <!-- 4. Wave -->
  <section>
    <h2>Character Colour Wave</h2>
    <div class="wave-text" id="waveText"></div>
  </section>

  <!-- 5. Scramble -->
  <section>
    <h2>Text Scramble Reveal</h2>
    <div class="scramble-block" id="scrambleBlock"></div>
  </section>
</div>
```

**CSS:**
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #0c0c0e; min-height: 100vh; overflow-x: hidden; }

.page { padding: 70px 40px; max-width: 1000px; margin: 0 auto; }
h1 { color: #fff; text-align: center; font-size: 2rem; margin-bottom: 8px; }
.subtitle { color: rgba(255,255,255,.4); text-align: center; margin-bottom: 60px; }
section { margin-bottom: 80px; }
section > h2 { color: rgba(255,255,255,.3); font-size: .72rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 30px; }
.replay-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  padding: 8px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.7); font-size: .82rem; cursor: pointer;
  transition: background .2s;
}
.replay-btn:hover { background: rgba(255,255,255,.1); }

/* ─────────────────────────────────────
   Shared split char helpers
   Each .char is a clip container; the inner span slides in from below / above
───────────────────────────────────── */
.split-text { overflow: hidden; display: inline-block; }
.split-text .line { overflow: hidden; display: block; }
.split-text .char {
  display: inline-block; overflow: hidden;
  vertical-align: top; /* prevent layout shift */
}
.split-text .char .inner {
  display: inline-block;
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}

/* Initial hidden states */
.from-below  .char .inner { transform: translateY(110%); opacity: 0; }
.from-above  .char .inner { transform: translateY(-110%); opacity: 0; }
.from-left   .char .inner { transform: translateX(-80px); opacity: 0; }
.from-right  .char .inner { transform: translateX(80px); opacity: 0; }
.scale-blur  .char .inner { transform: scale(1.4); opacity: 0; filter: blur(6px); transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .6s, filter .6s; }
.rotate-in   .char .inner { transform: rotateX(90deg) translateY(40px); opacity: 0; transform-origin: top center; transition: transform .65s cubic-bezier(.16,1,.3,1), opacity .5s; }

/* Revealed state */
.char.visible .inner { transform: none; opacity: 1; filter: none; }

/* ─────────────────────────────────────
   1. Hero headline — from-below
───────────────────────────────────── */
.hero { text-align: center; padding: 20px 0; }
.hero .big { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.hero .line1 { color: #fff; }
.hero .line2 {
  background: linear-gradient(90deg,#a78bfa,#60a5fa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .sub {
  margin-top: 20px; color: rgba(255,255,255,.5); font-size: 1.1rem; overflow: hidden;
}

/* ─────────────────────────────────────
   2. Staggered word reveal
───────────────────────────────────── */
.word-reveal { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.5; }
.word-reveal .word { display: inline-block; overflow: hidden; margin-right: .25em; }
.word-reveal .word .inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.word-reveal .word.visible .inner { transform: none; }

/* ─────────────────────────────────────
   3. Rotating word swap
───────────────────────────────────── */
.swap-container { display: flex; align-items: baseline; gap: 12px; font-size: 2rem; font-weight: 800; }
.swap-static { color: #fff; }
.swap-word {
  color: #a78bfa; display: inline-block; overflow: hidden;
  min-width: 200px;
}
.swap-word .active {
  display: block; animation: swap-in .5s cubic-bezier(.16,1,.3,1) forwards;
}
.swap-word .exit {
  display: block; animation: swap-out .4s ease-in forwards;
}
@keyframes swap-in  { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes swap-out { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }

/* ─────────────────────────────────────
   4. Per-character colour wave
───────────────────────────────────── */
.wave-text {
  font-size: 3rem; font-weight: 900; letter-spacing: -.02em;
  display: flex; flex-wrap: wrap; gap: 0;
}
.wave-text .char {
  display: inline-block; overflow: hidden;
  color: rgba(255,255,255,.15);
  transition: color .4s ease;
}
.wave-text .char.lit { color: #fff; }
.wave-text .char.space { width: .35em; }

/* ─────────────────────────────────────
   5. Scramble + reveal (JS)
───────────────────────────────────── */
.scramble-block { display: flex; flex-direction: column; gap: 10px; }
.scramble-item { overflow: hidden; }
.scramble-target { font-size: 1.2rem; font-weight: 600; color: #fff; font-family: monospace; letter-spacing: .02em; }
.scramble-target .reveal-bar {
  position: relative; display: inline-block;
  background: linear-gradient(90deg,#7c3aed,#3b82f6); border-radius: 2px;
  height: 3px; width: 0; display: block; margin-top: 4px;
  transition: width 1s ease;
}
.scramble-target.done .reveal-bar { width: 100%; }
```

**JS:**
```js
/* ── 1. Build char splits ─────────────────────────── */
function buildCharSplit(el, text, baseDelay = 0) {
  const line = el.querySelector('.line');
  line.innerHTML = '';
  [...text].forEach((ch, i) => {
    const wrap = document.createElement('span');
    wrap.className = 'char';
    if (ch === ' ') { wrap.style.width = '.3em'; wrap.style.display = 'inline-block'; }
    const inner = document.createElement('span');
    inner.className = 'inner';
    inner.textContent = ch;
    wrap.appendChild(inner);
    line.appendChild(wrap);
    // stagger
    setTimeout(() => wrap.classList.add('visible'), baseDelay + i * 40);
  });
}

function resetSplit(el) {
  el.querySelectorAll('.char').forEach(c => c.classList.remove('visible'));
}

/* ── 2. Word reveal ───────────────────────────────── */
const WORDS = 'Design systems that feel like magic.'.split(' ');
function buildWordReveal() {
  const el = document.getElementById('wordReveal');
  el.innerHTML = '';
  WORDS.forEach((w, i) => {
    const wrap = document.createElement('span');
    wrap.className = 'word';
    const inner = document.createElement('span');
    inner.className = 'inner';
    inner.textContent = w;
    wrap.appendChild(inner);
    el.appendChild(wrap);
    el.appendChild(document.createTextNode(' '));
    setTimeout(() => wrap.classList.add('visible'), 300 + i * 90);
  });
}

/* ── 3. Rotating swap ────────────────────────────── */
const SWAP_WORDS = ['interfaces','experiences','products','identities','systems','futures'];
let swapIdx = 0;
function nextSwap() {
  const el = document.getElementById('swapWord');
  const active = el.querySelector('.active');
  swapIdx = (swapIdx + 1) % SWAP_WORDS.length;
  if (active) {
    active.className = 'exit';
    setTimeout(() => active.remove(), 420);
  }
  const next = document.createElement('span');
  next.className = 'active';
  next.textContent = SWAP_WORDS[swapIdx];
  el.appendChild(next);
}
setInterval(nextSwap, 2200);

/* ── 4. Wave ─────────────────────────────────────── */
const WAVE_TEXT = 'CREATIVE MOTION';
function buildWave() {
  const el = document.getElementById('waveText');
  el.innerHTML = '';
  [...WAVE_TEXT].forEach((ch, i) => {
    const span = document.createElement('span');
    span.className = 'char' + (ch === ' ' ? ' space' : '');
    span.textContent = ch;
    el.appendChild(span);
  });
}
function runWave(delay = 0) {
  const chars = [...document.querySelectorAll('#waveText .char:not(.space)')];
  chars.forEach(c => c.classList.remove('lit'));
  chars.forEach((c, i) => setTimeout(() => c.classList.add('lit'), delay + i * 55));
  // Loop
  setTimeout(() => {
    chars.forEach(c => c.classList.remove('lit'));
    setTimeout(() => runWave(0), 400);
  }, delay + chars.length * 55 + 800);
}

/* ── 5. Scramble ──────────────────────────────────── */
const LINES = ['The quick brown fox','Jumps over the lazy','Dog at dawn'];
const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%';
function scramble(el, target, delay = 0) {
  const bar = el.querySelector('.reveal-bar');
  const text = el.querySelector('.text-content') || el;
  let frame = 0;
  const total = 30;
  setTimeout(() => {
    const iv = setInterval(() => {
      const progress = frame / total;
      const revealedCount = Math.floor(progress * target.length);
      let out = '';
      for (let i = 0; i < target.length; i++) {
        if (target[i] === ' ') { out += ' '; continue; }
        if (i < revealedCount) { out += target[i]; }
        else { out += CHARS[Math.floor(Math.random() * CHARS.length)]; }
      }
      el.childNodes[0].textContent = out;
      frame++;
      if (frame > total) {
        clearInterval(iv);
        el.childNodes[0].textContent = target;
        el.classList.add('done');
      }
    }, 35);
  }, delay);
}

function buildScramble() {
  const block = document.getElementById('scrambleBlock');
  block.innerHTML = '';
  LINES.forEach((line, i) => {
    const item = document.createElement('div');
    item.className = 'scramble-item';
    const tgt = document.createElement('div');
    tgt.className = 'scramble-target';
    tgt.appendChild(document.createTextNode(line));
    const bar = document.createElement('span');
    bar.className = 'reveal-bar';
    tgt.appendChild(bar);
    item.appendChild(tgt);
    block.appendChild(item);
    scramble(tgt, line, 500 + i * 600);
  });
}

/* ── Init & replay ───────────────────────────────── */
function heroLine1() {
  const el = document.getElementById('heroL1');
  el.classList.add('line1');
  buildCharSplit(el, 'Build Beautiful', 0);
}
function heroLine2() {
  const el = document.getElementById('heroL2');
  el.classList.add('line2');
  buildCharSplit(el, 'Transitions', 200);
}
function heroSub() {
  buildCharSplit(document.getElementById('heroSub'), 'Every character, perfectly timed.', 600);
}

function runAll() {
  heroLine1(); heroLine2(); heroSub();
  buildWordReveal();
  buildScramble();
}

buildWave();
runAll();
runWave(1200);
```

### 22. Progress Bar Animation

**Type:** CSS + JS
**Description:** Labelled skill bars, shimmer and striped variants, thin page-load indicators, circular SVG rings and step segment indicators with animated fills.

**HTML:**
```html
<div class="page">
  <h1>Progress Bar Animation CSS</h1>
  <p class="subtitle">Smooth fills, shimmer, radial rings and step indicators</p>

  <!-- 1. Standard -->
  <section>
    <h2>Skill / Label Bars</h2>
    <button class="replay-btn" onclick="runBars()">↺ Replay</button>
    <div class="bar-list" id="barList">
      <div class="bar-row"><div class="bar-meta"><span class="bar-label">TypeScript</span><span class="bar-pct" id="pct0">0%</span></div><div class="bar-track"><div class="bar-fill bf-blue"  data-to="92"></div></div></div>
      <div class="bar-row"><div class="bar-meta"><span class="bar-label">React</span><span class="bar-pct" id="pct1">0%</span></div><div class="bar-track"><div class="bar-fill bf-blue"  data-to="88"></div></div></div>
      <div class="bar-row"><div class="bar-meta"><span class="bar-label">Node.js</span><span class="bar-pct" id="pct2">0%</span></div><div class="bar-track"><div class="bar-fill bf-green" data-to="79"></div></div></div>
      <div class="bar-row"><div class="bar-meta"><span class="bar-label">PostgreSQL</span><span class="bar-pct" id="pct3">0%</span></div><div class="bar-track"><div class="bar-fill bf-purple" data-to="70"></div></div></div>
      <div class="bar-row"><div class="bar-meta"><span class="bar-label">Rust</span><span class="bar-pct" id="pct4">0%</span></div><div class="bar-track"><div class="bar-fill bf-orange" data-to="45"></div></div></div>
    </div>
  </section>

  <!-- 2. Shimmer / stripe -->
  <section>
    <h2>Shimmer & Striped Variants</h2>
    <div class="bar-list" id="barList2">
      <div class="bar-row"><div class="bar-meta"><span class="bar-label">Upload progress</span><span class="bar-pct" id="pct5">0%</span></div><div class="bar-track" style="height:12px"><div class="bar-fill bf-blue shimmer" data-to="67"></div></div></div>
      <div class="bar-row"><div class="bar-meta"><span class="bar-label">Installing packages</span><span class="bar-pct" id="pct6">0%</span></div><div class="bar-track" style="height:12px;background:#1e3a2f"><div class="bar-fill bf-green striped" data-to="55"></div></div></div>
      <div class="bar-row"><div class="bar-meta"><span class="bar-label">Syncing data</span><span class="bar-pct" id="pct7">0%</span></div><div class="bar-track" style="height:12px"><div class="bar-fill bf-purple" data-to="83"></div></div></div>
    </div>
  </section>

  <!-- 3. Thin loaders -->
  <section>
    <h2>Page / Loading Indicators</h2>
    <div class="loader-box">
      <div class="loader-label">Determinate — fetching data</div>
      <div class="loader-track"><div class="loader-fill pulse-glow" id="thinLoader"></div></div>
    </div>
    <div class="loader-box">
      <div class="loader-label">Indeterminate — waiting for server</div>
      <div class="loader-track"><div class="loader-fill indeterminate"></div></div>
    </div>
  </section>

  <!-- 4. Circular -->
  <section>
    <h2>Circular Progress Rings</h2>
    <button class="replay-btn" onclick="runCircles()">↺ Replay</button>
    <div class="circle-grid" id="circleGrid">
      <svg width="0" height="0"><defs><linearGradient id="grad-blue" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#1d6fe6"/><stop offset="100%" stop-color="#58a6ff"/></linearGradient></defs></svg>
    </div>
  </section>

  <!-- 5. Steps -->
  <section>
    <h2>Step Indicators</h2>
    <button class="replay-btn" onclick="runSteps()">↺ Replay</button>
    <div id="stepWrap">
      <div style="margin-bottom:16px">
        <div class="bar-meta" style="margin-bottom:8px"><span class="bar-label">Order progress</span><span class="bar-pct" id="stepLabel">Step 3 of 5</span></div>
        <div class="step-track" id="stepTrack"></div>
        <div class="step-labels"><span>Placed</span><span>Confirmed</span><span>Packed</span><span>Shipped</span><span>Delivered</span></div>
      </div>
    </div>
  </section>
</div>
```

**CSS:**
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #0d1117; color: #e6edf3; min-height: 100vh; }

.page { padding: 60px 40px; max-width: 900px; margin: 0 auto; }
h1 { font-size: 2rem; text-align: center; margin-bottom: 8px; color: #fff; }
.subtitle { color: #8b949e; text-align: center; margin-bottom: 50px; }
section { margin-bottom: 60px; }
section > h2 { color: #58a6ff; font-size: .75rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid #21262d; }

.replay-btn {
  display: inline-flex; gap: 6px; align-items: center; margin-bottom: 20px;
  padding: 8px 18px; border-radius: 8px; border: 1px solid #30363d;
  background: #161b22; color: #c9d1d9; font-size: .82rem; cursor: pointer;
  transition: background .2s;
}
.replay-btn:hover { background: #21262d; }

/* ─────────────────────────────────────
   1. Standard labelled bars
───────────────────────────────────── */
.bar-list { display: flex; flex-direction: column; gap: 18px; }
.bar-row { }
.bar-meta { display: flex; justify-content: space-between; margin-bottom: 8px; }
.bar-label { font-size: .875rem; color: #e6edf3; }
.bar-pct   { font-size: .875rem; color: #8b949e; font-variant-numeric: tabular-nums; }
.bar-track {
  height: 8px; border-radius: 4px;
  background: #21262d; overflow: hidden;
}
.bar-fill {
  height: 100%; border-radius: 4px; width: 0;
  transition: width 1.2s cubic-bezier(.25,1,.5,1);
}
.bf-blue   { background: linear-gradient(90deg, #1d6fe6, #58a6ff); }
.bf-green  { background: linear-gradient(90deg, #1a7f37, #3fb950); }
.bf-purple { background: linear-gradient(90deg, #5e2d91, #a78bfa); }
.bf-orange { background: linear-gradient(90deg, #9a4f00, #f0883e); }
.bf-red    { background: linear-gradient(90deg, #8a1f1f, #f85149); }

/* ─────────────────────────────────────
   2. Striped / animated shimmer bars
───────────────────────────────────── */
.bar-fill.striped {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.08) 0,
    rgba(255,255,255,.08) 10px,
    transparent 10px,
    transparent 20px
  );
  background-size: 28px 100%;
  animation: stripe-move 1s linear infinite;
}
@keyframes stripe-move {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}
.bar-fill.shimmer::after {
  content: ''; display: block; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat;
  animation: shimmer-sweep 2s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}

/* ─────────────────────────────────────
   3. Thin loader / page-top bars
───────────────────────────────────── */
.loader-box { background: #161b22; border-radius: 12px; padding: 24px; margin-bottom: 12px; }
.loader-label { color: #8b949e; font-size: .8rem; margin-bottom: 12px; }
.loader-track { height: 3px; background: #21262d; border-radius: 2px; overflow: hidden; }
.loader-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #58a6ff, #a78bfa);
}
.loader-fill.indeterminate {
  width: 40%; animation: indeterminate 1.8s ease-in-out infinite;
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.loader-fill.pulse-glow {
  width: 0; transition: width 2s ease;
  box-shadow: 0 0 8px rgba(88,166,255,.7);
}

/* ─────────────────────────────────────
   4. Circular / radial
───────────────────────────────────── */
.circle-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.circle-wrap { text-align: center; }
.circle-svg { transform: rotate(-90deg); }
.circle-track { fill: none; stroke: #21262d; stroke-width: 6; }
.circle-arc {
  fill: none; stroke-width: 6; stroke-linecap: round;
  stroke-dashoffset: 283; /* full circumference = 2π×45 ≈ 283 */
  transition: stroke-dashoffset 1.4s cubic-bezier(.25,1,.5,1);
}
.ca-blue   { stroke: url(#grad-blue); }
.ca-green  { stroke: #3fb950; }
.ca-purple { stroke: #a78bfa; }
.ca-orange { stroke: #f0883e; }
.circle-inner {
  font-size: 1.1rem; font-weight: 700; color: #fff; margin-top: 8px;
}
.circle-sub { font-size: .75rem; color: #8b949e; }

/* ─────────────────────────────────────
   5. Step / multi-segment
───────────────────────────────────── */
.step-track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.step-seg { flex: 1; background: #21262d; border-radius: 3px; transform-origin: left; transform: scaleX(0); transition: transform .4s ease; }
.step-seg.filled { background: #3fb950; }
.step-seg.done   { transform: scaleX(1); }

.step-labels { display: flex; justify-content: space-between; margin-top: 8px; }
.step-labels span { font-size: .72rem; color: #8b949e; }
```

**JS:**
```js
/* ── Animate % counter ── */
  function animatePct(el, to, dur = 1200) {
    let start = null;
    function step(ts) {
      if (!start) start = ts;
      const p = Math.min((ts - start) / dur, 1);
      el.textContent = Math.round(p * to) + '%';
      if (p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  /* ── 1 & 2. Linear bars ── */
  function runBars() {
    ['barList','barList2'].forEach(id => {
      document.querySelectorAll(`#${id} .bar-fill`).forEach((fill, i) => {
        fill.style.width = '0';
        void fill.offsetWidth;
        const to = fill.dataset.to;
        setTimeout(() => {
          fill.style.width = to + '%';
          const pctEl = document.getElementById('pct' + (id === 'barList' ? i : i + 5));
          if (pctEl) animatePct(pctEl, parseInt(to));
        }, i * 150);
      });
    });
    // Thin loader
    const tl = document.getElementById('thinLoader');
    tl.style.width = '0';
    void tl.offsetWidth;
    setTimeout(() => { tl.style.width = '78%'; }, 300);
  }

  /* ── 4. Circular ── */
  const CIRCLES = [
    { pct: 87, color: 'ca-blue',   label: 'Performance', stroke: 'url(#grad-blue)' },
    { pct: 73, color: 'ca-green',  label: 'Accessibility', stroke: '#3fb950' },
    { pct: 94, color: 'ca-purple', label: 'Best Practice', stroke: '#a78bfa' },
    { pct: 61, color: 'ca-orange', label: 'SEO Score',    stroke: '#f0883e' },
  ];
  const C = 2 * Math.PI * 45; // ≈ 282.7

  function buildCircles() {
    const grid = document.getElementById('circleGrid');
    // keep the defs svg
    const defs = grid.querySelector('svg');
    grid.innerHTML = '';
    grid.appendChild(defs);
    CIRCLES.forEach(d => {
      const wrap = document.createElement('div');
      wrap.className = 'circle-wrap';
      wrap.innerHTML = `
        <svg class="circle-svg" width="100" height="100" viewBox="0 0 100 100">
          <circle class="circle-track" cx="50" cy="50" r="45"/>
          <circle class="circle-arc ${d.color}" cx="50" cy="50" r="45"
            stroke-dasharray="${C}" stroke-dashoffset="${C}"/>
        </svg>
        <div class="circle-inner">0%</div>
        <div class="circle-sub">${d.label}</div>`;
      grid.appendChild(wrap);
    });
  }

  function runCircles() {
    buildCircles();
    CIRCLES.forEach((d, i) => {
      const arcs = document.querySelectorAll('.circle-arc');
      const nums = document.querySelectorAll('.circle-inner');
      setTimeout(() => {
        arcs[i].style.strokeDashoffset = C * (1 - d.pct / 100);
        animatePct(nums[i], d.pct, 1400);
      }, i * 180);
    });
  }

  /* ── 5. Steps ── */
  const TOTAL_STEPS = 5, FILLED = 3;
  function buildSteps() {
    const track = document.getElementById('stepTrack');
    track.innerHTML = '';
    for (let i = 0; i < TOTAL_STEPS; i++) {
      const seg = document.createElement('div');
      seg.className = 'step-seg' + (i < FILLED ? ' filled' : '');
      track.appendChild(seg);
    }
  }
  function runSteps() {
    buildSteps();
    document.querySelectorAll('.step-seg').forEach((seg, i) => {
      setTimeout(() => seg.classList.add('done'), i * 150 + 100);
    });
  }

  // Init
  setTimeout(runBars, 300);
  setTimeout(runCircles, 500);
  setTimeout(runSteps, 700);
```

---
## 14 CSS Typewriter Effect Designs

URL: https://codefronts.com/motion/css-typewriter-effect/
Description: 14 hand-coded CSS typewriter effects with live demos — canonical pure-CSS steps() + ch cursor, multi-line stagger, infinite word-swap loop, neon terminal prompt, clip-path reveal mask, SVG stroke-dashoffset handwriting, gradient highlight sweep, variable-font weight morph, per-character split stagger, vanilla-JS character injection, Matrix-rain scramble decode, RGB-channel glitch-on-type, syntax-highlighted code-editor typewriter, and scroll-triggered word reveal. 9 pure CSS (no JavaScript) + 5 with a tiny vanilla JS snippet — no framework. Modern @property + steps() techniques, prefers-reduced-motion honoured, MIT licensed.
Demo count: 14

### 01. CSS Typewriter steps() Cursor

**Type:** Pure CSS
**Description:** The canonical CSS-only typewriter: width animates from 0 to a fixed ch value using steps() timing, paired with a blinking border-right cursor — no JS at all.

**HTML:**
```html
<div class="tw-01">
  <div class="tw-01__stage">
    <p class="tw-01__label">Frontend Developer</p>
    <h1 class="tw-01__text">Hello, World.</h1>
    <p class="tw-01__sub">Building beautiful interfaces with code.</p>
  </div>
</div>
```

**CSS:**
```css
.tw-01, .tw-01 *, .tw-01 *::before, .tw-01 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-01 ::selection { background: #a78bfa; color: #0f0a1e; }

.tw-01 {
  --bg: #0f0a1e;
  --surface: #1a1033;
  --accent: #a78bfa;
  --text: #e2d9f3;
  --muted: #6b5fa0;
  font-family: 'Courier New', Courier, monospace;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tw-01__stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tw-01__label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  animation: tw-01-fadein 0.4s 0.2s forwards;
}

.tw-01__text {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 3px solid var(--accent);
  animation:
    tw-01-type 1.1s steps(13) 0.8s forwards,
    tw-01-blink 0.75s steps(2) 0.8s infinite;
}

.tw-01__sub {
  font-size: 0.95rem;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: tw-01-sub 1.5s steps(38) 2.2s forwards;
}

@keyframes tw-01-type {
  from { width: 0; }
  to   { width: 13ch; }
}
@keyframes tw-01-sub {
  from { width: 0; }
  to   { width: 38ch; }
}
@keyframes tw-01-blink {
  0%, 100% { border-color: var(--accent); }
  50%      { border-color: transparent; }
}
@keyframes tw-01-fadein {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-01__text { width: 13ch; animation: none; border-right-color: var(--accent); }
  .tw-01__sub  { width: 38ch; animation: none; }
  .tw-01__label { opacity: 1; animation: none; }
}
```

### 02. CSS Typewriter Multiline Stagger

**Type:** Pure CSS
**Description:** Multiple lines reveal sequentially using staggered animation-delay on each row, creating a cascading terminal-output feel entirely in CSS.

**HTML:**
```html
<div class="tw-02">
  <div class="tw-02__terminal">
    <div class="tw-02__bar">
      <span class="tw-02__dot"></span><span class="tw-02__dot"></span><span class="tw-02__dot"></span>
      <span class="tw-02__title">terminal — bash</span>
    </div>
    <div class="tw-02__body">
      <p class="tw-02__line" style="--len:32;--delay:0.3s">$ initialising project scaffold...</p>
      <p class="tw-02__line" style="--len:28;--delay:2s">✓ Dependencies resolved (1.2s)</p>
      <p class="tw-02__line" style="--len:34;--delay:3.4s">✓ TypeScript config generated</p>
      <p class="tw-02__line" style="--len:30;--delay:4.8s">✓ Tailwind CSS v4 installed</p>
      <p class="tw-02__line tw-02__line--active" style="--len:26;--delay:6.2s">$ npm run dev █</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tw-02, .tw-02 *, .tw-02 *::before, .tw-02 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-02 ::selection { background: #22d3ee; color: #001a1f; }

.tw-02 {
  --green: #4ade80;
  --cyan: #22d3ee;
  --bg: #0a0f0a;
  --surface: #111811;
  --border: #1e2d1e;
  font-family: 'Courier New', monospace;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.tw-02__terminal {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(74,222,128,0.05);
  overflow: hidden;
}

.tw-02__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #0d150d;
  border-bottom: 1px solid var(--border);
}

.tw-02__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #3a3a3a;
}
.tw-02__dot:nth-child(1) { background: #ff5f57; }
.tw-02__dot:nth-child(2) { background: #febc2e; }
.tw-02__dot:nth-child(3) { background: #28c840; }

.tw-02__title {
  margin-left: auto;
  font-size: 0.72rem;
  color: #3a5a3a;
  letter-spacing: 0.05em;
}

.tw-02__body {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tw-02__line {
  font-size: 0.9rem;
  color: var(--green);
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: tw-02-type steps(var(--len)) var(--delay) forwards;
  animation-duration: calc(var(--len) * 0.055s);
}
.tw-02__line:nth-child(2) { color: #86efac; }
.tw-02__line:nth-child(3) { color: #86efac; }
.tw-02__line:nth-child(4) { color: #86efac; }
.tw-02__line--active { color: var(--cyan); }

@keyframes tw-02-type {
  from { width: 0; }
  to   { width: calc(var(--len) * 1ch); }
}

@media (prefers-reduced-motion: reduce) {
  .tw-02__line { width: calc(var(--len) * 1ch); animation: none; }
}
```

### 03. CSS Typewriter Word Swap Loop

**Type:** Pure CSS
**Description:** A hero headline cycles through swappable highlight words using a single CSS keyframe that animates width and color on a looping overflow-hidden container.

**HTML:**
```html
<div class="tw-03">
  <div class="tw-03__hero">
    <h1 class="tw-03__headline">
      We design
      <span class="tw-03__slot">
        <span class="tw-03__words">
          <span>websites</span>
          <span>products</span>
          <span>systems</span>
          <span>futures</span>
          <span>websites</span>
        </span>
      </span>
    </h1>
    <p class="tw-03__sub">Digital craftsmanship for ambitious brands.</p>
  </div>
</div>
```

**CSS:**
```css
.tw-03, .tw-03 *, .tw-03 *::before, .tw-03 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-03 ::selection { background: #f97316; color: #1a0800; }

.tw-03 {
  --orange: #f97316;
  --amber: #fbbf24;
  --bg: #0c0802;
  --text: #fef3c7;
  --muted: #92400e;
  font-family: 'Georgia', serif;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tw-03__hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.tw-03__headline {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  color: var(--text);
  font-weight: 300;
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  flex-wrap: wrap;
  justify-content: center;
}

.tw-03__slot {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  vertical-align: bottom;
  border-right: 3px solid var(--orange);
  background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(251,191,36,0.08));
  border-radius: 4px;
  padding: 0 6px;
  animation:
    tw-03-width 8s steps(1) infinite,
    tw-03-blink 0.65s steps(2) infinite;
}

.tw-03__words {
  display: flex;
  flex-direction: column;
  animation: tw-03-scroll 8s steps(4) infinite;
}

.tw-03__words span {
  font-style: italic;
  font-weight: 600;
  color: var(--orange);
  flex-shrink: 0;
  height: 1.2em;
  line-height: 1.2;
  white-space: nowrap;
}

.tw-03__sub {
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

@keyframes tw-03-scroll {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-1.2em); }
  50%  { transform: translateY(-2.4em); }
  75%  { transform: translateY(-3.6em); }
  100% { transform: translateY(0); }
}

@keyframes tw-03-width {
  0%,100% { width: 7.5ch; }
  25%     { width: 8ch; }
  50%     { width: 7.5ch; }
  75%     { width: 7.5ch; }
}

@keyframes tw-03-blink {
  0%,100% { border-color: var(--orange); }
  50%     { border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-03__slot { animation: none; border-right-color: var(--orange); }
  .tw-03__words { animation: none; }
}
```

### 04. CSS Typewriter Neon Terminal

**Type:** Pure CSS
**Description:** A glowing neon CRT-style terminal with scanlines, phosphor bloom, and a stepped-width typewriter revealing a command prompt sequence — all in pure CSS.

**HTML:**
```html
<div class="tw-04">
  <div class="tw-04__crt">
    <div class="tw-04__scanlines"></div>
    <div class="tw-04__content">
      <div class="tw-04__header">AXIOM-OS v2.4 // SECURE SHELL</div>
      <div class="tw-04__divider">════════════════════════════════</div>
      <p class="tw-04__line tw-04__line--dim">Last login: Mon Jun  9 04:12:33 UTC 2025</p>
      <p class="tw-04__line tw-04__line--cmd" style="--len:24;--d:0.5s">root@axiom:~$ ls -la /vault</p>
      <p class="tw-04__line tw-04__line--out" style="--d:2.2s">drwxr-x--- 8 root root  4096 vault/</p>
      <p class="tw-04__line tw-04__line--cmd" style="--len:28;--d:3.6s">root@axiom:~$ cat manifest.enc</p>
      <p class="tw-04__line tw-04__line--active" style="--len:18;--d:5.8s">DECRYPTING... ██░░░░</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tw-04, .tw-04 *, .tw-04 *::before, .tw-04 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-04 ::selection { background: #00ff41; color: #000; }

.tw-04 {
  --phosphor: #00ff41;
  --dim: #00882a;
  --bg: #030a03;
  font-family: 'Courier New', monospace;
  background: #000;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.tw-04__crt {
  position: relative;
  width: 100%;
  max-width: 540px;
  border: 2px solid #00441a;
  border-radius: 8px;
  padding: 28px 24px;
  box-shadow:
    0 0 40px rgba(0,255,65,0.12),
    0 0 80px rgba(0,255,65,0.06),
    inset 0 0 60px rgba(0,0,0,0.5);
  overflow: hidden;
}

.tw-04__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.25) 2px,
    rgba(0,0,0,0.25) 4px
  );
  pointer-events: none;
  z-index: 2;
  border-radius: 8px;
}

.tw-04__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tw-04__header {
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
  text-shadow: 0 0 6px var(--dim);
}

.tw-04__divider {
  color: #00441a;
  font-size: 0.75rem;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.tw-04__line {
  font-size: 0.88rem;
  color: var(--phosphor);
  text-shadow: 0 0 8px rgba(0,255,65,0.8), 0 0 20px rgba(0,255,65,0.3);
  white-space: nowrap;
  overflow: hidden;
}

.tw-04__line--dim {
  color: var(--dim);
  text-shadow: 0 0 4px rgba(0,136,42,0.5);
}

.tw-04__line--cmd {
  width: 0;
  animation: tw-04-type steps(var(--len)) var(--d, 0s) forwards;
  animation-duration: calc(var(--len, 24) * 0.06s);
}

.tw-04__line--out {
  opacity: 0;
  animation: tw-04-appear 0.1s var(--d, 0s) forwards;
}

.tw-04__line--active {
  color: #7fff7f;
  width: 0;
  animation: tw-04-type steps(var(--len)) var(--d, 0s) forwards;
  animation-duration: calc(var(--len, 18) * 0.08s);
}

@keyframes tw-04-type {
  from { width: 0; }
  to   { width: calc(var(--len) * 1ch); }
}

@keyframes tw-04-appear {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-04__line--cmd, .tw-04__line--active { width: calc(var(--len, 24) * 1ch); animation: none; }
  .tw-04__line--out { opacity: 1; animation: none; }
}
```

### 05. CSS Typewriter clip-path Reveal

**Type:** Pure CSS
**Description:** Text is revealed character-by-character using an animated clip-path inset that travels left-to-right — giving a hard-edged paint-stroke reveal instead of the usual overflow trick.

**HTML:**
```html
<div class="tw-05">
  <div class="tw-05__stage">
    <div class="tw-05__eyebrow">Award-winning studio</div>
    <h1 class="tw-05__heading">
      <span class="tw-05__line tw-05__line--1">Craft that</span>
      <span class="tw-05__line tw-05__line--2">moves people.</span>
    </h1>
    <div class="tw-05__cursor"></div>
  </div>
</div>
```

**CSS:**
```css
.tw-05, .tw-05 *, .tw-05 *::before, .tw-05 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-05 ::selection { background: #ec4899; color: #1a0010; }

.tw-05 {
  --pink: #ec4899;
  --rose: #fb7185;
  --bg: #0d0008;
  --text: #fdf2f8;
  --muted: #831843;
  font-family: 'Georgia', 'Times New Roman', serif;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.tw-05__stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}

.tw-05__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pink);
  clip-path: inset(0 100% 0 0);
  animation: tw-05-reveal 0.6s steps(1) 0.3s forwards;
}

.tw-05__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tw-05__line {
  display: block;
  position: relative;
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  clip-path: inset(0 100% 0 0);
  overflow: hidden;
}

.tw-05__line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--pink), var(--rose));
  opacity: 0.25;
  clip-path: inset(0 100% 0 0);
}

.tw-05__line--1 {
  animation: tw-05-reveal 0.9s steps(10) 0.8s forwards;
}
.tw-05__line--1::before {
  animation: tw-05-reveal 0.9s steps(10) 0.6s forwards;
}

.tw-05__line--2 {
  animation: tw-05-reveal 1.1s steps(13) 2s forwards;
}
.tw-05__line--2::before {
  animation: tw-05-reveal 1.1s steps(13) 1.8s forwards;
}

.tw-05__cursor {
  width: 3px;
  height: 2.4rem;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
  animation: tw-05-blink 0.8s steps(2) 2.8s infinite;
  opacity: 0;
}

@keyframes tw-05-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

@keyframes tw-05-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-05__eyebrow, .tw-05__line, .tw-05__line::before { clip-path: none; animation: none; }
  .tw-05__cursor { opacity: 1; animation: none; }
}
```

### 06. CSS Typewriter SVG stroke-dashoffset

**Type:** Pure CSS
**Description:** SVG text paths are drawn stroke-first using an animated stroke-dashoffset, revealing each letter as a hand-lettered signature — a technique impossible with HTML alone.

**HTML:**
```html
<div class="tw-06">
  <div class="tw-06__stage">
    <svg class="tw-06__svg" viewBox="0 0 500 160" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="tw-06-grad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%"   stop-color="#818cf8"/>
          <stop offset="100%" stop-color="#c084fc"/>
        </linearGradient>
      </defs>
      <text class="tw-06__word tw-06__word--1"
        x="50%" y="90" text-anchor="middle"
        font-family="Georgia, serif" font-size="72" font-weight="700"
        stroke="url(#tw-06-grad)" stroke-width="2" fill="url(#tw-06-grad)"
        style="--dash:1400">Signature</text>
    </svg>
    <p class="tw-06__caption">SVG stroke-dashoffset draw technique</p>
  </div>
</div>
```

**CSS:**
```css
.tw-06, .tw-06 *, .tw-06 *::before, .tw-06 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-06 ::selection { background: #818cf8; color: #0a0820; }

.tw-06 {
  --indigo: #818cf8;
  --purple: #c084fc;
  --bg: #0a0820;
  font-family: Georgia, serif;
  background: radial-gradient(ellipse at 50% 60%, #12103a 0%, var(--bg) 70%);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.tw-06__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 520px;
}

.tw-06__svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 20px rgba(129,140,248,0.3));
}

.tw-06__word {
  stroke-dasharray: var(--dash, 1400);
  stroke-dashoffset: var(--dash, 1400);
  fill-opacity: 0;
  animation:
    tw-06-draw 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards,
    tw-06-fill 0.5s ease 2.7s forwards;
}

.tw-06__caption {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4338ca;
}

@keyframes tw-06-draw {
  from { stroke-dashoffset: var(--dash, 1400); }
  to   { stroke-dashoffset: 0; }
}

@keyframes tw-06-fill {
  from { fill-opacity: 0; }
  to   { fill-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-06__word { stroke-dashoffset: 0; fill-opacity: 1; animation: none; }
}
```

### 07. CSS Typewriter Gradient Highlight Sweep

**Type:** Pure CSS
**Description:** Text is revealed by a travelling gradient mask that sweeps left-to-right, creating a spotlight-highlight typewriter where unread text sits invisible and highlighted text glows into view.

**HTML:**
```html
<div class="tw-07">
  <div class="tw-07__scene">
    <p class="tw-07__label">INCOMING TRANSMISSION</p>
    <h2 class="tw-07__text" data-text="The future is already here.">The future is already here.</h2>
    <div class="tw-07__bar"></div>
  </div>
</div>
```

**CSS:**
```css
.tw-07, .tw-07 *, .tw-07 *::before, .tw-07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-07 ::selection { background: #06b6d4; color: #00090f; }

.tw-07 {
  --cyan: #06b6d4;
  --blue: #3b82f6;
  --bg: #00090f;
  --dim: #0e2830;
  font-family: 'Courier New', monospace;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.tw-07__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 560px;
}

.tw-07__label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: #0e4a5a;
  animation: tw-07-fadein 0.5s 0.3s both;
}

.tw-07__text {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  position: relative;
  white-space: nowrap;
  color: var(--dim);
}

.tw-07__text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cyan) 48%,
    #ffffff 50%,
    transparent 52%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 140% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tw-07-sweep 2.4s steps(26) 0.8s forwards;
}

.tw-07__bar {
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px var(--cyan);
  animation: tw-07-bar 2.4s steps(26) 0.8s forwards;
  border-radius: 1px;
  align-self: flex-start;
  margin-left: calc(50% - 13ch);
}

@keyframes tw-07-sweep {
  from { background-position: 140% center; }
  to   { background-position: -20% center; }
}

@keyframes tw-07-bar {
  from { width: 0; }
  to   { width: 26ch; }
}

@keyframes tw-07-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-07__text::after { background-position: -20% center; animation: none; }
  .tw-07__bar { width: 26ch; animation: none; }
  .tw-07__label { opacity: 1; animation: none; }
}
```

### 08. CSS Typewriter Variable Font Weight Morph

**Type:** Pure CSS
**Description:** Each character of a variable font headline morphs from ultra-light to black weight as it "types in", using staggered font-variation-settings animations — no width tricks required.

**HTML:**
```html
<div class="tw-08">
  <div class="tw-08__stage">
    <p class="tw-08__pre">Variable font axis animation</p>
    <h1 class="tw-08__word" aria-label="EVOLVE">
      <span style="--i:0">E</span>
      <span style="--i:1">V</span>
      <span style="--i:2">O</span>
      <span style="--i:3">L</span>
      <span style="--i:4">V</span>
      <span style="--i:5">E</span>
    </h1>
    <p class="tw-08__post">font-variation-settings "wght" morph</p>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.tw-08, .tw-08 *, .tw-08 *::before, .tw-08 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-08 ::selection { background: #f59e0b; color: #1a0e00; }

.tw-08 {
  --amber: #f59e0b;
  --gold: #fcd34d;
  --bg: #0d0900;
  font-family: 'Inter', system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 40%, #1a1000 0%, var(--bg) 65%);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tw-08__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tw-08__pre, .tw-08__post {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4a3500;
  animation: tw-08-fadein 0.5s 0.2s both;
}

.tw-08__word {
  display: flex;
  gap: 0.02em;
  font-size: clamp(3rem, 12vw, 7rem);
  line-height: 1;
}

.tw-08__word span {
  display: inline-block;
  opacity: 0;
  font-variation-settings: 'wght' 100;
  color: var(--amber);
  letter-spacing: 0.05em;
  text-shadow: 0 0 0px transparent;
  animation: tw-08-stamp 0.6s cubic-bezier(0.2, 0, 0, 1) calc(var(--i) * 0.12s + 0.5s) both;
}

@keyframes tw-08-stamp {
  0%   { opacity: 0; font-variation-settings: 'wght' 100; letter-spacing: 0.3em; text-shadow: 0 0 0 transparent; }
  60%  { opacity: 1; font-variation-settings: 'wght' 950; letter-spacing: -0.02em; text-shadow: 0 0 30px rgba(245,158,11,0.6); }
  100% { opacity: 1; font-variation-settings: 'wght' 700; letter-spacing: 0.02em; text-shadow: 0 0 8px rgba(245,158,11,0.2); }
}

@keyframes tw-08-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-08__word span {
    opacity: 1;
    font-variation-settings: 'wght' 700;
    letter-spacing: 0.02em;
    animation: none;
  }
}
```

### 09. CSS Typewriter Split Char Stagger

**Type:** Pure CSS
**Description:** Individual characters pop in sequentially using staggered translateY + opacity keyframes, creating a kinetic editorial type-in effect used in modern agency hero sections.

**HTML:**
```html
<div class="tw-09">
  <div class="tw-09__canvas">
    <div class="tw-09__kicker">New collection 2025</div>
    <h1 class="tw-09__headline" aria-label="MOTION">
      <span class="tw-09__char" style="--i:0"><span>M</span></span>
      <span class="tw-09__char" style="--i:1"><span>O</span></span>
      <span class="tw-09__char" style="--i:2"><span>T</span></span>
      <span class="tw-09__char" style="--i:3"><span>I</span></span>
      <span class="tw-09__char" style="--i:4"><span>O</span></span>
      <span class="tw-09__char" style="--i:5"><span>N</span></span>
    </h1>
    <p class="tw-09__sub" aria-label="Design Studio">
      <span class="tw-09__word" style="--i:6"><span>Design</span></span>
      <span class="tw-09__word" style="--i:10"><span>Studio</span></span>
    </p>
  </div>
</div>
```

**CSS:**
```css
.tw-09, .tw-09 *, .tw-09 *::before, .tw-09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-09 ::selection { background: #10b981; color: #001a10; }

.tw-09 {
  --green: #10b981;
  --emerald: #34d399;
  --bg: #020e09;
  --text: #ecfdf5;
  font-family: 'Georgia', serif;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tw-09__canvas {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tw-09__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--green);
  opacity: 0;
  animation: tw-09-fade 0.4s 0.1s both;
}

.tw-09__headline {
  display: flex;
  font-size: clamp(3.5rem, 14vw, 8rem);
  font-weight: 700;
  line-height: 1;
  gap: 0;
  letter-spacing: -0.03em;
}

.tw-09__char {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

.tw-09__char > span,
.tw-09__word > span {
  display: inline-block;
  color: var(--text);
  opacity: 0;
  transform: translateY(0.8em);
  animation: tw-09-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 0.05s + 0.2s) both;
}

.tw-09__sub {
  display: flex;
  gap: 0.5em;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-style: italic;
  color: var(--green);
  overflow: hidden;
}

.tw-09__word {
  display: inline-block;
  overflow: hidden;
}

@keyframes tw-09-up {
  from { opacity: 0; transform: translateY(0.8em); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tw-09-fade {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-09__char > span, .tw-09__word > span { opacity: 1; transform: none; animation: none; }
  .tw-09__kicker { opacity: 1; animation: none; }
}
```

### 10. CSS Typewriter JS Character Injection

**Type:** CSS + JS
**Description:** JavaScript injects characters one by one into the DOM at a configurable speed, enabling proportional fonts, dynamic strings, pause-on-hover, and click-to-restart — all styled with CSS.

**HTML:**
```html
<div class="tw-10">
  <div class="tw-10__card">
    <div class="tw-10__prompt">claude@studio:~$</div>
    <div class="tw-10__output" id="tw-10-output" data-state="typing" aria-live="polite"></div>
    <button class="tw-10__restart" id="tw-10-restart">↺ Restart</button>
  </div>
</div>
```

**CSS:**
```css
.tw-10, .tw-10 *, .tw-10 *::before, .tw-10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-10 ::selection { background: #7c3aed; color: #f5f3ff; }

.tw-10 {
  --violet: #7c3aed;
  --lavender: #a78bfa;
  --bg: #09050f;
  --card: #120e1f;
  --border: #2a1f45;
  font-family: 'Courier New', monospace;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.tw-10__card {
  width: 100%;
  max-width: 500px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 24px 64px rgba(124,58,237,0.15);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tw-10__prompt {
  font-size: 0.8rem;
  color: var(--lavender);
  opacity: 0.6;
}

.tw-10__output {
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  color: #f5f3ff;
  min-height: 2.4em;
  line-height: 1.5;
  position: relative;
}

.tw-10__output::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--lavender);
  vertical-align: middle;
  margin-left: 2px;
  animation: tw-10-blink 0.75s steps(2) infinite;
}

.tw-10__output[data-state="done"]::after {
  background: var(--violet);
  animation-duration: 1.2s;
}

.tw-10__restart {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--lavender);
  font-family: inherit;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.tw-10__restart:hover { border-color: var(--lavender); color: #fff; }

@keyframes tw-10-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-10__output::after { animation: none; opacity: 1; }
}
```

**JS:**
```js
(function() {
  const el = document.getElementById('tw-10-output');
  const btn = document.getElementById('tw-10-restart');
  if (!el) return;

  const strings = [
    'Designing with intention, building with precision.',
    'Every pixel tells a story.',
    'Code is craft. Make it beautiful.'
  ];
  let strIdx = 0, charIdx = 0, timer = null;

  function getDelay(char) {
    if ('.!?'.includes(char)) return 520;
    if (',;:'.includes(char)) return 240;
    return 55 + Math.random() * 30;
  }

  function type() {
    const str = strings[strIdx];
    if (charIdx < str.length) {
      el.textContent += str[charIdx];
      charIdx++;
      timer = setTimeout(type, getDelay(str[charIdx - 1]));
    } else {
      el.dataset.state = 'done';
      timer = setTimeout(() => {
        erase();
      }, 2200);
    }
  }

  function erase() {
    const str = strings[strIdx];
    if (el.textContent.length > 0) {
      el.textContent = el.textContent.slice(0, -1);
      el.dataset.state = 'typing';
      timer = setTimeout(erase, 28);
    } else {
      strIdx = (strIdx + 1) % strings.length;
      charIdx = 0;
      timer = setTimeout(type, 400);
    }
  }

  function restart() {
    clearTimeout(timer);
    el.textContent = '';
    el.dataset.state = 'typing';
    strIdx = 0; charIdx = 0;
    timer = setTimeout(type, 300);
  }

  btn.addEventListener('click', restart);
  restart();
})();
```

### 11. CSS Typewriter Matrix Scramble Decode

**Type:** CSS + JS
**Description:** Random characters scramble across the target string before each letter snaps to its final value — a hacker-movie decode effect powered by JS with CSS glow styling.

**HTML:**
```html
<div class="tw-11">
  <div class="tw-11__screen">
    <div class="tw-11__scan"></div>
    <p class="tw-11__status">DECRYPTING PAYLOAD</p>
    <div class="tw-11__output" id="tw-11-output" aria-label="ACCESS GRANTED" aria-live="off"></div>
    <button class="tw-11__btn" id="tw-11-run">▶ DECODE</button>
  </div>
</div>
```

**CSS:**
```css
.tw-11, .tw-11 *, .tw-11 *::before, .tw-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-11 ::selection { background: #00ff41; color: #000; }

.tw-11 {
  --green: #00ff41;
  --dim: #003d10;
  --bg: #020a03;
  font-family: 'Courier New', monospace;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.tw-11__screen {
  width: 100%;
  max-width: 480px;
  border: 1px solid #0a2a0a;
  border-radius: 8px;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  background: #030c03;
  box-shadow: 0 0 40px rgba(0,255,65,0.08), inset 0 0 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.tw-11__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px, rgba(0,255,65,0.03) 2px, rgba(0,255,65,0.03) 4px
  );
  pointer-events: none;
}

.tw-11__status {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--dim);
}

.tw-11__output {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 10px rgba(0,255,65,0.6);
  letter-spacing: 0.08em;
  min-height: 1.4em;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.tw-11__output .tw-11-char {
  display: inline-block;
  color: var(--dim);
  text-shadow: none;
  transition: color 0.1s, text-shadow 0.1s;
}
.tw-11__output .tw-11-char.locked {
  color: var(--green);
  text-shadow: 0 0 12px rgba(0,255,65,0.8);
}

.tw-11__btn {
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--green);
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tw-11__btn:hover {
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0,255,65,0.2);
}

@media (prefers-reduced-motion: reduce) {
  .tw-11__output .tw-11-char { transition: none; }
}
```

**JS:**
```js
(function() {
  const container = document.getElementById('tw-11-output');
  const btn = document.getElementById('tw-11-run');
  if (!container) return;

  const TARGET = 'ACCESS GRANTED';
  const NOISE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*<>?/|';
  const SCRAMBLE_FRAMES = 10;
  const CHAR_DELAY = 60;

  let intervals = [];

  function rand(str) {
    return str[Math.floor(Math.random() * str.length)];
  }

  function run() {
    intervals.forEach(clearInterval);
    intervals = [];
    container.innerHTML = '';

    const spans = TARGET.split('').map((ch) => {
      const span = document.createElement('span');
      span.className = 'tw-11-char';
      span.textContent = ch === ' ' ? ' ' : rand(NOISE);
      container.appendChild(span);
      return { span, final: ch };
    });

    spans.forEach(({ span, final }, i) => {
      if (final === ' ') { span.textContent = ' '; return; }
      let frames = 0;
      const startDelay = i * CHAR_DELAY;
      setTimeout(() => {
        const iv = setInterval(() => {
          if (frames >= SCRAMBLE_FRAMES) {
            clearInterval(iv);
            span.textContent = final;
            span.classList.add('locked');
          } else {
            span.textContent = rand(NOISE);
            frames++;
          }
        }, 40);
        intervals.push(iv);
      }, startDelay);
    });
  }

  btn.addEventListener('click', run);
  run();
})();
```

### 12. CSS Typewriter Glitch on Type

**Type:** CSS + JS
**Description:** Each character causes a brief glitch distortion on the preceding text as it lands — RGB channel splitting and clip-path slice distortion fire per-keystroke via JS class toggling.

**HTML:**
```html
<div class="tw-12">
  <div class="tw-12__stage">
    <div class="tw-12__chip">SYSTEM BREACH</div>
    <div class="tw-12__wrap">
      <div class="tw-12__text" id="tw-12-text" data-text=""></div>
    </div>
    <div class="tw-12__controls">
      <button id="tw-12-restart" class="tw-12__btn">↺ REINITIALISE</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tw-12, .tw-12 *, .tw-12 *::before, .tw-12 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-12 ::selection { background: #ef4444; color: #1a0000; }

.tw-12 {
  --red: #ef4444;
  --cyan: #22d3ee;
  --bg: #0a0000;
  --text: #f8fafc;
  font-family: 'Courier New', monospace;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tw-12__stage {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tw-12__chip {
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  color: var(--red);
  border: 1px solid rgba(239,68,68,0.3);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
}

.tw-12__wrap {
  position: relative;
  overflow: hidden;
  min-height: 3.5rem;
}

.tw-12__text {
  font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
}

.tw-12__text::before,
.tw-12__text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.tw-12__text.glitching::before {
  opacity: 0.8;
  color: var(--red);
  transform: translateX(-4px);
  clip-path: inset(var(--ct, 20%) 0 var(--cb, 60%) 0);
}

.tw-12__text.glitching::after {
  opacity: 0.8;
  color: var(--cyan);
  transform: translateX(4px);
  clip-path: inset(var(--ct2, 50%) 0 var(--cb2, 30%) 0);
}

.tw-12__controls {
  display: flex;
  gap: 12px;
}

.tw-12__btn {
  background: transparent;
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--red);
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  padding: 7px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color 0.2s;
}
.tw-12__btn:hover { border-color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .tw-12__text.glitching::before,
  .tw-12__text.glitching::after { opacity: 0; }
}
```

**JS:**
```js
(function() {
  const el = document.getElementById('tw-12-text');
  const btn = document.getElementById('tw-12-restart');
  if (!el) return;

  const LINES = [
    'Firewall bypassed.',
    'Injecting payload...',
    'Root access obtained.'
  ];

  let timer = null;
  let lineIdx = 0;
  let charIdx = 0;

  function glitch() {
    const t1 = Math.random() * 40;
    const t2 = t1 + 10 + Math.random() * 20;
    el.style.setProperty('--ct', t1 + '%');
    el.style.setProperty('--cb', (100 - t2) + '%');
    el.style.setProperty('--ct2', (t1 + 30) % 80 + '%');
    el.style.setProperty('--cb2', (100 - t2 - 10) + '%');
    el.classList.add('glitching');
    setTimeout(() => el.classList.remove('glitching'), 80);
  }

  function typeNext() {
    const line = LINES[lineIdx];
    if (charIdx <= line.length) {
      const current = line.slice(0, charIdx);
      el.textContent = current;
      el.dataset.text = current;
      if (charIdx > 0) glitch();
      charIdx++;
      timer = setTimeout(typeNext, 70 + Math.random() * 40);
    } else {
      timer = setTimeout(() => {
        lineIdx = (lineIdx + 1) % LINES.length;
        charIdx = 0;
        timer = setTimeout(typeNext, 300);
      }, 1800);
    }
  }

  function restart() {
    clearTimeout(timer);
    el.textContent = '';
    el.dataset.text = '';
    el.classList.remove('glitching');
    lineIdx = 0; charIdx = 0;
    timer = setTimeout(typeNext, 400);
  }

  btn.addEventListener('click', restart);
  restart();
})();
```

### 13. CSS Typewriter Code Editor Syntax

**Type:** CSS + JS
**Description:** A realistic VS Code-style editor types out syntax-highlighted code line by line, with a live line-number gutter, blinking cursor, and language-aware coloring — all orchestrated by JS.

**HTML:**
```html
<div class="tw-13">
  <div class="tw-13__editor">
    <div class="tw-13__topbar">
      <span class="tw-13__dot tw-13__dot--r"></span>
      <span class="tw-13__dot tw-13__dot--y"></span>
      <span class="tw-13__dot tw-13__dot--g"></span>
      <span class="tw-13__filename">app.ts &nbsp;×</span>
    </div>
    <div class="tw-13__body">
      <div class="tw-13__gutter" id="tw-13-gutter"></div>
      <div class="tw-13__code" id="tw-13-code" aria-label="Typescript code demo" aria-live="polite"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tw-13, .tw-13 *, .tw-13 *::before, .tw-13 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-13 ::selection { background: #264f78; color: #d4d4d4; }

.tw-13 {
  --bg: #1e1e1e;
  --surface: #252526;
  --border: #3e3e42;
  --text: #d4d4d4;
  font-family: 'Courier New', 'Fira Code', monospace;
  background: #111;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.tw-13__editor {
  width: 100%;
  max-width: 540px;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}

.tw-13__topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.tw-13__dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.tw-13__dot--r { background: #ff5f57; }
.tw-13__dot--y { background: #febc2e; }
.tw-13__dot--g { background: #28c840; }

.tw-13__filename {
  margin-left: 8px;
  font-size: 0.78rem;
  color: #9d9d9d;
  font-family: inherit;
}

.tw-13__body {
  display: flex;
  padding: 16px 0;
}

.tw-13__gutter {
  padding: 0 16px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 44px;
  color: #495c73;
  font-size: 0.82rem;
  line-height: 1.7;
  user-select: none;
}

.tw-13__code {
  padding: 0 16px;
  flex: 1;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}

.tw-13__code .ln {
  display: block;
  min-height: 1.7em;
  white-space: pre;
}

.tw-13__code .kw  { color: #569cd6; }
.tw-13__code .fn  { color: #dcdcaa; }
.tw-13__code .str { color: #ce9178; }
.tw-13__code .num { color: #b5cea8; }
.tw-13__code .cm  { color: #6a9955; }
.tw-13__code .tp  { color: #4ec9b0; }
.tw-13__code .op  { color: #d4d4d4; }

.tw-13__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #aeafad;
  vertical-align: middle;
  animation: tw-13-blink 0.9s steps(2) infinite;
}

@keyframes tw-13-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-13__cursor { animation: none; opacity: 1; }
}
```

**JS:**
```js
(function() {
  const codeEl = document.getElementById('tw-13-code');
  const gutterEl = document.getElementById('tw-13-gutter');
  if (!codeEl) return;

  // Pre-tokenised lines (HTML strings)
  const LINES = [
    '<span class="cm">// Typewriter code editor demo</span>',
    '<span class="kw">interface</span> <span class="tp">User</span> {',
    '  id<span class="op">:</span> <span class="tp">number</span>;',
    '  name<span class="op">:</span> <span class="tp">string</span>;',
    '  role<span class="op">:</span> <span class="str">"admin"</span> <span class="op">|</span> <span class="str">"user"</span>;',
    '}',
    '',
    '<span class="kw">async function</span> <span class="fn">fetchUser</span>(id<span class="op">:</span> <span class="tp">number</span>) {',
    '  <span class="kw">const</span> res <span class="op">=</span> <span class="kw">await</span> <span class="fn">fetch</span>(<span class="str">`/api/users/${id}`</span>);',
    '  <span class="kw">return</span> res.<span class="fn">json</span>()<span class="op"> as</span> <span class="tp">User</span>;',
    '}',
  ];

  let lineIdx = 0, timer = null;

  function addGutterLine(n) {
    const span = document.createElement('span');
    span.textContent = n;
    gutterEl.appendChild(span);
  }

  function typeLine(html, lineEl, callback) {
    // Extract plain text length for speed calculation
    const tmp = document.createElement('div');
    tmp.innerHTML = html;
    const plain = tmp.textContent;
    let i = 0;

    // We reveal character-by-character by tracking text position through HTML
    function tick() {
      i++;
      // Slice HTML to show first i plain-text characters
      let visible = 0;
      let result = '';
      let inTag = false;
      for (let ci = 0; ci < html.length; ci++) {
        const ch = html[ci];
        if (ch === '<') { inTag = true; result += ch; continue; }
        if (ch === '>') { inTag = false; result += ch; continue; }
        if (inTag) { result += ch; continue; }
        if (visible < i) { result += ch; visible++; }
        else break;
      }
      // Close any open tags
      lineEl.innerHTML = result + '<span class="tw-13__cursor"></span>';
      if (i <= plain.length) {
        timer = setTimeout(tick, plain[i-1] === ' ' ? 30 : 55 + Math.random() * 20);
      } else {
        lineEl.innerHTML = html;
        callback();
      }
    }
    tick();
  }

  function typeNextLine() {
    if (lineIdx >= LINES.length) return;
    addGutterLine(lineIdx + 1);
    const lineEl = document.createElement('span');
    lineEl.className = 'ln';
    codeEl.appendChild(lineEl);
    const html = LINES[lineIdx];
    lineIdx++;
    typeLine(html, lineEl, () => {
      timer = setTimeout(typeNextLine, 120);
    });
  }

  typeNextLine();
})();
```

### 14. CSS Typewriter Scroll-Triggered Word Reveal

**Type:** CSS + JS
**Description:** Words in a long-form paragraph reveal sequentially only when the element enters the viewport — IntersectionObserver triggers staggered CSS class additions for a scroll-activated typewriter effect.

**HTML:**
```html
<div class="tw-14">
  <article class="tw-14__article">
    <h2 class="tw-14__heading tw-14__reveal">The art of good design.</h2>
    <p class="tw-14__body tw-14__reveal">Good design is not just about how something looks — it is about how it works, how it feels, and how it makes people feel in return. Every decision carries weight.</p>
    <p class="tw-14__body tw-14__reveal">Typography, spacing, colour, motion — each is a tool in the designer's hand. Used well, they create clarity. Used poorly, they create noise. The difference is intention.</p>
    <p class="tw-14__pullquote tw-14__reveal">Design is intelligence made visible.</p>
  </article>
</div>
```

**CSS:**
```css
.tw-14, .tw-14 *, .tw-14 *::before, .tw-14 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tw-14 ::selection { background: #0ea5e9; color: #001a28; }

.tw-14 {
  --blue: #0ea5e9;
  --sky: #38bdf8;
  --bg: #020d17;
  --text: #e0f2fe;
  --muted: #334e5e;
  font-family: 'Georgia', 'Times New Roman', serif;
  min-height: 340px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
}

.tw-14__article {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tw-14__heading {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.tw-14__body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #94a3b8;
}

.tw-14__pullquote {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--sky);
  border-left: 3px solid var(--blue);
  padding-left: 20px;
}

/* Word reveal state machine */
.tw-14__reveal .tw-14-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: min(calc(var(--wi) * 40ms), 900ms);
}

.tw-14__reveal.visible .tw-14-word {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tw-14__reveal .tw-14-word { opacity: 1; transform: none; transition: none; }
}
```

**JS:**
```js
(function() {
  const targets = document.querySelectorAll('.tw-14__reveal');
  if (!targets.length) return;

  // Split text into word spans
  targets.forEach((el) => {
    const words = el.textContent.split(/(s+)/);
    el.innerHTML = words.map((part, i) => {
      if (/^s+$/.test(part)) return part;
      return `<span class="tw-14-word" style="--wi:${i}" aria-hidden="false">${part}</span>`;
    }).join('');
  });

  // Observe each element
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && entry.intersectionRatio > 0) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15 });

  targets.forEach((el) => observer.observe(el));
})();
```

---
## Tools

### Base64 Encoder / Decoder

URL: https://codefronts.com/tools/base64-encoder-decoder/
Description: Encode or decode Base64 — text, JSON, JWTs, and files up to 5 MB. Standard and URL-safe variants with full UTF-8 support and live preview.
Summary: Free online Base64 encoder and decoder. Encode UTF-8 text or files, decode standard or URL-safe Base64, inspect JWTs, and copy ready-to-use data: URIs.

### Colour Contrast Checker

URL: https://codefronts.com/tools/color-contrast-checker/
Description: Check WCAG 2.1 contrast ratios between any two colours — instant AA / AAA pass-fail with a live preview.
Summary: Free online colour contrast checker. Enter foreground and background colours to get the WCAG 2.1 contrast ratio with AA and AAA pass-fail ratings and a live preview.

### Color Format Converter

URL: https://codefronts.com/tools/color-format-converter/
Description: Convert between hex, rgb, hsl, oklch, oklab, hwb, and named colors. Bulk mode — paste a whole stylesheet and convert every color at once with one click.
Summary: Free online color format converter. Convert between hex, rgb, hsl, oklch, oklab, hwb, and named colors. Paste a whole stylesheet and convert every color at once.

### CSS Formatter & Beautifier

URL: https://codefronts.com/tools/css-formatter/
Description: Paste minified or messy CSS and instantly get a cleanly indented, readable version — configurable indent, optional alphabetical sorting, lowercase hex, and live preview.
Summary: Free CSS formatter and beautifier. Paste minified or messy CSS, get cleanly indented output with configurable indent, optional property sorting, live preview.

### CSS-in-JS to CSS Converter

URL: https://codefronts.com/tools/css-in-js-to-css-converter/
Description: Paste a styled-components or emotion block and get plain CSS — handles tagged templates and object syntax, resolves & nesting into real selectors, converts camelCase to kebab-case, and outputs Plain CSS, CSS Modules, or SCSS.
Summary: Free CSS-in-JS to CSS converter. Paste styled-components or emotion styles, get plain CSS, CSS Modules, or SCSS. Resolves & nesting and camelCase props.

### CSS Minifier

URL: https://codefronts.com/tools/css-minifier/
Description: Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.
Summary: Free online CSS minifier. Paste any stylesheet and get a minified output with live size savings. Trims whitespace, comments, leading zeros, hex colours and zero-units.

### CSS Specificity Calculator

URL: https://codefronts.com/tools/css-specificity-calculator/
Description: Paste any CSS selector and get its (a, b, c) specificity score — with a colour-coded breakdown of every ID, class, attribute, pseudo, and element.
Summary: Free online CSS specificity calculator. Paste selectors and get the (a, b, c) score with token-by-token breakdown. Compare selectors, see which wins, copy the result.

### CSS to Tailwind Converter

URL: https://codefronts.com/tools/css-to-tailwind-converter/
Description: Free CSS to Tailwind converter that turns any CSS block into clean Tailwind utility classes — instantly, in your browser, with no signup. Paste raw CSS, hover/focus pseudo-classes, or @media queries and get back Tailwind v3 or v4 utility classes with auto-applied variant prefixes (hover:, focus:, md:, lg:, dark:) and arbitrary-value fallbacks like px-[14px] for anything outside the default scale. Live preview included. Works offline. 100% client-side.
Summary: Free CSS to Tailwind converter. Paste CSS, get v3 + v4 utility classes. Auto-maps :hover, :focus, @media → hover:, focus:, md:. Live preview. No signup.

### CSS Unit Converter

URL: https://codefronts.com/tools/css-unit-converter/
Description: Convert between every CSS unit — px, rem, em, pt, vw, vh, %, cm, in, deg, rad, ms, dpi — with live context controls and copy-on-click.
Summary: Free online CSS unit converter for length, time, angle, and resolution. Convert px, rem, em, pt, vw, vh, %, cm, in, deg, rad, ms, dpi — with live context controls.

### CSS Variable Checker

URL: https://codefronts.com/tools/css-variable-checker/
Description: Paste any :root block and instantly see every --variable as a swatch, chip, or chain — with live filter, type detection, and var() resolution.
Summary: Free online CSS variable checker. Paste any :root or theme block to see every custom property as a colour swatch or typed chip, follow var() chains, and audit tokens.

### HTML Entity Encoder / Decoder

URL: https://codefronts.com/tools/html-entity-encoder/
Description: Encode or decode HTML entities — escape <, >, &, quotes, and special characters with named, decimal, or hex output.
Summary: Free online HTML entity encoder and decoder. Convert <, >, &, quotes, and Unicode symbols to named, decimal, or hex entities — and decode them back instantly.

### HTML to JSX Converter

URL: https://codefronts.com/tools/html-to-jsx-converter/
Description: Paste HTML, get React JSX — converts class to className, for to htmlFor, void elements to self-closing, event handlers to camelCase, and inline styles to object syntax. Handles 50+ attribute conversions and edge cases.
Summary: Free HTML to JSX converter for React. Paste HTML, get JSX with className, htmlFor, self-closed void elements, camelCase events, style objects. 50+ conversions.

### JSON to TypeScript Converter

URL: https://codefronts.com/tools/json-to-typescript-converter/
Description: Paste any JSON and get TypeScript interfaces, Zod schemas, JSON Schema, and Go structs — all four formats from one input, with full inference options.
Summary: Free online JSON to TypeScript converter with Zod, JSON Schema and Go output. Paste JSON and get types, runtime validators and structs instantly. 100% in-browser.

### JSON / YAML / CSV Converter

URL: https://codefronts.com/tools/json-yaml-csv-converter/
Description: Convert between JSON, YAML, and CSV in one tool. All 9 conversions, with options for indent, sort keys, YAML quote style, CSV delimiter, nested-object flattening and more.
Summary: Free JSON ↔ YAML ↔ CSV converter. Paste any format, output any other. Auto-detect, sort keys, custom delimiters, nested flattening. 100% in-browser.

### PX to REM Converter

URL: https://codefronts.com/tools/px-to-rem-converter/
Description: Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.
Summary: Free online px to rem converter. Enter any pixel value and instantly get the REM equivalent based on your root font size. Essential for responsive CSS.

### Responsive Breakpoint Tester

URL: https://codefronts.com/tools/responsive-breakpoint-tester/
Description: Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.
Summary: Free online responsive design tester. Preview any URL across mobile, tablet, and desktop viewports with Tailwind breakpoint detection, rotation, and live zoom.

### SVG to JSX Converter

URL: https://codefronts.com/tools/svg-to-jsx-converter/
Description: Paste any SVG and get a clean React component — auto-renames attributes, swaps hardcoded colors for currentColor or props, wraps in forwardRef with TypeScript and a size prop, and previews the result on light and dark backgrounds.
Summary: Free SVG to JSX converter. Get a React component with attribute renames, color-to-prop swaps, forwardRef + TypeScript, and live preview. 100% in-browser.

### Tailwind Config Theme Builder

URL: https://codefronts.com/tools/tailwind-config-theme-builder/
Description: Pick a primary color, get a complete Tailwind theme — 11-shade color scale, semantic tokens, dark mode variants, and four output formats: Tailwind v3, v4 @theme, plain CSS variables, and shadcn/ui tokens.
Summary: Free Tailwind config theme builder. Pick a primary color, get full theme.extend with 50-950 scale, semantic tokens, dark mode. Output v3, v4 @theme, CSS vars, shadcn/ui.

### Tailwind to CSS Converter

URL: https://codefronts.com/tools/tailwind-to-css-converter/
Description: Paste any Tailwind CSS class string and instantly get equivalent plain CSS — supports variants (hover, focus, md), arbitrary values, and four output formats: plain CSS, custom properties, SCSS, and @apply.
Summary: Free Tailwind to CSS converter. Paste utility classes and get plain CSS, SCSS, custom properties, or @apply. Variants and arbitrary values supported.

### Viewport Unit Calculator

URL: https://codefronts.com/tools/viewport-unit-calculator/
Description: Convert pixels to vw, vh, vmin, vmax — and back — at any viewport size, with device presets and a fluid-typography reference table.
Summary: Free online viewport unit calculator. Convert px to vw, vh, vmin, vmax (and back) at any viewport size. Device presets, fluid typography table, and clamp() patterns.

### XML to JSON Converter

URL: https://codefronts.com/tools/xml-to-json-converter/
Description: Convert XML to JSON in your browser — configurable attribute prefix, namespace handling, force-array tag list, type coercion, CDATA preservation, and a JSON to XML reverse direction. Works on SOAP responses, RSS feeds, sitemaps, and Maven POMs. 100% client-side, no upload.
Summary: Free XML to JSON converter — configurable attribute prefix, namespace handling, force-array, CDATA, type coercion, lossless round-trip. JSON to XML reverse too.

---
## Generators

### CSS Animation Generator

URL: https://codefronts.com/generators/css-animation-generator/
Description: Build CSS @keyframes animations visually — 20+ presets across fade / slide / zoom / bounce / spin / flip / rubber-band / swing, with full timing controls (duration, delay, iteration, easing, direction, fill-mode), animation-composition, prefers-reduced-motion guard, live replay, and export to CSS, SCSS, Tailwind, React, or Vue.
Summary: Free CSS animation generator with 20+ presets (fade, slide, zoom, bounce, spin, flip, rubber-band, swing), full timing controls, prefers-reduced-motion guard, animation-composition, live replay, and one-click export to CSS, SCSS, Tailwind, React, or Vue. No login, no signup, no watermark.

### CSS Aspect Ratio Calculator

URL: https://codefronts.com/generators/css-aspect-ratio-calculator/
Description: Calculate any CSS aspect ratio and visualize it across six device viewports — iPhone, iPad, laptop, desktop, ultrawide, square. 10 presets (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, golden, A4), computed values panel (decimal / inverse / padding-bottom %), legacy padding-bottom fallback, and export to CSS, SCSS, Tailwind, styled-components, or React.
Summary: Free CSS aspect-ratio calculator with 6-device viewport preview. 10 presets — 16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 2:3, golden, A4, 4:5. Computed decimal + simplified ratio + padding-bottom fallback. Export to CSS, SCSS, Tailwind, styled-components, React. No login, no signup.

### CSS Background Pattern Generator

URL: https://codefronts.com/generators/css-background-pattern-generator/
Description: Build CSS-only repeating background patterns visually — dots, stripes, grids, checkerboards, cross-hatch, triangles, zigzag, hexagons, topographic, plus, diamonds — with full color / size / density / rotation / opacity control and themeable CSS variable output.
Summary: Free CSS background pattern generator — 12 patterns, full color + size + density + rotation + opacity control, themeable CSS-variable output. Pure CSS gradients, no SVG, no image assets. No login, no signup, no watermark.

### CSS Border Radius Generator

URL: https://codefronts.com/generators/css-border-radius-generator/
Description: Design CSS border-radius shapes visually — per-corner H/V control for elliptical corners (slash syntax), 12 curated presets (sharp / slight / rounded / pill / circle / 3 blobs / leaf / diamond / ticket / chat), px / % units, 4 preview surfaces, and one-click copy to CSS, SCSS, Tailwind, React, or Vue.
Summary: Free CSS border-radius generator with per-corner H/V control. 12 presets (sharp, rounded, pill, circle, 3 blobs, leaf, diamond, ticket, chat). Elliptical corners via slash syntax. Px / % units. 4 preview surfaces. Exports to CSS, SCSS, Tailwind, React, Vue. No login, no signup, no watermark.

### CSS Box Shadow Generator

URL: https://codefronts.com/generators/css-box-shadow-generator/
Description: Build layered CSS box shadows visually — stack up to 20 shadows in one declaration with per-layer x/y/blur/spread/color/opacity/inset controls, optional hover variant + transition, background-aware preview, and export to CSS, SCSS, Tailwind, React, or Vue.
Summary: Free CSS box shadow generator with multi-layer shadow stacks (up to 20), Material elevation presets, Apple-style soft+sharp, long-shadow, neumorphic dual, smooth-shadow, hover transition variant, background-aware preview, and one-click export to CSS, SCSS, Tailwind, React, or Vue. No login, no signup, no watermark.

### CSS Button Generator

URL: https://codefronts.com/generators/css-button-generator/
Description: Design a complete CSS button — all 6 interactive states (default, hover, active, focus, disabled, loading) in one editor — with live preview on your real page background, WCAG contrast checking, and export to plain CSS, SCSS, Tailwind, React, or Vue.
Summary: Free CSS button generator with all 6 states (hover, focus, disabled, loading), WCAG contrast checker, background-aware preview, and one-click export to CSS, Tailwind, SCSS, React, or Vue. No login, no signup, no watermark.

### CSS Clip-Path Generator

URL: https://codefronts.com/generators/css-clip-path-generator/
Description: Design any CSS clip-path visually — drag polygon vertices, switch between polygon / circle / ellipse / inset modes, 21 presets (triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star5, star6, arrows, chevrons, message, cross, rabbet, notched), and one-click copy.
Summary: Free CSS clip-path generator with drag-to-edit polygon vertices. 21 presets — triangles, hexagons, stars, chevrons, arrows, message bubbles, crosses, notched shapes. Polygon, circle, ellipse, inset modes. Background-aware preview, one-click copy to CSS, SCSS, Tailwind, React, or Vue. No login, no signup, no watermark.

### CSS Color Palette Generator

URL: https://codefronts.com/generators/css-color-palette-generator/
Description: Extract a 3-12 color palette from any image — 100% client-side k-means clustering, no upload, no server. Real WCAG contrast scores (vs white + vs black) on every swatch, click any swatch to copy hex, and export to CSS custom properties, Tailwind config, design tokens (W3C format), SCSS variables, or JS array.
Summary: Free CSS color palette generator. Drop any image → k-means clustering → 3-12 dominant colors with WCAG contrast scores. 100% in-browser, no upload. 4 sample images for trial. Export to CSS variables, Tailwind config, design tokens, SCSS, JS. No login, no signup.

### CSS Cubic Bezier Generator

URL: https://codefronts.com/generators/css-cubic-bezier-generator/
Description: Design CSS cubic-bezier easing curves visually — drag two handles on the SVG plot, see the curve play live as a moving ball, compare against linear / ease / ease-in / ease-in-out simultaneously, 8 curated presets including spring + bounce-out, and export to CSS, SCSS, Tailwind config, or JS animation library.
Summary: Free visual cubic-bezier curve editor. Drag two handles to design CSS easing, see a live moving-ball preview, compare against CSS keywords side-by-side, 8 presets (ease, ease-in, spring, bounce-out, snap, gentle), export to CSS, Tailwind config, SCSS, JS array for Framer Motion / GSAP / anime.js. No login, no signup, no watermark.

### CSS Cursor Generator

URL: https://codefronts.com/generators/css-cursor-generator/
Description: Browse all 36 standard CSS cursor keywords (organized into 6 groups — general, links, selection, drag, resize, zoom) with live-hover preview on each tile. Build custom data-URL cursors from emoji, 2-char text badges, or raw SVG with a visual hotspot picker. Multi-format export to CSS, SCSS, Tailwind, styled-components.
Summary: Free CSS cursor generator. All 36 standard cursor keywords (pointer, grab, zoom-in, ew-resize…) grouped + live-preview-on-hover. Build custom cursors from emoji / text / SVG with hotspot picker. Export CSS, SCSS, Tailwind arbitrary, styled-components. No login, no signup.

### CSS Filter Generator

URL: https://codefronts.com/generators/css-filter-generator/
Description: Build CSS filter chains visually — blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, opacity, and drop-shadow — with live before/after preview, 13 curated presets (vintage, noir, cinematic, pop, dreamy, ghost), and one-click copy.
Summary: Free CSS filter generator with live before/after preview. Tune blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, opacity, drop-shadow. 13 curated presets (vintage, noir, cinematic, pop, faded, ghost). One-click copy. No login, no signup, no watermark.

### CSS Flexbox Generator

URL: https://codefronts.com/generators/css-flexbox-generator/
Description: Build CSS flexbox layouts visually — flex-direction (row / row-reverse / column / column-reverse), flex-wrap (nowrap / wrap / wrap-reverse), justify-content (6 options), align-items (5 options), align-content (6 options), gap, and 1-12 child items with live preview.
Summary: Free CSS flexbox generator with live preview. All container properties — flex-direction, flex-wrap, justify-content, align-items, align-content, gap. 1-12 child items. Export to CSS, SCSS, Tailwind, React, Vue. No login, no signup, no watermark.

### Font Pairing Finder — Curated Heading + Body

URL: https://codefronts.com/generators/css-font-pairing-finder/
Description: Find a working web font pairing in seconds — 8 curated headings (Inter, Playfair Display, Space Grotesk, Fraunces, Archivo, Manrope, Syne, DM Serif Display) each paired with 3-4 hand-picked body fonts. Multi-size live preview across hero / subhead / card title / body / caption, automatic Google Fonts loading, copy-ready CSS / Tailwind / SCSS export.
Summary: Free font pairing finder. 8 curated headings with hand-picked body matches across editorial / tech / friendly / serif vibes. Live preview at 5 sizes. Auto Google Fonts. Export CSS / Tailwind / SCSS. No login, no signup.

### CSS Glassmorphism Generator

URL: https://codefronts.com/generators/css-glassmorphism-generator/
Description: Build frosted-glass surfaces visually — tune blur, tint, saturation, brightness, and border with live preview on 9 vivid surfaces, WCAG contrast scoring, multi-layer refraction, prefers-reduced-transparency fallback, and export to CSS, SCSS, Tailwind, CSS Modules, styled-components, React, or Vue.
Summary: Free CSS glassmorphism generator. Live preview on 9 vivid surfaces, WCAG AA/AAA contrast checker, saturation + brightness controls, multi-layer glass refraction, prefers-reduced-transparency fallback, and one-click export to CSS, Tailwind, SCSS, styled-components, CSS Modules, React, or Vue. No login, no signup, no watermark.

### CSS Gradient Generator

URL: https://codefronts.com/generators/css-gradient-generator/
Description: Design linear, radial, conic, repeating, and mesh CSS gradients with live preview, drag-to-reorder color stops, per-stop alpha, optional animation, background-aware compositing, and export to CSS, SCSS, Tailwind, React, or Vue.
Summary: Free CSS gradient generator — linear, radial, conic, repeating, and mesh gradients with drag-to-reorder stops, per-stop alpha, animated keyframes, background-aware preview, and one-click export to CSS, SCSS, Tailwind, React, or Vue. No login, no signup, no watermark.

### CSS Grid Generator

URL: https://codefronts.com/generators/css-grid-generator/
Description: Build CSS Grid layouts visually — column / row counts (1-8 each), per-axis units (fr / px / % / auto), independent column-gap and row-gap, all alignment properties (justify-items, align-items, justify-content, align-content), live preview, and exports to CSS, SCSS, Tailwind, React, or Vue.
Summary: Free CSS Grid generator with live preview. Build grid-template-columns and grid-template-rows with fr / px / % / auto units. Independent column-gap and row-gap. Full alignment control. Exports to CSS, SCSS, Tailwind, React, Vue. No login, no signup, no watermark.

### CSS Letter Spacing & Line Height Generator

URL: https://codefronts.com/generators/css-letter-spacing-generator/
Description: Tune CSS letter-spacing and line-height visually across 8 elements (h1, h2, h3, body, small, caption, uppercase label, mono) × 8 font stacks (system, geometric, humanist, slab, modern serif, mono, display). Goldilocks side-by-side line-height comparison so your eye picks the right value, not your guesswork. Multi-format export.
Summary: Free CSS letter-spacing and line-height generator. 8 element roles (h1 / h2 / h3 / body / small / caption / uppercase / mono) × 8 font stacks. Goldilocks 3-up line-height comparison. Export CSS, SCSS, Tailwind, styled-components. No login, no signup.

### CSS Loader Generator

URL: https://codefronts.com/generators/css-loader-generator/
Description: Design a complete CSS loader — pick from 8 families (spinner, dots, bars, pulse, skeleton, progress, dual-ring, cube), preview on your real page background, transition through Loading / Success / Error / Idle states, check WCAG contrast, and export to plain CSS, Tailwind, SCSS, React + TS, Vue, Svelte, or Astro.
Summary: Free CSS loader generator with 8 families, 24 presets, multi-state preview, WCAG-aware export (role=status + aria-live + sr-only caption), prefers-reduced-motion fallback, and one-click copy to CSS, Tailwind, SCSS, React, Vue, Svelte, or Astro. No login, no signup, no watermark.

### CSS Outline & Border Generator

URL: https://codefronts.com/generators/css-outline-border-generator/
Description: Build CSS borders, outlines, and gradient borders visually — three modes in one tool with per-side border controls, side-by-side border-vs-outline comparison, gradient-border recipe via mask, and one-click export to CSS, SCSS, Tailwind, styled-components, React, or Vue.
Summary: Free CSS border / outline / gradient-border generator. Per-side border widths, 8 styles (solid, dashed, dotted, double, groove, ridge, inset, outset), outline-offset, gradient borders via linear-gradient + mask. Side-by-side border-vs-outline compare. Exports to CSS, SCSS, Tailwind, styled-components, React, Vue. No login, no signup, no watermark.

### CSS Scrollbar Generator

URL: https://codefronts.com/generators/css-scrollbar-generator/
Description: Generate custom CSS scrollbars visually — width, thumb color, track color, hover state, padding, border-radius. Outputs both modern scrollbar-color and legacy ::-webkit-scrollbar CSS side by side, with a live scrollable preview, 6 curated presets, and one-click copy.
Summary: Free CSS scrollbar generator with live preview. Customize width, thumb / track colors, hover, radius, padding. 6 presets (Minimal, GitHub, macOS, Neon, Thin, Hidden). Outputs both scrollbar-color (Firefox + 2024 Chromium) and ::-webkit-scrollbar (legacy WebKit) syntax side by side. No login, no signup, no watermark.

### CSS Spacing Scale Generator

URL: https://codefronts.com/generators/css-spacing-scale-generator/
Description: Build a modular CSS spacing scale visually — pick a base size and modular ratio (minor 2nd, major 3rd, perfect 4th, augmented 4th √2, perfect 5th, golden), see the cascade as size-proportional rectangles + a numeric token table, customize naming (T-shirt / numeric / step), prefix, and unit (rem / px / em), then export to CSS variables, Tailwind config, W3C design tokens, SCSS map, or a JS object.
Summary: Free CSS spacing scale generator. 8 modular ratios (minor 2nd, major 3rd, perfect 4th, √2, golden), 4-12 steps, T-shirt / numeric / step naming, rem / px / em units. Export to CSS vars, Tailwind config, design tokens, SCSS map, JS object. No login.

### CSS Text Shadow Generator

URL: https://codefronts.com/generators/css-text-shadow-generator/
Description: Stack multi-layer CSS text-shadows visually — 13 curated presets (neon, retro, hard-long, emboss, outline, 3D, fire, pastel, letterpress) with full per-layer x/y/blur/color control, live preview, editable text/font/background, and one-click copy.
Summary: Free CSS text-shadow generator with stacked-layer support. 13 presets — soft, drop, glow, neon (4-layer), retro (3-color), hard-long (6-layer), emboss, outline, 3D, fire, pastel, letterpress. Live preview with editable text + font + background. No login, no signup, no watermark.

### CSS Transform Generator

URL: https://codefronts.com/generators/css-transform-generator/
Description: Stack CSS transforms visually — translate (X / Y / Z), rotate (X / Y / Z), scale (X / Y with lock), skew (X / Y), perspective, and transform-origin (9-position picker). 14 curated presets, ghost-reference overlay, identity-aware output, and export to CSS, SCSS, Tailwind, React, or Vue.
Summary: Free CSS transform generator with live preview. Stack translate / rotate / scale / skew / perspective transforms in 3D space. 14 presets (lift-hover, pop, tilt, flipX / flipY, card3D, isometric). 9-position origin picker. Ghost-reference overlay. Identity values auto-omitted. Export to CSS, SCSS, Tailwind, React, Vue.

### CSS Wave Generator

URL: https://codefronts.com/generators/css-wave-generator/
Description: Design a complete CSS wave — pick from 6 families (sine, compound, bezier, stepped, organic turbulence, hand-drawn), stack 1-4 parallax layers, load from 18 real-world templates (SaaS hero, footer, divider, wellness, agency, 404), animate via @property typed-angle or scroll-timeline, check WCAG contrast on dark/light/mesh backgrounds, and export to 8 formats: SVG, CSS background-image, clip-path, mask-image, Tailwind, React, Vue, Svelte, Astro.
Summary: Free CSS wave generator — 6 wave types, multi-layer parallax, animated, 8 export formats (SVG, clip-path, mask, React, Vue, Tailwind). No watermark.

### Neumorphism Generator

URL: https://codefronts.com/generators/neumorphism-generator/
Description: Design soft-UI neumorphism visually — three depth modes (convex, flat, concave), six palettes including dark mode, multi-component preview (button, card, input, toggle), four interactive states, WCAG contrast checker, and one-click export to plain CSS, SCSS, Tailwind, styled-components, React, or Vue.
Summary: Free neumorphism generator with convex/flat/concave depth, dark mode, multi-component preview, WCAG contrast checker, and export to CSS, Tailwind, SCSS, styled-components, React, or Vue. No signup.