From 03a4433dcc60d3cae6c78096852f6e4a7126bb3e Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 2 Apr 2026 19:56:29 -0700 Subject: [PATCH] Restructure narrative: Foundation, Language, Antidote, Visual Mode Major site restructure reflecting Impeccable's expanded value prop: - 01 The Foundation: 7 design dimensions, 212 guidelines grid - 02 The Language: merged periodic table + Commands in Action - 03 The Antidote: moved from position 1, anti-patterns + gallery - 04 Visual Mode: live iframe embed of detection overlay demo - Composite demo page combining purple gradients + side-tab cards - Updated hero copy (212 guidelines, 22 commands) - 7-item sticky nav, backward-compat anchor aliases Detection overlay improvements: - Staggered entrance animation (80ms per element) - Banner slides in from top - Skip body/html from overlay targeting (fixes scrollbar bug) - Banner overflow: hidden + maxWidth: 100vw - CLAUDE.md: document that browser script is generated, never edit directly Co-Authored-By: Claude Opus 4.6 (1M context) --- .../scripts/detect-antipatterns-browser.js | 25 +- CLAUDE.md | 2 + .../visual-mode-demo.html | 232 + public/app.js | 2 + public/css/main.css | 228 +- public/css/styles.css | 5081 +---------------- public/index.html | 160 +- public/js/components/foundation-grid.js | 19 + public/js/data.js | 11 + server/index.js | 2 +- .../critique/scripts/detect-antipatterns.mjs | 25 +- 11 files changed, 646 insertions(+), 5141 deletions(-) create mode 100644 public/antipattern-examples/visual-mode-demo.html create mode 100644 public/js/components/foundation-grid.js diff --git a/.claude/skills/critique/scripts/detect-antipatterns-browser.js b/.claude/skills/critique/scripts/detect-antipatterns-browser.js index 15711e1d2..3490e1918 100644 --- a/.claude/skills/critique/scripts/detect-antipatterns-browser.js +++ b/.claude/skills/critique/scripts/detect-antipatterns-browser.js @@ -1210,11 +1210,20 @@ if (IS_BROWSER) { // Inject hover styles via CSS (more reliable than JS event listeners) const styleEl = document.createElement('style'); styleEl.textContent = ` + @keyframes impeccable-reveal { + from { opacity: 0; outline-color: transparent; } + to { opacity: 1; outline-color: ${OUTLINE_COLOR}; } + } .impeccable-overlay:not(.impeccable-banner) { pointer-events: none; outline: 2px solid ${OUTLINE_COLOR}; border-radius: 4px; transition: outline-color 0.3s ease; + animation: impeccable-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; + animation-play-state: paused; + } + .impeccable-overlay.impeccable-visible { + animation-play-state: running; } .impeccable-overlay.impeccable-hover { outline-color: rgba(0,0,0,0.85); @@ -1287,6 +1296,7 @@ if (IS_BROWSER) { // Uses a huge rootMargin so all *rendered* elements count as intersecting, // while display:none / closed
/ hidden modals etc. do not. // This is event-driven -- no polling needed. + let overlayIndex = 0; const visibilityObserver = new IntersectionObserver((entries) => { for (const entry of entries) { const overlay = entry.target._impeccableOverlay; @@ -1294,6 +1304,11 @@ if (IS_BROWSER) { if (entry.isIntersecting) { overlay.style.display = ''; positionOverlay(overlay); + if (!overlay._revealed) { + overlay._revealed = true; + overlay.style.animationDelay = `${(overlay._staggerIndex || 0) * 80}ms`; + requestAnimationFrame(() => overlay.classList.add('impeccable-visible')); + } } else { overlay.style.display = 'none'; } @@ -1360,6 +1375,7 @@ if (IS_BROWSER) { // Start hidden; the IntersectionObserver will show it once the target is rendered outline.style.display = 'none'; + outline._staggerIndex = overlayIndex++; el._impeccableOverlay = outline; visibilityObserver.observe(el); @@ -1380,8 +1396,13 @@ if (IS_BROWSER) { background: LABEL_BG, color: 'white', fontFamily: 'system-ui, sans-serif', fontSize: '13px', display: 'flex', alignItems: 'center', pointerEvents: 'auto', - height: '36px', + height: '36px', overflow: 'hidden', maxWidth: '100vw', + transform: 'translateY(-100%)', + transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)', }); + requestAnimationFrame(() => requestAnimationFrame(() => { + banner.style.transform = 'translateY(0)'; + })); // Scrollable findings area const scrollArea = document.createElement('div'); @@ -1475,6 +1496,8 @@ if (IS_BROWSER) { // Skip browser extension elements (Claude, etc.) const elId = el.id || ''; if (elId.startsWith('claude-') || elId.startsWith('cic-')) continue; + // Skip html/body -- page-level findings go in the banner, not a full-page overlay + if (el === document.body || el === document.documentElement) continue; const findings = [ ...checkElementBordersDOM(el).map(f => ({ type: f.id, detail: f.snippet })), diff --git a/CLAUDE.md b/CLAUDE.md index c262aabe8..f78b31810 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -66,6 +66,8 @@ The detection script is at `source/skills/critique/scripts/detect-antipatterns.m Build the browser script: `node scripts/build-browser-detector.js` +**IMPORTANT**: The browser script is **generated** from `detect-antipatterns.mjs` -- never edit the browser `.js` files directly. All changes must go in the `.mjs` source. The build strips Node-specific sections and wraps it in an IIFE. Running `bun run build` also regenerates it, which will **overwrite** any direct edits to the browser script. + ## Versioning When bumping the version, update **all** of these locations to keep them in sync: diff --git a/public/antipattern-examples/visual-mode-demo.html b/public/antipattern-examples/visual-mode-demo.html new file mode 100644 index 000000000..6834bac1d --- /dev/null +++ b/public/antipattern-examples/visual-mode-demo.html @@ -0,0 +1,232 @@ + + + + + + Visual Mode Demo + + + + +
+
+ + +
+ New: AI-Powered Everything +

Build the Future
With AI Magic

+

Transform your workflow with our revolutionary AI platform. Purple gradients included.

+
+ +
+
+
⚡
+

Fast Performance

+

Blazing fast inference with our optimized pipeline.

+
+
+
🔒
+

Secure & Safe

+

Enterprise-grade security with encrypted data.

+
+
+
📈
+

Analytics

+

Powerful insights to help you make better decisions.

