From 4ff4f4643ad1d0cdaf22901a16b71962193e8e1a Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Thu, 5 Mar 2026 10:33:51 -0800
Subject: [PATCH] Add Kiro provider support, clean up legacy code and unused
 ZIPs

- Add Kiro transformer and build integration (.kiro/skills/ structure)
- Add Kiro to validation allowlists, API handlers, and homepage badge
- Replace legacy getFilePath in Vercel API with unified skills directory structure
- Remove individual provider ZIP creation (only universal ZIPs needed)
- Simplify bundle API allowlist to universal/universal-prefixed only

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .claude/skills/audit/SKILL.md          |   12 +-
 .claude/skills/critique/SKILL.md       |    2 +-
 api/download/[type]/[provider]/[id].js |   39 +-
 api/download/bundle/[provider].js      |    3 +-
 public/css/styles.css                  | 3921 +-----------------------
 public/index.html                      |    4 +
 scripts/build.js                       |    7 +-
 scripts/lib/transformers/index.js      |    1 +
 scripts/lib/transformers/kiro.js       |   65 +
 scripts/lib/utils.js                   |    5 +
 scripts/lib/zip.js                     |   25 +-
 server/lib/api-handlers.js             |    1 +
 server/lib/validation.js               |    4 +-
 13 files changed, 114 insertions(+), 3975 deletions(-)
 create mode 100644 scripts/lib/transformers/kiro.js

diff --git a/.claude/skills/audit/SKILL.md b/.claude/skills/audit/SKILL.md
index bbfde2da3..e1ae379e2 100644
--- a/.claude/skills/audit/SKILL.md
+++ b/.claude/skills/audit/SKILL.md
@@ -71,7 +71,7 @@ For each issue, document:
 - **Impact**: How it affects users
 - **WCAG/Standard**: Which standard it violates (if applicable)
 - **Recommendation**: How to fix it
-- **Suggested command**: Which command to use (e.g., `/normalize`, `/optimize`, `/harden`)
+- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)
 
 #### Critical Issues
 [Issues that block core functionality or violate WCAG A]
@@ -108,10 +108,12 @@ Create actionable plan:
 
 ### Suggested Commands for Fixes
 
-Map issues to appropriate commands:
-- "Use `/normalize` to align components with design system (addresses 23 theming issues)"
-- "Use `/optimize` to improve performance (addresses 12 performance issues)"
-- "Use `/harden` to improve i18n and text handling (addresses 8 edge cases)"
+Map issues to available commands. Prefer these: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize. You may also suggest other installed skills you're sure exist, but never invent commands.
+
+Examples:
+- "Use `/normalize` to align with design system (addresses N theming issues)"
+- "Use `/optimize` to improve performance (addresses N performance issues)"
+- "Use `/harden` to improve resilience (addresses N edge cases)"
 
 **IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
 
diff --git a/.claude/skills/critique/SKILL.md b/.claude/skills/critique/SKILL.md
index 994bd6d90..7d3aefad4 100644
--- a/.claude/skills/critique/SKILL.md
+++ b/.claude/skills/critique/SKILL.md
@@ -98,7 +98,7 @@ For each issue:
 - **What**: Name the problem clearly
 - **Why it matters**: How this hurts users or undermines goals
 - **Fix**: What to do about it (be concrete)
-- **Command**: Which command to use (`/polish`, `/distill`, `/bolder`, `/quieter`, etc.)
+- **Command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)
 
 ### Minor Observations
 Quick notes on smaller issues worth addressing.
diff --git a/api/download/[type]/[provider]/[id].js b/api/download/[type]/[provider]/[id].js
index 25c284c9c..307ffd047 100644
--- a/api/download/[type]/[provider]/[id].js
+++ b/api/download/[type]/[provider]/[id].js
@@ -6,37 +6,32 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const PROJECT_ROOT = join(__dirname, "../../../..");
 
