<button class="m3-btn m3-btn-filled state-layer ripple-container">
  Primary Action
</button>

<button class="m3-btn m3-btn-outlined state-layer ripple-container">
  Secondary Action
</button>

<button class="m3-fab m3-fab-md state-layer">
  <span class="material-symbols-rounded">arrow_upward</span>
</button>

/* State layer overlay */
.state-layer:hover::before { opacity: 0.08; }
.ripple-wave { animation: ripple-expand 600ms forwards; }

<button class="m3-btn m3-btn-filled">
  <span class="material-symbols-rounded" style="animation:spin 1s linear infinite">sync</span> Loading
</button>

<button class="m3-icon-btn state-layer">
  <span class="material-symbols-rounded">more_vert</span>
</button>

<div class="m3-segmented flex border rounded-full overflow-hidden">
  <button class="active">System</button>
  <button>Dark</button>
</div>

<div class="w-6 h-6 rounded-full bg-[#bcfa86] cursor-pointer"></div>

<button class="m3-chip active state-layer">All</button>
<button class="m3-chip state-layer">Images</button>

<span class="skill-chip">React.js</span>

<span class="badge-inline">BETA</span>

.brutal-btn {
  border: 4px solid #000; box-shadow: 6px 6px 0px 0px #303629;
}

.brutal-nav { border-bottom: 4px solid #303629; }

.brutal-card {
  border: 4px solid #43483e;
  box-shadow: 8px 8px 0px 0px #303629;
}

.frosted-nav {
  backdrop-filter: blur(16px);
  background: rgba(27,33,20,0.6);
}

<div class="rounded-full bg-surface-highest shadow-xl">...</div>

/* Distance based Kill Zone glow */
.kill-zone.active { box-shadow: 0 0 40px red; }

.docked-left { border-radius: 0 24px 24px 0; }

#sidebar { transition: left 0.3s ease; left: -300px; }
#sidebar.open { left: 0; }

.hero-glow-1 { background: radial-gradient(circle, rgba(188,250,134,0.15) 0%, transparent 70%); }

.avatar { margin-top: -24px; border: 2px solid bg; }

.m3-card-elevated:hover { transform: translateY(-4px); }

.shape-asym-1 { border-radius: 32px 32px 4px 32px; }

grid-template-columns: 1fr 2fr;

.tilt-card:hover { transform: perspective(1000px) rotateX(2deg) rotateY(-4deg); }

<dialog class="backdrop-blur">...</dialog>

border-left: 4px solid var(--primary);

.chat-right { background: var(--primary-container); margin-left: auto; }

display: grid; grid-template-columns: repeat(7, 1fr);

.context-menu { position: absolute; animation: scaleIn 0.2s; }

@keyframes slideUp { from { transform: translateY(100%); } }

.pin-dot { width: 12px; height: 12px; border-radius: 50%; }

<linearGradient id="grad">...</linearGradient>

.blob { filter: blur(60px); opacity: 0.5; }

background-image: radial-gradient(color 2px, transparent 2px);

background-image: linear-gradient(...), linear-gradient(90deg, ...);

repeating-radial-gradient(circle at 0 0, transparent 0, color 20px...)

linear-gradient(135deg, var(--primary-container), var(--tertiary));

.code-keyword { color: #c678dd; }

.cursor { transition: width .2s, height .2s; }
.hovered .cursor { width: 44px; height: 44px; }

.cursor-inverse { mix-blend-mode: difference; }

.cursor::after { transform: rotate(45deg); }

document.addEventListener('click', (e) => { spawnRipple(e.x, e.y); });

@keyframes marquee { to { transform: translateX(-50%); } }

@keyframes float { 50% { transform: translateY(-10px); } }

@keyframes pulse-glow { 50% { opacity: 0.7; transform: scale(1.05); } }

background-size: 400% 400%; animation: gradientAnim 15s ease infinite;

@keyframes astronautFly { 100% { transform: translateX(200px) rotate(360deg); } }

.scroll-trigger.in-view { opacity: 1; transform: translateY(0); }

.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }

.is-dragging { transition: none; filter: drop-shadow(0 0 20px rgba(0,0,0,0.8)); }

transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

el.addEventListener('pointermove', (e) => {
  const dist = Math.sqrt(Math.pow(e.clientX - killX, 2) + ...);
});

const theme = localStorage.getItem('theme');
if(theme === 'dark') document.documentElement.classList.add('dark');

const keys = await caches.keys();
await Promise.all(keys.map(k => caches.delete(k)));

items.forEach(el => {
  el.style.display = el.innerText.toLowerCase().includes(val) ? 'flex' : 'none';
});