+
+
+ +
+
+
10K+
+
Active Users
+
+
+
99.9%
+
Uptime Guaranteed
+
+
+
50M+
+
Data Processed
+
+
+
+
+ + + diff --git a/public/app.js b/public/app.js index b16792e2f..4d71387e3 100644 --- a/public/app.js +++ b/public/app.js @@ -7,6 +7,7 @@ import { initFrameworkViz } from "./js/components/framework-viz.js"; import { initScrollReveal } from "./js/utils/reveal.js"; import { initAnchorScroll, initHashTracking } from "./js/utils/scroll.js"; import { initSectionNav } from "./js/components/section-nav.js"; +import { initFoundationGrid } from "./js/components/foundation-grid.js"; // ============================================ // STATE @@ -226,6 +227,7 @@ function init() { initScrollReveal(); initGlassTerminal(); initFrameworkViz(); + initFoundationGrid(); initSectionNav(); loadContent(); diff --git a/public/css/main.css b/public/css/main.css index eb5511903..f568af198 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -973,7 +973,233 @@ code { } /* ============================================ - SOLUTION SECTION + FOUNDATION SECTION + ============================================ */ + +.foundation-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.foundation-content { + display: grid; + gap: var(--spacing-lg); +} + +.foundation-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--spacing-sm); +} + +@media (max-width: 900px) { + .foundation-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 480px) { + .foundation-grid { + grid-template-columns: 1fr; + } +} + +.foundation-card { + padding: var(--spacing-md); + background: white; + border-radius: 8px; +} + +.foundation-card-header { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: var(--spacing-xs); +} + +.foundation-card-label { + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-ink); +} + +.foundation-card-count { + font-family: var(--font-mono); + font-size: 0.625rem; + color: var(--color-accent); +} + +.foundation-card-detail { + font-size: 0.8125rem; + line-height: 1.5; + color: var(--color-ash); + margin: 0; +} + +.foundation-cta { + text-align: center; +} + +.foundation-cta-text { + font-size: 0.9375rem; + color: var(--color-charcoal); + margin: 0; +} + +.foundation-cta-text code { + font-family: var(--font-mono); + font-size: 0.875rem; + color: var(--color-ink); +} + +.foundation-slash { + color: var(--color-accent); +} + +/* ============================================ + LANGUAGE SECTION (wraps periodic table + commands) + ============================================ */ + +.language-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.language-content { + display: grid; + gap: var(--spacing-xl); +} + +.commands-subsection { + display: grid; + gap: var(--spacing-lg); +} + +.commands-header-title { + font-family: var(--font-display); + font-size: clamp(1.5rem, 3vw, 2rem); + font-weight: 400; + margin: 0 0 var(--spacing-xs); + color: var(--color-ink); +} + +.commands-header-subtitle { + font-size: 1rem; + color: var(--color-charcoal); + margin: 0; +} + +/* ============================================ + VISUAL MODE SECTION + ============================================ */ + +.visual-mode-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.visual-mode-content { + display: grid; + gap: var(--spacing-lg); +} + +.visual-mode-demo { + display: grid; + grid-template-columns: 3fr 2fr; + gap: var(--spacing-xl); + align-items: start; +} + +@media (max-width: 900px) { + .visual-mode-demo { + grid-template-columns: 1fr; + } +} + +/* Browser chrome frame for the iframe */ +.visual-mode-preview { + border-radius: 8px; + overflow: hidden; + border: 1px solid var(--color-mist); + box-shadow: 0 8px 30px -6px rgba(0,0,0,0.12); +} + +.visual-mode-preview-header { + display: flex; + align-items: center; + gap: 6px; + padding: 10px 14px; + background: var(--color-cream); + border-bottom: 1px solid var(--color-mist); +} + +.visual-mode-preview-dot { + width: 10px; + height: 10px; + border-radius: 50%; +} + +.visual-mode-preview-dot.red { background: #ff5f56; } +.visual-mode-preview-dot.yellow { background: #ffbd2e; } +.visual-mode-preview-dot.green { background: #27c93f; } + +.visual-mode-preview-title { + margin-left: auto; + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--color-ash); +} + +.visual-mode-iframe { + display: block; + width: 100%; + height: 480px; + border: none; + background: white; +} + +/* Details sidebar */ +.visual-mode-details { + display: flex; + flex-direction: column; + gap: var(--spacing-md); +} + +.visual-mode-feature { + padding: var(--spacing-md); + background: white; + border-radius: 8px; +} + +.visual-mode-feature-label { + display: block; + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-accent); + margin-bottom: var(--spacing-xs); +} + +.visual-mode-feature p { + font-size: 0.8125rem; + line-height: 1.55; + color: var(--color-charcoal); + margin: 0; +} + +.visual-mode-feature code { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-ink); +} + +/* ============================================ + SOLUTION SECTION (legacy styles for periodic table) ============================================ */ .solution-section { diff --git a/public/css/styles.css b/public/css/styles.css index e47d5ebde..98a84f2bb 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,5081 +1,2 @@ /*! tailwindcss v4.2.2 | 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; -} -.magazine-spread[data-category="diagnostic"] { - --spread-accent: oklch(55% 0.20 25); -} -.magazine-spread[data-category="quality"] { - --spread-accent: oklch(55% 0.20 160); -} -.magazine-spread[data-category="intensity"] { - --spread-accent: oklch(55% 0.22 350); -} -.magazine-spread[data-category="adaptation"] { - --spread-accent: oklch(55% 0.18 260); -} -.magazine-spread[data-category="enhancement"] { - --spread-accent: oklch(55% 0.20 300); -} -.magazine-spread[data-category="system"] { - --spread-accent: oklch(45% 0.05 0); -} -.magazine-container { - position: relative; - width: 100%; - display: grid; - grid-template-columns: 200px 1fr; - gap: var(--spacing-lg); - align-items: start; - overflow: hidden; -} -@media (min-width: 1100px) { - .magazine-container { - background: white; - border-radius: 16px; - padding: var(--spacing-lg); - } -} -.fisheye-list { - position: relative; - height: 400px; - align-self: center; - overflow: hidden; - mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); - -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); -} -.fisheye-scroll { - height: 100%; - overflow-y: auto; - scrollbar-width: none; - position: relative; -} -.fisheye-scroll::-webkit-scrollbar { - display: none; -} -.fisheye-item { - display: block; - font-family: var(--font-display); - font-size: 1.5rem; - font-weight: 400; - color: var(--color-ink); - background: none; - border: none; - padding: 0; - position: absolute; - left: 0; - cursor: pointer; - white-space: nowrap; - text-align: left; - width: 100%; - line-height: 1.3; - transform-origin: left center; - will-change: transform, opacity; -} -.fisheye-slash { - color: var(--color-mist); - font-weight: 300; -} -.fisheye-item.is-active { - font-weight: 600; -} -.fisheye-item.is-active .fisheye-slash { - color: var(--color-accent); -} -.fisheye-beta { - font-family: var(--font-body); - font-size: 0.45rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--color-ash); - border: 1px solid var(--color-mist); - border-radius: 3px; - padding: 1px 4px; - margin-left: 0.35em; - vertical-align: middle; -} -.magazine-viewport { - position: relative; - height: 520px; - overflow: hidden; -} -.magazine-spread { - position: absolute; - inset: 0; - display: grid; - grid-template-columns: 38% 1fr; - grid-template-rows: 1fr auto; - gap: 0 var(--spacing-xl); - padding: var(--spacing-lg) var(--spacing-lg); - opacity: 0; - pointer-events: none; - transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); - transform: translateY(16px); - will-change: opacity, transform; -} -.magazine-spread.active { - opacity: 1; - pointer-events: auto; - transform: translateY(0); - z-index: 2; -} -.magazine-spread.exiting { - opacity: 0; - transform: translateY(-16px); - z-index: 1; -} -.spread-identity { - grid-column: 1; - grid-row: 1 / 3; - display: flex; - flex-direction: column; - justify-content: center; - gap: var(--spacing-md); - padding-right: var(--spacing-lg); -} -.spread-category-label { - font-family: var(--font-body); - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.14em; - color: var(--spread-accent); -} -.spread-command-name { - white-space: nowrap; - font-family: var(--font-display); - font-size: clamp(3rem, 5.5vw, 5.5rem); - font-weight: 600; - line-height: 0.95; - color: var(--color-ink); - margin: 0; - letter-spacing: -0.02em; -} -.spread-command-name .spread-slash { - color: var(--spread-accent); - font-weight: 300; -} -.spread-command-name .beta-badge { - font-family: var(--font-body); - font-size: 0.55rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--spread-accent); - border: 1px solid var(--spread-accent); - border-radius: 3px; - padding: 2px 6px; - vertical-align: super; - margin-left: 8px; -} -.spread-description { - font-family: var(--font-body); - font-size: 0.9375rem; - line-height: 1.6; - color: var(--color-charcoal); - max-width: 360px; -} -.spread-flow { - display: flex; - align-items: center; - gap: 6px; - flex-wrap: nowrap; - margin-top: var(--spacing-xs); - white-space: nowrap; -} -.spread-flow-label { - font-family: var(--font-body); - font-size: 0.75rem; - color: var(--color-ash); -} -.spread-flow-icon { - color: var(--spread-accent); - font-weight: 600; - font-size: 0.8125rem; -} -.spread-flow-cmd { - font-family: var(--font-mono); - font-size: 0.6875rem; - background: var(--color-mist); - padding: 2px 7px; - border-radius: 3px; - color: var(--color-ink); -} -.spread-demo-area { - grid-column: 2; - grid-row: 1 / 3; - display: flex; - flex-direction: column; - min-height: 0; - overflow: hidden; -} -.spread-demo-area .demo-split-comparison { - display: flex; - flex-direction: column; - height: 100%; - flex: 1; - min-height: 0; -} -.spread-demo-area .demo-split-comparison .split-container { - position: relative; - flex: 1; - min-height: 0; - overflow: hidden; - cursor: ew-resize; - user-select: none; - background: var(--color-cream); -} -.spread-demo-area .demo-split-comparison .split-before, .spread-demo-area .demo-split-comparison .split-after { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - padding: var(--spacing-md); -} -.spread-demo-area .demo-split-comparison .split-before { - z-index: 1; - background: var(--color-cream); -} -.spread-demo-area .demo-split-comparison .split-after { - z-index: 2; - background: var(--color-paper); - clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%); -} -.spread-demo-area .demo-split-comparison .split-content { - width: 100%; - max-width: 320px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} -.spread-demo-area .demo-split-comparison .split-divider { - position: absolute; - top: 0; - bottom: 0; - left: 50%; - width: 2px; - background: var(--spread-accent, 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); -} -.spread-demo-area .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(--spread-accent, var(--color-accent)); - padding: 4px 10px; - border-radius: 3px; - white-space: nowrap; -} -.spread-demo-area .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); -} -.spread-demo-area .demo-container { - flex: 1; - display: flex; - flex-direction: column; -} -.spread-demo-area .demo-container .demo-viewport { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} -.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; -} -.beta-badge { - font-family: var(--font-body); - font-size: 0.55rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--color-accent); - border: 1px solid var(--color-accent); - border-radius: 3px; - padding: 1px 5px; - vertical-align: middle; - margin-left: 6px; -} -.manual-cmd-desc { - font-size: 0.875rem; - line-height: 1.5; - 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: 50vh; - transform: translateY(-50%); - 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) { - .magazine-container { - display: none; - } - .fisheye-list { - display: none; - } - .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; -} -.changelog-entry + .changelog-entry { - 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); -} -.changelog-older { - margin-top: var(--spacing-sm); -} -.changelog-older-toggle { - font-family: var(--font-body); - font-size: 0.875rem; - font-weight: 500; - color: var(--color-accent); - padding: var(--spacing-md) 0; - cursor: pointer; - list-style: none; - display: flex; - align-items: center; - gap: 6px; - transition: color 0.2s ease; -} -.changelog-older-toggle::-webkit-details-marker { - display: none; -} -.changelog-older-toggle::before { - content: '+'; - font-size: 1.25rem; - font-weight: 300; - transition: transform 0.3s var(--ease-out); -} -.changelog-older[open] .changelog-older-toggle::before { - transform: rotate(45deg); -} -.changelog-older-toggle:hover { - color: var(--color-accent-hover); -} -.changelog-older-entries { - animation: faqFadeIn 0.3s var(--ease-out); -} -.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-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); -} -@media (max-width: 600px) { - .faq-question { - font-size: 1rem; - padding: var(--spacing-md) 0; - min-height: 44px; - gap: var(--spacing-sm); - } - .faq-answer { - font-size: 0.875rem; - } - .changelog-version { - font-size: 1rem; - } - .changelog-version-header { - flex-wrap: wrap; - gap: var(--spacing-xs); - } - .changelog-items { - padding-left: var(--spacing-sm); - font-size: 0.875rem; - } - .changelog-older-toggle { - min-height: 44px; - } -} -@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); - 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; -} -.section-nav { - position: fixed; - bottom: var(--spacing-md); - left: 50%; - transform: translateX(-50%) translateY(20px); - z-index: 100; - display: flex; - align-items: center; - gap: 2px; - padding: 4px; - background: oklch(98% 0 0 / 0.85); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid var(--color-mist); - border-radius: 100px; - box-shadow: 0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06); - opacity: 0; - pointer-events: none; - transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); -} -.section-nav.is-visible { - opacity: 1; - pointer-events: auto; - transform: translateX(-50%) translateY(0); -} -.section-nav-item { - display: flex; - align-items: center; - gap: 4px; - padding: 8px 12px; - text-decoration: none; - border-radius: 100px; - transition: background 0.2s ease, color 0.2s ease; -} -.section-nav-item:hover { - background: var(--color-mist); - text-decoration: none; -} -.section-nav-item.is-active { - background: var(--color-ink); -} -.section-nav-item.is-active .section-nav-num { - color: var(--color-paper); -} -.section-nav-item.is-active .section-nav-label { - color: var(--color-paper); -} -.section-nav-num { - font-family: var(--font-mono); - font-size: 0.5625rem; - font-weight: 500; - color: var(--color-ash); - letter-spacing: 0.02em; - transition: color 0.2s ease; -} -.section-nav-label { - font-family: var(--font-body); - font-size: 0.6875rem; - font-weight: 500; - color: var(--color-charcoal); - transition: color 0.2s ease; - white-space: nowrap; -} -@media (max-width: 700px) { - .section-nav-label { - display: none; - } - .section-nav-item { - padding: 8px 10px; - } -} -@media (max-width: 400px) { - .section-nav-item { - padding: 8px; - } - .section-nav-num { - font-size: 0.625rem; - } -} -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-lg) 0 var(--spacing-2xl); - 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; - display: flex; - align-items: center; - gap: 6px; - text-decoration: none; -} -.github-link:hover { - color: var(--color-ink); - text-decoration: none; -} -.github-stars { - font-family: var(--font-mono); - font-size: 0.75rem; - font-weight: 500; - color: var(--color-ash); - transition: color 0.2s ease; -} -.github-link:hover .github-stars { - color: var(--color-ink); -} -.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; - } -} -@media (max-width: 768px) { - .hero-combined-right { - order: -1; - padding-top: var(--spacing-xl); - } - .hero-combined-container { - gap: var(--spacing-md); - } - .hero-combined-left { - gap: var(--spacing-sm); - padding-top: var(--spacing-md); - } - .hero-hook-text, .hero-included-box, .hero-cta-group { - margin-top: var(--spacing-xs); - } -} -.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-hook-text--short { - display: none; -} -@media (max-width: 768px) { - .hero-hook-text--full { - display: none; - } - .hero-hook-text--short { - display: block; - } -} -.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; - flex-direction: column; - align-items: flex-start; - gap: 6px; -} -.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; - flex-wrap: wrap; -} -.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(58% 0%, 100% 0%, 100% 100%, 42% 100%); - z-index: 2; - background: var(--color-paper); -} -.split-divider { - position: absolute; - top: 0; - bottom: 0; - left: 50%; - 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); -} -@media (max-width: 768px) { - .split-comparison { - padding: 8px; - margin-top: -8px; - margin-bottom: -8px; - } - .split-labels { - display: none; - } -} -.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; -} -.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: visible; -} -.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-charcoal); - background: none; - border: none; - border-radius: 100px; - cursor: pointer; - transition: background 0.2s ease, color 0.2s ease; - white-space: nowrap; -} -.mobile-cmd-pill:hover { - background: var(--color-mist); -} -.mobile-cmd-pill.active { - color: var(--color-paper); - background: var(--color-ink); -} -.mobile-demo-area { - padding: 0; -} -.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) { - .site-footer { - padding: var(--spacing-lg) var(--spacing-md); - } - .footer-content { - flex-direction: column; - text-align: center; - gap: var(--spacing-md); - } - .footer-links { - gap: var(--spacing-sm) var(--spacing-md); - justify-content: center; - font-size: 0.8125rem; - } -} -.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); -} -.antidote-row { - display: flex; - gap: var(--spacing-xl); - align-items: stretch; - margin-bottom: var(--spacing-xl); -} -.antidote-row .patterns-tabbed { - flex: 1; - min-width: 0; - margin-bottom: 0; -} -.gallery-stack-container { - flex: 0 0 clamp(320px, 34vw, 420px); - display: flex; - flex-direction: column; - gap: var(--spacing-xs); - position: relative; -} -.gallery-stack-header { - display: flex; - align-items: center; - gap: var(--spacing-xs); - white-space: nowrap; -} -.gallery-stack-title { - font-family: var(--font-display); - font-size: 1rem; - font-weight: 600; - color: var(--color-ink); - flex: 1; -} -.gallery-stack-btn { - width: 24px; - height: 24px; - border-radius: 50%; - border: 1px solid var(--color-mist); - background: white; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.6875rem; - color: var(--color-charcoal); - flex-shrink: 0; - transition: border-color var(--duration-fast), background var(--duration-fast); - position: relative; -} -.gallery-stack-btn::after { - content: ''; - position: absolute; - inset: -10px; -} -.gallery-stack-btn:hover { - border-color: var(--color-charcoal); -} -.gallery-stack { - position: relative; - width: calc(100% - 20px); - aspect-ratio: 3 / 2; - margin-bottom: 20px; -} -.gallery-stack-card { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - border-radius: 8px; - overflow: hidden; - border: 1px solid var(--color-mist); - text-decoration: none; - background: white; - transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, box-shadow 0.35s ease; - will-change: transform, opacity; -} -.gallery-stack-card img { - flex: 1; - min-height: 0; - width: 100%; - object-fit: cover; - object-position: top left; -} -.gallery-stack-label { - padding: 6px 10px; - font-size: 0.75rem; - font-weight: 600; - color: var(--color-charcoal); - flex-shrink: 0; -} -.gallery-stack-card[data-offset="0"] { - z-index: 3; - transform: translate(0, 0); - opacity: 1; - box-shadow: 0 2px 12px oklch(0.2 0 0 / 0.1); -} -.gallery-stack-card[data-offset="1"] { - z-index: 2; - transform: translate(8px, 8px); - opacity: 1; - box-shadow: 0 1px 6px oklch(0.2 0 0 / 0.08); - pointer-events: none; -} -.gallery-stack-card[data-offset="2"] { - z-index: 1; - transform: translate(16px, 16px); - opacity: 1; - box-shadow: 0 1px 4px oklch(0.2 0 0 / 0.06); - pointer-events: none; -} -.gallery-stack-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="2"]) { - z-index: 0; - transform: translate(20px, 20px); - opacity: 0; - pointer-events: none; -} -.gallery-stack-link { - font-size: 0.75rem; - font-weight: 500; - color: var(--color-accent); - text-decoration: none; - text-align: center; -} -.gallery-stack-link:hover { - text-decoration: underline; -} -@media (max-width: 900px) { - .antidote-row { - flex-direction: column; - } - .gallery-stack-container { - flex: none; - width: 100%; - max-width: 360px; - } -} -.patterns-tabbed { - margin-bottom: var(--spacing-xl); - background: white; - border-radius: 8px; - padding: var(--spacing-lg); -} -.patterns-tabs { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-bottom: var(--spacing-md); -} -@media (max-width: 768px) { - .patterns-tabs { - flex-wrap: nowrap; - overflow-x: auto; - scrollbar-width: none; - -webkit-overflow-scrolling: touch; - margin-left: calc(-1 * var(--spacing-lg)); - margin-right: calc(-1 * var(--spacing-lg)); - padding-left: var(--spacing-lg); - padding-right: var(--spacing-lg); - } - .patterns-tabs::-webkit-scrollbar { - display: none; - } -} -.patterns-tab { - font-family: var(--font-body); - font-size: 0.75rem; - font-weight: 500; - color: var(--color-charcoal); - background: none; - border: none; - border-radius: 100px; - padding: 6px 12px; - cursor: pointer; - white-space: nowrap; - transition: background 0.2s ease, color 0.2s ease; -} -.patterns-tab:hover { - background: var(--color-mist); -} -.patterns-tab.is-active { - background: var(--color-ink); - color: var(--color-paper); -} -.patterns-content { - display: none; -} -.patterns-content.is-active { - display: flex; - flex-direction: column; - gap: var(--spacing-md); -} -.patterns-col ul { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - gap: 6px; -} -.patterns-col li { - font-size: 0.8125rem; - line-height: 1.55; - padding-left: var(--spacing-sm); - position: relative; - color: var(--color-charcoal); - overflow-wrap: break-word; - word-break: break-word; -} -.patterns-col--dont li::before { - content: '\00d7'; - position: absolute; - left: 0; - color: var(--color-accent); - font-weight: 600; -} -.patterns-col--do li::before { - content: '\2713'; - position: absolute; - left: 0; - color: var(--color-success, #22c55e); - font-weight: 600; -} -.detection-callout { - margin-bottom: var(--spacing-xl); - border: 1px solid var(--color-mist); - border-radius: 8px; - padding: var(--spacing-sm) var(--spacing-md); -} -.detection-callout-inner { - display: flex; - align-items: center; - gap: var(--spacing-md); - flex-wrap: wrap; -} -.detection-badge { - font-family: var(--font-mono); - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--color-accent); - border: 1px solid var(--color-accent); - padding: 3px 10px; - border-radius: 99px; - flex-shrink: 0; -} -.detection-desc { - flex: 1; - font-size: 0.8125rem; - line-height: 1.55; - color: var(--color-ash); - min-width: 200px; -} -.detection-desc code { - font-family: var(--font-mono); - font-size: 0.8125rem; - color: var(--color-charcoal); -} -.detection-cmd { - flex-shrink: 0; - font-family: var(--font-mono); - font-size: 0.8125rem; - color: var(--color-charcoal); - background: oklch(96% 0.005 350); - padding: 6px 14px; - border-radius: 6px; - white-space: nowrap; -} -.detection-cmd::before { - content: '\279C '; - color: var(--color-accent); -} -.antidote-footer { - text-align: center; -} -.antidote-suggest-link { - font-size: 0.8125rem; - color: var(--color-ash); - text-decoration: none; -} -.antidote-suggest-link:hover { - color: var(--color-accent); - 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); -} -@media (min-width: 1100px) { - .platforms-section { - border-top: none; - } -} -.platforms-section .section-subtitle { - max-width: 60ch; -} -.install-paths { - display: grid; - grid-template-columns: 5fr 3fr 3fr; - gap: 0 var(--spacing-xl); - align-items: start; - margin: 0 0 var(--spacing-xl); -} -.install-path { - display: flex; - flex-direction: column; - min-width: 0; -} -.install-path-primary { - background: white; - border-radius: 16px; - padding: var(--spacing-lg); -} -.install-path-label { - font-family: var(--font-mono); - font-size: 0.625rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.14em; - color: var(--color-accent); -} -.install-path:not(.install-path-primary) { - padding-top: var(--spacing-lg); -} -.install-path-secondary .install-path-label { - color: var(--color-ash); -} -.install-path-title { - font-family: var(--font-display); - font-size: 1.5rem; - font-weight: 600; - margin: var(--spacing-xs) 0 var(--spacing-sm); - line-height: 1.2; -} -.install-path-badge { - font-family: var(--font-mono); - font-size: 0.5rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--color-accent); - border: 1px solid var(--color-accent); - border-radius: 3px; - padding: 2px 6px; - vertical-align: middle; - margin-left: 6px; - position: relative; - top: -2px; -} -.install-path-badge-muted { - color: var(--color-ash); - border-color: var(--color-mist); -} -.install-path-desc { - font-size: 0.9375rem; - line-height: 1.6; - color: var(--color-charcoal); - margin: 0 0 var(--spacing-md); -} -.install-path-terminal { - margin-bottom: var(--spacing-sm); -} -.install-path-terminal .glass-terminal { - height: auto; -} -.install-path-terminal .terminal-body { - padding: 0; -} -.install-path-next { - font-size: 0.8125rem; - color: var(--color-charcoal); - line-height: 1.5; - margin-top: auto; - padding-top: var(--spacing-md); -} -.install-path-next code { - font-family: var(--font-mono); - font-size: 0.8125rem; - font-weight: 600; - color: var(--color-ink); -} -.install-path-slash { - color: var(--color-accent); -} -.install-path-subcommands { - display: flex; - flex-direction: column; - gap: 6px; - margin-top: var(--spacing-sm); -} -.install-path-subcommand { - font-size: 0.75rem; - color: var(--color-charcoal); - line-height: 1.4; -} -.install-path-subcommand code { - font-family: var(--font-mono); - font-size: 0.6875rem; - font-weight: 600; - color: var(--color-ink); - background: var(--color-mist); - padding: 2px 6px; - border-radius: 3px; - margin-right: 4px; -} -.install-path-link { - margin-top: auto; - padding-top: var(--spacing-md); - font-size: 0.8125rem; -} -.install-path-link a { - color: var(--color-accent); - text-decoration: none; -} -.install-path-link a:hover { - text-decoration: underline; -} -.install-together { - max-width: 960px; - margin: 0 0 var(--spacing-xl); - border: 1px solid var(--color-mist); - border-radius: 8px; - padding: var(--spacing-sm) var(--spacing-md); -} -.install-together-inner { - display: flex; - align-items: center; - gap: var(--spacing-md); -} -.install-together-badge { - font-family: var(--font-mono); - font-size: 0.625rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--color-accent); - border: 1px solid var(--color-accent); - padding: 2px 10px; - border-radius: 99px; - flex-shrink: 0; - white-space: nowrap; -} -.install-together-text { - font-size: 0.8125rem; - line-height: 1.55; - color: var(--color-ash); - margin: 0; -} -.install-path-step { - display: inline-flex; - align-items: center; - justify-content: center; - width: 18px; - height: 18px; - border-radius: 50%; - border: 1.5px solid currentColor; - font-size: 0.5rem; - font-weight: 700; - line-height: 1; - margin-right: 4px; - vertical-align: 1px; -} -.install-updated-subscribe { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); - margin-bottom: var(--spacing-md); -} -.install-updated-subscribe iframe { - display: block; - max-width: 100%; -} -.install-updated-x { - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 0.8125rem; - font-weight: 600; - color: var(--color-ink); - text-decoration: none; - transition: color var(--duration-fast) var(--ease-out); -} -.install-updated-x:hover { - color: var(--color-accent); -} -.install-updated-refs { - margin-top: auto; - padding-top: var(--spacing-md); - border-top: 1px solid var(--color-mist); -} -.install-updated-refs-label { - display: block; - font-family: var(--font-mono); - font-size: 0.5625rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--color-ash); - margin-bottom: 8px; -} -.install-updated-ref { - display: block; - font-size: 0.8125rem; - color: var(--color-charcoal); - text-decoration: none; - margin-bottom: 6px; - transition: color var(--duration-fast) var(--ease-out); -} -a.install-updated-ref:hover { - color: var(--color-accent); -} -.install-updated-ref-terminal { - display: flex; - align-items: center; - gap: var(--spacing-xs); - font-family: var(--font-mono); - font-size: 0.75rem; - color: var(--color-charcoal); - background: var(--color-cream); - border: 1px solid var(--color-mist); - border-radius: 6px; - padding: 6px 10px; - margin-top: 8px; -} -.install-updated-ref-terminal .terminal-prompt { - color: var(--color-ash); - font-size: 0.75rem; -} -.install-updated-ref-terminal code { - font-family: inherit; - font-size: inherit; - background: none; - padding: 0; - color: var(--color-ink); -} -@media (max-width: 900px) { - .install-paths { - grid-template-columns: 1fr; - gap: var(--spacing-xl); - max-width: calc(100vw - var(--spacing-md) * 2); - } - .install-path-primary { - margin-bottom: var(--spacing-sm); - padding: var(--spacing-md); - } - .install-path-title { - font-size: 1.25rem; - } - .install-path-desc { - font-size: 0.875rem; - overflow-wrap: break-word; - } - .install-together-inner { - flex-direction: column; - align-items: flex-start; - gap: var(--spacing-xs); - } - .install-updated-subscribe iframe { - height: 130px; - } - .install-terminal-cmd code { - font-size: 0.75rem; - white-space: normal; - overflow-wrap: break-word; - } - .install-alt-method { - padding: var(--spacing-sm); - } - .install-alt-method .install-terminal-cmd code { - font-size: 0.6875rem; - white-space: normal; - overflow-wrap: break-word; - } - .install-alt-method .install-terminal-cmd .copy-btn { - display: none; - } - .install-path-terminal .glass-terminal { - box-shadow: none; - } - .install-terminal { - max-width: 100%; - } - .install-alternatives { - max-width: 100%; - } -} -.install-terminal { - max-width: 640px; - margin: 0 auto; -} -.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-alternatives { - max-width: 640px; - margin: var(--spacing-sm) auto 0; -} -.install-alternatives-toggle { - font-family: var(--font-mono); - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--color-ash); - cursor: pointer; - padding: var(--spacing-sm) 0; - list-style: none; - display: flex; - align-items: center; - gap: 6px; - transition: color var(--duration-fast) var(--ease-out); -} -.install-alternatives-toggle::-webkit-details-marker { - display: none; -} -.install-alternatives-toggle::before { - content: ''; - display: inline-block; - width: 0; - height: 0; - border-left: 5px solid currentColor; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - transition: transform var(--duration-fast) var(--ease-out); -} -.install-alternatives[open] .install-alternatives-toggle::before { - transform: rotate(90deg); -} -.install-alternatives-toggle:hover { - color: var(--color-charcoal); -} -.install-alternatives-content { - animation: altFadeIn 0.2s var(--ease-out); -} -@keyframes altFadeIn { - from { - opacity: 0; - transform: translateY(-4px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -.install-alt-method { - padding: var(--spacing-md) var(--spacing-lg); -} -.install-alt-label { - display: block; - font-family: var(--font-mono); - font-size: 0.625rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--color-ash); - margin-bottom: 6px; -} -.install-alt-method .install-terminal-cmd { - display: flex; - align-items: center; - gap: var(--spacing-sm); -} -.install-alt-method .terminal-prompt { - color: var(--color-accent); - font-family: var(--font-mono); - font-weight: bold; - user-select: none; -} -.install-alt-method code { - font-family: var(--font-mono); - font-size: 0.875rem; - color: var(--color-ink); -} -.install-alt-note { - display: block; - font-size: 0.75rem; - color: var(--color-ash); - margin-top: 4px; -} -.install-alt-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-alt-download { - display: flex; - align-items: center; - gap: var(--spacing-sm); -} -.install-alt-divider { - height: 1px; - background: var(--color-mist); -} -.install-prefix-options { - display: flex; - align-items: flex-start; - gap: var(--spacing-sm); - margin-top: var(--spacing-md); -} -.install-prefix-option { - flex: 1; - display: flex; - align-items: flex-start; - gap: 8px; - padding: 10px 12px; - border: 1.5px solid var(--color-mist); - border-radius: 8px; - cursor: pointer; - transition: all var(--duration-fast) var(--ease-out); - line-height: 1; -} -.install-prefix-option:hover { - border-color: var(--color-charcoal); -} -.install-prefix-option:has(input:checked) { - border-color: var(--color-accent); -} -.install-prefix-option input { - appearance: none; - -webkit-appearance: none; - width: 16px; - height: 16px; - border: 1.5px solid var(--color-mist); - border-radius: 50%; - flex-shrink: 0; - margin: 0; - transition: all var(--duration-fast) var(--ease-out); - position: relative; -} -.install-prefix-option input:checked { - border-color: var(--color-accent); - background: var(--color-accent); -} -.install-prefix-option input:checked::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 6px; - height: 6px; - background: var(--color-paper); - border-radius: 50%; -} -.install-prefix-option input:focus-visible { - outline: 2px solid var(--color-accent); - outline-offset: 2px; -} -.install-prefix-option-content { - display: flex; - flex-direction: column; - gap: 3px; - padding-top: 1px; -} -.install-prefix-option-label { - font-size: 0.8125rem; - font-weight: 600; - color: var(--color-ink); - line-height: 1; -} -.install-prefix-option-examples { - display: flex; - flex-wrap: wrap; - gap: 4px; -} -.install-prefix-option-examples code { - font-family: var(--font-mono); - font-size: 0.6875rem; - background: var(--color-accent-dim); - color: var(--color-accent); - padding: 2px 6px; - border-radius: 3px; -} -.install-prefix-option-wrap { - flex: 1; - display: flex; - flex-direction: column; - gap: 4px; - align-self: flex-start; -} -.install-prefix-reason { - font-size: 0.6875rem; - color: var(--color-ash); - line-height: 1.4; - padding-left: 2px; -} -.install-prefix-option-label code { - font-family: var(--font-mono); - font-size: 0.6875rem; - background: var(--color-accent-dim); - color: var(--color-accent); - padding: 1px 5px; - border-radius: 3px; -} -.install-alt-method .install-prefix-options { - margin-top: var(--spacing-sm); -} -.install-alt-method .install-alt-download { - margin-top: var(--spacing-sm); -} -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} -@media (max-width: 600px) { - .install-prefix-options { - flex-direction: column; - } - .install-alt-method { - padding: var(--spacing-sm) var(--spacing-md); - } - .install-alt-method code { - font-size: 0.75rem; - } -} -.has-tooltip { - position: relative; - cursor: default; -} -.has-tooltip::after { - content: attr(data-tooltip); - position: absolute; - bottom: calc(100% + 8px); - left: 50%; - transform: translateX(-50%); - padding: 6px 10px; - background: var(--color-ink); - color: var(--color-paper); - font-size: 0.6875rem; - line-height: 1.4; - border-radius: 6px; - white-space: nowrap; - pointer-events: none; - opacity: 0; - transition: opacity 0.15s ease; - z-index: 100; -} -.has-tooltip:hover::after { - opacity: 1; -} -.hero-logo-icon { - display: inline-flex; - align-items: center; -} -.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}.magazine-spread[data-category=diagnostic]{--spread-accent:oklch(55% .2 25)}.magazine-spread[data-category=quality]{--spread-accent:oklch(55% .2 160)}.magazine-spread[data-category=intensity]{--spread-accent:oklch(55% .22 350)}.magazine-spread[data-category=adaptation]{--spread-accent:oklch(55% .18 260)}.magazine-spread[data-category=enhancement]{--spread-accent:oklch(55% .2 300)}.magazine-spread[data-category=system]{--spread-accent:oklch(45% .05 0)}.magazine-container{gap:var(--spacing-lg);grid-template-columns:200px 1fr;align-items:start;width:100%;display:grid;position:relative;overflow:hidden}@media (min-width:1100px){.magazine-container{padding:var(--spacing-lg);background:#fff;border-radius:16px}}.fisheye-list{align-self:center;height:400px;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#0000 0%,#000 10% 90%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000 10% 90%,#0000 100%)}.fisheye-scroll{scrollbar-width:none;height:100%;position:relative;overflow-y:auto}.fisheye-scroll::-webkit-scrollbar{display:none}.fisheye-item{font-family:var(--font-display);color:var(--color-ink);cursor:pointer;white-space:nowrap;text-align:left;transform-origin:0;will-change:transform, opacity;background:0 0;border:none;width:100%;padding:0;font-size:1.5rem;font-weight:400;line-height:1.3;display:block;position:absolute;left:0}.fisheye-slash{color:var(--color-mist);font-weight:300}.fisheye-item.is-active{font-weight:600}.fisheye-item.is-active .fisheye-slash{color:var(--color-accent)}.fisheye-beta{font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ash);border:1px solid var(--color-mist);vertical-align:middle;border-radius:3px;margin-left:.35em;padding:1px 4px;font-size:.45rem;font-weight:600}.magazine-viewport{height:520px;position:relative;overflow:hidden}.magazine-spread{gap:0 var(--spacing-xl);padding:var(--spacing-lg) var(--spacing-lg);opacity:0;pointer-events:none;will-change:opacity, transform;grid-template-rows:1fr auto;grid-template-columns:38% 1fr;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);display:grid;position:absolute;inset:0;transform:translateY(16px)}.magazine-spread.active{opacity:1;pointer-events:auto;z-index:2;transform:translateY(0)}.magazine-spread.exiting{opacity:0;z-index:1;transform:translateY(-16px)}.spread-identity{justify-content:center;gap:var(--spacing-md);padding-right:var(--spacing-lg);flex-direction:column;grid-area:1/1/3;display:flex}.spread-category-label{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;color:var(--spread-accent);font-size:.6875rem;font-weight:600}.spread-command-name{white-space:nowrap;font-family:var(--font-display);color:var(--color-ink);letter-spacing:-.02em;margin:0;font-size:clamp(3rem,5.5vw,5.5rem);font-weight:600;line-height:.95}.spread-command-name .spread-slash{color:var(--spread-accent);font-weight:300}.spread-command-name .beta-badge{font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--spread-accent);border:1px solid var(--spread-accent);vertical-align:super;border-radius:3px;margin-left:8px;padding:2px 6px;font-size:.55rem;font-weight:600}.spread-description{font-family:var(--font-body);color:var(--color-charcoal);max-width:360px;font-size:.9375rem;line-height:1.6}.spread-flow{margin-top:var(--spacing-xs);white-space:nowrap;flex-wrap:nowrap;align-items:center;gap:6px;display:flex}.spread-flow-label{font-family:var(--font-body);color:var(--color-ash);font-size:.75rem}.spread-flow-icon{color:var(--spread-accent);font-size:.8125rem;font-weight:600}.spread-flow-cmd{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-ink);border-radius:3px;padding:2px 7px;font-size:.6875rem}.spread-demo-area{flex-direction:column;grid-area:1/2/3;min-height:0;display:flex;overflow:hidden}.spread-demo-area .demo-split-comparison{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.spread-demo-area .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}.spread-demo-area .demo-split-comparison .split-before,.spread-demo-area .demo-split-comparison .split-after{padding:var(--spacing-md);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spread-demo-area .demo-split-comparison .split-before{z-index:1;background:var(--color-cream)}.spread-demo-area .demo-split-comparison .split-after{z-index:2;background:var(--color-paper);clip-path:polygon(58% 0%,100% 0%,100% 100%,42% 100%)}.spread-demo-area .demo-split-comparison .split-content{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:320px;display:flex}.spread-demo-area .demo-split-comparison .split-divider{background:var(--spread-accent,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}.spread-demo-area .demo-split-comparison .split-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-paper);background:var(--spread-accent,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)}.spread-demo-area .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}.spread-demo-area .demo-container{flex-direction:column;flex:1;display:flex}.spread-demo-area .demo-container .demo-viewport{flex:1;justify-content:center;align-items:center;display:flex}.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}.beta-badge{font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);border:1px solid var(--color-accent);vertical-align:middle;border-radius:3px;margin-left:6px;padding:1px 5px;font-size:.55rem;font-weight:600}.manual-cmd-desc{color:var(--color-charcoal);margin:0;font-size:.875rem;line-height:1.5}.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{height:calc(100vh - var(--spacing-xl) * 2);min-height:500px;max-height:800px;position:sticky;top:50vh;transform:translateY(-50%)}.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){.magazine-container,.fisheye-list,.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}.changelog-entry+.changelog-entry{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}.changelog-older{margin-top:var(--spacing-sm)}.changelog-older-toggle{font-family:var(--font-body);color:var(--color-accent);padding:var(--spacing-md) 0;cursor:pointer;align-items:center;gap:6px;font-size:.875rem;font-weight:500;list-style:none;transition:color .2s;display:flex}.changelog-older-toggle::-webkit-details-marker{display:none}.changelog-older-toggle:before{content:"+";transition:transform .3s var(--ease-out);font-size:1.25rem;font-weight:300}.changelog-older[open] .changelog-older-toggle:before{transform:rotate(45deg)}.changelog-older-toggle:hover{color:var(--color-accent-hover)}.changelog-older-entries{animation:faqFadeIn .3s var(--ease-out)}.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-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)}@media (max-width:600px){.faq-question{padding:var(--spacing-md) 0;gap:var(--spacing-sm);min-height:44px;font-size:1rem}.faq-answer{font-size:.875rem}.changelog-version{font-size:1rem}.changelog-version-header{gap:var(--spacing-xs);flex-wrap:wrap}.changelog-items{padding-left:var(--spacing-sm);font-size:.875rem}.changelog-older-toggle{min-height:44px}}@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);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}.section-nav{bottom:var(--spacing-md);z-index:100;-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-mist);opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);background:oklch(98% 0 0/.85);border-radius:100px;align-items:center;gap:2px;padding:4px;display:flex;position:fixed;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 4px 24px -4px #0000001f,0 1px 3px #0000000f}.section-nav.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.section-nav-item{border-radius:100px;align-items:center;gap:4px;padding:8px 12px;text-decoration:none;transition:background .2s,color .2s;display:flex}.section-nav-item:hover{background:var(--color-mist);text-decoration:none}.section-nav-item.is-active{background:var(--color-ink)}.section-nav-item.is-active .section-nav-num,.section-nav-item.is-active .section-nav-label{color:var(--color-paper)}.section-nav-num{font-family:var(--font-mono);color:var(--color-ash);letter-spacing:.02em;font-size:.5625rem;font-weight:500;transition:color .2s}.section-nav-label{font-family:var(--font-body);color:var(--color-charcoal);white-space:nowrap;font-size:.6875rem;font-weight:500;transition:color .2s}@media (max-width:700px){.section-nav-label{display:none}.section-nav-item{padding:8px 10px}}@media (max-width:400px){.section-nav-item{padding:8px}.section-nav-num{font-size:.625rem}}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-lg) 0 var(--spacing-2xl);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);align-items:center;gap:6px;text-decoration:none;transition:color .2s;display:flex;position:absolute}.github-link:hover{color:var(--color-ink);text-decoration:none}.github-stars{font-family:var(--font-mono);color:var(--color-ash);font-size:.75rem;font-weight:500;transition:color .2s}.github-link:hover .github-stars{color:var(--color-ink)}.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}}@media (max-width:768px){.hero-combined-right{padding-top:var(--spacing-xl);order:-1}.hero-combined-container{gap:var(--spacing-md)}.hero-combined-left{gap:var(--spacing-sm);padding-top:var(--spacing-md)}.hero-hook-text,.hero-included-box,.hero-cta-group{margin-top:var(--spacing-xs)}}.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-hook-text--short{display:none}@media (max-width:768px){.hero-hook-text--full{display:none}.hero-hook-text--short{display:block}}.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{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.hero-logos-inline .hero-logos-label{color:var(--color-ash);letter-spacing:.03em;font-size:.6875rem}.hero-logos-inline .hero-logos-row{flex-wrap:wrap;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(58% 0%,100% 0%,100% 100%,42% 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:50%;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}@media (max-width:768px){.split-comparison{margin-top:-8px;margin-bottom:-8px;padding:8px}.split-labels{display:none}}.split-label-dot{background:var(--color-mist);border-radius:50%;width:8px;height:8px}.split-label-dot--accent{background:var(--color-accent)}.foundation-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.foundation-content{gap:var(--spacing-lg);display:grid}.foundation-grid{gap:var(--spacing-sm);grid-template-columns:repeat(4,1fr);display:grid}@media (max-width:900px){.foundation-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.foundation-grid{grid-template-columns:1fr}}.foundation-card{padding:var(--spacing-md);background:#fff;border-radius:8px}.foundation-card-header{margin-bottom:var(--spacing-xs);justify-content:space-between;align-items:baseline;display:flex}.foundation-card-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink);font-size:.625rem;font-weight:600}.foundation-card-count{font-family:var(--font-mono);color:var(--color-accent);font-size:.625rem}.foundation-card-detail{color:var(--color-ash);margin:0;font-size:.8125rem;line-height:1.5}.foundation-cta{text-align:center}.foundation-cta-text{color:var(--color-charcoal);margin:0;font-size:.9375rem}.foundation-cta-text code{font-family:var(--font-mono);color:var(--color-ink);font-size:.875rem}.foundation-slash{color:var(--color-accent)}.language-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.language-content{gap:var(--spacing-xl);display:grid}.commands-subsection{gap:var(--spacing-lg);display:grid}.commands-header-title{font-family:var(--font-display);margin:0 0 var(--spacing-xs);color:var(--color-ink);font-size:clamp(1.5rem,3vw,2rem);font-weight:400}.commands-header-subtitle{color:var(--color-charcoal);margin:0;font-size:1rem}.visual-mode-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.visual-mode-content{gap:var(--spacing-lg);display:grid}.visual-mode-demo{gap:var(--spacing-xl);grid-template-columns:3fr 2fr;align-items:start;display:grid}@media (max-width:900px){.visual-mode-demo{grid-template-columns:1fr}}.visual-mode-preview{border:1px solid var(--color-mist);border-radius:8px;overflow:hidden;box-shadow:0 8px 30px -6px #0000001f}.visual-mode-preview-header{background:var(--color-cream);border-bottom:1px solid var(--color-mist);align-items:center;gap:6px;padding:10px 14px;display:flex}.visual-mode-preview-dot{border-radius:50%;width:10px;height:10px}.visual-mode-preview-dot.red{background:#ff5f56}.visual-mode-preview-dot.yellow{background:#ffbd2e}.visual-mode-preview-dot.green{background:#27c93f}.visual-mode-preview-title{font-family:var(--font-mono);color:var(--color-ash);margin-left:auto;font-size:.75rem}.visual-mode-iframe{background:#fff;border:none;width:100%;height:480px;display:block}.visual-mode-details{gap:var(--spacing-md);flex-direction:column;display:flex}.visual-mode-feature{padding:var(--spacing-md);background:#fff;border-radius:8px}.visual-mode-feature-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);margin-bottom:var(--spacing-xs);font-size:.625rem;font-weight:600;display:block}.visual-mode-feature p{color:var(--color-charcoal);margin:0;font-size:.8125rem;line-height:1.55}.visual-mode-feature code{font-family:var(--font-mono);color:var(--color-ink);font-size:.8125rem}.solution-section{padding:var(--spacing-2xl) 0}.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:visible}.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-charcoal);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:100px;flex-shrink:0;font-size:.8125rem;font-weight:500;transition:background .2s,color .2s}.mobile-cmd-pill:hover{background:var(--color-mist)}.mobile-cmd-pill.active{color:var(--color-paper);background:var(--color-ink)}.mobile-demo-area{padding:0}.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){.site-footer{padding:var(--spacing-lg) var(--spacing-md)}.footer-content{text-align:center;gap:var(--spacing-md);flex-direction:column}.footer-links{gap:var(--spacing-sm) var(--spacing-md);justify-content:center;font-size:.8125rem}}.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)}.antidote-row{gap:var(--spacing-xl);margin-bottom:var(--spacing-xl);align-items:stretch;display:flex}.antidote-row .patterns-tabbed{flex:1;min-width:0;margin-bottom:0}.gallery-stack-container{gap:var(--spacing-xs);flex-direction:column;flex:0 0 clamp(320px,34vw,420px);display:flex;position:relative}.gallery-stack-header{align-items:center;gap:var(--spacing-xs);white-space:nowrap;display:flex}.gallery-stack-title{font-family:var(--font-display);color:var(--color-ink);flex:1;font-size:1rem;font-weight:600}.gallery-stack-btn{border:1px solid var(--color-mist);cursor:pointer;width:24px;height:24px;color:var(--color-charcoal);transition:border-color var(--duration-fast), background var(--duration-fast);background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.6875rem;display:flex;position:relative}.gallery-stack-btn:after{content:"";position:absolute;inset:-10px}.gallery-stack-btn:hover{border-color:var(--color-charcoal)}.gallery-stack{aspect-ratio:3/2;width:calc(100% - 20px);margin-bottom:20px;position:relative}.gallery-stack-card{border:1px solid var(--color-mist);will-change:transform, opacity;background:#fff;border-radius:8px;flex-direction:column;width:100%;height:100%;text-decoration:none;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s,box-shadow .35s;display:flex;position:absolute;top:0;left:0;overflow:hidden}.gallery-stack-card img{object-fit:cover;object-position:top left;flex:1;width:100%;min-height:0}.gallery-stack-label{color:var(--color-charcoal);flex-shrink:0;padding:6px 10px;font-size:.75rem;font-weight:600}.gallery-stack-card[data-offset="0"]{z-index:3;opacity:1;transform:translate(0);box-shadow:0 2px 12px oklch(20% 0 0/.1)}.gallery-stack-card[data-offset="1"]{z-index:2;opacity:1;pointer-events:none;transform:translate(8px,8px);box-shadow:0 1px 6px oklch(20% 0 0/.08)}.gallery-stack-card[data-offset="2"]{z-index:1;opacity:1;pointer-events:none;transform:translate(16px,16px);box-shadow:0 1px 4px oklch(20% 0 0/.06)}.gallery-stack-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="2"]){z-index:0;opacity:0;pointer-events:none;transform:translate(20px,20px)}.gallery-stack-link{color:var(--color-accent);text-align:center;font-size:.75rem;font-weight:500;text-decoration:none}.gallery-stack-link:hover{text-decoration:underline}@media (max-width:900px){.antidote-row{flex-direction:column}.gallery-stack-container{flex:none;width:100%;max-width:360px}}.patterns-tabbed{margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:#fff;border-radius:8px}.patterns-tabs{margin-bottom:var(--spacing-md);flex-wrap:wrap;gap:6px;display:flex}@media (max-width:768px){.patterns-tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:calc(-1 * var(--spacing-lg));margin-right:calc(-1 * var(--spacing-lg));padding-left:var(--spacing-lg);padding-right:var(--spacing-lg);flex-wrap:nowrap;overflow-x:auto}.patterns-tabs::-webkit-scrollbar{display:none}}.patterns-tab{font-family:var(--font-body);color:var(--color-charcoal);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:100px;padding:6px 12px;font-size:.75rem;font-weight:500;transition:background .2s,color .2s}.patterns-tab:hover{background:var(--color-mist)}.patterns-tab.is-active{background:var(--color-ink);color:var(--color-paper)}.patterns-content{display:none}.patterns-content.is-active{gap:var(--spacing-md);flex-direction:column;display:flex}.patterns-col ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.patterns-col li{padding-left:var(--spacing-sm);color:var(--color-charcoal);overflow-wrap:break-word;word-break:break-word;font-size:.8125rem;line-height:1.55;position:relative}.patterns-col--dont li:before{content:"×";color:var(--color-accent);font-weight:600;position:absolute;left:0}.patterns-col--do li:before{content:"✓";color:var(--color-success,#22c55e);font-weight:600;position:absolute;left:0}.detection-callout{margin-bottom:var(--spacing-xl);border:1px solid var(--color-mist);padding:var(--spacing-sm) var(--spacing-md);border-radius:8px}.detection-callout-inner{align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.detection-badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent);border:1px solid var(--color-accent);border-radius:99px;flex-shrink:0;padding:3px 10px;font-size:.6875rem;font-weight:600}.detection-desc{color:var(--color-ash);flex:1;min-width:200px;font-size:.8125rem;line-height:1.55}.detection-desc code{font-family:var(--font-mono);color:var(--color-charcoal);font-size:.8125rem}.detection-cmd{font-family:var(--font-mono);color:var(--color-charcoal);white-space:nowrap;background:oklch(96% .005 350);border-radius:6px;flex-shrink:0;padding:6px 14px;font-size:.8125rem}.detection-cmd:before{content:"➜ ";color:var(--color-accent)}.antidote-footer{text-align:center}.antidote-suggest-link{color:var(--color-ash);font-size:.8125rem;text-decoration:none}.antidote-suggest-link:hover{color:var(--color-accent);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)}@media (min-width:1100px){.platforms-section{border-top:none}}.platforms-section .section-subtitle{max-width:60ch}.install-paths{gap:0 var(--spacing-xl);margin:0 0 var(--spacing-xl);grid-template-columns:5fr 3fr 3fr;align-items:start;display:grid}.install-path{flex-direction:column;min-width:0;display:flex}.install-path-primary{padding:var(--spacing-lg);background:#fff;border-radius:16px}.install-path-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--color-accent);font-size:.625rem;font-weight:600}.install-path:not(.install-path-primary){padding-top:var(--spacing-lg)}.install-path-secondary .install-path-label{color:var(--color-ash)}.install-path-title{font-family:var(--font-display);margin:var(--spacing-xs) 0 var(--spacing-sm);font-size:1.5rem;font-weight:600;line-height:1.2}.install-path-badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);border:1px solid var(--color-accent);vertical-align:middle;border-radius:3px;margin-left:6px;padding:2px 6px;font-size:.5rem;font-weight:600;position:relative;top:-2px}.install-path-badge-muted{color:var(--color-ash);border-color:var(--color-mist)}.install-path-desc{color:var(--color-charcoal);margin:0 0 var(--spacing-md);font-size:.9375rem;line-height:1.6}.install-path-terminal{margin-bottom:var(--spacing-sm)}.install-path-terminal .glass-terminal{height:auto}.install-path-terminal .terminal-body{padding:0}.install-path-next{color:var(--color-charcoal);padding-top:var(--spacing-md);margin-top:auto;font-size:.8125rem;line-height:1.5}.install-path-next code{font-family:var(--font-mono);color:var(--color-ink);font-size:.8125rem;font-weight:600}.install-path-slash{color:var(--color-accent)}.install-path-subcommands{margin-top:var(--spacing-sm);flex-direction:column;gap:6px;display:flex}.install-path-subcommand{color:var(--color-charcoal);font-size:.75rem;line-height:1.4}.install-path-subcommand code{font-family:var(--font-mono);color:var(--color-ink);background:var(--color-mist);border-radius:3px;margin-right:4px;padding:2px 6px;font-size:.6875rem;font-weight:600}.install-path-link{padding-top:var(--spacing-md);margin-top:auto;font-size:.8125rem}.install-path-link a{color:var(--color-accent);text-decoration:none}.install-path-link a:hover{text-decoration:underline}.install-together{max-width:960px;margin:0 0 var(--spacing-xl);border:1px solid var(--color-mist);padding:var(--spacing-sm) var(--spacing-md);border-radius:8px}.install-together-inner{align-items:center;gap:var(--spacing-md);display:flex}.install-together-badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent);border:1px solid var(--color-accent);white-space:nowrap;border-radius:99px;flex-shrink:0;padding:2px 10px;font-size:.625rem;font-weight:600}.install-together-text{color:var(--color-ash);margin:0;font-size:.8125rem;line-height:1.55}.install-path-step{vertical-align:1px;border:1.5px solid;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;margin-right:4px;font-size:.5rem;font-weight:700;line-height:1;display:inline-flex}.install-updated-subscribe{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-direction:column;display:flex}.install-updated-subscribe iframe{max-width:100%;display:block}.install-updated-x{color:var(--color-ink);transition:color var(--duration-fast) var(--ease-out);align-items:center;gap:6px;font-size:.8125rem;font-weight:600;text-decoration:none;display:inline-flex}.install-updated-x:hover{color:var(--color-accent)}.install-updated-refs{padding-top:var(--spacing-md);border-top:1px solid var(--color-mist);margin-top:auto}.install-updated-refs-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);margin-bottom:8px;font-size:.5625rem;font-weight:600;display:block}.install-updated-ref{color:var(--color-charcoal);transition:color var(--duration-fast) var(--ease-out);margin-bottom:6px;font-size:.8125rem;text-decoration:none;display:block}a.install-updated-ref:hover{color:var(--color-accent)}.install-updated-ref-terminal{align-items:center;gap:var(--spacing-xs);font-family:var(--font-mono);color:var(--color-charcoal);background:var(--color-cream);border:1px solid var(--color-mist);border-radius:6px;margin-top:8px;padding:6px 10px;font-size:.75rem;display:flex}.install-updated-ref-terminal .terminal-prompt{color:var(--color-ash);font-size:.75rem}.install-updated-ref-terminal code{font-family:inherit;font-size:inherit;color:var(--color-ink);background:0 0;padding:0}@media (max-width:900px){.install-paths{gap:var(--spacing-xl);max-width:calc(100vw - var(--spacing-md) * 2);grid-template-columns:1fr}.install-path-primary{margin-bottom:var(--spacing-sm);padding:var(--spacing-md)}.install-path-title{font-size:1.25rem}.install-path-desc{overflow-wrap:break-word;font-size:.875rem}.install-together-inner{align-items:flex-start;gap:var(--spacing-xs);flex-direction:column}.install-updated-subscribe iframe{height:130px}.install-terminal-cmd code{white-space:normal;overflow-wrap:break-word;font-size:.75rem}.install-alt-method{padding:var(--spacing-sm)}.install-alt-method .install-terminal-cmd code{white-space:normal;overflow-wrap:break-word;font-size:.6875rem}.install-alt-method .install-terminal-cmd .copy-btn{display:none}.install-path-terminal .glass-terminal{box-shadow:none}.install-terminal,.install-alternatives{max-width:100%}}.install-terminal{max-width:640px;margin:0 auto}.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-alternatives{max-width:640px;margin:var(--spacing-sm) auto 0}.install-alternatives-toggle{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ash);cursor:pointer;padding:var(--spacing-sm) 0;transition:color var(--duration-fast) var(--ease-out);align-items:center;gap:6px;font-size:.75rem;font-weight:600;list-style:none;display:flex}.install-alternatives-toggle::-webkit-details-marker{display:none}.install-alternatives-toggle:before{content:"";width:0;height:0;transition:transform var(--duration-fast) var(--ease-out);border-top:4px solid #0000;border-bottom:4px solid #0000;border-left:5px solid;display:inline-block}.install-alternatives[open] .install-alternatives-toggle:before{transform:rotate(90deg)}.install-alternatives-toggle:hover{color:var(--color-charcoal)}.install-alternatives-content{animation:altFadeIn .2s var(--ease-out)}@keyframes altFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.install-alt-method{padding:var(--spacing-md) var(--spacing-lg)}.install-alt-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);margin-bottom:6px;font-size:.625rem;font-weight:600;display:block}.install-alt-method .install-terminal-cmd{align-items:center;gap:var(--spacing-sm);display:flex}.install-alt-method .terminal-prompt{color:var(--color-accent);font-family:var(--font-mono);-webkit-user-select:none;user-select:none;font-weight:700}.install-alt-method code{font-family:var(--font-mono);color:var(--color-ink);font-size:.875rem}.install-alt-note{color:var(--color-ash);margin-top:4px;font-size:.75rem;display:block}.install-alt-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-alt-download{align-items:center;gap:var(--spacing-sm);display:flex}.install-alt-divider{background:var(--color-mist);height:1px}.install-prefix-options{align-items:flex-start;gap:var(--spacing-sm);margin-top:var(--spacing-md);display:flex}.install-prefix-option{border:1.5px solid var(--color-mist);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);border-radius:8px;flex:1;align-items:flex-start;gap:8px;padding:10px 12px;line-height:1;display:flex}.install-prefix-option:hover{border-color:var(--color-charcoal)}.install-prefix-option:has(input:checked){border-color:var(--color-accent)}.install-prefix-option input{appearance:none;border:1.5px solid var(--color-mist);width:16px;height:16px;transition:all var(--duration-fast) var(--ease-out);border-radius:50%;flex-shrink:0;margin:0;position:relative}.install-prefix-option input:checked{border-color:var(--color-accent);background:var(--color-accent)}.install-prefix-option input:checked:after{content:"";background:var(--color-paper);border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.install-prefix-option input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.install-prefix-option-content{flex-direction:column;gap:3px;padding-top:1px;display:flex}.install-prefix-option-label{color:var(--color-ink);font-size:.8125rem;font-weight:600;line-height:1}.install-prefix-option-examples{flex-wrap:wrap;gap:4px;display:flex}.install-prefix-option-examples code{font-family:var(--font-mono);background:var(--color-accent-dim);color:var(--color-accent);border-radius:3px;padding:2px 6px;font-size:.6875rem}.install-prefix-option-wrap{flex-direction:column;flex:1;align-self:flex-start;gap:4px;display:flex}.install-prefix-reason{color:var(--color-ash);padding-left:2px;font-size:.6875rem;line-height:1.4}.install-prefix-option-label code{font-family:var(--font-mono);background:var(--color-accent-dim);color:var(--color-accent);border-radius:3px;padding:1px 5px;font-size:.6875rem}.install-alt-method .install-prefix-options,.install-alt-method .install-alt-download{margin-top:var(--spacing-sm)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:600px){.install-prefix-options{flex-direction:column}.install-alt-method{padding:var(--spacing-sm) var(--spacing-md)}.install-alt-method code{font-size:.75rem}}.has-tooltip{cursor:default;position:relative}.has-tooltip:after{content:attr(data-tooltip);background:var(--color-ink);color:var(--color-paper);white-space:nowrap;pointer-events:none;opacity:0;z-index:100;border-radius:6px;padding:6px 10px;font-size:.6875rem;line-height:1.4;transition:opacity .15s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.has-tooltip:hover:after{opacity:1}.hero-logo-icon{align-items:center;display:inline-flex}.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 b2550be94..d924d13e9 100644 --- a/public/index.html +++ b/public/index.html @@ -49,12 +49,13 @@ @@ -69,15 +70,15 @@