+const PROVIDER_CONFIG_DIRS = {
+  'cursor': '.cursor',
+  'claude-code': '.claude',
+  'gemini': '.gemini',
+  'codex': '.codex',
+  'agents': '.agents',
+  'kiro': '.kiro',
+};
+
 function getFilePath(type, provider, id) {
   const distDir = join(PROJECT_ROOT, "dist");
 
-  if (type === "skill") {
-    if (provider === "cursor") {
-      return join(distDir, "cursor", ".cursor", "rules", `${id}.md`);
-    } else if (provider === "claude-code") {
-      return join(distDir, "claude-code", ".claude", "skills", id, "SKILL.md");
-    } else if (provider === "gemini") {
-      return join(distDir, "gemini", `GEMINI.${id}.md`);
-    } else if (provider === "codex") {
-      return join(distDir, "codex", `AGENTS.${id}.md`);
-    }
-  } else if (type === "command") {
-    if (provider === "cursor") {
-      return join(distDir, "cursor", ".cursor", "commands", `${id}.md`);
-    } else if (provider === "claude-code") {
-      return join(distDir, "claude-code", ".claude", "commands", `${id}.md`);
-    } else if (provider === "gemini") {
-      return join(distDir, "gemini", ".gemini", "commands", `${id}.toml`);
-    } else if (provider === "codex") {
-      return join(distDir, "codex", ".codex", "prompts", `${id}.md`);
-    }
+  const configDir = PROVIDER_CONFIG_DIRS[provider];
+  if (!configDir) return null;
+
+  if (type === "skill" || type === "command") {
+    return join(distDir, provider, configDir, "skills", id, "SKILL.md");
   }
+
   return null;
 }
 
 const VALID_ID = /^[a-zA-Z0-9_-]+$/;
 const ALLOWED_PROVIDERS = [
-  'cursor', 'claude-code', 'gemini', 'codex', 'agents', 'universal',
-  'cursor-prefixed', 'claude-code-prefixed', 'gemini-prefixed', 'codex-prefixed', 'agents-prefixed', 'universal-prefixed',
+  'cursor', 'claude-code', 'gemini', 'codex', 'agents', 'kiro',
+  'universal', 'universal-prefixed',
 ];
 
 export default function handler(req, res) {
diff --git a/api/download/bundle/[provider].js b/api/download/bundle/[provider].js
index 6e0922d8a..e10dc739a 100644
--- a/api/download/bundle/[provider].js
+++ b/api/download/bundle/[provider].js
@@ -7,8 +7,7 @@ const __dirname = dirname(__filename);
 const PROJECT_ROOT = join(__dirname, "../../..");
 
 const ALLOWED_PROVIDERS = [
-  'cursor', 'claude-code', 'gemini', 'codex', 'agents', 'universal',
-  'cursor-prefixed', 'claude-code-prefixed', 'gemini-prefixed', 'codex-prefixed', 'agents-prefixed', 'universal-prefixed',
+  'universal', 'universal-prefixed',
 ];
 
 export default function handler(req, res) {
diff --git a/public/css/styles.css b/public/css/styles.css
index 35fe43d0d..357364198 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,3921 +1,2 @@
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-.split-container::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background-image: linear-gradient(var(--color-mist) 1px, transparent 1px), linear-gradient(90deg, var(--color-mist) 1px, transparent 1px);
-  background-size: 20px 20px;
-  opacity: 0.3;
-  pointer-events: none;
-}
-.split-container::after {
-  content: '← Drag →';
-  position: absolute;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--color-ash);
-  background: var(--color-paper);
-  padding: 4px 12px;
-  border-radius: 4px;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-  z-index: 10;
-}
-.split-container:hover::after {
-  opacity: 0;
-}
-.split-after .impeccable-card {
-  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
-}
-@keyframes splitEntry {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) skewX(-10deg) scaleY(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) skewX(-10deg) scaleY(1);
-  }
-}
-.split-divider {
-  animation: splitEntry 0.6s var(--ease-out) 0.3s backwards;
-}
-.split-label-item {
-  transition: color var(--duration-fast) var(--ease-out);
-  cursor: default;
-}
-.split-label-item:hover {
-  color: var(--color-text);
-}
-.split-label-item[data-point="after"]:hover .split-label-dot--accent {
-  transform: scale(1.3);
-}
-.split-label-dot {
-  transition: transform var(--duration-fast) var(--ease-spring);
-}
-.split-badge {
-  position: absolute;
-  top: 10px;
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  padding: 3px 8px;
-  border-radius: 3px;
-  z-index: 5;
-  pointer-events: none;
-}
-.split-badge--before {
-  left: 10px;
-  color: var(--color-ash);
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-}
-.split-badge--after {
-  right: 10px;
-  color: var(--color-paper);
-  background: var(--color-accent);
-}
-@media (hover: none) {
-  .split-container::after {
-    content: '← Swipe →';
-  }
-}
-@media (max-width: 600px) {
-  .split-label {
-    font-size: 0.5625rem;
-    padding: 4px 10px;
-  }
-}
-.commands-section {
-  position: relative;
-  padding: var(--spacing-xl) 0;
-  background: var(--color-paper);
-}
-.commands-gallery {
-  display: block;
-}
-.commands-container {
-  display: grid;
-  grid-template-columns: 1fr 1.2fr;
-  gap: var(--spacing-2xl);
-  align-items: start;
-}
-@media (max-width: 900px) {
-  .commands-container {
-    grid-template-columns: 1fr;
-  }
-}
-.command-manual {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  padding-bottom: 20vh;
-}
-.command-category-header {
-  font-family: var(--font-display);
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-accent);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
-  margin-top: var(--spacing-md);
-  border-bottom: 1px solid var(--color-mist);
-}
-.command-category-header:first-child {
-  margin-top: 0;
-}
-.manual-entry {
-  position: relative;
-  padding: var(--spacing-lg);
-  padding-left: calc(var(--spacing-lg) + 16px);
-  border-left: 2px solid var(--color-mist);
-  transition: border-color 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
-  opacity: 0.4;
-  cursor: pointer;
-  transform: translateX(-16px);
-}
-.manual-entry:hover {
-  opacity: 0.7;
-}
-.manual-entry.active {
-  border-left-color: var(--color-accent);
-  opacity: 1;
-  transform: translateX(0);
-  background: linear-gradient(to right, var(--color-bg), transparent);
-}
-.manual-cmd-name {
-  font-family: var(--font-mono);
-  font-size: 1.5rem;
-  margin: 0 0 var(--spacing-sm);
-  color: var(--color-ink);
-  font-weight: 500;
-}
-.manual-cmd-desc {
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--color-charcoal);
-  margin: 0;
-}
-.manual-cmd-rel {
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-  margin-top: var(--spacing-sm);
-  display: flex;
-  align-items: center;
-  gap: 0.5ch;
-  flex-wrap: wrap;
-}
-.manual-cmd-rel .rel-icon {
-  color: var(--color-accent);
-  font-weight: 600;
-}
-.manual-cmd-rel code {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  background: var(--color-mist);
-  padding: 2px 6px;
-  border-radius: 3px;
-  color: var(--color-ink);
-}
-.glass-terminal-wrapper {
-  position: sticky;
-  top: var(--spacing-xl);
-  height: calc(100vh - var(--spacing-xl) * 2);
-  max-height: 800px;
-  min-height: 500px;
-}
-.terminal-stack {
-  position: relative;
-  height: 100%;
-  perspective: 1200px;
-}
-.terminal-stack-tabs {
-  position: absolute;
-  top: -31px;
-  right: 8px;
-  display: flex;
-  gap: 4px;
-  z-index: 10;
-}
-.terminal-stack-tab {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  padding: 5px 12px;
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  border-bottom: none;
-  border-radius: 6px 6px 0 0;
-  color: var(--color-ash);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.terminal-stack-tab:hover {
-  background: var(--color-paper);
-  color: var(--color-charcoal);
-}
-.terminal-stack-tab.active {
-  background: var(--color-paper);
-  color: var(--color-ink);
-  border-color: var(--color-mist);
-}
-.terminal-window {
-  position: absolute;
-  inset: 0;
-  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, filter 0.3s ease;
-  transform-origin: center bottom;
-}
-.terminal-window--demo {
-  z-index: 2;
-}
-.terminal-window--demo.is-back {
-  transform: translateY(16px) translateX(12px) scale(0.96);
-  opacity: 0.6;
-  filter: brightness(0.92);
-  pointer-events: none;
-  z-index: 1;
-}
-.terminal-window--source {
-  z-index: 1;
-  transform: translateY(16px) translateX(12px) scale(0.96);
-  opacity: 0.6;
-  filter: brightness(0.92);
-  pointer-events: none;
-}
-.terminal-window--source.is-front {
-  transform: translateY(0) translateX(0) scale(1);
-  opacity: 1;
-  filter: brightness(1);
-  pointer-events: auto;
-  z-index: 2;
-}
-.source-window {
-  background: var(--color-paper);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--color-mist);
-  border-radius: 8px;
-  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.source-header {
-  background: var(--color-cream);
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-bottom: 1px solid var(--color-mist);
-  flex-shrink: 0;
-}
-.source-title {
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  color: var(--color-ink);
-  font-weight: 500;
-}
-.source-body {
-  flex: 1;
-  padding: var(--spacing-md);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  line-height: 1.5;
-  color: var(--color-charcoal);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  white-space: pre-wrap;
-  word-break: break-word;
-  background: var(--color-cream);
-}
-.source-loading {
-  color: var(--color-ash);
-  font-style: italic;
-}
-@media (max-width: 900px) {
-  .glass-terminal-wrapper {
-    display: none;
-  }
-}
-.glass-terminal {
-  background: var(--color-paper);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--color-mist);
-  border-radius: 8px;
-  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.terminal-header {
-  background: var(--color-cream);
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-bottom: 1px solid var(--color-mist);
-}
-.terminal-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-.terminal-dot.red {
-  background: #ff5f56;
-}
-.terminal-dot.yellow {
-  background: #ffbd2e;
-}
-.terminal-dot.green {
-  background: #27c93f;
-}
-.terminal-title {
-  margin-left: auto;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--color-ash);
-}
-.terminal-body {
-  flex: 1;
-  padding: var(--spacing-md);
-  font-family: var(--font-mono);
-  font-size: 0.9375rem;
-  color: var(--color-ink);
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-.terminal-line {
-  margin-bottom: var(--spacing-sm);
-  display: flex;
-  gap: var(--spacing-sm);
-  line-height: 1.5;
-}
-.terminal-prompt {
-  color: var(--color-accent);
-  user-select: none;
-  font-weight: bold;
-}
-.terminal-cursor {
-  display: inline-block;
-  width: 8px;
-  height: 1.2em;
-  background: var(--color-accent);
-  vertical-align: middle;
-  animation: blink 1s step-end infinite;
-}
-.terminal-output {
-  color: var(--color-ash);
-  margin-bottom: var(--spacing-md);
-  white-space: pre-wrap;
-}
-@media (max-height: 800px) {
-  .terminal-output {
-    display: none;
-  }
-}
-.terminal-cmd {
-  color: var(--color-accent);
-  font-weight: 600;
-}
-.terminal-step {
-  color: var(--color-charcoal);
-}
-.terminal-done {
-  color: var(--color-success, #22c55e);
-  font-weight: 500;
-}
-.terminal-preview {
-  background: var(--color-paper);
-  margin: var(--spacing-sm) 0;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  border-radius: 12px;
-}
-.terminal-cursor-line {
-  flex-shrink: 0;
-  margin-top: var(--spacing-sm) !important;
-}
-.terminal-preview .demo-split-comparison {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.terminal-preview .demo-split-comparison .split-container {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  cursor: ew-resize;
-  user-select: none;
-  background: var(--color-cream);
-}
-.terminal-preview .demo-split-comparison .split-before, .terminal-preview .demo-split-comparison .split-after {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-md);
-}
-.terminal-preview .demo-split-comparison .split-before {
-  z-index: 1;
-  background: var(--color-cream);
-}
-.terminal-preview .demo-split-comparison .split-after {
-  z-index: 2;
-  background: var(--color-paper);
-  clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
-}
-.terminal-preview .demo-split-comparison .split-content {
-  width: 100%;
-  max-width: 280px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.terminal-preview .demo-split-comparison .split-divider {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  width: 2px;
-  background: var(--color-accent);
-  transform: translateX(-50%) skewX(-10deg);
-  pointer-events: none;
-  z-index: 3;
-  box-shadow: 0 0 12px rgba(0,0,0,0.1);
-}
-.terminal-preview .demo-split-comparison .split-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) skewX(10deg);
-  font-size: 0.5625rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-paper);
-  background: var(--color-accent);
-  padding: 4px 10px;
-  border-radius: 3px;
-  white-space: nowrap;
-}
-.terminal-preview .demo-split-comparison .demo-caption {
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  color: var(--color-ash);
-  text-align: center;
-  padding: var(--spacing-sm) var(--spacing-md);
-}
-@keyframes blink {
-  50% {
-    opacity: 0;
-  }
-}
-.casestudies-section {
-  position: relative;
-  padding: var(--spacing-2xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.transformations-tabbed {
-  margin-top: var(--spacing-xl);
-}
-.transformation-tabs {
-  display: flex;
-  gap: var(--spacing-xs);
-  border-bottom: 1px solid var(--color-mist);
-  margin-bottom: var(--spacing-lg);
-}
-.transformation-tab {
-  font-family: var(--font-display);
-  font-size: 0.9375rem;
-  font-weight: 500;
-  color: var(--color-ash);
-  background: none;
-  border: none;
-  padding: var(--spacing-sm) var(--spacing-md);
-  cursor: pointer;
-  position: relative;
-  transition: color 0.2s ease;
-}
-.transformation-tab:hover {
-  color: var(--color-charcoal);
-}
-.transformation-tab.active {
-  color: var(--color-ink);
-}
-.transformation-tab.active::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--color-accent);
-}
-.transformation-panels {
-  position: relative;
-}
-.transformation-panel {
-  display: none;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  animation: fadeInPanel 0.3s ease;
-}
-.transformation-panel.active {
-  display: flex;
-}
-@keyframes fadeInPanel {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.transformation-images {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.transformation-before, .transformation-after {
-  flex: 1;
-  margin: 0;
-}
-.transformation-before img, .transformation-after img, .transformation-placeholder {
-  width: 100%;
-  aspect-ratio: 16 / 10;
-  object-fit: cover;
-  border-radius: 8px;
-  border: 1px solid var(--color-mist);
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-.transformation-before img:hover, .transformation-after img:hover, .transformation-placeholder:hover {
-  transform: scale(1.02);
-  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.15);
-}
-.transformation-placeholder {
-  background: linear-gradient(135deg, var(--color-mist) 0%, var(--color-cream) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-ash);
-  font-size: 0.8125rem;
-  font-style: italic;
-}
-.transformation-before figcaption, .transformation-after figcaption {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-ash);
-  margin-top: var(--spacing-xs);
-  text-align: center;
-}
-.transformation-arrow {
-  font-size: 1.5rem;
-  color: var(--color-accent);
-  font-weight: 300;
-  flex-shrink: 0;
-}
-.transformation-info {
-  max-width: 600px;
-}
-.transformation-title {
-  font-family: var(--font-display);
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-ink);
-  margin: 0 0 var(--spacing-xs);
-}
-.transformation-desc {
-  font-size: 0.9375rem;
-  color: var(--color-charcoal);
-  line-height: 1.6;
-  margin: 0 0 var(--spacing-sm);
-}
-.transformation-commands {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.transformation-command {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  background: var(--color-mist);
-  color: var(--color-charcoal);
-  padding: 4px 10px;
-  border-radius: 4px;
-}
-.lightbox {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-.lightbox.active {
-  opacity: 1;
-  visibility: visible;
-}
-.lightbox-close {
-  position: absolute;
-  top: 20px;
-  right: 24px;
-  background: none;
-  border: none;
-  color: white;
-  font-size: 2.5rem;
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-  line-height: 1;
-}
-.lightbox-close:hover {
-  opacity: 1;
-}
-.lightbox-image {
-  max-width: 90vw;
-  max-height: 85vh;
-  object-fit: contain;
-  border-radius: 8px;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
-}
-@media (max-width: 768px) {
-  .transformation-images {
-    flex-direction: column;
-  }
-  .transformation-arrow {
-    transform: rotate(90deg);
-  }
-  .transformation-before, .transformation-after {
-    width: 100%;
-  }
-}
-.hero-version-link {
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-  margin-top: var(--spacing-sm);
-}
-.hero-version-link a {
-  color: var(--color-ash);
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: color 0.2s ease, border-color 0.2s ease;
-}
-.hero-version-link a:hover {
-  color: var(--color-accent);
-  border-bottom-color: var(--color-accent);
-}
-.changelog-section {
-  position: relative;
-  padding: var(--spacing-xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.changelog-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-.changelog-entry {
-  padding: var(--spacing-md) 0;
-  border-bottom: 1px solid var(--color-mist);
-}
-.changelog-entry:first-child {
-  border-top: 1px solid var(--color-mist);
-}
-.changelog-version-header {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-sm);
-}
-.changelog-version {
-  font-family: var(--font-mono);
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-ink);
-}
-.changelog-date {
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-}
-.changelog-items {
-  margin: 0;
-  padding-left: var(--spacing-md);
-  color: var(--color-charcoal);
-  line-height: 1.7;
-}
-.changelog-items li {
-  margin-bottom: var(--spacing-xs);
-}
-.changelog-items code {
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  background: var(--color-mist);
-  padding: 2px 6px;
-  border-radius: 3px;
-  color: var(--color-ink);
-}
-.faq-section {
-  position: relative;
-  padding: var(--spacing-xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.faq-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-.faq-item {
-  border-bottom: 1px solid var(--color-mist);
-}
-.faq-item:first-child {
-  border-top: 1px solid var(--color-mist);
-}
-.faq-question {
-  font-family: var(--font-display);
-  font-size: 1.125rem;
-  font-weight: 500;
-  color: var(--color-ink);
-  padding: var(--spacing-md) 0;
-  cursor: pointer;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  transition: color 0.2s ease;
-}
-.faq-question::-webkit-details-marker {
-  display: none;
-}
-.faq-question::after {
-  content: '+';
-  font-family: var(--font-body);
-  font-size: 1.5rem;
-  font-weight: 300;
-  color: var(--color-accent);
-  transition: transform 0.3s var(--ease-out);
-}
-.faq-item[open] .faq-question::after {
-  transform: rotate(45deg);
-}
-.faq-question:hover {
-  color: var(--color-accent);
-}
-.faq-answer {
-  padding: 0 0 var(--spacing-md);
-  color: var(--color-charcoal);
-  line-height: 1.7;
-  animation: faqFadeIn 0.3s var(--ease-out);
-}
-.faq-answer p {
-  margin: 0 0 var(--spacing-sm);
-}
-.faq-answer p:last-child {
-  margin-bottom: 0;
-}
-.faq-answer ul {
-  margin: var(--spacing-sm) 0;
-  padding-left: var(--spacing-md);
-}
-.faq-answer li {
-  margin-bottom: var(--spacing-xs);
-}
-.faq-answer code {
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  background: var(--color-mist);
-  padding: 2px 6px;
-  border-radius: 3px;
-  color: var(--color-ink);
-}
-.faq-answer a {
-  color: var(--color-accent);
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: border-color 0.2s ease;
-}
-.faq-answer a:hover {
-  border-bottom-color: var(--color-accent);
-}
-@keyframes faqFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.skills-section {
-  position: relative;
-  padding: var(--spacing-xl) 0;
-  overflow: hidden;
-  background: var(--color-bg);
-}
-.skills-gallery {
-  display: block;
-  position: relative;
-}
-.gallery-track {
-  display: flex;
-  gap: var(--spacing-lg);
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  cursor: grab;
-}
-.gallery-track:active {
-  cursor: grabbing;
-}
-.gallery-track::-webkit-scrollbar {
-  display: none;
-}
-.gallery-frame {
-  flex: 0 0 80vw;
-  max-width: 1100px;
-  scroll-snap-align: center;
-  position: relative;
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 20px 50px -10px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
-  overflow: hidden;
-  opacity: 0.4;
-  transform: scale(0.95);
-  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
-}
-.gallery-frame.active {
-  opacity: 1;
-  transform: scale(1);
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 40px 100px -20px rgba(0, 0, 0, 0.2);
-  border-color: var(--color-charcoal);
-  border-width: 1px;
-}
-.gallery-content {
-  display: grid;
-  grid-template-columns: 1.2fr 1fr;
-  height: 600px;
-}
-@media (max-width: 900px) {
-  .gallery-frame {
-    flex: 0 0 90vw;
-  }
-  .gallery-content {
-    grid-template-columns: 1fr;
-    height: auto;
-    min-height: 600px;
-  }
-}
-.gallery-visual {
-  background: var(--color-cream);
-  border-right: 1px solid var(--color-mist);
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-lg);
-}
-.gallery-info {
-  padding: var(--spacing-xl);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-}
-.gallery-header {
-  margin-bottom: var(--spacing-lg);
-}
-.gallery-title {
-  font-family: var(--font-display);
-  font-size: 2.5rem;
-  font-style: italic;
-  margin: 0 0 var(--spacing-xs);
-  color: var(--color-ink);
-}
-.gallery-meta {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--color-ash);
-}
-.gallery-desc {
-  font-size: 1.125rem;
-  line-height: 1.6;
-  color: var(--color-charcoal);
-  margin-bottom: var(--spacing-xl);
-  max-width: 45ch;
-}
-.gallery-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
-  margin-top: auto;
-}
-.gallery-tag {
-  padding: 6px 12px;
-  border: 1px solid var(--color-mist);
-  border-radius: 4px;
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-}
-.gallery-map {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  margin-top: var(--spacing-lg);
-}
-.gallery-dot {
-  width: 40px;
-  height: 2px;
-  background: var(--color-mist);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  position: relative;
-  border: none;
-  padding: 0;
-  font: inherit;
-}
-.gallery-dot::after {
-  content: '';
-  position: absolute;
-  top: -10px;
-  bottom: -10px;
-  left: 0;
-  right: 0;
-}
-.gallery-dot:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 4px;
-  border-radius: 1px;
-}
-.gallery-dot.active {
-  background: var(--color-accent);
-  height: 4px;
-}
-.demo-tabbed-container {
-  display: flex;
-  flex-direction: column;
-}
-.demo-tabs {
-  display: flex;
-  gap: 0;
-  margin-bottom: 0;
-  justify-content: center;
-  background: var(--color-paper);
-  border-bottom: 1px solid var(--color-mist);
-}
-.demo-tab {
-  padding: var(--spacing-sm) var(--spacing-lg);
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--color-ash);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-.demo-tab:hover {
-  color: var(--color-text);
-  background: var(--color-cream);
-}
-.demo-tab.active {
-  color: var(--color-accent);
-  border-bottom-color: var(--color-accent);
-  background: var(--color-accent-dim);
-}
-.demo-panels {
-  flex: 1;
-}
-.demo-panel {
-  display: none;
-}
-.demo-panel.active {
-  display: block;
-  animation: fadeSlideIn 0.3s var(--ease-out);
-}
-@keyframes fadeSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.demo-container {
-  background: var(--color-paper);
-  border: none;
-  border-radius: 0;
-  overflow: hidden;
-}
-.demo-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-sm) var(--spacing-md);
-  background: var(--color-paper);
-  border-bottom: 1px solid var(--color-mist);
-  min-height: 48px;
-}
-.demo-toggle {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.demo-toggle-label {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-ash);
-  transition: color var(--duration-fast) var(--ease-out);
-  cursor: pointer;
-}
-.demo-toggle-label:hover {
-  color: var(--color-text);
-}
-.demo-toggle-label.active {
-  color: var(--color-accent);
-}
-.demo-toggle-switch {
-  position: relative;
-  width: 44px;
-  height: 24px;
-  background: var(--color-mist);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: background var(--duration-fast) var(--ease-out);
-  border: 1px solid transparent;
-  padding: 0;
-  font: inherit;
-}
-.demo-toggle-switch:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-.demo-toggle-switch:hover {
-  border-color: var(--color-ash);
-}
-.demo-toggle-switch::after {
-  content: '';
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 16px;
-  height: 16px;
-  background: var(--color-paper);
-  border-radius: 50%;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
-  transition: transform var(--duration-base) var(--ease-spring);
-}
-.demo-toggle-switch.active {
-  background: var(--color-accent);
-}
-.demo-toggle-switch.active::after {
-  transform: translateX(20px);
-}
-.demo-viewport {
-  padding: var(--spacing-xl);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 280px;
-  background: var(--color-cream);
-  transition: background var(--duration-base) var(--ease-out);
-}
-.demo-viewport[data-state="after"] {
-  background: var(--color-paper);
-}
-.demo-caption {
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  letter-spacing: 0.03em;
-  color: var(--color-ash);
-  background: var(--color-paper);
-  text-align: center;
-}
-.uxw-demo {
-  width: 100%;
-  max-width: 320px;
-  padding: var(--spacing-lg);
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  border-radius: 6px;
-  text-align: center;
-}
-.uxw-error-icon {
-  font-size: 2rem;
-  margin-bottom: var(--spacing-sm);
-}
-.uxw-error-title {
-  font-weight: 600;
-  color: #c00;
-  margin-bottom: var(--spacing-xs);
-}
-.uxw-error-text {
-  font-size: 0.875rem;
-  color: var(--color-ash);
-}
-.uxw-error-action {
-  margin-top: var(--spacing-sm);
-  font-size: 0.875rem;
-  color: var(--color-accent);
-  cursor: pointer;
-  text-decoration: underline;
-}
-.uxw-error-after .uxw-error-icon {
-  color: var(--color-accent);
-}
-.uxw-error-after .uxw-error-title {
-  color: var(--color-text);
-}
-.uxw-error-after .uxw-error-text {
-  color: var(--color-charcoal);
-}
-.uxw-button-context {
-  font-size: 0.875rem;
-  color: var(--color-charcoal);
-  margin-bottom: var(--spacing-md);
-  font-weight: 500;
-}
-.uxw-button-row {
-  display: flex;
-  gap: var(--spacing-sm);
-  justify-content: center;
-}
-.uxw-btn {
-  padding: var(--spacing-xs) var(--spacing-md);
-  border-radius: 4px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-}
-.uxw-btn-primary {
-  background: var(--color-text);
-  color: var(--color-paper);
-}
-.uxw-btn-secondary {
-  background: transparent;
-  color: var(--color-ash);
-  border: 1px solid var(--color-mist);
-}
-.uxw-btn-danger {
-  background: #c00;
-  color: white;
-}
-.uxw-empty-icon {
-  font-size: 2.5rem;
-  margin-bottom: var(--spacing-sm);
-  opacity: 0.4;
-}
-.uxw-empty-title {
-  font-weight: 500;
-  color: var(--color-ash);
-}
-.uxw-empty-text {
-  font-size: 0.875rem;
-  color: var(--color-charcoal);
-  margin-top: var(--spacing-xs);
-}
-.uxw-empty-action {
-  margin-top: var(--spacing-md);
-}
-.uxw-empty-after .uxw-empty-icon {
-  opacity: 1;
-}
-.uxw-empty-after .uxw-empty-title {
-  color: var(--color-text);
-}
-.spatial-demo {
-  width: 100%;
-  max-width: 340px;
-  padding: var(--spacing-md);
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  border-radius: 6px;
-}
-.spatial-grid-before {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.spatial-grid-after {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-sm);
-}
-.spatial-card-item {
-  padding: var(--spacing-sm);
-  background: var(--color-bg);
-  border: 1px solid var(--color-mist);
-  border-radius: 4px;
-  font-size: 0.8125rem;
-  color: var(--color-charcoal);
-  text-align: center;
-}
-.spatial-grid-after .spatial-card-item {
-  width: auto !important;
-}
-.spatial-hierarchy-before .spatial-h-title, .spatial-hierarchy-before .spatial-h-subtitle, .spatial-hierarchy-before .spatial-h-cta, .spatial-hierarchy-before .spatial-h-link {
-  font-size: 0.9375rem;
-  margin-bottom: var(--spacing-xs);
-  color: var(--color-charcoal);
-}
-.spatial-hierarchy-after .spatial-h-title {
-  font-family: var(--font-display);
-  font-size: 1.75rem;
-  font-weight: 300;
-  font-style: italic;
-  margin-bottom: var(--spacing-xs);
-  color: var(--color-text);
-}
-.spatial-hierarchy-after .spatial-h-subtitle {
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--color-ash);
-  margin-bottom: var(--spacing-md);
-}
-.spatial-hierarchy-after .spatial-h-cta {
-  display: inline-block;
-  padding: var(--spacing-sm) var(--spacing-lg);
-  background: var(--color-text);
-  color: var(--color-paper);
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 4px;
-  margin-bottom: var(--spacing-sm);
-}
-.spatial-hierarchy-after .spatial-h-link {
-  font-size: 0.75rem;
-  color: var(--color-ash);
-}
-.spatial-whitespace-before {
-  padding: var(--spacing-xs) !important;
-}
-.spatial-whitespace-before .spatial-ws-title {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-.spatial-whitespace-before .spatial-ws-price {
-  font-size: 0.875rem;
-  color: var(--color-ash);
-  margin-bottom: 4px;
-}
-.spatial-whitespace-before .spatial-ws-features {
-  font-size: 0.75rem;
-  color: var(--color-ash);
-  margin-bottom: 6px;
-}
-.spatial-whitespace-before .spatial-ws-btn {
-  width: 100%;
-  padding: 6px;
-  font-size: 0.75rem;
-  background: var(--color-text);
-  color: var(--color-paper);
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-}
-.spatial-whitespace-after {
-  padding: var(--spacing-lg) !important;
-}
-.spatial-whitespace-after .spatial-ws-title {
-  font-family: var(--font-display);
-  font-size: 1.5rem;
-  font-weight: 400;
-  margin-bottom: var(--spacing-sm);
-}
-.spatial-whitespace-after .spatial-ws-price {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: var(--spacing-sm);
-}
-.spatial-whitespace-after .spatial-ws-features {
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-  margin-bottom: var(--spacing-lg);
-  line-height: 1.6;
-}
-.spatial-whitespace-after .spatial-ws-btn {
-  width: 100%;
-  padding: var(--spacing-sm);
-  font-size: 0.875rem;
-  background: var(--color-text);
-  color: var(--color-paper);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-}
-.motion-demo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-sm);
-  width: 100%;
-  max-width: 280px;
-}
-.motion-stagger-demo {
-  align-items: stretch;
-}
-.motion-list-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-sm) var(--spacing-md);
-  background: var(--color-bg);
-  border: 1px solid var(--color-mist);
-  border-radius: 4px;
-  font-size: 0.875rem;
-  color: var(--color-charcoal);
-}
-.motion-dot {
-  width: 8px;
-  height: 8px;
-  background: var(--color-accent);
-  border-radius: 50%;
-}
-.demo-viewport[data-state="after"] .motion-list-item {
-  opacity: 0;
-  transform: translateY(12px);
-  animation: staggerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(1) {
-  animation-delay: 0s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(2) {
-  animation-delay: 0.05s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(3) {
-  animation-delay: 0.1s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(4) {
-  animation-delay: 0.15s;
-}
-@keyframes staggerIn {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.motion-btn {
-  padding: 12px 24px;
-  font-size: 0.9375rem;
-  font-weight: 500;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.motion-btn-before {
-  background: var(--color-charcoal);
-  color: var(--color-paper);
-}
-.motion-btn-after {
-  background: var(--color-text);
-  color: var(--color-paper);
-  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
-}
-.motion-btn-after:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-.motion-btn-after:active {
-  transform: translateY(0) scale(0.98);
-}
-.motion-card {
-  padding: var(--spacing-md);
-  background: var(--color-bg);
-  border: 1px solid var(--color-mist);
-  border-radius: 6px;
-  text-align: center;
-  min-width: 140px;
-}
-.motion-card-icon {
-  font-size: 1.5rem;
-  margin-bottom: var(--spacing-xs);
-}
-.motion-card-text {
-  font-size: 0.8125rem;
-  color: var(--color-charcoal);
-}
-.motion-card-after {
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.demo-viewport[data-state="after"] .motion-card-after {
-  background: var(--color-accent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper));
-  }
-  border-color: var(--color-accent);
-}
-.demo-viewport[data-state="after"] .motion-card-after .motion-card-icon {
-  animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-@keyframes checkPop {
-  50% {
-    transform: scale(1.3);
-  }
-}
-.typo-demo {
-  width: 100%;
-  max-width: 320px;
-  text-align: left;
-}
-.typo-pairing-before {
-  font-family: 'Inter', system-ui, sans-serif;
-}
-.typo-pairing-before .typo-heading {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: var(--spacing-xs);
-}
-.typo-pairing-before .typo-body {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: var(--color-ash);
-}
-.typo-pairing-after .typo-heading {
-  font-family: var(--font-display);
-  font-size: 2rem;
-  font-weight: 300;
-  font-style: italic;
-  letter-spacing: -0.02em;
-  margin-bottom: var(--spacing-sm);
-  color: var(--color-text);
-}
-.typo-pairing-after .typo-body {
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  line-height: 1.7;
-  color: var(--color-charcoal);
-}
-.typo-hierarchy-before .typo-h1 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-.typo-hierarchy-before .typo-meta {
-  font-size: 0.9375rem;
-  color: var(--color-ash);
-  margin-bottom: var(--spacing-xs);
-}
-.typo-hierarchy-before .typo-p {
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--color-charcoal);
-}
-.typo-hierarchy-after .typo-h1 {
-  font-family: var(--font-display);
-  font-size: 2.25rem;
-  font-weight: 300;
-  letter-spacing: -0.03em;
-  margin-bottom: 2px;
-  line-height: 1.1;
-}
-.typo-hierarchy-after .typo-meta {
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--color-accent);
-  margin-bottom: var(--spacing-md);
-}
-.typo-hierarchy-after .typo-p {
-  font-size: 0.9375rem;
-  line-height: 1.7;
-  color: var(--color-ash);
-}
-.int-demo {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  width: 100%;
-  max-width: 280px;
-}
-.int-states-demo {
-  gap: var(--spacing-lg);
-}
-.int-state-row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.int-state-label {
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-ash);
-  width: 40px;
-}
-.int-btn {
-  flex: 1;
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.int-btn-poor {
-  background: var(--color-charcoal);
-  color: var(--color-paper);
-  border: none;
-}
-.int-btn-good {
-  background: var(--color-text);
-  color: var(--color-paper);
-  border: 2px solid transparent;
-  transition: all 0.15s ease;
-}
-.int-btn-good:hover {
-  background: var(--color-charcoal);
-}
-.int-btn-good:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent);
-  @supports (color: color-mix(in lab, red, red)) {
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent);
-  }
-}
-.int-btn-good:active {
-  transform: scale(0.98);
-}
-.int-aff-item {
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: 4px;
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-.int-aff-poor {
-  color: var(--color-charcoal);
-}
-.int-aff-good {
-  color: var(--color-accent);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.int-aff-good::after {
-  content: ' →';
-}
-.int-affordance-after .int-aff-item {
-  background: var(--color-bg);
-  border: 1px solid var(--color-mist);
-  color: var(--color-accent);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  transition: background 0.15s ease;
-}
-.int-affordance-after .int-aff-item:hover {
-  background: var(--color-accent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
-  }
-}
-.int-affordance-after .int-aff-item::after {
-  content: ' →';
-}
-.int-feedback-before, .int-feedback-after {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  flex-direction: row;
-}
-.int-fb-btn {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.int-fb-btn svg {
-  width: 22px;
-  height: 22px;
-}
-.int-fb-silent {
-  background: var(--color-mist);
-  color: var(--color-ash);
-}
-.int-fb-active {
-  background: var(--color-charcoal);
-  color: var(--color-paper);
-  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.int-fb-active:hover {
-  transform: scale(1.1);
-}
-.int-fb-active:active {
-  transform: scale(0.95);
-}
-.int-fb-active.liked {
-  background: var(--color-accent);
-  animation: heartPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-@keyframes heartPop {
-  50% {
-    transform: scale(1.25);
-  }
-}
-.int-fb-label {
-  font-size: 0.875rem;
-  color: var(--color-charcoal);
-}
-.color-demo {
-  width: 100%;
-  max-width: 300px;
-}
-.color-palette-before, .color-palette-after {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-md);
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  border-radius: 6px;
-}
-.color-swatch {
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-  transition: background 0.2s ease;
-}
-.color-card {
-  width: 100%;
-  margin-top: var(--spacing-sm);
-  padding: var(--spacing-sm);
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  border-radius: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.color-card span {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  transition: color 0.2s ease;
-}
-.color-card button {
-  padding: 6px;
-  border: none;
-  border-radius: 3px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.color-palette-before .swatch-1 {
-  background: #ff6b6b;
-}
-.color-palette-before .swatch-2 {
-  background: #4ecdc4;
-}
-.color-palette-before .swatch-3 {
-  background: #ffe66d;
-}
-.color-palette-before .swatch-4 {
-  background: #95e1d3;
-}
-.color-palette-before .swatch-5 {
-  background: #f38181;
-}
-.color-palette-before .card-title {
-  color: #ff6b6b;
-}
-.color-palette-before .card-subtitle {
-  color: #4ecdc4;
-}
-.color-palette-before .card-btn {
-  background: #ffe66d;
-  color: #333;
-}
-.color-palette-after .swatch-1 {
-  background: var(--color-text);
-}
-.color-palette-after .swatch-2 {
-  background: var(--color-charcoal);
-}
-.color-palette-after .swatch-3 {
-  background: var(--color-ash);
-}
-.color-palette-after .swatch-4 {
-  background: var(--color-mist);
-}
-.color-palette-after .swatch-5 {
-  background: var(--color-accent);
-}
-.color-palette-after .card-title {
-  color: var(--color-text);
-}
-.color-palette-after .card-subtitle {
-  color: var(--color-ash);
-}
-.color-palette-after .card-btn {
-  background: var(--color-accent);
-  color: var(--color-paper);
-}
-.color-accent-card {
-  padding: var(--spacing-md);
-  border-radius: 6px;
-}
-.color-accent-before .color-accent-card {
-  background: #f5f5f5;
-  border: 1px solid #e0e0e0;
-}
-.color-accent-before .color-accent-title {
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 4px;
-}
-.color-accent-before .color-accent-text {
-  font-size: 0.8125rem;
-  color: #666;
-  margin-bottom: var(--spacing-sm);
-}
-.color-accent-before .color-accent-btn {
-  width: 100%;
-  padding: var(--spacing-xs);
-  background: #333;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 0.8125rem;
-  cursor: pointer;
-}
-.color-accent-after .color-accent-card {
-  background: var(--color-accent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper));
-  }
-  border: 1px solid var(--color-accent);
-  @supports (color: color-mix(in lab, red, red)) {
-    border: 1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper));
-  }
-}
-.color-accent-after .color-accent-title {
-  font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: 4px;
-}
-.color-accent-after .color-accent-text {
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-  margin-bottom: var(--spacing-sm);
-}
-.color-accent-after .color-accent-btn {
-  width: 100%;
-  padding: var(--spacing-xs);
-  background: var(--color-accent);
-  color: var(--color-paper);
-  border: none;
-  border-radius: 4px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-.color-contrast-static {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-.contrast-example {
-  padding: var(--spacing-md);
-  border-radius: 6px;
-  text-align: center;
-}
-.contrast-fail {
-  background: #f0f0f0;
-  color: #a0a0a0;
-}
-.contrast-pass {
-  background: var(--color-charcoal);
-  color: var(--color-paper);
-}
-.contrast-badge {
-  display: inline-block;
-  font-size: 0.5625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  padding: 2px 6px;
-  border-radius: 2px;
-  margin-bottom: 4px;
-}
-.contrast-fail .contrast-badge {
-  background: #ddd;
-}
-.contrast-pass .contrast-badge {
-  background: var(--color-accent);
-  color: var(--color-paper);
-}
-.contrast-text {
-  font-size: 1rem;
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-.contrast-ratio {
-  font-size: 0.6875rem;
-  opacity: 0.7;
-}
-.resp-demo {
-  width: 100%;
-  max-width: 340px;
-}
-.resp-touch-demo {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-}
-.resp-touch-row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.resp-label {
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-ash);
-  width: 70px;
-}
-.resp-touch-targets {
-  display: flex;
-  gap: 4px;
-}
-.resp-touch-targets button {
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-}
-.resp-touch-bad button {
-  width: 24px;
-  height: 24px;
-  font-size: 0.75rem;
-  background: var(--color-mist);
-  color: var(--color-ash);
-}
-.resp-touch-good button {
-  width: 44px;
-  height: 44px;
-  font-size: 1rem;
-  background: var(--color-text);
-  color: var(--color-paper);
-}
-.resp-fluid-demo {
-  padding: var(--spacing-md);
-  background: var(--color-bg);
-  border: 1px solid var(--color-mist);
-  border-radius: 6px;
-}
-.resp-fluid-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-.resp-fluid-fixed, .resp-fluid-adaptive {
-  font-size: 0.75rem;
-  color: var(--color-ash);
-}
-.resp-fluid-fixed span, .resp-fluid-adaptive span {
-  display: block;
-  margin-bottom: 4px;
-}
-.resp-fluid-bar {
-  height: 24px;
-  background: var(--color-mist);
-  border-radius: 4px;
-}
-.resp-fluid-adaptive .resp-fluid-bar {
-  background: var(--color-accent);
-}
-.resp-adapt-demo {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: flex-end;
-}
-.resp-device {
-  text-align: center;
-}
-.resp-device > span {
-  display: block;
-  margin-top: 4px;
-  font-size: 0.625rem;
-  color: var(--color-ash);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.resp-device-screen {
-  background: var(--color-paper);
-  border: 2px solid var(--color-mist);
-  border-radius: 4px;
-  padding: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-.resp-device-mobile .resp-device-screen {
-  width: 50px;
-  height: 80px;
-}
-.resp-device-tablet .resp-device-screen {
-  width: 80px;
-  height: 60px;
-}
-.resp-device-desktop .resp-device-screen {
-  width: 120px;
-  height: 70px;
-}
-.resp-block {
-  background: var(--color-mist);
-  border-radius: 2px;
-}
-.resp-block-row {
-  display: flex;
-  gap: 3px;
-  flex: 1;
-}
-.resp-header {
-  height: 16px;
-  background: var(--color-charcoal);
-}
-.resp-sidebar {
-  width: 30%;
-  background: var(--color-charcoal);
-}
-.resp-content {
-  flex: 1;
-}
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-* {
-  margin: 0;
-}
-img, picture, video, canvas, svg {
-  display: block;
-  max-width: 100%;
-}
-button, input, textarea, select {
-  font: inherit;
-}
-:root {
-  --font-display: 'Cormorant Garamond', Georgia, serif;
-  --font-body: 'Instrument Sans', system-ui, sans-serif;
-  --font-mono: 'Space Grotesk', monospace;
-  --spacing-xs: 8px;
-  --spacing-sm: 16px;
-  --spacing-md: 24px;
-  --spacing-lg: 32px;
-  --spacing-xl: 48px;
-  --spacing-2xl: 80px;
-  --spacing-3xl: 120px;
-  --width-max: 1400px;
-  --width-content: 900px;
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --duration-fast: 0.15s;
-  --duration-base: 0.3s;
-  --duration-slow: 0.6s;
-  --duration-slower: 0.8s;
-  --duration-slowest: 1.2s;
-  --color-ink: oklch(10% 0 0);
-  --color-text: oklch(10% 0 0);
-  --color-paper: oklch(98% 0 0);
-  --color-cream: oklch(96% 0.005 350);
-  --color-charcoal: oklch(25% 0 0);
-  --color-ash: oklch(55% 0 0);
-  --color-mist: oklch(92% 0 0);
-  --color-bg: oklch(96% 0.005 350);
-  --color-accent: oklch(60% 0.25 350);
-  --color-accent-hover: oklch(52% 0.25 350);
-  --color-accent-dim: oklch(60% 0.25 350 / 0.15);
-  --color-accent-soft: oklch(60% 0.25 350 / 0.25);
-  --cat-diagnostic-bg: #fdf4ff;
-  --cat-diagnostic-border: #d946ef;
-  --cat-diagnostic-text: #a21caf;
-  --cat-quality-bg: #f0fdf4;
-  --cat-quality-border: #22c55e;
-  --cat-quality-text: #15803d;
-  --cat-intensity-bg: #fffbeb;
-  --cat-intensity-border: #f59e0b;
-  --cat-intensity-text: #b45309;
-  --cat-adaptation-bg: #eff6ff;
-  --cat-adaptation-border: #3b82f6;
-  --cat-adaptation-text: #1d4ed8;
-  --cat-enhancement-bg: #fdf2f8;
-  --cat-enhancement-border: #ec4899;
-  --cat-enhancement-text: #be185d;
-  --cat-system-bg: #f5f5f4;
-  --cat-system-border: #78716c;
-  --cat-system-text: #44403c;
-}
-.skip-link {
-  position: absolute;
-  top: -100%;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10000;
-  padding: var(--spacing-sm) var(--spacing-lg);
-  background: var(--color-ink);
-  color: var(--color-paper);
-  font-weight: 600;
-  text-decoration: none;
-  border-radius: 0 0 8px 8px;
-  transition: top 0.2s ease;
-}
-.skip-link:focus {
-  top: 0;
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  overflow-x: clip;
-}
-body {
-  font-family: var(--font-body);
-  font-size: 16px;
-  line-height: 1.625;
-  color: var(--color-text);
-  background: var(--color-paper);
-  overflow-x: clip;
-  min-height: 100vh;
-  min-height: 100dvh;
-}
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-display);
-  font-weight: 400;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-  color: var(--color-ink);
-}
-a {
-  color: var(--color-accent);
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 2px;
-  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
-}
-a:hover {
-  color: var(--color-accent-hover);
-  text-decoration-thickness: 2px;
-}
-.btn, .footer-logo, [class*="nav-item"] {
-  text-decoration: none;
-}
-strong {
-  font-weight: 600;
-  color: var(--color-ink);
-}
-code {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-  padding: 0.15em 0.4em;
-  background: var(--color-accent-dim);
-  color: var(--color-accent);
-  border-radius: 4px;
-}
-::selection {
-  background: var(--color-accent-soft);
-  color: var(--color-ink);
-}
-.grain-overlay {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 9999;
-  opacity: 0.03;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-}
-.site-content {
-  max-width: var(--width-max);
-  margin: 0 auto;
-  padding: 0 var(--spacing-lg);
-}
-@media (max-width: 768px) {
-  .site-content {
-    padding: 0 var(--spacing-md);
-  }
-}
-.section-header {
-  margin-bottom: var(--spacing-lg);
-  position: relative;
-}
-.section-number {
-  display: block;
-  font-family: var(--font-mono);
-  font-size: 0.625rem;
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  color: var(--color-ash);
-  margin-bottom: var(--spacing-xs);
-  text-transform: uppercase;
-}
-.section-title {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 400;
-  line-height: 1.2;
-  margin: 0;
-}
-.section-subtitle {
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--color-charcoal);
-  margin-top: var(--spacing-sm);
-  max-width: 55ch;
-}
-.cheatsheet-link {
-  color: var(--color-accent);
-  text-decoration: none;
-  font-size: 0.875rem;
-  margin-left: 0.5em;
-}
-.cheatsheet-link:hover {
-  text-decoration: underline;
-}
-.section-lead {
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--color-charcoal);
-  max-width: 55ch;
-  margin-bottom: var(--spacing-lg);
-}
-.hero-combined {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 100vh;
-  min-height: 100dvh;
-  padding: var(--spacing-2xl) 0;
-  background: var(--color-paper);
-}
-.github-link {
-  position: absolute;
-  top: var(--spacing-md);
-  right: var(--spacing-lg);
-  z-index: 10;
-  color: var(--color-ash);
-  transition: color 0.2s ease;
-}
-.github-link:hover {
-  color: var(--color-ink);
-}
-.github-link svg {
-  width: 28px;
-  height: 28px;
-}
-.hero-combined-container {
-  max-width: var(--width-max);
-  margin: 0 auto;
-  padding: 0 var(--spacing-lg);
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-xl);
-  align-items: center;
-  width: 100%;
-}
-@media (max-width: 1024px) {
-  .hero-combined-container {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-lg);
-    text-align: center;
-  }
-}
-.hero-combined-left {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-@media (max-width: 1024px) {
-  .hero-combined-left {
-    align-items: center;
-  }
-}
-.hero-title-combined {
-  font-family: var(--font-display);
-  font-size: clamp(2.5rem, 7vw, 4.5rem);
-  font-weight: 300;
-  font-style: italic;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  margin: 0;
-  color: var(--color-ink);
-}
-.hero-tagline-combined {
-  font-family: var(--font-display);
-  font-size: clamp(1.125rem, 2.5vw, 1.75rem);
-  font-weight: 400;
-  font-style: italic;
-  line-height: 1.3;
-  margin: 0;
-  color: var(--color-charcoal);
-}
-.hero-hook-text {
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--color-charcoal);
-  max-width: 45ch;
-  margin: 0;
-}
-.hero-included-box {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 10px 14px;
-  border: 1px solid var(--color-mist);
-  background: transparent;
-  max-width: 45ch;
-}
-.hero-included-title {
-  font-family: var(--font-body);
-  font-size: 0.5625rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--color-ash);
-}
-.hero-included-items {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.8125rem;
-  color: var(--color-charcoal);
-  line-height: 1.5;
-}
-.hero-included-items em {
-  font-style: normal;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-}
-.hero-included-sep {
-  color: var(--color-mist);
-}
-@media (max-width: 500px) {
-  .hero-included-items {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
-  }
-  .hero-included-sep {
-    display: none;
-  }
-}
-.hero-cta-group {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-lg);
-  margin-top: var(--spacing-sm);
-}
-@media (max-width: 600px) {
-  .hero-cta-group {
-    flex-direction: column;
-    gap: var(--spacing-md);
-  }
-}
-.hero-cta-combined {
-  display: inline-block;
-  padding: var(--spacing-sm) var(--spacing-xl);
-  font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  text-decoration: none;
-  color: var(--color-paper);
-  background: var(--color-ink);
-  border: none;
-  transition: transform 0.2s ease, background 0.2s ease;
-}
-.hero-cta-combined:hover {
-  transform: translateY(-2px);
-  background: var(--color-accent);
-  color: var(--color-paper);
-}
-.hero-logos-inline {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-.hero-logos-inline .hero-logos-label {
-  font-size: 0.6875rem;
-  color: var(--color-ash);
-  letter-spacing: 0.03em;
-}
-.hero-logos-inline .hero-logos-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.hero-logos-inline .hero-logos-row img {
-  border-radius: 4px;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-}
-.hero-logos-inline .hero-logos-row img:hover {
-  opacity: 1;
-}
-.hero-combined-right {
-  display: flex;
-  justify-content: center;
-}
-.hero-combined-right .split-comparison {
-  max-width: 520px;
-  width: 100%;
-}
-.hero-combined-right .split-container {
-  max-width: 100%;
-}
-.hero-bias-tags {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-xs);
-  margin-top: var(--spacing-lg);
-  padding-top: var(--spacing-md);
-  border-top: 1px solid var(--color-mist);
-  max-width: var(--width-max);
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  padding-bottom: var(--spacing-md);
-}
-.problem-section {
-  padding: var(--spacing-2xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.problem-content {
-  display: grid;
-  gap: var(--spacing-xl);
-}
-.split-comparison {
-  position: relative;
-  width: 100%;
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  margin-top: -20px;
-  margin-bottom: -20px;
-}
-.split-container {
-  position: relative;
-  width: 100%;
-  max-width: 500px;
-  height: 380px;
-  margin: 0 auto;
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  cursor: ew-resize;
-  user-select: none;
-}
-.split-before, .split-after {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.split-before {
-  z-index: 1;
-}
-.split-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.split-after {
-  clip-path: polygon(78% 0%, 100% 0%, 100% 100%, 62% 100%);
-  z-index: 2;
-  background: var(--color-paper);
-}
-.split-divider {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 70%;
-  width: 3px;
-  background: var(--color-accent);
-  transform: translateX(-50%) skewX(-10deg);
-  pointer-events: none;
-  z-index: 3;
-  box-shadow: 0 0 20px rgba(0,0,0,0.15);
-}
-.split-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) skewX(10deg);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-paper);
-  background: var(--color-accent);
-  padding: 6px 14px;
-  border-radius: 4px;
-  white-space: nowrap;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-}
-.slop-card {
-  width: 280px;
-  height: 280px;
-  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%);
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  font-family: 'Inter', system-ui, sans-serif;
-  display: flex;
-  flex-direction: column;
-}
-.slop-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-.slop-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-  flex-shrink: 0;
-}
-.slop-text {
-  flex: 1;
-}
-.slop-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1f2937;
-  margin-bottom: 2px;
-}
-.slop-subtitle {
-  font-size: 12px;
-  color: #6b7280;
-}
-.slop-body {
-  font-size: 13px;
-  line-height: 1.5;
-  color: #4b5563;
-  margin-bottom: auto;
-  flex: 1;
-}
-.slop-button {
-  width: 100%;
-  padding: 10px 20px;
-  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-family: 'Inter', system-ui, sans-serif;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  margin-top: auto;
-}
-.slop-callouts {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-.slop-callout {
-  position: absolute;
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--color-accent);
-  background: var(--color-paper);
-  padding: 4px 8px;
-  border: 1px solid var(--color-accent);
-  border-radius: 3px;
-  white-space: nowrap;
-  opacity: 0;
-  animation: calloutFadeIn 0.4s var(--ease-out) forwards;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-.slop-callout[data-point="font"] {
-  top: 15%;
-  right: 5%;
-  animation-delay: 0.1s;
-}
-.slop-callout[data-point="gradient"] {
-  top: 40%;
-  left: 5%;
-  animation-delay: 0.25s;
-}
-.slop-callout[data-point="copy"] {
-  bottom: 35%;
-  right: 8%;
-  animation-delay: 0.4s;
-}
-.slop-callout[data-point="rounded"] {
-  bottom: 12%;
-  left: 10%;
-  animation-delay: 0.55s;
-}
-@keyframes calloutFadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-.impeccable-card {
-  width: 280px;
-  height: 300px;
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  padding: var(--spacing-lg);
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-}
-.impeccable-eyebrow {
-  font-family: var(--font-mono);
-  font-size: 0.625rem;
-  font-weight: 500;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-  color: var(--color-accent);
-  margin-bottom: var(--spacing-xs);
-}
-.impeccable-title {
-  font-family: var(--font-display);
-  font-size: 1.75rem;
-  font-weight: 300;
-  font-style: italic;
-  color: var(--color-ink);
-  margin-bottom: var(--spacing-sm);
-  line-height: 1.1;
-}
-.impeccable-body {
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--color-ash);
-  margin-bottom: auto;
-  flex: 1;
-}
-.impeccable-button {
-  display: inline-flex;
-  margin-top: var(--spacing-sm);
-  padding: 0.625rem 1.5rem;
-  background: var(--color-ink);
-  color: var(--color-paper);
-  border: none;
-  font-family: var(--font-body);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  cursor: pointer;
-  transition: all var(--duration-base) var(--ease-out);
-  align-self: flex-start;
-}
-.impeccable-button:hover {
-  background: var(--color-accent);
-}
-.split-labels {
-  display: flex;
-  justify-content: center;
-  gap: var(--spacing-xl);
-  margin-top: var(--spacing-md);
-}
-.split-label-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-}
-.split-label-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-mist);
-}
-.split-label-dot--accent {
-  background: var(--color-accent);
-}
-.solution-section {
-  padding: var(--spacing-2xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.solution-content {
-  display: grid;
-  gap: var(--spacing-lg);
-}
-.solution-content .section-lead {
-  margin-bottom: 0;
-}
-.solution-visual {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: var(--spacing-lg);
-  align-items: stretch;
-}
-@media (max-width: 900px) {
-  .solution-visual {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-md);
-  }
-}
-.solution-visual-interactive {
-  width: 100%;
-  min-height: 380px;
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
-}
-.solution-pillar {
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  padding: var(--spacing-lg);
-  transition: all var(--duration-base) var(--ease-out);
-}
-.solution-pillar:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-4px);
-  box-shadow: 0 20px 60px var(--color-accent-dim);
-}
-.pillar-header {
-  text-align: center;
-  margin-bottom: var(--spacing-lg);
-  padding-bottom: var(--spacing-md);
-  border-bottom: 1px solid var(--color-mist);
-}
-.pillar-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background: var(--color-accent-dim);
-  color: var(--color-accent);
-  margin-bottom: var(--spacing-sm);
-}
-.pillar-title {
-  font-family: var(--font-display);
-  font-size: 1.75rem;
-  font-weight: 400;
-  margin: 0 0 var(--spacing-xs);
-}
-.pillar-subtitle {
-  font-size: 0.875rem;
-  color: var(--color-ash);
-  margin: 0;
-}
-.pillar-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-.pillar-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spacing-sm);
-  background: var(--color-paper);
-  border-radius: 4px;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-.pillar-item:hover {
-  background: var(--color-accent-dim);
-}
-.pillar-item-name {
-  font-weight: 500;
-  color: var(--color-ink);
-  font-size: 0.9375rem;
-}
-.pillar-item-code {
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-accent);
-  background: transparent;
-  padding: 0;
-}
-.pillar-item-desc {
-  font-size: 0.75rem;
-  color: var(--color-ash);
-}
-.pillar-item--more {
-  justify-content: center;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-accent);
-  background: transparent;
-  border: 1px dashed var(--color-mist);
-}
-.solution-connector {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.connector-plus {
-  font-family: var(--font-display);
-  font-size: 3rem;
-  font-weight: 300;
-  color: var(--color-accent);
-  opacity: 0.5;
-}
-@media (max-width: 900px) {
-  .solution-connector {
-    padding: var(--spacing-sm) 0;
-  }
-  .connector-plus {
-    font-size: 2rem;
-  }
-}
-.skills-section {
-  padding: var(--spacing-2xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.skills-gallery {
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: var(--spacing-xl);
-  align-items: start;
-}
-@media (max-width: 968px) {
-  .skills-gallery {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-lg);
-  }
-}
-.skills-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  position: sticky;
-  top: var(--spacing-lg);
-}
-@media (max-width: 968px) {
-  .skills-nav {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--spacing-xs);
-    position: static;
-  }
-}
-.skill-nav-item {
-  padding: var(--spacing-sm) var(--spacing-md);
-  background: transparent;
-  border: none;
-  border-left: 2px solid transparent;
-  color: var(--color-ash);
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  font-weight: 400;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-align: left;
-  text-decoration: none;
-  display: block;
-}
-.skill-nav-item:hover {
-  color: var(--color-text);
-  background: var(--color-cream);
-}
-.skill-nav-item.active {
-  color: var(--color-accent);
-  border-left-color: var(--color-accent);
-  background: var(--color-accent-dim);
-  font-weight: 500;
-}
-@media (max-width: 968px) {
-  .skill-nav-item {
-    border-left: none;
-    border-bottom: 2px solid transparent;
-    padding: var(--spacing-xs) var(--spacing-md);
-  }
-  .skill-nav-item.active {
-    border-bottom-color: var(--color-accent);
-  }
-}
-.skills-showcase {
-  display: grid;
-  grid-template-columns: 1.2fr 1fr;
-  gap: var(--spacing-lg);
-  align-items: start;
-}
-@media (max-width: 1100px) {
-  .skills-showcase {
-    grid-template-columns: 1fr;
-  }
-}
-.loading-state {
-  padding: var(--spacing-xl);
-  text-align: center;
-  color: var(--color-ash);
-  font-style: italic;
-}
-.mobile-commands-layout {
-  display: none;
-}
-@media (max-width: 900px) {
-  .mobile-commands-layout {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-md);
-  }
-  .commands-container {
-    display: none;
-  }
-}
-.mobile-carousel-wrapper {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  padding: var(--spacing-xs) 0;
-}
-.mobile-carousel-wrapper::-webkit-scrollbar {
-  display: none;
-}
-.mobile-carousel {
-  display: flex;
-  gap: var(--spacing-xs);
-  padding-right: var(--spacing-md);
-}
-.mobile-cmd-pill {
-  flex-shrink: 0;
-  padding: var(--spacing-sm) var(--spacing-md);
-  min-height: 44px;
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-ash);
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  border-radius: 100px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-.mobile-cmd-pill:hover {
-  color: var(--color-charcoal);
-  border-color: var(--color-charcoal);
-}
-.mobile-cmd-pill.active {
-  color: var(--color-paper);
-  background: var(--color-ink);
-  border-color: var(--color-ink);
-}
-.mobile-demo-area {
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  border-radius: 8px;
-  padding: var(--spacing-sm);
-}
-.mobile-demo-area .demo-split-comparison {
-  width: 100%;
-}
-.mobile-demo-area .split-container {
-  width: 100%;
-  max-width: 100%;
-  height: 320px;
-}
-.mobile-demo-area .demo-caption {
-  font-size: 0.75rem;
-  margin-top: var(--spacing-sm);
-}
-.mobile-info-area {
-  padding-top: var(--spacing-sm);
-}
-.mobile-cmd-info {
-  display: none;
-  padding: var(--spacing-sm) 0;
-}
-.mobile-cmd-info.active {
-  display: block;
-}
-.mobile-cmd-name {
-  font-family: var(--font-mono);
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-ink);
-  margin: 0 0 var(--spacing-xs) 0;
-}
-.mobile-cmd-desc {
-  font-size: 0.875rem;
-  color: var(--color-charcoal);
-  line-height: 1.5;
-  margin: 0;
-}
-.mobile-cmd-rel {
-  margin-top: var(--spacing-xs);
-  font-size: 0.75rem;
-  color: var(--color-ash);
-}
-.mobile-cmd-rel code {
-  font-family: var(--font-mono);
-  color: var(--color-ink);
-}
-.downloads-section {
-  padding: var(--spacing-2xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.downloads-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: var(--spacing-lg);
-}
-.download-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: var(--spacing-lg);
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  transition: all var(--duration-base) var(--ease-out);
-}
-.download-card:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-4px);
-  box-shadow: 0 20px 60px var(--color-accent-dim);
-}
-.download-card-icon {
-  margin-bottom: var(--spacing-sm);
-}
-.download-card-icon img {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-  border-radius: 8px;
-}
-.download-card-title {
-  font-family: var(--font-display);
-  font-size: 1.25rem;
-  font-weight: 400;
-  margin: 0 0 var(--spacing-sm) 0;
-}
-.download-card-note {
-  font-size: 0.75rem;
-  color: var(--color-ash);
-  margin-bottom: var(--spacing-xs);
-}
-.download-card .btn {
-  margin-top: var(--spacing-xs);
-}
-.install-command {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  border-radius: 6px;
-  padding: var(--spacing-sm);
-  margin-top: var(--spacing-sm);
-  width: 100%;
-}
-.install-command code {
-  flex: 1;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--color-ink);
-  background: transparent;
-  padding: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.copy-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: 1px solid var(--color-mist);
-  border-radius: 4px;
-  color: var(--color-ash);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-.copy-btn:hover {
-  background: var(--color-accent-dim);
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-.copy-btn.copied {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-paper);
-}
-.install-hint {
-  font-size: 0.75rem;
-  color: var(--color-ash);
-  margin: var(--spacing-xs) 0 0 0;
-}
-.install-hint code {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  background: var(--color-mist);
-  padding: 2px 5px;
-  border-radius: 3px;
-}
-.download-card-details {
-  width: 100%;
-  margin-top: var(--spacing-sm);
-  font-size: 0.8125rem;
-  text-align: left;
-}
-.download-card-details summary {
-  cursor: pointer;
-  color: var(--color-ash);
-  font-size: 0.75rem;
-  padding: var(--spacing-xs) 0;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-.download-card-details summary::before {
-  content: '▶';
-  font-size: 0.5rem;
-  transition: transform var(--duration-fast) var(--ease-out);
-}
-.download-card-details[open] summary::before {
-  transform: rotate(90deg);
-}
-.download-card-details summary::-webkit-details-marker {
-  display: none;
-}
-.download-card-details ol {
-  margin: var(--spacing-sm) 0;
-  padding-left: var(--spacing-md);
-  color: var(--color-charcoal);
-  line-height: 1.6;
-}
-.download-card-details li {
-  margin-bottom: 4px;
-}
-.download-card-details code {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  background: var(--color-mist);
-  padding: 2px 5px;
-  border-radius: 3px;
-}
-.download-card-details a {
-  color: var(--color-accent);
-  text-decoration: none;
-  font-size: 0.75rem;
-}
-.download-card-details a:hover {
-  text-decoration: underline;
-}
-.opensource-section {
-  padding: var(--spacing-2xl) 0;
-  border-top: 1px solid var(--color-mist);
-  text-align: center;
-}
-.opensource-content {
-  max-width: 500px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.opensource-title {
-  font-size: clamp(1.5rem, 4vw, 2rem);
-  font-weight: 300;
-}
-.opensource-desc {
-  font-size: 1.125rem;
-  color: var(--color-ash);
-  line-height: 1.6;
-}
-.site-footer {
-  border-top: 1px solid var(--color-mist);
-  padding: var(--spacing-xl) var(--spacing-lg);
-  background: var(--color-cream);
-}
-.footer-content {
-  max-width: var(--width-max);
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--spacing-lg);
-}
-@media (max-width: 768px) {
-  .footer-content {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-.footer-brand {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-}
-.footer-logo {
-  font-family: var(--font-display);
-  font-size: 1.25rem;
-  font-weight: 400;
-  color: var(--color-ink);
-}
-.footer-tagline {
-  font-size: 0.875rem;
-  color: var(--color-ash);
-}
-.footer-links {
-  display: flex;
-  gap: var(--spacing-lg);
-  flex-wrap: wrap;
-}
-.footer-links a {
-  font-size: 0.875rem;
-  color: var(--color-ash);
-  transition: color var(--duration-fast) var(--ease-out);
-}
-.footer-links a:hover {
-  color: var(--color-accent);
-}
-.footer-author {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-md);
-  flex-wrap: wrap;
-  width: 100%;
-  padding-top: var(--spacing-lg);
-  margin-top: var(--spacing-md);
-  border-top: 1px solid var(--color-mist);
-}
-.footer-author-label {
-  font-size: 0.875rem;
-  color: var(--color-ash);
-}
-.footer-author-label a {
-  color: var(--color-text);
-  transition: color var(--duration-fast) var(--ease-out);
-}
-.footer-author-label a:hover {
-  color: var(--color-accent);
-}
-.footer-author-links {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-.footer-social-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  color: var(--color-ash);
-  background: transparent;
-  border-radius: 50%;
-  transition: all var(--duration-fast) var(--ease-out);
-  text-decoration: none;
-}
-.footer-social-link:hover {
-  color: var(--color-accent);
-  background: var(--color-accent-dim);
-}
-.footer-author-divider {
-  width: 1px;
-  height: 20px;
-  background: var(--color-mist);
-  margin: 0 var(--spacing-xs);
-}
-.footer-newsletter {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text);
-  text-decoration: none;
-  padding: 8px 14px;
-  background: var(--color-paper);
-  border: 1px solid var(--color-mist);
-  border-radius: 100px;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-.footer-newsletter:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-.footer-newsletter svg {
-  transition: transform var(--duration-fast) var(--ease-out);
-}
-.footer-newsletter:hover svg {
-  transform: translateX(3px);
-}
-@media (max-width: 768px) {
-  .footer-author {
-    flex-direction: column;
-    gap: var(--spacing-sm);
-  }
-  .footer-author-divider {
-    display: none;
-  }
-}
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xs);
-  padding: 1rem 2rem;
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  border: none;
-  cursor: pointer;
-  transition: all var(--duration-base) var(--ease-out);
-  position: relative;
-  overflow: hidden;
-  text-decoration: none;
-}
-.btn-primary {
-  background: var(--color-ink);
-  color: var(--color-paper);
-}
-.btn-primary::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--color-accent);
-  transform: translateY(100%);
-  transition: transform var(--duration-base) var(--ease-out);
-  z-index: 0;
-}
-.btn-primary:hover::before {
-  transform: translateY(0);
-}
-.btn-primary:hover {
-  color: var(--color-paper);
-}
-.btn-primary span, .btn-primary svg {
-  position: relative;
-  z-index: 1;
-}
-.btn-primary:not(:has(span)) {
-  position: relative;
-  z-index: 1;
-}
-.btn-secondary {
-  background: transparent;
-  color: var(--color-ink);
-  border: 1px solid var(--color-ink);
-}
-.btn-secondary:hover {
-  background: var(--color-ink);
-  color: var(--color-paper);
-}
-.btn:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-.btn-primary:focus-visible {
-  outline-color: var(--color-paper);
-  box-shadow: 0 0 0 4px var(--color-accent);
-}
-.btn-secondary:focus-visible {
-  outline-color: var(--color-accent);
-}
-@keyframes revealUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
-}
-@keyframes float {
-  0%, 100% {
-    transform: translateX(-50%) translateY(0);
-  }
-  50% {
-    transform: translateX(-50%) translateY(-8px);
-  }
-}
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(4px);
-  }
-}
-[data-reveal] {
-  opacity: 0;
-  transform: translateY(30px);
-  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
-}
-[data-reveal].revealed {
-  opacity: 1;
-  transform: translateY(0);
-}
-[data-reveal]:nth-child(1) {
-  transition-delay: 0s;
-}
-[data-reveal]:nth-child(2) {
-  transition-delay: 0.1s;
-}
-[data-reveal]:nth-child(3) {
-  transition-delay: 0.2s;
-}
-[data-reveal]:nth-child(4) {
-  transition-delay: 0.3s;
-}
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-  html {
-    scroll-behavior: auto;
-  }
-  .hero-canvas {
-    display: none;
-  }
-  .hero-scroll-indicator {
-    animation: none;
-    opacity: 1;
-  }
-  [data-reveal] {
-    opacity: 1;
-    transform: none;
-  }
-  .gallery-frame {
-    opacity: 1;
-    transform: none;
-  }
-}
-.load-error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: var(--spacing-2xl) var(--spacing-lg);
-  gap: var(--spacing-md);
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  border-radius: 8px;
-}
-.load-error-icon {
-  font-size: 2.5rem;
-  color: var(--color-accent);
-}
-.load-error-title {
-  font-family: var(--font-display);
-  font-size: 1.5rem;
-  font-weight: 400;
-  color: var(--color-ink);
-  margin: 0;
-}
-.load-error-text {
-  font-size: 1rem;
-  color: var(--color-ash);
-  max-width: 40ch;
-  line-height: 1.5;
-}
-.load-error-retry {
-  margin-top: var(--spacing-sm);
-}
-.bias-tags {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-sm);
-  margin-top: var(--spacing-lg);
-}
-.bias-tags-label {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--color-ash);
-}
-.bias-tags-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--spacing-xs);
-}
-.bias-tag {
-  font-size: 0.75rem;
-  font-weight: 500;
-  padding: 6px 12px;
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  color: var(--color-charcoal);
-  transition: all var(--duration-fast) var(--ease-out);
-}
-.bias-tag:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-.antidote-section {
-  padding: var(--spacing-2xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.patterns-categories {
-  margin-bottom: var(--spacing-xl);
-}
-.pattern-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
-  margin-bottom: var(--spacing-lg);
-}
-.pattern-tab {
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-ash);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  cursor: pointer;
-  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
-}
-.pattern-tab:hover {
-  color: var(--color-charcoal);
-}
-.pattern-tab.active {
-  color: var(--color-ink);
-  font-weight: 500;
-  border-bottom-color: var(--color-accent);
-}
-.pattern-tab:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-.pattern-panel {
-  display: none;
-}
-.pattern-panel.active {
-  display: block;
-}
-.pattern-columns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-xl);
-}
-@media (max-width: 768px) {
-  .pattern-columns {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-md);
-  }
-}
-.pattern-column-label {
-  display: block;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  margin-bottom: var(--spacing-sm);
-  color: var(--color-ash);
-}
-.pattern-column--anti .pattern-column-label {
-  color: var(--color-accent);
-}
-.pattern-column--do .pattern-column-label {
-  color: var(--color-success, #22c55e);
-}
-.pattern-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-}
-.pattern-item {
-  font-size: 0.8125rem;
-  padding-left: var(--spacing-md);
-  position: relative;
-  line-height: 1.5;
-}
-.pattern-item--anti {
-  color: var(--color-ash);
-}
-.pattern-item--anti::before {
-  content: '×';
-  position: absolute;
-  left: 0;
-  color: var(--color-accent);
-  font-weight: 600;
-}
-.pattern-item--do {
-  color: var(--color-charcoal);
-}
-.pattern-item--do::before {
-  content: '✓';
-  position: absolute;
-  left: 0;
-  color: var(--color-success, #22c55e);
-  font-weight: 600;
-}
-.contribute-inline {
-  font-size: 0.875rem;
-  color: var(--color-ash);
-  margin-top: var(--spacing-md);
-}
-.contribute-inline a {
-  color: var(--color-accent);
-  text-decoration: none;
-}
-.contribute-inline a:hover {
-  text-decoration: underline;
-}
-.pillar-item--main {
-  background: var(--color-accent-dim);
-  border: 1px solid var(--color-accent);
-}
-.pillar-item--main .pillar-item-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-accent);
-}
-.pillar-item--ref {
-  background: transparent;
-  padding: var(--spacing-xs) var(--spacing-sm);
-}
-.pillar-item-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-ash);
-}
-.pillar-refs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
-  padding: 0 var(--spacing-sm);
-}
-.pillar-ref {
-  font-size: 0.6875rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  padding: 4px 10px;
-  background: var(--color-paper);
-  color: var(--color-ash);
-  border: 1px solid var(--color-mist);
-  border-radius: 3px;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-.pillar-ref:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-.pillar-command-group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-sm);
-  background: var(--color-paper);
-  border-radius: 4px;
-}
-.pillar-group-label {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-ash);
-  width: 100%;
-  margin-bottom: 4px;
-}
-.pillar-command-group .pillar-item-code {
-  font-size: 0.8125rem;
-  padding: 4px 8px;
-  background: var(--color-accent-dim);
-  border-radius: 3px;
-}
-.platforms-section {
-  padding: var(--spacing-2xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.platforms-section .section-subtitle {
-  max-width: 60ch;
-}
-.install-terminal {
-  max-width: 640px;
-  margin: 0 auto var(--spacing-xl);
-}
-.install-terminal .glass-terminal {
-  height: auto;
-}
-.install-terminal .terminal-body {
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-}
-.install-terminal-row {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: var(--spacing-md) var(--spacing-lg);
-}
-.install-terminal-label {
-  font-family: var(--font-mono);
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--color-ash);
-}
-.install-terminal-cmd {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-.install-terminal-cmd .terminal-prompt {
-  flex-shrink: 0;
-}
-.install-terminal-cmd code {
-  flex: 1;
-  font-family: var(--font-mono);
-  font-size: 0.9375rem;
-  color: var(--color-ink);
-  background: transparent;
-  padding: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.install-terminal-cmd .copy-btn {
-  flex-shrink: 0;
-}
-.install-terminal-cmd .btn {
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-}
-.install-terminal-note {
-  font-size: 0.75rem;
-  color: var(--color-ash);
-  padding-left: calc(0.75rem + var(--spacing-sm));
-}
-.install-terminal-note code {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  background: var(--color-mist);
-  padding: 2px 5px;
-  border-radius: 3px;
-  color: var(--color-ink);
-}
-.install-terminal-divider {
-  height: 1px;
-  background: var(--color-mist);
-  margin: 0;
-}
-@media (max-width: 600px) {
-  .install-terminal-row {
-    padding: var(--spacing-sm) var(--spacing-md);
-  }
-  .install-terminal-cmd code {
-    font-size: 0.75rem;
-  }
-}
-.install-providers {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-sm);
-  margin-top: var(--spacing-md);
-}
-.install-providers-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--color-ash);
-}
-.install-providers-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--spacing-sm);
-}
-.install-provider-badge {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.8125rem;
-  color: var(--color-charcoal);
-}
-.install-provider-badge img {
-  border-radius: 4px;
-}
-.install-terminal-cmd--download {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  flex-wrap: wrap;
-}
-.prefix-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  padding: 6px 12px;
-  background: rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 6px;
-  transition: border-color var(--duration-fast) var(--ease-out);
-}
-.prefix-toggle:hover {
-  border-color: rgba(0, 0, 0, 0.2);
-}
-.prefix-toggle input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.prefix-toggle-slider {
-  position: relative;
-  width: 32px;
-  height: 18px;
-  background: var(--color-mist);
-  border-radius: 18px;
-  transition: background var(--duration-fast) var(--ease-out);
-  flex-shrink: 0;
-}
-.prefix-toggle-slider::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  background: var(--color-paper);
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-  transition: transform var(--duration-fast) var(--ease-out);
-}
-.prefix-toggle input:checked + .prefix-toggle-slider {
-  background: var(--color-accent);
-}
-.prefix-toggle input:checked + .prefix-toggle-slider::after {
-  transform: translateX(14px);
-}
-.prefix-toggle input:focus-visible + .prefix-toggle-slider {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-.prefix-toggle-label {
-  font-size: 0.75rem;
-  color: var(--color-charcoal);
-  white-space: nowrap;
-}
-.prefix-toggle-label code {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  background: var(--color-accent-dim);
-  color: var(--color-accent);
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-.download-tip {
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-  margin-top: var(--spacing-sm);
-  text-align: center;
-}
-.download-tip a {
-  color: var(--color-accent);
-  text-decoration: none;
-}
-.download-tip a:hover {
-  text-decoration: underline;
-}
-.consulting-section {
-  padding: var(--spacing-xl) 0;
-  border-top: 1px solid var(--color-mist);
-}
-.consulting-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-lg);
-  flex-wrap: wrap;
-}
-.consulting-actions {
-  display: flex;
-  gap: var(--spacing-sm);
-  flex-shrink: 0;
-}
-.consulting-text {
-  flex: 1;
-  min-width: 280px;
-}
-.consulting-title {
-  font-size: clamp(1.5rem, 4vw, 2rem);
-  font-weight: 300;
-  font-style: italic;
-  margin: 0 0 var(--spacing-sm) 0;
-}
-.consulting-desc {
-  font-size: 1rem;
-  color: var(--color-charcoal);
-  line-height: 1.6;
-  margin: 0;
-  max-width: 45ch;
-}
-@media (max-width: 600px) {
-  .consulting-content {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .consulting-actions {
-    flex-direction: column;
-    width: 100%;
-  }
-  .consulting-actions .btn {
-    width: 100%;
-    justify-content: center;
-  }
-}
+.split-container:before{content:"";background-image:linear-gradient(var(--color-mist) 1px, transparent 1px), linear-gradient(90deg, var(--color-mist) 1px, transparent 1px);opacity:.3;pointer-events:none;background-size:20px 20px;position:absolute;inset:0}.split-container:after{content:"← Drag →";letter-spacing:.1em;text-transform:uppercase;color:var(--color-ash);background:var(--color-paper);opacity:.8;z-index:10;border-radius:4px;padding:4px 12px;font-size:.625rem;font-weight:600;transition:opacity .3s;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.split-container:hover:after{opacity:0}.split-after .impeccable-card{box-shadow:0 10px 40px #00000014}@keyframes splitEntry{0%{opacity:0;transform:translate(-50%)skew(-10deg)scaleY(.8)}to{opacity:1;transform:translate(-50%)skew(-10deg)scaleY(1)}}.split-divider{animation:splitEntry .6s var(--ease-out) .3s backwards}.split-label-item{transition:color var(--duration-fast) var(--ease-out);cursor:default}.split-label-item:hover{color:var(--color-text)}.split-label-item[data-point=after]:hover .split-label-dot--accent{transform:scale(1.3)}.split-label-dot{transition:transform var(--duration-fast) var(--ease-spring)}.split-badge{letter-spacing:.08em;text-transform:uppercase;z-index:5;pointer-events:none;border-radius:3px;padding:3px 8px;font-size:.625rem;font-weight:600;position:absolute;top:10px}.split-badge--before{color:var(--color-ash);background:var(--color-paper);border:1px solid var(--color-mist);left:10px}.split-badge--after{color:var(--color-paper);background:var(--color-accent);right:10px}@media (hover:none){.split-container:after{content:"← Swipe →"}}@media (max-width:600px){.split-label{padding:4px 10px;font-size:.5625rem}}.commands-section{padding:var(--spacing-xl) 0;background:var(--color-paper);position:relative}.commands-gallery{display:block}.commands-container{gap:var(--spacing-2xl);grid-template-columns:1fr 1.2fr;align-items:start;display:grid}@media (max-width:900px){.commands-container{grid-template-columns:1fr}}.command-manual{gap:var(--spacing-sm);flex-direction:column;padding-bottom:20vh;display:flex}.command-category-header{font-family:var(--font-display);color:var(--color-accent);text-transform:uppercase;letter-spacing:.1em;padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);margin-top:var(--spacing-md);border-bottom:1px solid var(--color-mist);font-size:.875rem;font-weight:600}.command-category-header:first-child{margin-top:0}.manual-entry{padding:var(--spacing-lg);padding-left:calc(var(--spacing-lg) + 16px);border-left:2px solid var(--color-mist);transition:border-color .4s var(--ease-out), opacity .4s var(--ease-out), background .4s var(--ease-out), transform .4s var(--ease-out);opacity:.4;cursor:pointer;position:relative;transform:translate(-16px)}.manual-entry:hover{opacity:.7}.manual-entry.active{border-left-color:var(--color-accent);opacity:1;background:linear-gradient(to right, var(--color-bg), transparent);transform:translate(0)}.manual-cmd-name{font-family:var(--font-mono);margin:0 0 var(--spacing-sm);color:var(--color-ink);font-size:1.5rem;font-weight:500}.manual-cmd-desc{color:var(--color-charcoal);margin:0;font-size:1rem;line-height:1.6}.manual-cmd-rel{color:var(--color-ash);margin-top:var(--spacing-sm);flex-wrap:wrap;align-items:center;gap:.5ch;font-size:.8125rem;display:flex}.manual-cmd-rel .rel-icon{color:var(--color-accent);font-weight:600}.manual-cmd-rel code{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-ink);border-radius:3px;padding:2px 6px;font-size:.75rem}.glass-terminal-wrapper{top:var(--spacing-xl);height:calc(100vh - var(--spacing-xl) * 2);min-height:500px;max-height:800px;position:sticky}.terminal-stack{perspective:1200px;height:100%;position:relative}.terminal-stack-tabs{z-index:10;gap:4px;display:flex;position:absolute;top:-31px;right:8px}.terminal-stack-tab{font-family:var(--font-mono);background:var(--color-cream);border:1px solid var(--color-mist);color:var(--color-ash);cursor:pointer;border-bottom:none;border-radius:6px 6px 0 0;padding:5px 12px;font-size:.75rem;transition:all .2s}.terminal-stack-tab:hover{background:var(--color-paper);color:var(--color-charcoal)}.terminal-stack-tab.active{background:var(--color-paper);color:var(--color-ink);border-color:var(--color-mist)}.terminal-window{transform-origin:bottom;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s,filter .3s;position:absolute;inset:0}.terminal-window--demo{z-index:2}.terminal-window--demo.is-back{opacity:.6;filter:brightness(.92);pointer-events:none;z-index:1;transform:translateY(16px)translate(12px)scale(.96)}.terminal-window--source{z-index:1;opacity:.6;filter:brightness(.92);pointer-events:none;transform:translateY(16px)translate(12px)scale(.96)}.terminal-window--source.is-front{opacity:1;filter:brightness();pointer-events:auto;z-index:2;transform:translateY(0)translate(0)scale(1)}.source-window{background:var(--color-paper);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-mist);border-radius:8px;flex-direction:column;height:100%;display:flex;overflow:hidden;box-shadow:0 20px 60px -10px #00000026}.source-header{background:var(--color-cream);border-bottom:1px solid var(--color-mist);flex-shrink:0;align-items:center;gap:8px;padding:12px 16px;display:flex}.source-title{font-family:var(--font-mono);color:var(--color-ink);font-size:.875rem;font-weight:500}.source-body{padding:var(--spacing-md);font-family:var(--font-mono);color:var(--color-charcoal);overscroll-behavior:contain;white-space:pre-wrap;word-break:break-word;background:var(--color-cream);flex:1;font-size:.75rem;line-height:1.5;overflow-y:auto}.source-loading{color:var(--color-ash);font-style:italic}@media (max-width:900px){.glass-terminal-wrapper{display:none}}.glass-terminal{background:var(--color-paper);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-mist);border-radius:8px;flex-direction:column;height:100%;display:flex;overflow:hidden;box-shadow:0 20px 60px -10px #00000026}.terminal-header{background:var(--color-cream);border-bottom:1px solid var(--color-mist);align-items:center;gap:8px;padding:12px 16px;display:flex}.terminal-dot{border-radius:50%;width:10px;height:10px}.terminal-dot.red{background:#ff5f56}.terminal-dot.yellow{background:#ffbd2e}.terminal-dot.green{background:#27c93f}.terminal-title{font-family:var(--font-mono);color:var(--color-ash);margin-left:auto;font-size:.75rem}.terminal-body{padding:var(--spacing-md);font-family:var(--font-mono);color:var(--color-ink);flex-direction:column;flex:1;min-height:0;font-size:.9375rem;display:flex;overflow-y:auto}.terminal-line{margin-bottom:var(--spacing-sm);gap:var(--spacing-sm);line-height:1.5;display:flex}.terminal-prompt{color:var(--color-accent);-webkit-user-select:none;user-select:none;font-weight:700}.terminal-cursor{background:var(--color-accent);vertical-align:middle;width:8px;height:1.2em;animation:1s step-end infinite blink;display:inline-block}.terminal-output{color:var(--color-ash);margin-bottom:var(--spacing-md);white-space:pre-wrap}@media (max-height:800px){.terminal-output{display:none}}.terminal-cmd{color:var(--color-accent);font-weight:600}.terminal-step{color:var(--color-charcoal)}.terminal-done{color:var(--color-success,#22c55e);font-weight:500}.terminal-preview{background:var(--color-paper);margin:var(--spacing-sm) 0;border-radius:12px;flex:1;min-height:0;overflow:hidden}.terminal-cursor-line{flex-shrink:0;margin-top:var(--spacing-sm)!important}.terminal-preview .demo-split-comparison{flex-direction:column;height:100%;display:flex}.terminal-preview .demo-split-comparison .split-container{cursor:ew-resize;-webkit-user-select:none;user-select:none;background:var(--color-cream);flex:1;min-height:0;position:relative;overflow:hidden}.terminal-preview .demo-split-comparison .split-before,.terminal-preview .demo-split-comparison .split-after{padding:var(--spacing-md);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.terminal-preview .demo-split-comparison .split-before{z-index:1;background:var(--color-cream)}.terminal-preview .demo-split-comparison .split-after{z-index:2;background:var(--color-paper);clip-path:polygon(58% 0%,100% 0%,100% 100%,42% 100%)}.terminal-preview .demo-split-comparison .split-content{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:280px;display:flex}.terminal-preview .demo-split-comparison .split-divider{background:var(--color-accent);pointer-events:none;z-index:3;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)skew(-10deg);box-shadow:0 0 12px #0000001a}.terminal-preview .demo-split-comparison .split-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-paper);background:var(--color-accent);white-space:nowrap;border-radius:3px;padding:4px 10px;font-size:.5625rem;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)skew(10deg)}.terminal-preview .demo-split-comparison .demo-caption{color:var(--color-ash);text-align:center;padding:var(--spacing-sm) var(--spacing-md);flex-shrink:0;font-size:.75rem}@keyframes blink{50%{opacity:0}}.casestudies-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist);position:relative}.transformations-tabbed{margin-top:var(--spacing-xl)}.transformation-tabs{gap:var(--spacing-xs);border-bottom:1px solid var(--color-mist);margin-bottom:var(--spacing-lg);display:flex}.transformation-tab{font-family:var(--font-display);color:var(--color-ash);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;background:0 0;border:none;font-size:.9375rem;font-weight:500;transition:color .2s;position:relative}.transformation-tab:hover{color:var(--color-charcoal)}.transformation-tab.active{color:var(--color-ink)}.transformation-tab.active:after{content:"";background:var(--color-accent);height:2px;position:absolute;bottom:-1px;left:0;right:0}.transformation-panels{position:relative}.transformation-panel{gap:var(--spacing-lg);flex-direction:column;animation:.3s fadeInPanel;display:none}.transformation-panel.active{display:flex}@keyframes fadeInPanel{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.transformation-images{align-items:center;gap:var(--spacing-md);display:flex}.transformation-before,.transformation-after{flex:1;margin:0}.transformation-before img,.transformation-after img,.transformation-placeholder{aspect-ratio:16/10;object-fit:cover;border:1px solid var(--color-mist);cursor:pointer;border-radius:8px;width:100%;transition:transform .2s,box-shadow .2s}.transformation-before img:hover,.transformation-after img:hover,.transformation-placeholder:hover{transform:scale(1.02);box-shadow:0 8px 24px -4px #00000026}.transformation-placeholder{background:linear-gradient(135deg, var(--color-mist) 0%, var(--color-cream) 100%);color:var(--color-ash);justify-content:center;align-items:center;font-size:.8125rem;font-style:italic;display:flex}.transformation-before figcaption,.transformation-after figcaption{text-transform:uppercase;letter-spacing:.05em;color:var(--color-ash);margin-top:var(--spacing-xs);text-align:center;font-size:.75rem;font-weight:600}.transformation-arrow{color:var(--color-accent);flex-shrink:0;font-size:1.5rem;font-weight:300}.transformation-info{max-width:600px}.transformation-title{font-family:var(--font-display);color:var(--color-ink);margin:0 0 var(--spacing-xs);font-size:1.25rem;font-weight:600}.transformation-desc{color:var(--color-charcoal);margin:0 0 var(--spacing-sm);font-size:.9375rem;line-height:1.6}.transformation-commands{flex-wrap:wrap;gap:6px;display:flex}.transformation-command{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-charcoal);border-radius:4px;padding:4px 10px;font-size:.75rem}.lightbox{z-index:1000;opacity:0;visibility:hidden;background:#000000e6;justify-content:center;align-items:center;transition:opacity .3s,visibility .3s;display:flex;position:fixed;inset:0}.lightbox.active{opacity:1;visibility:visible}.lightbox-close{color:#fff;cursor:pointer;opacity:.7;background:0 0;border:none;font-size:2.5rem;line-height:1;transition:opacity .2s;position:absolute;top:20px;right:24px}.lightbox-close:hover{opacity:1}.lightbox-image{object-fit:contain;border-radius:8px;max-width:90vw;max-height:85vh;box-shadow:0 20px 60px #00000080}@media (max-width:768px){.transformation-images{flex-direction:column}.transformation-arrow{transform:rotate(90deg)}.transformation-before,.transformation-after{width:100%}}.hero-version-link{color:var(--color-ash);margin-top:var(--spacing-sm);font-size:.8125rem}.hero-version-link a{color:var(--color-ash);border-bottom:1px solid #0000;text-decoration:none;transition:color .2s,border-color .2s}.hero-version-link a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}.changelog-section{padding:var(--spacing-xl) 0;border-top:1px solid var(--color-mist);position:relative}.changelog-list{flex-direction:column;gap:0;display:flex}.changelog-entry{padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-mist)}.changelog-entry:first-child{border-top:1px solid var(--color-mist)}.changelog-version-header{align-items:baseline;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);display:flex}.changelog-version{font-family:var(--font-mono);color:var(--color-ink);font-size:1.125rem;font-weight:600}.changelog-date{color:var(--color-ash);font-size:.8125rem}.changelog-items{padding-left:var(--spacing-md);color:var(--color-charcoal);margin:0;line-height:1.7}.changelog-items li{margin-bottom:var(--spacing-xs)}.changelog-items code{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-ink);border-radius:3px;padding:2px 6px;font-size:.875em}.faq-section{padding:var(--spacing-xl) 0;border-top:1px solid var(--color-mist);position:relative}.faq-list{flex-direction:column;gap:0;display:flex}.faq-item{border-bottom:1px solid var(--color-mist)}.faq-item:first-child{border-top:1px solid var(--color-mist)}.faq-question{font-family:var(--font-display);color:var(--color-ink);padding:var(--spacing-md) 0;cursor:pointer;justify-content:space-between;align-items:center;font-size:1.125rem;font-weight:500;list-style:none;transition:color .2s;display:flex}.faq-question::-webkit-details-marker{display:none}.faq-question:after{content:"+";font-family:var(--font-body);color:var(--color-accent);transition:transform .3s var(--ease-out);font-size:1.5rem;font-weight:300}.faq-item[open] .faq-question:after{transform:rotate(45deg)}.faq-question:hover{color:var(--color-accent)}.faq-answer{padding:0 0 var(--spacing-md);color:var(--color-charcoal);animation:faqFadeIn .3s var(--ease-out);line-height:1.7}.faq-answer p{margin:0 0 var(--spacing-sm)}.faq-answer p:last-child{margin-bottom:0}.faq-answer ul{margin:var(--spacing-sm) 0;padding-left:var(--spacing-md)}.faq-answer li{margin-bottom:var(--spacing-xs)}.faq-answer code{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-ink);border-radius:3px;padding:2px 6px;font-size:.875em}.faq-answer a{color:var(--color-accent);border-bottom:1px solid #0000;text-decoration:none;transition:border-color .2s}.faq-answer a:hover{border-bottom-color:var(--color-accent)}@keyframes faqFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.skills-section{padding:var(--spacing-xl) 0;background:var(--color-bg);position:relative;overflow:hidden}.skills-gallery{display:block;position:relative}.gallery-track{gap:var(--spacing-lg);scroll-snap-type:x mandatory;padding:var(--spacing-md) var(--spacing-lg) var(--spacing-xl);-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;display:flex;overflow-x:auto}.gallery-track:active{cursor:grabbing}.gallery-track::-webkit-scrollbar{display:none}.gallery-frame{scroll-snap-align:center;background:var(--color-paper);border:1px solid var(--color-mist);opacity:.4;max-width:1100px;transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);border-radius:2px;flex:0 0 80vw;position:relative;overflow:hidden;transform:scale(.95);box-shadow:0 4px 6px -1px #0000000d,0 20px 50px -10px #0000001a}.gallery-frame.active{opacity:1;border-color:var(--color-charcoal);border-width:1px;transform:scale(1);box-shadow:0 20px 25px -5px #0000001a,0 40px 100px -20px #0003}.gallery-content{grid-template-columns:1.2fr 1fr;height:600px;display:grid}@media (max-width:900px){.gallery-frame{flex:0 0 90vw}.gallery-content{grid-template-columns:1fr;height:auto;min-height:600px}}.gallery-visual{background:var(--color-cream);border-right:1px solid var(--color-mist);padding:var(--spacing-lg);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.gallery-info{padding:var(--spacing-xl);flex-direction:column;display:flex;overflow-y:auto}.gallery-header{margin-bottom:var(--spacing-lg)}.gallery-title{font-family:var(--font-display);margin:0 0 var(--spacing-xs);color:var(--color-ink);font-size:2.5rem;font-style:italic}.gallery-meta{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);font-size:.75rem}.gallery-desc{color:var(--color-charcoal);margin-bottom:var(--spacing-xl);max-width:45ch;font-size:1.125rem;line-height:1.6}.gallery-tags{gap:var(--spacing-xs);flex-wrap:wrap;margin-top:auto;display:flex}.gallery-tag{border:1px solid var(--color-mist);color:var(--color-ash);border-radius:4px;padding:6px 12px;font-size:.8125rem}.gallery-map{margin-top:var(--spacing-lg);justify-content:center;gap:8px;display:flex}.gallery-dot{background:var(--color-mist);cursor:pointer;width:40px;height:2px;font:inherit;border:none;padding:0;transition:all .3s;position:relative}.gallery-dot:after{content:"";position:absolute;inset:-10px 0}.gallery-dot:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;border-radius:1px}.gallery-dot.active{background:var(--color-accent);height:4px}.demo-tabbed-container{flex-direction:column;display:flex}.demo-tabs{background:var(--color-paper);border-bottom:1px solid var(--color-mist);justify-content:center;gap:0;margin-bottom:0;display:flex}.demo-tab{padding:var(--spacing-sm) var(--spacing-lg);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--color-ash);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:0 0;border:none;border-bottom:2px solid #0000;font-size:.75rem;font-weight:500}.demo-tab:hover{color:var(--color-text);background:var(--color-cream)}.demo-tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent);background:var(--color-accent-dim)}.demo-panels{flex:1}.demo-panel{display:none}.demo-panel.active{animation:fadeSlideIn .3s var(--ease-out);display:block}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.demo-container{background:var(--color-paper);border:none;border-radius:0;overflow:hidden}.demo-header{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-paper);border-bottom:1px solid var(--color-mist);justify-content:center;align-items:center;min-height:48px;display:flex}.demo-toggle{align-items:center;gap:var(--spacing-md);display:flex}.demo-toggle-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ash);transition:color var(--duration-fast) var(--ease-out);cursor:pointer;font-size:.6875rem;font-weight:600}.demo-toggle-label:hover{color:var(--color-text)}.demo-toggle-label.active{color:var(--color-accent)}.demo-toggle-switch{background:var(--color-mist);cursor:pointer;width:44px;height:24px;transition:background var(--duration-fast) var(--ease-out);font:inherit;border:1px solid #0000;border-radius:12px;padding:0;position:relative}.demo-toggle-switch:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.demo-toggle-switch:hover{border-color:var(--color-ash)}.demo-toggle-switch:after{content:"";background:var(--color-paper);width:16px;height:16px;transition:transform var(--duration-base) var(--ease-spring);border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #00000026}.demo-toggle-switch.active{background:var(--color-accent)}.demo-toggle-switch.active:after{transform:translate(20px)}.demo-viewport{padding:var(--spacing-xl);background:var(--color-cream);min-height:280px;transition:background var(--duration-base) var(--ease-out);justify-content:center;align-items:center;display:flex}.demo-viewport[data-state=after]{background:var(--color-paper)}.demo-caption{padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-mono);letter-spacing:.03em;color:var(--color-ash);background:var(--color-paper);text-align:center;font-size:.6875rem}.uxw-demo{width:100%;max-width:320px;padding:var(--spacing-lg);background:var(--color-paper);border:1px solid var(--color-mist);text-align:center;border-radius:6px}.uxw-error-icon{margin-bottom:var(--spacing-sm);font-size:2rem}.uxw-error-title{color:#c00;margin-bottom:var(--spacing-xs);font-weight:600}.uxw-error-text{color:var(--color-ash);font-size:.875rem}.uxw-error-action{margin-top:var(--spacing-sm);color:var(--color-accent);cursor:pointer;font-size:.875rem;text-decoration:underline}.uxw-error-after .uxw-error-icon{color:var(--color-accent)}.uxw-error-after .uxw-error-title{color:var(--color-text)}.uxw-error-after .uxw-error-text{color:var(--color-charcoal)}.uxw-button-context{color:var(--color-charcoal);margin-bottom:var(--spacing-md);font-size:.875rem;font-weight:500}.uxw-button-row{gap:var(--spacing-sm);justify-content:center;display:flex}.uxw-btn{padding:var(--spacing-xs) var(--spacing-md);cursor:pointer;border:none;border-radius:4px;font-size:.875rem;font-weight:500}.uxw-btn-primary{background:var(--color-text);color:var(--color-paper)}.uxw-btn-secondary{color:var(--color-ash);border:1px solid var(--color-mist);background:0 0}.uxw-btn-danger{color:#fff;background:#c00}.uxw-empty-icon{margin-bottom:var(--spacing-sm);opacity:.4;font-size:2.5rem}.uxw-empty-title{color:var(--color-ash);font-weight:500}.uxw-empty-text{color:var(--color-charcoal);margin-top:var(--spacing-xs);font-size:.875rem}.uxw-empty-action{margin-top:var(--spacing-md)}.uxw-empty-after .uxw-empty-icon{opacity:1}.uxw-empty-after .uxw-empty-title{color:var(--color-text)}.spatial-demo{width:100%;max-width:340px;padding:var(--spacing-md);background:var(--color-paper);border:1px solid var(--color-mist);border-radius:6px}.spatial-grid-before{flex-wrap:wrap;gap:6px;display:flex}.spatial-grid-after{gap:var(--spacing-sm);grid-template-columns:1fr 1fr;display:grid}.spatial-card-item{padding:var(--spacing-sm);background:var(--color-bg);border:1px solid var(--color-mist);color:var(--color-charcoal);text-align:center;border-radius:4px;font-size:.8125rem}.spatial-grid-after .spatial-card-item{width:auto!important}.spatial-hierarchy-before .spatial-h-title,.spatial-hierarchy-before .spatial-h-subtitle,.spatial-hierarchy-before .spatial-h-cta,.spatial-hierarchy-before .spatial-h-link{margin-bottom:var(--spacing-xs);color:var(--color-charcoal);font-size:.9375rem}.spatial-hierarchy-after .spatial-h-title{font-family:var(--font-display);margin-bottom:var(--spacing-xs);color:var(--color-text);font-size:1.75rem;font-style:italic;font-weight:300}.spatial-hierarchy-after .spatial-h-subtitle{text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);margin-bottom:var(--spacing-md);font-size:.6875rem}.spatial-hierarchy-after .spatial-h-cta{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-text);color:var(--color-paper);margin-bottom:var(--spacing-sm);border-radius:4px;font-size:.875rem;font-weight:500;display:inline-block}.spatial-hierarchy-after .spatial-h-link{color:var(--color-ash);font-size:.75rem}.spatial-whitespace-before{padding:var(--spacing-xs)!important}.spatial-whitespace-before .spatial-ws-title{margin-bottom:2px;font-size:1rem;font-weight:600}.spatial-whitespace-before .spatial-ws-price{color:var(--color-ash);margin-bottom:4px;font-size:.875rem}.spatial-whitespace-before .spatial-ws-features{color:var(--color-ash);margin-bottom:6px;font-size:.75rem}.spatial-whitespace-before .spatial-ws-btn{background:var(--color-text);width:100%;color:var(--color-paper);cursor:pointer;border:none;border-radius:3px;padding:6px;font-size:.75rem}.spatial-whitespace-after{padding:var(--spacing-lg)!important}.spatial-whitespace-after .spatial-ws-title{font-family:var(--font-display);margin-bottom:var(--spacing-sm);font-size:1.5rem;font-weight:400}.spatial-whitespace-after .spatial-ws-price{color:var(--color-text);margin-bottom:var(--spacing-sm);font-size:1.25rem;font-weight:600}.spatial-whitespace-after .spatial-ws-features{color:var(--color-ash);margin-bottom:var(--spacing-lg);font-size:.8125rem;line-height:1.6}.spatial-whitespace-after .spatial-ws-btn{width:100%;padding:var(--spacing-sm);background:var(--color-text);color:var(--color-paper);cursor:pointer;border:none;border-radius:4px;font-size:.875rem;font-weight:500}.motion-demo{align-items:center;gap:var(--spacing-sm);flex-direction:column;width:100%;max-width:280px;display:flex}.motion-stagger-demo{align-items:stretch}.motion-list-item{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-mist);color:var(--color-charcoal);border-radius:4px;font-size:.875rem;display:flex}.motion-dot{background:var(--color-accent);border-radius:50%;width:8px;height:8px}.demo-viewport[data-state=after] .motion-list-item{opacity:0;animation:.35s cubic-bezier(.16,1,.3,1) forwards staggerIn;transform:translateY(12px)}.demo-viewport[data-state=after] .motion-list-item:first-child{animation-delay:0s}.demo-viewport[data-state=after] .motion-list-item:nth-child(2){animation-delay:50ms}.demo-viewport[data-state=after] .motion-list-item:nth-child(3){animation-delay:.1s}.demo-viewport[data-state=after] .motion-list-item:nth-child(4){animation-delay:.15s}@keyframes staggerIn{to{opacity:1;transform:translateY(0)}}.motion-btn{cursor:pointer;border:none;border-radius:4px;padding:12px 24px;font-size:.9375rem;font-weight:500}.motion-btn-before{background:var(--color-charcoal);color:var(--color-paper)}.motion-btn-after{background:var(--color-text);color:var(--color-paper);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}.motion-btn-after:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.motion-btn-after:active{transform:translateY(0)scale(.98)}.motion-card{padding:var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-mist);text-align:center;border-radius:6px;min-width:140px}.motion-card-icon{margin-bottom:var(--spacing-xs);font-size:1.5rem}.motion-card-text{color:var(--color-charcoal);font-size:.8125rem}.motion-card-after{transition:all .3s cubic-bezier(.34,1.56,.64,1)}.demo-viewport[data-state=after] .motion-card-after{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.demo-viewport[data-state=after] .motion-card-after{background:color-mix(in oklch, var(--color-accent) 10%, var(--color-paper))}}.demo-viewport[data-state=after] .motion-card-after{border-color:var(--color-accent)}.demo-viewport[data-state=after] .motion-card-after .motion-card-icon{animation:.4s cubic-bezier(.34,1.56,.64,1) checkPop}@keyframes checkPop{50%{transform:scale(1.3)}}.typo-demo{text-align:left;width:100%;max-width:320px}.typo-pairing-before{font-family:Inter,system-ui,sans-serif}.typo-pairing-before .typo-heading{margin-bottom:var(--spacing-xs);font-size:1.5rem;font-weight:600}.typo-pairing-before .typo-body{color:var(--color-ash);font-size:.9375rem;line-height:1.5}.typo-pairing-after .typo-heading{font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:var(--spacing-sm);color:var(--color-text);font-size:2rem;font-style:italic;font-weight:300}.typo-pairing-after .typo-body{font-family:var(--font-body);color:var(--color-charcoal);font-size:.9375rem;line-height:1.7}.typo-hierarchy-before .typo-h1{margin-bottom:4px;font-size:1.125rem;font-weight:600}.typo-hierarchy-before .typo-meta{color:var(--color-ash);margin-bottom:var(--spacing-xs);font-size:.9375rem}.typo-hierarchy-before .typo-p{color:var(--color-charcoal);font-size:.875rem;line-height:1.5}.typo-hierarchy-after .typo-h1{font-family:var(--font-display);letter-spacing:-.03em;margin-bottom:2px;font-size:2.25rem;font-weight:300;line-height:1.1}.typo-hierarchy-after .typo-meta{text-transform:uppercase;letter-spacing:.12em;color:var(--color-accent);margin-bottom:var(--spacing-md);font-size:.6875rem}.typo-hierarchy-after .typo-p{color:var(--color-ash);font-size:.9375rem;line-height:1.7}.int-demo{gap:var(--spacing-md);flex-direction:column;width:100%;max-width:280px;display:flex}.int-states-demo{gap:var(--spacing-lg)}.int-state-row{align-items:center;gap:var(--spacing-md);display:flex}.int-state-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-ash);width:40px;font-size:.6875rem}.int-btn{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;border-radius:4px;flex:1;font-size:.875rem;font-weight:500}.int-btn-poor{background:var(--color-charcoal);color:var(--color-paper);border:none}.int-btn-good{background:var(--color-text);color:var(--color-paper);border:2px solid #0000;transition:all .15s}.int-btn-good:hover{background:var(--color-charcoal)}.int-btn-good:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent);outline:none}@supports (color:color-mix(in lab, red, red)){.int-btn-good:focus{box-shadow:0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent)}}.int-btn-good:active{transform:scale(.98)}.int-aff-item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;border-radius:4px;font-size:.875rem}.int-aff-poor{color:var(--color-charcoal)}.int-aff-good{color:var(--color-accent);text-underline-offset:2px;text-decoration:underline}.int-aff-good:after{content:" →"}.int-affordance-after .int-aff-item{background:var(--color-bg);border:1px solid var(--color-mist);color:var(--color-accent);text-underline-offset:2px;text-decoration:underline;transition:background .15s}.int-affordance-after .int-aff-item:hover{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.int-affordance-after .int-aff-item:hover{background:color-mix(in oklch, var(--color-accent) 5%, var(--color-paper))}}.int-affordance-after .int-aff-item:after{content:" →"}.int-feedback-before,.int-feedback-after{align-items:center;gap:var(--spacing-md);flex-direction:row;display:flex}.int-fb-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.int-fb-btn svg{width:22px;height:22px}.int-fb-silent{background:var(--color-mist);color:var(--color-ash)}.int-fb-active{background:var(--color-charcoal);color:var(--color-paper);transition:all .15s cubic-bezier(.34,1.56,.64,1)}.int-fb-active:hover{transform:scale(1.1)}.int-fb-active:active{transform:scale(.95)}.int-fb-active.liked{background:var(--color-accent);animation:.35s cubic-bezier(.34,1.56,.64,1) heartPop}@keyframes heartPop{50%{transform:scale(1.25)}}.int-fb-label{color:var(--color-charcoal);font-size:.875rem}.color-demo{width:100%;max-width:300px}.color-palette-before,.color-palette-after{gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--color-paper);border:1px solid var(--color-mist);border-radius:6px;flex-wrap:wrap;display:flex}.color-swatch{border-radius:4px;width:40px;height:40px;transition:background .2s}.color-card{width:100%;margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:var(--color-paper);border:1px solid var(--color-mist);border-radius:4px;flex-direction:column;gap:4px;display:flex}.color-card span{font-size:.8125rem;font-weight:500;transition:color .2s}.color-card button{cursor:pointer;border:none;border-radius:3px;padding:6px;font-size:.75rem;font-weight:500;transition:all .2s}.color-palette-before .swatch-1{background:#ff6b6b}.color-palette-before .swatch-2{background:#4ecdc4}.color-palette-before .swatch-3{background:#ffe66d}.color-palette-before .swatch-4{background:#95e1d3}.color-palette-before .swatch-5{background:#f38181}.color-palette-before .card-title{color:#ff6b6b}.color-palette-before .card-subtitle{color:#4ecdc4}.color-palette-before .card-btn{color:#333;background:#ffe66d}.color-palette-after .swatch-1{background:var(--color-text)}.color-palette-after .swatch-2{background:var(--color-charcoal)}.color-palette-after .swatch-3{background:var(--color-ash)}.color-palette-after .swatch-4{background:var(--color-mist)}.color-palette-after .swatch-5{background:var(--color-accent)}.color-palette-after .card-title{color:var(--color-text)}.color-palette-after .card-subtitle{color:var(--color-ash)}.color-palette-after .card-btn{background:var(--color-accent);color:var(--color-paper)}.color-accent-card{padding:var(--spacing-md);border-radius:6px}.color-accent-before .color-accent-card{background:#f5f5f5;border:1px solid #e0e0e0}.color-accent-before .color-accent-title{color:#333;margin-bottom:4px;font-weight:600}.color-accent-before .color-accent-text{color:#666;margin-bottom:var(--spacing-sm);font-size:.8125rem}.color-accent-before .color-accent-btn{width:100%;padding:var(--spacing-xs);color:#fff;cursor:pointer;background:#333;border:none;border-radius:4px;font-size:.8125rem}.color-accent-after .color-accent-card{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.color-accent-after .color-accent-card{background:color-mix(in oklch, var(--color-accent) 8%, var(--color-paper))}}.color-accent-after .color-accent-card{border:1px solid var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.color-accent-after .color-accent-card{border:1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper))}}.color-accent-after .color-accent-title{color:var(--color-text);margin-bottom:4px;font-weight:600}.color-accent-after .color-accent-text{color:var(--color-ash);margin-bottom:var(--spacing-sm);font-size:.8125rem}.color-accent-after .color-accent-btn{width:100%;padding:var(--spacing-xs);background:var(--color-accent);color:var(--color-paper);cursor:pointer;border:none;border-radius:4px;font-size:.8125rem;font-weight:500}.color-contrast-static{gap:var(--spacing-sm);flex-direction:column;display:flex}.contrast-example{padding:var(--spacing-md);text-align:center;border-radius:6px}.contrast-fail{color:#a0a0a0;background:#f0f0f0}.contrast-pass{background:var(--color-charcoal);color:var(--color-paper)}.contrast-badge{text-transform:uppercase;letter-spacing:.1em;border-radius:2px;margin-bottom:4px;padding:2px 6px;font-size:.5625rem;font-weight:600;display:inline-block}.contrast-fail .contrast-badge{background:#ddd}.contrast-pass .contrast-badge{background:var(--color-accent);color:var(--color-paper)}.contrast-text{margin-bottom:2px;font-size:1rem;font-weight:500}.contrast-ratio{opacity:.7;font-size:.6875rem}.resp-demo{width:100%;max-width:340px}.resp-touch-demo{gap:var(--spacing-lg);flex-direction:column;display:flex}.resp-touch-row{align-items:center;gap:var(--spacing-md);display:flex}.resp-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-ash);width:70px;font-size:.6875rem}.resp-touch-targets{gap:4px;display:flex}.resp-touch-targets button{cursor:pointer;border:none;border-radius:4px;font-weight:500}.resp-touch-bad button{background:var(--color-mist);width:24px;height:24px;color:var(--color-ash);font-size:.75rem}.resp-touch-good button{background:var(--color-text);width:44px;height:44px;color:var(--color-paper);font-size:1rem}.resp-fluid-demo{padding:var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-mist);border-radius:6px}.resp-fluid-container{gap:var(--spacing-md);flex-direction:column;display:flex}.resp-fluid-fixed,.resp-fluid-adaptive{color:var(--color-ash);font-size:.75rem}.resp-fluid-fixed span,.resp-fluid-adaptive span{margin-bottom:4px;display:block}.resp-fluid-bar{background:var(--color-mist);border-radius:4px;height:24px}.resp-fluid-adaptive .resp-fluid-bar{background:var(--color-accent)}.resp-adapt-demo{gap:var(--spacing-sm);align-items:flex-end;display:flex}.resp-device{text-align:center}.resp-device>span{color:var(--color-ash);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;font-size:.625rem;display:block}.resp-device-screen{background:var(--color-paper);border:2px solid var(--color-mist);border-radius:4px;flex-direction:column;gap:3px;padding:4px;display:flex}.resp-device-mobile .resp-device-screen{width:50px;height:80px}.resp-device-tablet .resp-device-screen{width:80px;height:60px}.resp-device-desktop .resp-device-screen{width:120px;height:70px}.resp-block{background:var(--color-mist);border-radius:2px}.resp-block-row{flex:1;gap:3px;display:flex}.resp-header{background:var(--color-charcoal);height:16px}.resp-sidebar{background:var(--color-charcoal);width:30%}.resp-content{flex:1}@keyframes fadeIn{to{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}*,:before,:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{max-width:100%;display:block}button,input,textarea,select{font:inherit}:root{--font-display:"Cormorant Garamond", Georgia, serif;--font-body:"Instrument Sans", system-ui, sans-serif;--font-mono:"Space Grotesk", monospace;--spacing-xs:8px;--spacing-sm:16px;--spacing-md:24px;--spacing-lg:32px;--spacing-xl:48px;--spacing-2xl:80px;--spacing-3xl:120px;--width-max:1400px;--width-content:900px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.15s;--duration-base:.3s;--duration-slow:.6s;--duration-slower:.8s;--duration-slowest:1.2s;--color-ink:oklch(10% 0 0);--color-text:oklch(10% 0 0);--color-paper:oklch(98% 0 0);--color-cream:oklch(96% .005 350);--color-charcoal:oklch(25% 0 0);--color-ash:oklch(55% 0 0);--color-mist:oklch(92% 0 0);--color-bg:oklch(96% .005 350);--color-accent:oklch(60% .25 350);--color-accent-hover:oklch(52% .25 350);--color-accent-dim:oklch(60% .25 350/.15);--color-accent-soft:oklch(60% .25 350/.25);--cat-diagnostic-bg:#fdf4ff;--cat-diagnostic-border:#d946ef;--cat-diagnostic-text:#a21caf;--cat-quality-bg:#f0fdf4;--cat-quality-border:#22c55e;--cat-quality-text:#15803d;--cat-intensity-bg:#fffbeb;--cat-intensity-border:#f59e0b;--cat-intensity-text:#b45309;--cat-adaptation-bg:#eff6ff;--cat-adaptation-border:#3b82f6;--cat-adaptation-text:#1d4ed8;--cat-enhancement-bg:#fdf2f8;--cat-enhancement-border:#ec4899;--cat-enhancement-text:#be185d;--cat-system-bg:#f5f5f4;--cat-system-border:#78716c;--cat-system-text:#44403c}.skip-link{z-index:10000;padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-ink);color:var(--color-paper);border-radius:0 0 8px 8px;font-weight:600;text-decoration:none;transition:top .2s;position:absolute;top:-100%;left:50%;transform:translate(-50%)}.skip-link:focus{outline:2px solid var(--color-accent);outline-offset:2px;top:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;overflow-x:clip}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-paper);min-height:100dvh;font-size:16px;line-height:1.625;overflow-x:clip}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-ink);font-weight:400;line-height:1.1}a{color:var(--color-accent);text-underline-offset:2px;transition:color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);text-decoration:underline;text-decoration-thickness:1px}a:hover{color:var(--color-accent-hover);text-decoration-thickness:2px}.btn,.footer-logo,[class*=nav-item]{text-decoration:none}strong{color:var(--color-ink);font-weight:600}code{font-family:var(--font-mono);background:var(--color-accent-dim);color:var(--color-accent);border-radius:4px;padding:.15em .4em;font-size:.9em}::selection{background:var(--color-accent-soft);color:var(--color-ink)}.grain-overlay{pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;position:fixed;inset:0}.site-content{max-width:var(--width-max);padding:0 var(--spacing-lg);margin:0 auto}@media (max-width:768px){.site-content{padding:0 var(--spacing-md)}}.section-header{margin-bottom:var(--spacing-lg);position:relative}.section-number{font-family:var(--font-mono);letter-spacing:.05em;color:var(--color-ash);margin-bottom:var(--spacing-xs);text-transform:uppercase;font-size:.625rem;font-weight:500;display:block}.section-title{margin:0;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:400;line-height:1.2}.section-subtitle{color:var(--color-charcoal);margin-top:var(--spacing-sm);max-width:55ch;font-size:1rem;line-height:1.6}.cheatsheet-link{color:var(--color-accent);margin-left:.5em;font-size:.875rem;text-decoration:none}.cheatsheet-link:hover{text-decoration:underline}.section-lead{color:var(--color-charcoal);max-width:55ch;margin-bottom:var(--spacing-lg);font-size:1rem;line-height:1.6}.hero-combined{min-height:100dvh;padding:var(--spacing-2xl) 0;background:var(--color-paper);flex-direction:column;justify-content:center;display:flex;position:relative}.github-link{top:var(--spacing-md);right:var(--spacing-lg);z-index:10;color:var(--color-ash);transition:color .2s;position:absolute}.github-link:hover{color:var(--color-ink)}.github-link svg{width:28px;height:28px}.hero-combined-container{max-width:var(--width-max);padding:0 var(--spacing-lg);gap:var(--spacing-xl);grid-template-columns:1fr 1fr;align-items:center;width:100%;margin:0 auto;display:grid}@media (max-width:1024px){.hero-combined-container{gap:var(--spacing-lg);text-align:center;grid-template-columns:1fr}}.hero-combined-left{gap:var(--spacing-md);flex-direction:column;display:flex}@media (max-width:1024px){.hero-combined-left{align-items:center}}.hero-title-combined{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-ink);margin:0;font-size:clamp(2.5rem,7vw,4.5rem);font-style:italic;font-weight:300;line-height:1}.hero-tagline-combined{font-family:var(--font-display);color:var(--color-charcoal);margin:0;font-size:clamp(1.125rem,2.5vw,1.75rem);font-style:italic;font-weight:400;line-height:1.3}.hero-hook-text{color:var(--color-charcoal);max-width:45ch;margin:0;font-size:1rem;line-height:1.6}.hero-included-box{border:1px solid var(--color-mist);background:0 0;flex-direction:column;gap:6px;max-width:45ch;padding:10px 14px;display:flex}.hero-included-title{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);font-size:.5625rem;font-weight:500}.hero-included-items{color:var(--color-charcoal);flex-wrap:wrap;align-items:center;gap:6px;font-size:.8125rem;line-height:1.5;display:flex}.hero-included-items em{font-style:normal;font-family:var(--font-mono);font-size:.75rem}.hero-included-sep{color:var(--color-mist)}@media (max-width:500px){.hero-included-items{flex-direction:column;align-items:flex-start;gap:4px}.hero-included-sep{display:none}}.hero-cta-group{align-items:center;gap:var(--spacing-lg);margin-top:var(--spacing-sm);display:flex}@media (max-width:600px){.hero-cta-group{gap:var(--spacing-md);flex-direction:column}}.hero-cta-combined{padding:var(--spacing-sm) var(--spacing-xl);font-family:var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--color-paper);background:var(--color-ink);border:none;font-size:.9rem;font-weight:500;text-decoration:none;transition:transform .2s,background .2s;display:inline-block}.hero-cta-combined:hover{background:var(--color-accent);color:var(--color-paper);transform:translateY(-2px)}.hero-logos-inline{align-items:center;gap:var(--spacing-sm);display:flex}.hero-logos-inline .hero-logos-label{color:var(--color-ash);letter-spacing:.03em;font-size:.6875rem}.hero-logos-inline .hero-logos-row{align-items:center;gap:8px;display:flex}.hero-logos-inline .hero-logos-row img{opacity:.7;border-radius:4px;transition:opacity .2s}.hero-logos-inline .hero-logos-row img:hover{opacity:1}.hero-combined-right{justify-content:center;display:flex}.hero-combined-right .split-comparison{width:100%;max-width:520px}.hero-combined-right .split-container{max-width:100%}.hero-bias-tags{align-items:center;gap:var(--spacing-xs);margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--color-mist);max-width:var(--width-max);width:100%;padding-bottom:var(--spacing-md);flex-direction:column;margin-left:auto;margin-right:auto;display:flex}.problem-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.problem-content{gap:var(--spacing-xl);display:grid}.split-comparison{width:100%;max-width:600px;margin:-20px auto;padding:20px;position:relative}.split-container{background:var(--color-cream);border:1px solid var(--color-mist);cursor:ew-resize;-webkit-user-select:none;user-select:none;border-radius:12px;width:100%;max-width:500px;height:380px;margin:0 auto;position:relative;overflow:hidden}.split-before,.split-after{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.split-before{z-index:1}.split-content{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.split-after{clip-path:polygon(78% 0%,100% 0%,100% 100%,62% 100%);z-index:2;background:var(--color-paper)}.split-divider{background:var(--color-accent);pointer-events:none;z-index:3;width:3px;position:absolute;top:0;bottom:0;left:70%;transform:translate(-50%)skew(-10deg);box-shadow:0 0 20px #00000026}.split-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-paper);background:var(--color-accent);white-space:nowrap;border-radius:4px;padding:6px 14px;font-size:.6875rem;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)skew(10deg);box-shadow:0 2px 8px #0003}.slop-card{background:linear-gradient(135deg,#f5f3ff 0%,#ede9fe 50%,#ddd6fe 100%);border-radius:16px;flex-direction:column;width:280px;height:280px;padding:24px;font-family:Inter,system-ui,sans-serif;display:flex;box-shadow:0 4px 6px -1px #0000001a}.slop-header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.slop-avatar{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;flex-shrink:0;width:40px;height:40px}.slop-text{flex:1}.slop-title{color:#1f2937;margin-bottom:2px;font-size:14px;font-weight:600}.slop-subtitle{color:#6b7280;font-size:12px}.slop-body{color:#4b5563;flex:1;margin-bottom:auto;font-size:13px;line-height:1.5}.slop-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:8px;width:100%;margin-top:auto;padding:10px 20px;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:500}.slop-callouts{pointer-events:none;position:absolute;inset:0}.slop-callout{text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent);background:var(--color-paper);border:1px solid var(--color-accent);white-space:nowrap;opacity:0;animation:calloutFadeIn .4s var(--ease-out) forwards;border-radius:3px;padding:4px 8px;font-size:.625rem;font-weight:600;position:absolute;box-shadow:0 2px 8px #0000001a}.slop-callout[data-point=font]{animation-delay:.1s;top:15%;right:5%}.slop-callout[data-point=gradient]{animation-delay:.25s;top:40%;left:5%}.slop-callout[data-point=copy]{animation-delay:.4s;bottom:35%;right:8%}.slop-callout[data-point=rounded]{animation-delay:.55s;bottom:12%;left:10%}@keyframes calloutFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.impeccable-card{background:var(--color-paper);border:1px solid var(--color-mist);width:280px;height:300px;padding:var(--spacing-lg);text-align:left;flex-direction:column;display:flex}.impeccable-eyebrow{font-family:var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--spacing-xs);font-size:.625rem;font-weight:500}.impeccable-title{font-family:var(--font-display);color:var(--color-ink);margin-bottom:var(--spacing-sm);font-size:1.75rem;font-style:italic;font-weight:300;line-height:1.1}.impeccable-body{color:var(--color-ash);flex:1;margin-bottom:auto;font-size:.875rem;line-height:1.6}.impeccable-button{margin-top:var(--spacing-sm);background:var(--color-ink);color:var(--color-paper);font-family:var(--font-body);letter-spacing:.03em;cursor:pointer;transition:all var(--duration-base) var(--ease-out);border:none;align-self:flex-start;padding:.625rem 1.5rem;font-size:.8125rem;font-weight:500;display:inline-flex}.impeccable-button:hover{background:var(--color-accent)}.split-labels{justify-content:center;gap:var(--spacing-xl);margin-top:var(--spacing-md);display:flex}.split-label-item{align-items:center;gap:var(--spacing-xs);color:var(--color-ash);font-size:.8125rem;display:flex}.split-label-dot{background:var(--color-mist);border-radius:50%;width:8px;height:8px}.split-label-dot--accent{background:var(--color-accent)}.solution-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.solution-content{gap:var(--spacing-lg);display:grid}.solution-content .section-lead{margin-bottom:0}.solution-visual{gap:var(--spacing-lg);grid-template-columns:1fr auto 1fr;align-items:stretch;display:grid}@media (max-width:900px){.solution-visual{gap:var(--spacing-md);grid-template-columns:1fr}}.solution-visual-interactive{background:var(--color-paper);border:1px solid var(--color-mist);border-radius:8px;width:100%;min-height:380px;position:relative;overflow:hidden}.solution-pillar{background:var(--color-cream);border:1px solid var(--color-mist);padding:var(--spacing-lg);transition:all var(--duration-base) var(--ease-out)}.solution-pillar:hover{border-color:var(--color-accent);box-shadow:0 20px 60px var(--color-accent-dim);transform:translateY(-4px)}.pillar-header{text-align:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-mist)}.pillar-icon{background:var(--color-accent-dim);width:56px;height:56px;color:var(--color-accent);margin-bottom:var(--spacing-sm);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.pillar-title{font-family:var(--font-display);margin:0 0 var(--spacing-xs);font-size:1.75rem;font-weight:400}.pillar-subtitle{color:var(--color-ash);margin:0;font-size:.875rem}.pillar-content{gap:var(--spacing-sm);flex-direction:column;display:flex}.pillar-item{padding:var(--spacing-sm);background:var(--color-paper);transition:all var(--duration-fast) var(--ease-out);border-radius:4px;justify-content:space-between;align-items:center;display:flex}.pillar-item:hover{background:var(--color-accent-dim)}.pillar-item-name{color:var(--color-ink);font-size:.9375rem;font-weight:500}.pillar-item-code{font-family:var(--font-mono);color:var(--color-accent);background:0 0;padding:0;font-size:.875rem;font-weight:500}.pillar-item-desc{color:var(--color-ash);font-size:.75rem}.pillar-item--more{color:var(--color-accent);border:1px dashed var(--color-mist);background:0 0;justify-content:center;font-size:.8125rem;font-weight:500}.solution-connector{justify-content:center;align-items:center;display:flex}.connector-plus{font-family:var(--font-display);color:var(--color-accent);opacity:.5;font-size:3rem;font-weight:300}@media (max-width:900px){.solution-connector{padding:var(--spacing-sm) 0}.connector-plus{font-size:2rem}}.skills-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.skills-gallery{gap:var(--spacing-xl);grid-template-columns:200px 1fr;align-items:start;display:grid}@media (max-width:968px){.skills-gallery{gap:var(--spacing-lg);grid-template-columns:1fr}}.skills-nav{top:var(--spacing-lg);flex-direction:column;gap:2px;display:flex;position:sticky}@media (max-width:968px){.skills-nav{gap:var(--spacing-xs);flex-flow:wrap;position:static}}.skill-nav-item{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-ash);font-family:var(--font-body);cursor:pointer;text-align:left;background:0 0;border:none;border-left:2px solid #0000;font-size:.9375rem;font-weight:400;text-decoration:none;transition:all .2s;display:block}.skill-nav-item:hover{color:var(--color-text);background:var(--color-cream)}.skill-nav-item.active{color:var(--color-accent);border-left-color:var(--color-accent);background:var(--color-accent-dim);font-weight:500}@media (max-width:968px){.skill-nav-item{padding:var(--spacing-xs) var(--spacing-md);border-bottom:2px solid #0000;border-left:none}.skill-nav-item.active{border-bottom-color:var(--color-accent)}}.skills-showcase{gap:var(--spacing-lg);grid-template-columns:1.2fr 1fr;align-items:start;display:grid}@media (max-width:1100px){.skills-showcase{grid-template-columns:1fr}}.loading-state{padding:var(--spacing-xl);text-align:center;color:var(--color-ash);font-style:italic}.mobile-commands-layout{display:none}@media (max-width:900px){.mobile-commands-layout{gap:var(--spacing-md);flex-direction:column;display:flex}.commands-container{display:none}}.mobile-carousel-wrapper{-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:var(--spacing-xs) 0;overflow-x:auto}.mobile-carousel-wrapper::-webkit-scrollbar{display:none}.mobile-carousel{gap:var(--spacing-xs);padding-right:var(--spacing-md);display:flex}.mobile-cmd-pill{padding:var(--spacing-sm) var(--spacing-md);min-height:44px;font-family:var(--font-mono);color:var(--color-ash);background:var(--color-cream);border:1px solid var(--color-mist);cursor:pointer;white-space:nowrap;border-radius:100px;flex-shrink:0;font-size:.8125rem;font-weight:500;transition:all .2s}.mobile-cmd-pill:hover{color:var(--color-charcoal);border-color:var(--color-charcoal)}.mobile-cmd-pill.active{color:var(--color-paper);background:var(--color-ink);border-color:var(--color-ink)}.mobile-demo-area{background:var(--color-cream);border:1px solid var(--color-mist);padding:var(--spacing-sm);border-radius:8px}.mobile-demo-area .demo-split-comparison{width:100%}.mobile-demo-area .split-container{width:100%;max-width:100%;height:320px}.mobile-demo-area .demo-caption{margin-top:var(--spacing-sm);font-size:.75rem}.mobile-info-area{padding-top:var(--spacing-sm)}.mobile-cmd-info{padding:var(--spacing-sm) 0;display:none}.mobile-cmd-info.active{display:block}.mobile-cmd-name{font-family:var(--font-mono);color:var(--color-ink);margin:0 0 var(--spacing-xs) 0;font-size:1.125rem;font-weight:600}.mobile-cmd-desc{color:var(--color-charcoal);margin:0;font-size:.875rem;line-height:1.5}.mobile-cmd-rel{margin-top:var(--spacing-xs);color:var(--color-ash);font-size:.75rem}.mobile-cmd-rel code{font-family:var(--font-mono);color:var(--color-ink)}.downloads-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.downloads-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.download-card{text-align:center;padding:var(--spacing-lg);background:var(--color-cream);border:1px solid var(--color-mist);transition:all var(--duration-base) var(--ease-out);flex-direction:column;align-items:center;display:flex}.download-card:hover{border-color:var(--color-accent);box-shadow:0 20px 60px var(--color-accent-dim);transform:translateY(-4px)}.download-card-icon{margin-bottom:var(--spacing-sm)}.download-card-icon img{object-fit:contain;border-radius:8px;width:40px;height:40px}.download-card-title{font-family:var(--font-display);margin:0 0 var(--spacing-sm) 0;font-size:1.25rem;font-weight:400}.download-card-note{color:var(--color-ash);margin-bottom:var(--spacing-xs);font-size:.75rem}.download-card .btn{margin-top:var(--spacing-xs)}.install-command{align-items:center;gap:var(--spacing-xs);background:var(--color-paper);border:1px solid var(--color-mist);padding:var(--spacing-sm);margin-top:var(--spacing-sm);border-radius:6px;width:100%;display:flex}.install-command code{font-family:var(--font-mono);color:var(--color-ink);white-space:nowrap;text-overflow:ellipsis;background:0 0;flex:1;padding:0;font-size:.75rem;overflow:hidden}.copy-btn{border:1px solid var(--color-mist);width:28px;height:28px;color:var(--color-ash);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:0 0;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.copy-btn:hover{background:var(--color-accent-dim);border-color:var(--color-accent);color:var(--color-accent)}.copy-btn.copied{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-paper)}.install-hint{color:var(--color-ash);margin:var(--spacing-xs) 0 0 0;font-size:.75rem}.install-hint code{font-family:var(--font-mono);background:var(--color-mist);border-radius:3px;padding:2px 5px;font-size:.6875rem}.download-card-details{width:100%;margin-top:var(--spacing-sm);text-align:left;font-size:.8125rem}.download-card-details summary{cursor:pointer;color:var(--color-ash);padding:var(--spacing-xs) 0;justify-content:center;align-items:center;gap:4px;font-size:.75rem;list-style:none;display:flex}.download-card-details summary:before{content:"▶";transition:transform var(--duration-fast) var(--ease-out);font-size:.5rem}.download-card-details[open] summary:before{transform:rotate(90deg)}.download-card-details summary::-webkit-details-marker{display:none}.download-card-details ol{margin:var(--spacing-sm) 0;padding-left:var(--spacing-md);color:var(--color-charcoal);line-height:1.6}.download-card-details li{margin-bottom:4px}.download-card-details code{font-family:var(--font-mono);background:var(--color-mist);border-radius:3px;padding:2px 5px;font-size:.6875rem}.download-card-details a{color:var(--color-accent);font-size:.75rem;text-decoration:none}.download-card-details a:hover{text-decoration:underline}.opensource-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist);text-align:center}.opensource-content{align-items:center;gap:var(--spacing-md);flex-direction:column;max-width:500px;margin:0 auto;display:flex}.opensource-title{font-size:clamp(1.5rem,4vw,2rem);font-weight:300}.opensource-desc{color:var(--color-ash);font-size:1.125rem;line-height:1.6}.site-footer{border-top:1px solid var(--color-mist);padding:var(--spacing-xl) var(--spacing-lg);background:var(--color-cream)}.footer-content{max-width:var(--width-max);justify-content:space-between;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap;margin:0 auto;display:flex}@media (max-width:768px){.footer-content{text-align:center;flex-direction:column}}.footer-brand{gap:var(--spacing-xs);flex-direction:column;display:flex}.footer-logo{font-family:var(--font-display);color:var(--color-ink);font-size:1.25rem;font-weight:400}.footer-tagline{color:var(--color-ash);font-size:.875rem}.footer-links{gap:var(--spacing-lg);flex-wrap:wrap;display:flex}.footer-links a{color:var(--color-ash);transition:color var(--duration-fast) var(--ease-out);font-size:.875rem}.footer-links a:hover{color:var(--color-accent)}.footer-author{justify-content:center;align-items:center;gap:var(--spacing-md);width:100%;padding-top:var(--spacing-lg);margin-top:var(--spacing-md);border-top:1px solid var(--color-mist);flex-wrap:wrap;display:flex}.footer-author-label{color:var(--color-ash);font-size:.875rem}.footer-author-label a{color:var(--color-text);transition:color var(--duration-fast) var(--ease-out)}.footer-author-label a:hover{color:var(--color-accent)}.footer-author-links{align-items:center;gap:var(--spacing-sm);display:flex}.footer-social-link{width:36px;height:36px;color:var(--color-ash);transition:all var(--duration-fast) var(--ease-out);background:0 0;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;display:flex}.footer-social-link:hover{color:var(--color-accent);background:var(--color-accent-dim)}.footer-author-divider{background:var(--color-mist);width:1px;height:20px;margin:0 var(--spacing-xs)}.footer-newsletter{color:var(--color-text);background:var(--color-paper);border:1px solid var(--color-mist);transition:all var(--duration-fast) var(--ease-out);border-radius:100px;align-items:center;gap:6px;padding:8px 14px;font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.footer-newsletter:hover{border-color:var(--color-accent);color:var(--color-accent)}.footer-newsletter svg{transition:transform var(--duration-fast) var(--ease-out)}.footer-newsletter:hover svg{transform:translate(3px)}@media (max-width:768px){.footer-author{gap:var(--spacing-sm);flex-direction:column}.footer-author-divider{display:none}}.btn{justify-content:center;align-items:center;gap:var(--spacing-xs);font-family:var(--font-body);letter-spacing:.03em;cursor:pointer;transition:all var(--duration-base) var(--ease-out);border:none;padding:1rem 2rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn-primary{background:var(--color-ink);color:var(--color-paper)}.btn-primary:before{content:"";background:var(--color-accent);transition:transform var(--duration-base) var(--ease-out);z-index:0;position:absolute;inset:0;transform:translateY(100%)}.btn-primary:hover:before{transform:translateY(0)}.btn-primary:hover{color:var(--color-paper)}.btn-primary span,.btn-primary svg,.btn-primary:not(:has(span)){z-index:1;position:relative}.btn-secondary{color:var(--color-ink);border:1px solid var(--color-ink);background:0 0}.btn-secondary:hover{background:var(--color-ink);color:var(--color-paper)}.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn-primary:focus-visible{outline-color:var(--color-paper);box-shadow:0 0 0 4px var(--color-accent)}.btn-secondary:focus-visible{outline-color:var(--color-accent)}@keyframes revealUp{to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(-8px)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}[data-reveal]{opacity:0;transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);transform:translateY(30px)}[data-reveal].revealed{opacity:1;transform:translateY(0)}[data-reveal]:first-child{transition-delay:0s}[data-reveal]:nth-child(2){transition-delay:.1s}[data-reveal]:nth-child(3){transition-delay:.2s}[data-reveal]:nth-child(4){transition-delay:.3s}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}.hero-canvas{display:none}.hero-scroll-indicator{opacity:1;animation:none}[data-reveal],.gallery-frame{opacity:1;transform:none}}.load-error{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);justify-content:center;align-items:center;gap:var(--spacing-md);background:var(--color-cream);border:1px solid var(--color-mist);border-radius:8px;flex-direction:column;display:flex}.load-error-icon{color:var(--color-accent);font-size:2.5rem}.load-error-title{font-family:var(--font-display);color:var(--color-ink);margin:0;font-size:1.5rem;font-weight:400}.load-error-text{color:var(--color-ash);max-width:40ch;font-size:1rem;line-height:1.5}.load-error-retry{margin-top:var(--spacing-sm)}.bias-tags{align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg);flex-direction:column;display:flex}.bias-tags-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ash);font-size:.6875rem;font-weight:500}.bias-tags-list{justify-content:center;gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.bias-tag{background:var(--color-cream);border:1px solid var(--color-mist);color:var(--color-charcoal);transition:all var(--duration-fast) var(--ease-out);padding:6px 12px;font-size:.75rem;font-weight:500}.bias-tag:hover{border-color:var(--color-accent);color:var(--color-accent)}.antidote-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.patterns-categories{margin-bottom:var(--spacing-xl)}.pattern-tabs{gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);flex-wrap:wrap;display:flex}.pattern-tab{font-family:var(--font-body);color:var(--color-ash);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;transition:color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);background:0 0;border:none;border-bottom:2px solid #0000;font-size:.875rem}.pattern-tab:hover{color:var(--color-charcoal)}.pattern-tab.active{color:var(--color-ink);border-bottom-color:var(--color-accent);font-weight:500}.pattern-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}.pattern-panel{display:none}.pattern-panel.active{display:block}.pattern-columns{gap:var(--spacing-xl);grid-template-columns:1fr 1fr;display:grid}@media (max-width:768px){.pattern-columns{gap:var(--spacing-md);grid-template-columns:1fr}}.pattern-column-label{text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--spacing-sm);color:var(--color-ash);font-size:.6875rem;font-weight:600;display:block}.pattern-column--anti .pattern-column-label{color:var(--color-accent)}.pattern-column--do .pattern-column-label{color:var(--color-success,#22c55e)}.pattern-list{gap:var(--spacing-xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.pattern-item{padding-left:var(--spacing-md);font-size:.8125rem;line-height:1.5;position:relative}.pattern-item--anti{color:var(--color-ash)}.pattern-item--anti:before{content:"×";color:var(--color-accent);font-weight:600;position:absolute;left:0}.pattern-item--do{color:var(--color-charcoal)}.pattern-item--do:before{content:"✓";color:var(--color-success,#22c55e);font-weight:600;position:absolute;left:0}.contribute-inline{color:var(--color-ash);margin-top:var(--spacing-md);font-size:.875rem}.contribute-inline a{color:var(--color-accent);text-decoration:none}.contribute-inline a:hover{text-decoration:underline}.pillar-item--main{background:var(--color-accent-dim);border:1px solid var(--color-accent)}.pillar-item--main .pillar-item-name{color:var(--color-accent);font-size:1.125rem;font-weight:600}.pillar-item--ref{padding:var(--spacing-xs) var(--spacing-sm);background:0 0}.pillar-item-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-ash);font-size:.75rem;font-weight:500}.pillar-refs{gap:var(--spacing-xs);padding:0 var(--spacing-sm);flex-wrap:wrap;display:flex}.pillar-ref{text-transform:uppercase;letter-spacing:.03em;background:var(--color-paper);color:var(--color-ash);border:1px solid var(--color-mist);transition:all var(--duration-fast) var(--ease-out);border-radius:3px;padding:4px 10px;font-size:.6875rem;font-weight:500}.pillar-ref:hover{border-color:var(--color-accent);color:var(--color-accent)}.pillar-command-group{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--color-paper);border-radius:4px;flex-wrap:wrap;display:flex}.pillar-group-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-ash);width:100%;margin-bottom:4px;font-size:.6875rem;font-weight:600}.pillar-command-group .pillar-item-code{background:var(--color-accent-dim);border-radius:3px;padding:4px 8px;font-size:.8125rem}.platforms-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.platforms-section .section-subtitle{max-width:60ch}.install-terminal{max-width:640px;margin:0 auto var(--spacing-xl)}.install-terminal .glass-terminal{height:auto}.install-terminal .terminal-body{flex-direction:column;padding:0;display:flex}.install-terminal-row{padding:var(--spacing-md) var(--spacing-lg);flex-direction:column;gap:6px;display:flex}.install-terminal-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);font-size:.625rem;font-weight:600}.install-terminal-cmd{align-items:center;gap:var(--spacing-sm);display:flex}.install-terminal-cmd .terminal-prompt{flex-shrink:0}.install-terminal-cmd code{font-family:var(--font-mono);color:var(--color-ink);white-space:nowrap;text-overflow:ellipsis;background:0 0;flex:1;padding:0;font-size:.9375rem;overflow:hidden}.install-terminal-cmd .copy-btn{flex-shrink:0}.install-terminal-cmd .btn{padding:.5rem 1rem;font-size:.8125rem}.install-terminal-note{color:var(--color-ash);padding-left:calc(.75rem + var(--spacing-sm));font-size:.75rem}.install-terminal-note code{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-ink);border-radius:3px;padding:2px 5px;font-size:.6875rem}.install-terminal-divider{background:var(--color-mist);height:1px;margin:0}@media (max-width:600px){.install-terminal-row{padding:var(--spacing-sm) var(--spacing-md)}.install-terminal-cmd code{font-size:.75rem}}.install-providers{align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-md);flex-direction:column;display:flex}.install-providers-label{text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);font-size:.75rem;font-weight:600}.install-providers-row{justify-content:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.install-provider-badge{color:var(--color-charcoal);align-items:center;gap:6px;font-size:.8125rem;display:flex}.install-provider-badge img{border-radius:4px}.install-terminal-cmd--download{align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.prefix-toggle{cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out);background:#0000000f;border:1px solid #00000014;border-radius:6px;align-items:center;gap:8px;padding:6px 12px;display:inline-flex}.prefix-toggle:hover{border-color:#0003}.prefix-toggle input{opacity:0;width:0;height:0;position:absolute}.prefix-toggle-slider{background:var(--color-mist);width:32px;height:18px;transition:background var(--duration-fast) var(--ease-out);border-radius:18px;flex-shrink:0;position:relative}.prefix-toggle-slider:after{content:"";background:var(--color-paper);width:14px;height:14px;transition:transform var(--duration-fast) var(--ease-out);border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000026}.prefix-toggle input:checked+.prefix-toggle-slider{background:var(--color-accent)}.prefix-toggle input:checked+.prefix-toggle-slider:after{transform:translate(14px)}.prefix-toggle input:focus-visible+.prefix-toggle-slider{outline:2px solid var(--color-accent);outline-offset:2px}.prefix-toggle-label{color:var(--color-charcoal);white-space:nowrap;font-size:.75rem}.prefix-toggle-label code{font-family:var(--font-mono);background:var(--color-accent-dim);color:var(--color-accent);border-radius:3px;padding:1px 4px;font-size:.6875rem}.download-tip{color:var(--color-ash);margin-top:var(--spacing-sm);text-align:center;font-size:.8125rem}.download-tip a{color:var(--color-accent);text-decoration:none}.download-tip a:hover{text-decoration:underline}.consulting-section{padding:var(--spacing-xl) 0;border-top:1px solid var(--color-mist)}.consulting-content{justify-content:space-between;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap;display:flex}.consulting-actions{gap:var(--spacing-sm);flex-shrink:0;display:flex}.consulting-text{flex:1;min-width:280px}.consulting-title{margin:0 0 var(--spacing-sm) 0;font-size:clamp(1.5rem,4vw,2rem);font-style:italic;font-weight:300}.consulting-desc{color:var(--color-charcoal);max-width:45ch;margin:0;font-size:1rem;line-height:1.6}@media (max-width:600px){.consulting-content{flex-direction:column;align-items:flex-start}.consulting-actions{flex-direction:column;width:100%}.consulting-actions .btn{justify-content:center;width:100%}}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 3bcecbb99..3d9f96ddf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -281,6 +281,10 @@
             <img src="https://img.logo.dev/antigravity.google?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Antigravity" width="20" height="20" loading="lazy">
             <span>Antigravity</span>
           </div>
+          <div class="install-provider-badge">
+            <img src="https://img.logo.dev/kiro.dev?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Kiro" width="20" height="20" loading="lazy">
+            <span>Kiro</span>
+          </div>
         </div>
       </div>
 
diff --git a/scripts/build.js b/scripts/build.js
index 9786185a0..cdda28a3a 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -23,7 +23,8 @@ import {
   transformClaudeCode,
   transformGemini,
   transformCodex,
-  transformAgents
+  transformAgents,
+  transformKiro
 } from './lib/transformers/index.js';
 import { createAllZips } from './lib/zip.js';
 import { execSync } from 'child_process';
@@ -144,6 +145,7 @@ function assembleUniversal(distDir, suffix = '') {
     { provider: 'gemini', configDir: '.gemini' },
     { provider: 'codex', configDir: '.codex' },
     { provider: 'agents', configDir: '.agents' },
+    { provider: 'kiro', configDir: '.kiro' },
   ];
 
   for (const { provider, configDir } of providerMappings) {
@@ -168,6 +170,7 @@ This folder contains skills for all supported tools:
   .gemini/    → Gemini CLI
   .codex/     → Codex CLI
   .agents/    → VS Code Copilot, Antigravity
+  .kiro/      → Kiro
 
 To install, copy the relevant folder(s) into your project root.
 These are hidden folders (dotfiles) — press Cmd+Shift+. in Finder to see them.
@@ -211,6 +214,7 @@ async function build() {
   transformGemini(skills, DIST_DIR, patterns);
   transformCodex(skills, DIST_DIR, patterns);
   transformAgents(skills, DIST_DIR, patterns);
+  transformKiro(skills, DIST_DIR, patterns);
 
   // Transform for each provider (prefixed with i-)
   const prefixOptions = { prefix: 'i-', outputSuffix: '-prefixed' };
@@ -219,6 +223,7 @@ async function build() {
   transformGemini(skills, DIST_DIR, patterns, prefixOptions);
   transformCodex(skills, DIST_DIR, patterns, prefixOptions);
   transformAgents(skills, DIST_DIR, patterns, prefixOptions);
+  transformKiro(skills, DIST_DIR, patterns, prefixOptions);
 
   // Assemble universal directory (unprefixed and prefixed)
   assembleUniversal(DIST_DIR);
diff --git a/scripts/lib/transformers/index.js b/scripts/lib/transformers/index.js
index 47a0cfabe..53a8034a1 100644
--- a/scripts/lib/transformers/index.js
+++ b/scripts/lib/transformers/index.js
@@ -3,3 +3,4 @@ export { transformClaudeCode } from './claude-code.js';
 export { transformGemini } from './gemini.js';
 export { transformCodex } from './codex.js';
 export { transformAgents } from './agents.js';
+export { transformKiro } from './kiro.js';
diff --git a/scripts/lib/transformers/kiro.js b/scripts/lib/transformers/kiro.js
new file mode 100644
index 000000000..620db85b5
--- /dev/null
+++ b/scripts/lib/transformers/kiro.js
@@ -0,0 +1,65 @@
+import path from 'path';
+import { cleanDir, ensureDir, writeFile, generateYamlFrontmatter, replacePlaceholders, prefixSkillReferences } from '../utils.js';
+
+/**
+ * Kiro Transformer (Skills Only)
+ *
+ * All skills output to .kiro/skills/{name}/SKILL.md
+ * Frontmatter: name, description, license, compatibility, metadata
+ *
+ * @param {Array} skills - All skills (including user-invokable ones)
+ * @param {string} distDir - Distribution output directory
+ * @param {Object} patterns - Design patterns data (unused)
+ * @param {Object} options - Optional settings
+ * @param {string} options.prefix - Prefix to add to skill names (e.g., 'i-')
+ * @param {string} options.outputSuffix - Suffix for output directory (e.g., '-prefixed')
+ */
+export function transformKiro(skills, distDir, patterns = null, options = {}) {
+  const { prefix = '', outputSuffix = '' } = options;
+  const kiroDir = path.join(distDir, `kiro${outputSuffix}`);
+  const skillsDir = path.join(kiroDir, '.kiro/skills');
+
+  cleanDir(kiroDir);
+  ensureDir(skillsDir);
+
+  const allSkillNames = skills.map(s => s.name);
+  const commandNames = skills.filter(s => s.userInvokable).map(s => `${prefix}${s.name}`);
+  let refCount = 0;
+  for (const skill of skills) {
+    const skillName = `${prefix}${skill.name}`;
+    const skillDir = path.join(skillsDir, skillName);
+
+    const frontmatterObj = {
+      name: skillName,
+      description: skill.description,
+    };
+
+    if (skill.license) frontmatterObj.license = skill.license;
+    if (skill.compatibility) frontmatterObj.compatibility = skill.compatibility;
+    if (skill.metadata) frontmatterObj.metadata = skill.metadata;
+
+    const frontmatter = generateYamlFrontmatter(frontmatterObj);
+    let skillBody = replacePlaceholders(skill.body, 'kiro', commandNames);
+    if (prefix) skillBody = prefixSkillReferences(skillBody, prefix, allSkillNames);
+    const content = `${frontmatter}\n\n${skillBody}`;
+    const outputPath = path.join(skillDir, 'SKILL.md');
+    writeFile(outputPath, content);
+
+    // Copy reference files if they exist
+    if (skill.references && skill.references.length > 0) {
+      const refDir = path.join(skillDir, 'reference');
+      ensureDir(refDir);
+      for (const ref of skill.references) {
+        const refOutputPath = path.join(refDir, `${ref.name}.md`);
+        const refContent = replacePlaceholders(ref.content, 'kiro', commandNames);
+        writeFile(refOutputPath, refContent);
+        refCount++;
+      }
+    }
+  }
+
+  const userInvokableCount = skills.filter(s => s.userInvokable).length;
+  const refInfo = refCount > 0 ? ` (${refCount} reference files)` : '';
+  const prefixInfo = prefix ? ` [${prefix}prefixed]` : '';
+  console.log(`✓ Kiro${prefixInfo}: ${skills.length} skills (${userInvokableCount} user-invokable)${refInfo}`);
+}
diff --git a/scripts/lib/utils.js b/scripts/lib/utils.js
index e0d80ede5..9168aa2af 100644
--- a/scripts/lib/utils.js
+++ b/scripts/lib/utils.js
@@ -288,6 +288,11 @@ export const PROVIDER_PLACEHOLDERS = {
     model: 'the model',
     config_file: '.github/copilot-instructions.md',
     ask_instruction: 'ask the user directly to clarify what you cannot infer.'
+  },
+  'kiro': {
+    model: 'Claude',
+    config_file: '.kiro/settings.json',
+    ask_instruction: 'ask the user directly to clarify what you cannot infer.'
   }
 };
 
diff --git a/scripts/lib/zip.js b/scripts/lib/zip.js
index 0a0c8e5f5..badd9657c 100644
--- a/scripts/lib/zip.js
+++ b/scripts/lib/zip.js
@@ -51,26 +51,7 @@ export async function createProviderZip(providerDir, distDir, providerName) {
 export async function createAllZips(distDir) {
   console.log('\n📦 Creating ZIP bundles...');
 
-  const providers = ['cursor', 'claude-code', 'gemini', 'codex', 'agents'];
-
-  // Create unprefixed ZIPs
-  for (const provider of providers) {
-    const providerDir = path.join(distDir, provider);
-    await createProviderZip(providerDir, distDir, provider);
-  }
-
-  // Create unprefixed universal ZIP
-  const universalDir = path.join(distDir, 'universal');
-  await createProviderZip(universalDir, distDir, 'universal');
-
-  // Create prefixed ZIPs
-  console.log('  --- prefixed variants ---');
-  for (const provider of providers) {
-    const providerDir = path.join(distDir, `${provider}-prefixed`);
-    await createProviderZip(providerDir, distDir, `${provider}-prefixed`);
-  }
-
-  // Create prefixed universal ZIP
-  const universalPrefixedDir = path.join(distDir, 'universal-prefixed');
-  await createProviderZip(universalPrefixedDir, distDir, 'universal-prefixed');
+  // Universal ZIPs (unprefixed + prefixed)
+  await createProviderZip(path.join(distDir, 'universal'), distDir, 'universal');
+  await createProviderZip(path.join(distDir, 'universal-prefixed'), distDir, 'universal-prefixed');
 }
diff --git a/server/lib/api-handlers.js b/server/lib/api-handlers.js
index 4c5596142..c6097cec6 100644
--- a/server/lib/api-handlers.js
+++ b/server/lib/api-handlers.js
@@ -77,6 +77,7 @@ export function getFilePath(type, provider, id) {
 		'gemini': '.gemini',
 		'codex': '.codex',
 		'agents': '.agents',
+		'kiro': '.kiro',
 	};
 
 	const configDir = providerPaths[provider];
diff --git a/server/lib/validation.js b/server/lib/validation.js
index aa98b0dd7..0dfa6f0b4 100644
--- a/server/lib/validation.js
+++ b/server/lib/validation.js
@@ -4,8 +4,8 @@
 export const VALID_ID = /^[a-zA-Z0-9_-]+$/;
 
 export const ALLOWED_PROVIDERS = [
-  'cursor', 'claude-code', 'gemini', 'codex', 'agents', 'universal',
-  'cursor-prefixed', 'claude-code-prefixed', 'gemini-prefixed', 'codex-prefixed', 'agents-prefixed', 'universal-prefixed',
+  'cursor', 'claude-code', 'gemini', 'codex', 'agents', 'kiro',
+  'universal', 'universal-prefixed',
 ];
 export const ALLOWED_TYPES = ['skill', 'command'];