Impeccable

Design fluency for AI harnesses

-

Great design prompts require design vocabulary. Most people don't have it. You can't ask for "more vertical rhythm" if you've never used those words. Impeccable gives you commands that put designer language in your hands.

-

Great design prompts require design vocabulary. Impeccable gives you commands that put designer language in your hands.

+

Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI 212 design guidelines and gives you 22 commands to steer the result.

+

Impeccable teaches your AI real design and gives you 22 commands to steer the result.

What's included
Enhanced impeccable skill + anti-patterns · - 20 design skills: /polish, /audit, /typeset, /overdrive... + 22 design commands: /polish, /audit, /typeset, /overdrive...
@@ -157,10 +158,57 @@
- -
+ +
01 +

The Foundation

+
+
+

Before commands, before detection -- Impeccable teaches your AI real design. 212 guidelines across 7 dimensions, loaded as deep reference knowledge every time your AI writes code.

+ +
+ +
+ +
+

Run /impeccable teach once to set your project's design context. Every command benefits.

+
+
+
+ + +
+ +
+ 02 +

The Language

+
+
+

22 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline -- so you can steer with precision.

+ +
+ +
+ + + +
+
+

Commands in Action

+

Interactive demos for every command View cheatsheet →

+
+
+ +
+
+
+
+ + +
+
+ 03

The Antidote

@@ -168,12 +216,10 @@
-
-

Gallery of Shame

@@ -210,55 +256,55 @@
- -
-
- New! -

24 patterns are caught automatically by the CLI and browser overlay -- no LLM needed. The rest are caught by /critique through design analysis.

- npx impeccable detect src/ -
-
-
Suggest a pattern →
- -
-
- 02 -

The Framework

-
-
-

One skill with deep design expertise. 20 commands that form the vocabulary of design. And a CLI that catches what humans miss.

- -
- -
- -
-
- - -
-
- 03 -

Commands in Action

-

Interactive demos for every command View cheatsheet →

-
- -
- -
-
- - - -
+ +
04 +

Visual Mode

+
+
+

See design issues highlighted directly in your browser. When you run /critique, Impeccable injects a diagnostic overlay onto your live page -- no screenshots, no guesswork.

+ +
+
+
+ + + + Live detection overlay +
+ +
+
+
+ 24 deterministic checks +

No LLM needed. Pattern matching catches purple gradients, overused fonts, nested cards, low contrast, and more.

+
+
+ Any workflow +

Embedded in /critique, or run standalone via the CLI.

+
+
+
+ New! + npx impeccable detect src/ +
+
+
+
+
+
+ + +
+
+ 05

Get Started

@@ -429,7 +475,7 @@
- 05 + 06

What's New

@@ -547,7 +593,7 @@
- 06 + 07

Frequently Asked Questions

@@ -635,7 +681,7 @@
Anti-Patterns Gallery of Shame - Commands + Commands Cheatsheet Privacy GitHub diff --git a/public/js/components/foundation-grid.js b/public/js/components/foundation-grid.js new file mode 100644 index 000000000..d7f972751 --- /dev/null +++ b/public/js/components/foundation-grid.js @@ -0,0 +1,19 @@ +import { skillFocusAreas, dimensionGuidelineCounts } from '../data.js'; + +export function initFoundationGrid() { + const container = document.querySelector('.foundation-grid'); + if (!container) return; + + const dimensions = skillFocusAreas['impeccable']; + if (!dimensions) return; + + container.innerHTML = dimensions.map(dim => ` +
+
+ ${dim.area} + ${dimensionGuidelineCounts[dim.area] || ''} +
+

${dim.detail}

+
+ `).join(''); +} diff --git a/public/js/data.js b/public/js/data.js index 8309abe5b..619d38342 100644 --- a/public/js/data.js +++ b/public/js/data.js @@ -30,6 +30,17 @@ export const skillFocusAreas = { ] }; +// Guideline counts per dimension (verified from reference files) +export const dimensionGuidelineCounts = { + 'Typography': 33, + 'Color & Contrast': 29, + 'Spatial Design': 27, + 'Motion': 32, + 'Interaction': 36, + 'Responsive': 23, + 'UX Writing': 32 +}; + // Reference domains within the impeccable skill export const skillReferenceDomains = [ 'typography', diff --git a/server/index.js b/server/index.js index 84739b911..694ce44fa 100644 --- a/server/index.js +++ b/server/index.js @@ -91,7 +91,7 @@ const server = serve({ const assetFile = file(filePath); if (await assetFile.exists()) { return new Response(assetFile, { - headers: { "Content-Type": "text/html", "X-Content-Type-Options": "nosniff", "X-Frame-Options": "DENY" } + headers: { "Content-Type": "text/html", "X-Content-Type-Options": "nosniff", "X-Frame-Options": "SAMEORIGIN" } }); } return new Response("Not Found", { status: 404 }); diff --git a/source/skills/critique/scripts/detect-antipatterns.mjs b/source/skills/critique/scripts/detect-antipatterns.mjs index a9cc78d45..7c0e76d04 100644 --- a/source/skills/critique/scripts/detect-antipatterns.mjs +++ b/source/skills/critique/scripts/detect-antipatterns.mjs @@ -1208,11 +1208,20 @@ if (IS_BROWSER) { // Inject hover styles via CSS (more reliable than JS event listeners) const styleEl = document.createElement('style'); styleEl.textContent = ` + @keyframes impeccable-reveal { + from { opacity: 0; outline-color: transparent; } + to { opacity: 1; outline-color: ${OUTLINE_COLOR}; } + } .impeccable-overlay:not(.impeccable-banner) { pointer-events: none; outline: 2px solid ${OUTLINE_COLOR}; border-radius: 4px; transition: outline-color 0.3s ease; + animation: impeccable-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; + animation-play-state: paused; + } + .impeccable-overlay.impeccable-visible { + animation-play-state: running; } .impeccable-overlay.impeccable-hover { outline-color: rgba(0,0,0,0.85); @@ -1285,6 +1294,7 @@ if (IS_BROWSER) { // Uses a huge rootMargin so all *rendered* elements count as intersecting, // while display:none / closed
/ hidden modals etc. do not. // This is event-driven -- no polling needed. + let overlayIndex = 0; const visibilityObserver = new IntersectionObserver((entries) => { for (const entry of entries) { const overlay = entry.target._impeccableOverlay; @@ -1292,6 +1302,11 @@ if (IS_BROWSER) { if (entry.isIntersecting) { overlay.style.display = ''; positionOverlay(overlay); + if (!overlay._revealed) { + overlay._revealed = true; + overlay.style.animationDelay = `${(overlay._staggerIndex || 0) * 80}ms`; + requestAnimationFrame(() => overlay.classList.add('impeccable-visible')); + } } else { overlay.style.display = 'none'; } @@ -1358,6 +1373,7 @@ if (IS_BROWSER) { // Start hidden; the IntersectionObserver will show it once the target is rendered outline.style.display = 'none'; + outline._staggerIndex = overlayIndex++; el._impeccableOverlay = outline; visibilityObserver.observe(el); @@ -1378,8 +1394,13 @@ if (IS_BROWSER) { background: LABEL_BG, color: 'white', fontFamily: 'system-ui, sans-serif', fontSize: '13px', display: 'flex', alignItems: 'center', pointerEvents: 'auto', - height: '36px', + height: '36px', overflow: 'hidden', maxWidth: '100vw', + transform: 'translateY(-100%)', + transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)', }); + requestAnimationFrame(() => requestAnimationFrame(() => { + banner.style.transform = 'translateY(0)'; + })); // Scrollable findings area const scrollArea = document.createElement('div'); @@ -1473,6 +1494,8 @@ if (IS_BROWSER) { // Skip browser extension elements (Claude, etc.) const elId = el.id || ''; if (elId.startsWith('claude-') || elId.startsWith('cic-')) continue; + // Skip html/body -- page-level findings go in the banner, not a full-page overlay + if (el === document.body || el === document.documentElement) continue; const findings = [ ...checkElementBordersDOM(el).map(f => ({ type: f.id, detail: f.snippet })),