+ 
+
+
+
+ 
+
+
+ Failed to load data. {error.message}
- -
-```
-
-**Reduce JavaScript Bundle**:
-- Code splitting (route-based, component-based)
-- Tree shaking (remove unused code)
-- Remove unused dependencies
-- Lazy load non-critical code
-- Use dynamic imports for large components
-
-```javascript
-// Lazy load heavy component
-const HeavyChart = lazy(() => import('./HeavyChart'));
-```
-
-**Optimize CSS**:
-- Remove unused CSS
-- Critical CSS inline, rest async
-- Minimize CSS files
-- Use CSS containment for independent regions
-
-**Optimize Fonts**:
-- Use `font-display: swap` or `optional`
-- Subset fonts (only characters you need)
-- Preload critical fonts
-- Use system fonts when appropriate
-- Limit font weights loaded
-
-```css
-@font-face {
- font-family: 'CustomFont';
- src: url('/fonts/custom.woff2') format('woff2');
- font-display: swap; /* Show fallback immediately */
- unicode-range: U+0020-007F; /* Basic Latin only */
-}
-```
-
-**Optimize Loading Strategy**:
-- Critical resources first (async/defer non-critical)
-- Preload critical assets
-- Prefetch likely next pages
-- Service worker for offline/caching
-- HTTP/2 or HTTP/3 for multiplexing
-
-### Rendering Performance
-
-**Avoid Layout Thrashing**:
-```javascript
-// ❌ Bad: Alternating reads and writes (causes reflows)
-elements.forEach(el => {
- const height = el.offsetHeight; // Read (forces layout)
- el.style.height = height * 2; // Write
-});
-
-// ✅ Good: Batch reads, then batch writes
-const heights = elements.map(el => el.offsetHeight); // All reads
-elements.forEach((el, i) => {
- el.style.height = heights[i] * 2; // All writes
-});
-```
-
-**Optimize Rendering**:
-- Use CSS `contain` property for independent regions
-- Minimize DOM depth (flatter is faster)
-- Reduce DOM size (fewer elements)
-- Use `content-visibility: auto` for long lists
-- Virtual scrolling for very long lists (react-window, react-virtualized)
-
-**Reduce Paint & Composite**:
-- Use `transform` and `opacity` for animations (GPU-accelerated)
-- Avoid animating layout properties (width, height, top, left)
-- Use `will-change` sparingly for known expensive operations
-- Minimize paint areas (smaller is faster)
-
-### Animation Performance
-
-**GPU Acceleration**:
-```css
-/* ✅ GPU-accelerated (fast) */
-.animated {
- transform: translateX(100px);
- opacity: 0.5;
-}
-
-/* ❌ CPU-bound (slow) */
-.animated {
- left: 100px;
- width: 300px;
-}
-```
-
-**Smooth 60fps**:
-- Target 16ms per frame (60fps)
-- Use `requestAnimationFrame` for JS animations
-- Debounce/throttle scroll handlers
-- Use CSS animations when possible
-- Avoid long-running JavaScript during animations
-
-**Intersection Observer**:
-```javascript
-// Efficiently detect when elements enter viewport
-const observer = new IntersectionObserver((entries) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- // Element is visible, lazy load or animate
- }
- });
-});
-```
-
-### React/Framework Optimization
-
-**React-specific**:
-- Use `memo()` for expensive components
-- `useMemo()` and `useCallback()` for expensive computations
-- Virtualize long lists
-- Code split routes
-- Avoid inline function creation in render
-- Use React DevTools Profiler
-
-**Framework-agnostic**:
-- Minimize re-renders
-- Debounce expensive operations
-- Memoize computed values
-- Lazy load routes and components
-
-### Network Optimization
-
-**Reduce Requests**:
-- Combine small files
-- Use SVG sprites for icons
-- Inline small critical assets
-- Remove unused third-party scripts
-
-**Optimize APIs**:
-- Use pagination (don't load everything)
-- GraphQL to request only needed fields
-- Response compression (gzip, brotli)
-- HTTP caching headers
-- CDN for static assets
-
-**Optimize for Slow Connections**:
-- Adaptive loading based on connection (navigator.connection)
-- Optimistic UI updates
-- Request prioritization
-- Progressive enhancement
-
-## Core Web Vitals Optimization
-
-### Largest Contentful Paint (LCP < 2.5s)
-- Optimize hero images
-- Inline critical CSS
-- Preload key resources
-- Use CDN
-- Server-side rendering
-
-### First Input Delay (FID < 100ms) / INP (< 200ms)
-- Break up long tasks
-- Defer non-critical JavaScript
-- Use web workers for heavy computation
-- Reduce JavaScript execution time
-
-### Cumulative Layout Shift (CLS < 0.1)
-- Set dimensions on images and videos
-- Don't inject content above existing content
-- Use `aspect-ratio` CSS property
-- Reserve space for ads/embeds
-- Avoid animations that cause layout shifts
-
-```css
-/* Reserve space for image */
-.image-container {
- aspect-ratio: 16 / 9;
-}
-```
-
-## Performance Monitoring
-
-**Tools to use**:
-- Chrome DevTools (Lighthouse, Performance panel)
-- WebPageTest
-- Core Web Vitals (Chrome UX Report)
-- Bundle analyzers (webpack-bundle-analyzer)
-- Performance monitoring (Sentry, DataDog, New Relic)
-
-**Key metrics**:
-- LCP, FID/INP, CLS (Core Web Vitals)
-- Time to Interactive (TTI)
-- First Contentful Paint (FCP)
-- Total Blocking Time (TBT)
-- Bundle size
-- Request count
-
-**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
-
-**NEVER**:
-- Optimize without measuring (premature optimization)
-- Sacrifice accessibility for performance
-- Break functionality while optimizing
-- Use `will-change` everywhere (creates new layers, uses memory)
-- Lazy load above-fold content
-- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
-- Forget about mobile performance (often slower devices, slower connections)
-
-## Verify Improvements
-
-Test that optimizations worked:
-
-- **Before/after metrics**: Compare Lighthouse scores
-- **Real user monitoring**: Track improvements for real users
-- **Different devices**: Test on low-end Android, not just flagship iPhone
-- **Slow connections**: Throttle to 3G, test experience
-- **No regressions**: Ensure functionality still works
-- **User perception**: Does it *feel* faster?
-
-Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
\ No newline at end of file
diff --git a/.claude/commands/polish.md b/.claude/commands/polish.md
deleted file mode 100644
index ccf8a2c22..000000000
--- a/.claude/commands/polish.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-name: polish
-description: Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
-args:
- - name: target
- description: The feature or area to polish (optional)
- required: false
----
-
-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
-Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
-
-## Pre-Polish Assessment
-
-Understand the current state and goals:
-
-1. **Review completeness**:
- - Is it functionally complete?
- - Are there known issues to preserve (mark with TODOs)?
- - What's the quality bar? (MVP vs flagship feature?)
- - When does it ship? (How much time for polish?)
-
-2. **Identify polish areas**:
- - Visual inconsistencies
- - Spacing and alignment issues
- - Interaction state gaps
- - Copy inconsistencies
- - Edge cases and error states
- - Loading and transition smoothness
-
-**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.
-
-## Polish Systematically
-
-Work through these dimensions methodically:
-
-### Visual Alignment & Spacing
-
-- **Pixel-perfect alignment**: Everything lines up to grid
-- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps)
-- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering)
-- **Responsive consistency**: Spacing and alignment work at all breakpoints
-- **Grid adherence**: Elements snap to baseline grid
-
-**Check**:
-- Enable grid overlay and verify alignment
-- Check spacing with browser inspector
-- Test at multiple viewport sizes
-- Look for elements that "feel" off
-
-### Typography Refinement
-
-- **Hierarchy consistency**: Same elements use same sizes/weights throughout
-- **Line length**: 45-75 characters for body text
-- **Line height**: Appropriate for font size and context
-- **Widows & orphans**: No single words on last line
-- **Hyphenation**: Appropriate for language and column width
-- **Kerning**: Adjust letter spacing where needed (especially headlines)
-- **Font loading**: No FOUT/FOIT flashes
-
-### Color & Contrast
-
-- **Contrast ratios**: All text meets WCAG standards
-- **Consistent token usage**: No hard-coded colors, all use design tokens
-- **Theme consistency**: Works in all theme variants
-- **Color meaning**: Same colors mean same things throughout
-- **Accessible focus**: Focus indicators visible with sufficient contrast
-- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma)
-- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency
-
-### Interaction States
-
-Every interactive element needs all states:
-
-- **Default**: Resting state
-- **Hover**: Subtle feedback (color, scale, shadow)
-- **Focus**: Keyboard focus indicator (never remove without replacement)
-- **Active**: Click/tap feedback
-- **Disabled**: Clearly non-interactive
-- **Loading**: Async action feedback
-- **Error**: Validation or error state
-- **Success**: Successful completion
-
-**Missing states create confusion and broken experiences**.
-
-### Micro-interactions & Transitions
-
-- **Smooth transitions**: All state changes animated appropriately (150-300ms)
-- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
-- **No jank**: 60fps animations, only animate transform and opacity
-- **Appropriate motion**: Motion serves purpose, not decoration
-- **Reduced motion**: Respects `prefers-reduced-motion`
-
-### Content & Copy
-
-- **Consistent terminology**: Same things called same names throughout
-- **Consistent capitalization**: Title Case vs Sentence case applied consistently
-- **Grammar & spelling**: No typos
-- **Appropriate length**: Not too wordy, not too terse
-- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them)
-
-### Icons & Images
-
-- **Consistent style**: All icons from same family or matching style
-- **Appropriate sizing**: Icons sized consistently for context
-- **Proper alignment**: Icons align with adjacent text optically
-- **Alt text**: All images have descriptive alt text
-- **Loading states**: Images don't cause layout shift, proper aspect ratios
-- **Retina support**: 2x assets for high-DPI screens
-
-### Forms & Inputs
-
-- **Label consistency**: All inputs properly labeled
-- **Required indicators**: Clear and consistent
-- **Error messages**: Helpful and consistent
-- **Tab order**: Logical keyboard navigation
-- **Auto-focus**: Appropriate (don't overuse)
-- **Validation timing**: Consistent (on blur vs on submit)
-
-### Edge Cases & Error States
-
-- **Loading states**: All async actions have loading feedback
-- **Empty states**: Helpful empty states, not just blank space
-- **Error states**: Clear error messages with recovery paths
-- **Success states**: Confirmation of successful actions
-- **Long content**: Handles very long names, descriptions, etc.
-- **No content**: Handles missing data gracefully
-- **Offline**: Appropriate offline handling (if applicable)
-
-### Responsiveness
-
-- **All breakpoints**: Test mobile, tablet, desktop
-- **Touch targets**: 44x44px minimum on touch devices
-- **Readable text**: No text smaller than 14px on mobile
-- **No horizontal scroll**: Content fits viewport
-- **Appropriate reflow**: Content adapts logically
-
-### Performance
-
-- **Fast initial load**: Optimize critical path
-- **No layout shift**: Elements don't jump after load (CLS)
-- **Smooth interactions**: No lag or jank
-- **Optimized images**: Appropriate formats and sizes
-- **Lazy loading**: Off-screen content loads lazily
-
-### Code Quality
-
-- **Remove console logs**: No debug logging in production
-- **Remove commented code**: Clean up dead code
-- **Remove unused imports**: Clean up unused dependencies
-- **Consistent naming**: Variables and functions follow conventions
-- **Type safety**: No TypeScript `any` or ignored errors
-- **Accessibility**: Proper ARIA labels and semantic HTML
-
-## Polish Checklist
-
-Go through systematically:
-
-- [ ] Visual alignment perfect at all breakpoints
-- [ ] Spacing uses design tokens consistently
-- [ ] Typography hierarchy consistent
-- [ ] All interactive states implemented
-- [ ] All transitions smooth (60fps)
-- [ ] Copy is consistent and polished
-- [ ] Icons are consistent and properly sized
-- [ ] All forms properly labeled and validated
-- [ ] Error states are helpful
-- [ ] Loading states are clear
-- [ ] Empty states are welcoming
-- [ ] Touch targets are 44x44px minimum
-- [ ] Contrast ratios meet WCAG AA
-- [ ] Keyboard navigation works
-- [ ] Focus indicators visible
-- [ ] No console errors or warnings
-- [ ] No layout shift on load
-- [ ] Works in all supported browsers
-- [ ] Respects reduced motion preference
-- [ ] Code is clean (no TODOs, console.logs, commented code)
-
-**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up.
-
-**NEVER**:
-- Polish before it's functionally complete
-- Spend hours on polish if it ships in 30 minutes (triage)
-- Introduce bugs while polishing (test thoroughly)
-- Ignore systematic issues (if spacing is off everywhere, fix the system)
-- Perfect one thing while leaving others rough (consistent quality level)
-
-## Final Verification
-
-Before marking as done:
-
-- **Use it yourself**: Actually interact with the feature
-- **Test on real devices**: Not just browser DevTools
-- **Ask someone else to review**: Fresh eyes catch things
-- **Compare to design**: Match intended design
-- **Check all states**: Don't just test happy path
-
-Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter.
\ No newline at end of file
diff --git a/.claude/commands/quieter.md b/.claude/commands/quieter.md
deleted file mode 100644
index 889991286..000000000
--- a/.claude/commands/quieter.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-name: quieter
-description: Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.
-args:
- - name: target
- description: The feature or component to make quieter (optional)
- required: false
----
-
-Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
-
-## MANDATORY PREPARATION
-
-### Context Gathering (Do This First)
-
-You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and everything else that a great human designer would need as well.
-
-Attempt to gather these from the current thread or codebase.
-
-1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
-2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
-
-Do NOT proceed until you have answers. Guessing leads to generic design.
-
-### Use frontend-design skill
-
-Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
-
----
-
-## Assess Current State
-
-Analyze what makes the design feel too intense:
-
-1. **Identify intensity sources**:
- - **Color saturation**: Overly bright or saturated colors
- - **Contrast extremes**: Too much high-contrast juxtaposition
- - **Visual weight**: Too many bold, heavy elements competing
- - **Animation excess**: Too much motion or overly dramatic effects
- - **Complexity**: Too many visual elements, patterns, or decorations
- - **Scale**: Everything is large and loud with no hierarchy
-
-2. **Understand the context**:
- - What's the purpose? (Marketing vs tool vs reading experience)
- - Who's the audience? (Some contexts need energy)
- - What's working? (Don't throw away good ideas)
- - What's the core message? (Preserve what matters)
-
-If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
-
-**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
-
-## Plan Refinement
-
-Create a strategy to reduce intensity while maintaining impact:
-
-- **Color approach**: Desaturate or shift to more sophisticated tones?
-- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
-- **Simplification approach**: What can be removed entirely?
-- **Sophistication approach**: How can we signal quality through restraint?
-
-**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision.
-
-## Refine the Design
-
-Systematically reduce intensity across these dimensions:
-
-### Color Refinement
-- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
-- **Soften palette**: Replace bright colors with muted, sophisticated tones
-- **Reduce color variety**: Use fewer colors more thoughtfully
-- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
-- **Gentler contrasts**: High contrast only where it matters most
-- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
-- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
-
-### Visual Weight Reduction
-- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
-- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
-- **White space**: Increase breathing room, reduce density
-- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
-
-### Simplification
-- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
-- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
-- **Reduce layering**: Flatten visual hierarchy where possible
-- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
-
-### Motion Reduction
-- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
-- **Remove decorative animations**: Keep functional motion, remove flourishes
-- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
-- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
-- **Remove animations entirely** if they're not serving a clear purpose
-
-### Composition Refinement
-- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
-- **Align to grid**: Bring rogue elements back into systematic alignment
-- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
-
-**NEVER**:
-- Make everything the same size/weight (hierarchy still matters)
-- Remove all color (quiet ≠ grayscale)
-- Eliminate all personality (maintain character through refinement)
-- Sacrifice usability for aesthetics (functional elements still need clear affordances)
-- Make everything small and light (some anchors needed)
-
-## Verify Quality
-
-Ensure refinement maintains quality:
-
-- **Still functional**: Can users still accomplish tasks easily?
-- **Still distinctive**: Does it have character, or is it generic now?
-- **Better reading**: Is text easier to read for extended periods?
-- **Sophistication**: Does it feel more refined and premium?
-
-Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.
\ No newline at end of file
diff --git a/.claude/commands/teach-impeccable.md b/.claude/commands/teach-impeccable.md
deleted file mode 100644
index 82565a733..000000000
--- a/.claude/commands/teach-impeccable.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-name: teach-impeccable
-description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
----
-
-Gather design context for this project, then persist it for all future sessions.
-
-## Step 1: Explore the Codebase
-
-Before asking questions, thoroughly scan the project to discover what you can:
-
-- **README and docs**: Project purpose, target audience, any stated goals
-- **Package.json / config files**: Tech stack, dependencies, existing design libraries
-- **Existing components**: Current design patterns, spacing, typography in use
-- **Brand assets**: Logos, favicons, color values already defined
-- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales
-- **Any style guides or brand documentation**
-
-Note what you've learned and what remains unclear.
-
-## Step 2: Ask UX-Focused Questions
-
-STOP and call the AskUserQuestionTool to clarify. Focus only on what you couldn't infer from the codebase:
-
-### Users & Purpose
-- Who uses this? What's their context when using it?
-- What job are they trying to get done?
-- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)
-
-### Brand & Personality
-- How would you describe the brand personality in 3 words?
-- Any reference sites or apps that capture the right feel? What specifically about them?
-- What should this explicitly NOT look like? Any anti-references?
-
-### Aesthetic Preferences
-- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)
-- Light mode, dark mode, or both?
-- Any colors that must be used or avoided?
-
-### Accessibility & Inclusion
-- Specific accessibility requirements? (WCAG level, known user needs)
-- Considerations for reduced motion, color blindness, or other accommodations?
-
-Skip questions where the answer is already clear from the codebase exploration.
-
-## Step 3: Write Design Context
-
-Synthesize your findings and the user's answers into a `## Design Context` section:
-
-```markdown
-## Design Context
-
-### Users
-[Who they are, their context, the job to be done]
-
-### Brand Personality
-[Voice, tone, 3-word personality, emotional goals]
-
-### Aesthetic Direction
-[Visual tone, references, anti-references, theme]
-
-### Design Principles
-[3-5 principles derived from the conversation that should guide all design decisions]
-```
-
-Write this section to CLAUDE.md in the project root. If the file exists, append or update the Design Context section.
-
-Confirm completion and summarize the key design principles that will now guide all future work.
\ No newline at end of file
diff --git a/.claude/commands/adapt.md b/.claude/skills/adapt/SKILL.md
similarity index 99%
rename from .claude/commands/adapt.md
rename to .claude/skills/adapt/SKILL.md
index ecd9dd8ad..7e11509f7 100644
--- a/.claude/commands/adapt.md
+++ b/.claude/skills/adapt/SKILL.md
@@ -1,6 +1,7 @@
---
name: adapt
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
+user-invokable: true
args:
- name: target
description: The feature or component to adapt (optional)
diff --git a/dist/claude-code/.claude/commands/animate.md b/.claude/skills/animate/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/animate.md
rename to .claude/skills/animate/SKILL.md
index 6c2f26a07..5abd7435f 100644
--- a/dist/claude-code/.claude/commands/animate.md
+++ b/.claude/skills/animate/SKILL.md
@@ -1,6 +1,7 @@
---
name: animate
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
+user-invokable: true
args:
- name: target
description: The feature or component to animate (optional)
diff --git a/source/commands/audit.md b/.claude/skills/audit/SKILL.md
similarity index 99%
rename from source/commands/audit.md
rename to .claude/skills/audit/SKILL.md
index e99fbe150..bbfde2da3 100644
--- a/source/commands/audit.md
+++ b/.claude/skills/audit/SKILL.md
@@ -1,6 +1,7 @@
---
name: audit
description: Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
+user-invokable: true
args:
- name: area
description: The feature or area to audit (optional)
@@ -122,5 +123,4 @@ Map issues to appropriate commands:
- Forget to prioritize (everything can't be critical)
- Report false positives without verification
-Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
-
+Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
\ No newline at end of file
diff --git a/dist/claude-code/.claude/commands/bolder.md b/.claude/skills/bolder/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/bolder.md
rename to .claude/skills/bolder/SKILL.md
index 73d3128ab..a13aa1bc6 100644
--- a/dist/claude-code/.claude/commands/bolder.md
+++ b/.claude/skills/bolder/SKILL.md
@@ -1,6 +1,7 @@
---
name: bolder
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
+user-invokable: true
args:
- name: target
description: The feature or component to make bolder (optional)
diff --git a/dist/claude-code/.claude/commands/clarify.md b/.claude/skills/clarify/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/clarify.md
rename to .claude/skills/clarify/SKILL.md
index 0ed67e8c3..4592a08de 100644
--- a/dist/claude-code/.claude/commands/clarify.md
+++ b/.claude/skills/clarify/SKILL.md
@@ -1,6 +1,7 @@
---
name: clarify
description: Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
+user-invokable: true
args:
- name: target
description: The feature or component with unclear copy (optional)
diff --git a/.claude/commands/colorize.md b/.claude/skills/colorize/SKILL.md
similarity index 99%
rename from .claude/commands/colorize.md
rename to .claude/skills/colorize/SKILL.md
index 36c0d0045..05b15813a 100644
--- a/.claude/commands/colorize.md
+++ b/.claude/skills/colorize/SKILL.md
@@ -1,6 +1,7 @@
---
name: colorize
description: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
+user-invokable: true
args:
- name: target
description: The feature or component to colorize (optional)
diff --git a/.claude/commands/critique.md b/.claude/skills/critique/SKILL.md
similarity index 99%
rename from .claude/commands/critique.md
rename to .claude/skills/critique/SKILL.md
index 7a3af3595..994bd6d90 100644
--- a/.claude/commands/critique.md
+++ b/.claude/skills/critique/SKILL.md
@@ -1,6 +1,7 @@
---
name: critique
description: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
+user-invokable: true
args:
- name: area
description: The feature or area to critique (optional)
diff --git a/.claude/commands/delight.md b/.claude/skills/delight/SKILL.md
similarity index 99%
rename from .claude/commands/delight.md
rename to .claude/skills/delight/SKILL.md
index 788904b19..6106d4d71 100644
--- a/.claude/commands/delight.md
+++ b/.claude/skills/delight/SKILL.md
@@ -1,6 +1,7 @@
---
name: delight
description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
+user-invokable: true
args:
- name: target
description: The feature or area to add delight to (optional)
diff --git a/.claude/commands/distill.md b/.claude/skills/distill/SKILL.md
similarity index 99%
rename from .claude/commands/distill.md
rename to .claude/skills/distill/SKILL.md
index 4d6546d28..b9f0ddf28 100644
--- a/.claude/commands/distill.md
+++ b/.claude/skills/distill/SKILL.md
@@ -1,6 +1,7 @@
---
name: distill
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
+user-invokable: true
args:
- name: target
description: The feature or component to distill (optional)
diff --git a/dist/claude-code/.claude/commands/extract.md b/.claude/skills/extract/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/extract.md
rename to .claude/skills/extract/SKILL.md
index e0d42967a..207621a10 100644
--- a/dist/claude-code/.claude/commands/extract.md
+++ b/.claude/skills/extract/SKILL.md
@@ -1,6 +1,7 @@
---
name: extract
description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
+user-invokable: true
args:
- name: target
description: The feature, component, or area to extract from (optional)
diff --git a/dist/claude-code/.claude/commands/harden.md b/.claude/skills/harden/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/harden.md
rename to .claude/skills/harden/SKILL.md
index 830876692..a038ae50e 100644
--- a/dist/claude-code/.claude/commands/harden.md
+++ b/.claude/skills/harden/SKILL.md
@@ -1,6 +1,7 @@
---
name: harden
description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
+user-invokable: true
args:
- name: target
description: The feature or area to harden (optional)
diff --git a/.claude/commands/normalize.md b/.claude/skills/normalize/SKILL.md
similarity index 99%
rename from .claude/commands/normalize.md
rename to .claude/skills/normalize/SKILL.md
index 3c3cb0026..e1a986b6e 100644
--- a/.claude/commands/normalize.md
+++ b/.claude/skills/normalize/SKILL.md
@@ -1,6 +1,7 @@
---
name: normalize
description: Normalize design to match your design system and ensure consistency
+user-invokable: true
args:
- name: feature
description: The page, route, or feature to normalize (optional)
diff --git a/.claude/commands/onboard.md b/.claude/skills/onboard/SKILL.md
similarity index 99%
rename from .claude/commands/onboard.md
rename to .claude/skills/onboard/SKILL.md
index 64c3f6bba..120f74357 100644
--- a/.claude/commands/onboard.md
+++ b/.claude/skills/onboard/SKILL.md
@@ -1,6 +1,7 @@
---
name: onboard
description: Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.
+user-invokable: true
args:
- name: target
description: The feature or area needing onboarding (optional)
diff --git a/dist/claude-code/.claude/commands/optimize.md b/.claude/skills/optimize/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/optimize.md
rename to .claude/skills/optimize/SKILL.md
index 35cbf5f50..a405331e9 100644
--- a/dist/claude-code/.claude/commands/optimize.md
+++ b/.claude/skills/optimize/SKILL.md
@@ -1,6 +1,7 @@
---
name: optimize
description: Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.
+user-invokable: true
args:
- name: target
description: The feature or area to optimize (optional)
diff --git a/dist/claude-code/.claude/commands/polish.md b/.claude/skills/polish/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/polish.md
rename to .claude/skills/polish/SKILL.md
index ccf8a2c22..50c8fb499 100644
--- a/dist/claude-code/.claude/commands/polish.md
+++ b/.claude/skills/polish/SKILL.md
@@ -1,6 +1,7 @@
---
name: polish
description: Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
+user-invokable: true
args:
- name: target
description: The feature or area to polish (optional)
diff --git a/dist/claude-code/.claude/commands/quieter.md b/.claude/skills/quieter/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/quieter.md
rename to .claude/skills/quieter/SKILL.md
index 889991286..def796a4f 100644
--- a/dist/claude-code/.claude/commands/quieter.md
+++ b/.claude/skills/quieter/SKILL.md
@@ -1,6 +1,7 @@
---
name: quieter
description: Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.
+user-invokable: true
args:
- name: target
description: The feature or component to make quieter (optional)
diff --git a/dist/claude-code/.claude/commands/teach-impeccable.md b/.claude/skills/teach-impeccable/SKILL.md
similarity index 99%
rename from dist/claude-code/.claude/commands/teach-impeccable.md
rename to .claude/skills/teach-impeccable/SKILL.md
index 82565a733..2ac070a53 100644
--- a/dist/claude-code/.claude/commands/teach-impeccable.md
+++ b/.claude/skills/teach-impeccable/SKILL.md
@@ -1,6 +1,7 @@
---
name: teach-impeccable
description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
+user-invokable: true
---
Gather design context for this project, then persist it for all future sessions.
diff --git a/dist/claude-code/.claude/commands/adapt.md b/dist/claude-code/.claude/commands/adapt.md
deleted file mode 100644
index ecd9dd8ad..000000000
--- a/dist/claude-code/.claude/commands/adapt.md
+++ /dev/null
@@ -1,197 +0,0 @@
----
-name: adapt
-description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
-args:
- - name: target
- description: The feature or component to adapt (optional)
- required: false
- - name: context
- description: What to adapt for (mobile, tablet, desktop, print, email, etc.)
- required: false
----
-
-Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
-
-## Assess Adaptation Challenge
-
-Understand what needs adaptation and why:
-
-1. **Identify the source context**:
- - What was it designed for originally? (Desktop web? Mobile app?)
- - What assumptions were made? (Large screen? Mouse input? Fast connection?)
- - What works well in current context?
-
-2. **Understand target context**:
- - **Device**: Mobile, tablet, desktop, TV, watch, print?
- - **Input method**: Touch, mouse, keyboard, voice, gamepad?
- - **Screen constraints**: Size, resolution, orientation?
- - **Connection**: Fast wifi, slow 3G, offline?
- - **Usage context**: On-the-go vs desk, quick glance vs focused reading?
- - **User expectations**: What do users expect on this platform?
-
-3. **Identify adaptation challenges**:
- - What won't fit? (Content, navigation, features)
- - What won't work? (Hover states on touch, tiny touch targets)
- - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
-
-**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
-
-## Plan Adaptation Strategy
-
-Create context-appropriate strategy:
-
-### Mobile Adaptation (Desktop → Mobile)
-
-**Layout Strategy**:
-- Single column instead of multi-column
-- Vertical stacking instead of side-by-side
-- Full-width components instead of fixed widths
-- Bottom navigation instead of top/side navigation
-
-**Interaction Strategy**:
-- Touch targets 44x44px minimum (not hover-dependent)
-- Swipe gestures where appropriate (lists, carousels)
-- Bottom sheets instead of dropdowns
-- Thumbs-first design (controls within thumb reach)
-- Larger tap areas with more spacing
-
-**Content Strategy**:
-- Progressive disclosure (don't show everything at once)
-- Prioritize primary content (secondary content in tabs/accordions)
-- Shorter text (more concise)
-- Larger text (16px minimum)
-
-**Navigation Strategy**:
-- Hamburger menu or bottom navigation
-- Reduce navigation complexity
-- Sticky headers for context
-- Back button in navigation flow
-
-### Tablet Adaptation (Hybrid Approach)
-
-**Layout Strategy**:
-- Two-column layouts (not single or three-column)
-- Side panels for secondary content
-- Master-detail views (list + detail)
-- Adaptive based on orientation (portrait vs landscape)
-
-**Interaction Strategy**:
-- Support both touch and pointer
-- Touch targets 44x44px but allow denser layouts than phone
-- Side navigation drawers
-- Multi-column forms where appropriate
-
-### Desktop Adaptation (Mobile → Desktop)
-
-**Layout Strategy**:
-- Multi-column layouts (use horizontal space)
-- Side navigation always visible
-- Multiple information panels simultaneously
-- Fixed widths with max-width constraints (don't stretch to 4K)
-
-**Interaction Strategy**:
-- Hover states for additional information
-- Keyboard shortcuts
-- Right-click context menus
-- Drag and drop where helpful
-- Multi-select with Shift/Cmd
-
-**Content Strategy**:
-- Show more information upfront (less progressive disclosure)
-- Data tables with many columns
-- Richer visualizations
-- More detailed descriptions
-
-### Print Adaptation (Screen → Print)
-
-**Layout Strategy**:
-- Page breaks at logical points
-- Remove navigation, footer, interactive elements
-- Black and white (or limited color)
-- Proper margins for binding
-
-**Content Strategy**:
-- Expand shortened content (show full URLs, hidden sections)
-- Add page numbers, headers, footers
-- Include metadata (print date, page title)
-- Convert charts to print-friendly versions
-
-### Email Adaptation (Web → Email)
-
-**Layout Strategy**:
-- Narrow width (600px max)
-- Single column only
-- Inline CSS (no external stylesheets)
-- Table-based layouts (for email client compatibility)
-
-**Interaction Strategy**:
-- Large, obvious CTAs (buttons not text links)
-- No hover states (not reliable)
-- Deep links to web app for complex interactions
-
-## Implement Adaptations
-
-Apply changes systematically:
-
-### Responsive Breakpoints
-
-Choose appropriate breakpoints:
-- Mobile: 320px-767px
-- Tablet: 768px-1023px
-- Desktop: 1024px+
-- Or content-driven breakpoints (where design breaks)
-
-### Layout Adaptation Techniques
-
-- **CSS Grid/Flexbox**: Reflow layouts automatically
-- **Container Queries**: Adapt based on container, not viewport
-- **`clamp()`**: Fluid sizing between min and max
-- **Media queries**: Different styles for different contexts
-- **Display properties**: Show/hide elements per context
-
-### Touch Adaptation
-
-- Increase touch target sizes (44x44px minimum)
-- Add more spacing between interactive elements
-- Remove hover-dependent interactions
-- Add touch feedback (ripples, highlights)
-- Consider thumb zones (easier to reach bottom than top)
-
-### Content Adaptation
-
-- Use `display: none` sparingly (still downloads)
-- Progressive enhancement (core content first, enhancements on larger screens)
-- Lazy loading for off-screen content
-- Responsive images (`srcset`, `picture` element)
-
-### Navigation Adaptation
-
-- Transform complex nav to hamburger/drawer on mobile
-- Bottom nav bar for mobile apps
-- Persistent side navigation on desktop
-- Breadcrumbs on smaller screens for context
-
-**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
-
-**NEVER**:
-- Hide core functionality on mobile (if it matters, make it work)
-- Assume desktop = powerful device (consider accessibility, older machines)
-- Use different information architecture across contexts (confusing)
-- Break user expectations for platform (mobile users expect mobile patterns)
-- Forget landscape orientation on mobile/tablet
-- Use generic breakpoints blindly (use content-driven breakpoints)
-- Ignore touch on desktop (many desktop devices have touch)
-
-## Verify Adaptations
-
-Test thoroughly across contexts:
-
-- **Real devices**: Test on actual phones, tablets, desktops
-- **Different orientations**: Portrait and landscape
-- **Different browsers**: Safari, Chrome, Firefox, Edge
-- **Different OS**: iOS, Android, Windows, macOS
-- **Different input methods**: Touch, mouse, keyboard
-- **Edge cases**: Very small screens (320px), very large screens (4K)
-- **Slow connections**: Test on throttled network
-
-Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
\ No newline at end of file
diff --git a/dist/claude-code/.claude/commands/audit.md b/dist/claude-code/.claude/commands/audit.md
deleted file mode 100644
index ffd6dba58..000000000
--- a/dist/claude-code/.claude/commands/audit.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-name: audit
-description: Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
-args:
- - name: area
- description: The feature or area to audit (optional)
- required: false
----
-
-Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
-
-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
-## Diagnostic Scan
-
-Run comprehensive checks across multiple dimensions:
-
-1. **Accessibility (A11y)** - Check for:
- - **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
- - **Missing ARIA**: Interactive elements without proper roles, labels, or states
- - **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
- - **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
- - **Alt text**: Missing or poor image descriptions
- - **Form issues**: Inputs without labels, poor error messaging, missing required indicators
-
-2. **Performance** - Check for:
- - **Layout thrashing**: Reading/writing layout properties in loops
- - **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
- - **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
- - **Bundle size**: Unnecessary imports, unused dependencies
- - **Render performance**: Unnecessary re-renders, missing memoization
-
-3. **Theming** - Check for:
- - **Hard-coded colors**: Colors not using design tokens
- - **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
- - **Inconsistent tokens**: Using wrong tokens, mixing token types
- - **Theme switching issues**: Values that don't update on theme change
-
-4. **Responsive Design** - Check for:
- - **Fixed widths**: Hard-coded widths that break on mobile
- - **Touch targets**: Interactive elements < 44x44px
- - **Horizontal scroll**: Content overflow on narrow viewports
- - **Text scaling**: Layouts that break when text size increases
- - **Missing breakpoints**: No mobile/tablet variants
-
-5. **Anti-Patterns (CRITICAL)** - Check against ALL the **DON'T** guidelines in the frontend-design skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
-
-**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
-
-## Generate Comprehensive Report
-
-Create a detailed audit report with the following structure:
-
-### Anti-Patterns Verdict
-**Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
-
-### Executive Summary
-- Total issues found (count by severity)
-- Most critical issues (top 3-5)
-- Overall quality score (if applicable)
-- Recommended next steps
-
-### Detailed Findings by Severity
-
-For each issue, document:
-- **Location**: Where the issue occurs (component, file, line)
-- **Severity**: Critical / High / Medium / Low
-- **Category**: Accessibility / Performance / Theming / Responsive
-- **Description**: What the issue is
-- **Impact**: How it affects users
-- **WCAG/Standard**: Which standard it violates (if applicable)
-- **Recommendation**: How to fix it
-- **Suggested command**: Which command to use (e.g., `/normalize`, `/optimize`, `/harden`)
-
-#### Critical Issues
-[Issues that block core functionality or violate WCAG A]
-
-#### High-Severity Issues
-[Significant usability/accessibility impact, WCAG AA violations]
-
-#### Medium-Severity Issues
-[Quality issues, WCAG AAA violations, performance concerns]
-
-#### Low-Severity Issues
-[Minor inconsistencies, optimization opportunities]
-
-### Patterns & Systemic Issues
-
-Identify recurring problems:
-- "Hard-coded colors appear in 15+ components, should use design tokens"
-- "Touch targets consistently too small (<44px) throughout mobile experience"
-- "Missing focus indicators on all custom interactive components"
-
-### Positive Findings
-
-Note what's working well:
-- Good practices to maintain
-- Exemplary implementations to replicate elsewhere
-
-### Recommendations by Priority
-
-Create actionable plan:
-1. **Immediate**: Critical blockers to fix first
-2. **Short-term**: High-severity issues (this sprint)
-3. **Medium-term**: Quality improvements (next sprint)
-4. **Long-term**: Nice-to-haves and optimizations
-
-### Suggested Commands for Fixes
-
-Map issues to appropriate commands:
-- "Use `/normalize` to align components with design system (addresses 23 theming issues)"
-- "Use `/optimize` to improve performance (addresses 12 performance issues)"
-- "Use `/harden` to improve i18n and text handling (addresses 8 edge cases)"
-
-**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
-
-**NEVER**:
-- Report issues without explaining impact (why does this matter?)
-- Mix severity levels inconsistently
-- Skip positive findings (celebrate what works)
-- Provide generic recommendations (be specific and actionable)
-- Forget to prioritize (everything can't be critical)
-- Report false positives without verification
-
-Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
\ No newline at end of file
diff --git a/dist/claude-code/.claude/commands/colorize.md b/dist/claude-code/.claude/commands/colorize.md
deleted file mode 100644
index 36c0d0045..000000000
--- a/dist/claude-code/.claude/commands/colorize.md
+++ /dev/null
@@ -1,157 +0,0 @@
----
-name: colorize
-description: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
-args:
- - name: target
- description: The feature or component to colorize (optional)
- required: false
----
-
-Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
-
-## MANDATORY PREPARATION
-
-### Context Gathering (Do This First)
-
-You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and especially existing brand colors.
-
-Attempt to gather these from the current thread or codebase.
-
-1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
-2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
-
-Do NOT proceed until you have answers. Guessing leads to generic AI slop colors.
-
-### Use frontend-design skill
-
-Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
-
----
-
-## Assess Color Opportunity
-
-Analyze the current state and identify opportunities:
-
-1. **Understand current state**:
- - **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
- - **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
- - **Context**: What's appropriate for this domain and audience?
- - **Brand**: Are there existing brand colors we should use?
-
-2. **Identify where color adds value**:
- - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
- - **Hierarchy**: Drawing attention to important elements
- - **Categorization**: Different sections, types, or states
- - **Emotional tone**: Warmth, energy, trust, creativity
- - **Wayfinding**: Helping users navigate and understand structure
- - **Delight**: Moments of visual interest and personality
-
-If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
-
-**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
-
-## Plan Color Strategy
-
-Create a purposeful color introduction plan:
-
-- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
-- **Dominant color**: Which color owns 60% of colored elements?
-- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
-- **Application strategy**: Where does each color appear and why?
-
-**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
-
-## Introduce Color Strategically
-
-Add color systematically across these dimensions:
-
-### Semantic Color
-- **State indicators**:
- - Success: Green tones (emerald, forest, mint)
- - Error: Red/pink tones (rose, crimson, coral)
- - Warning: Orange/amber tones
- - Info: Blue tones (sky, ocean, indigo)
- - Neutral: Gray/slate for inactive states
-
-- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
-- **Progress indicators**: Colored bars, rings, or charts showing completion or health
-
-### Accent Color Application
-- **Primary actions**: Color the most important buttons/CTAs
-- **Links**: Add color to clickable text (maintain accessibility)
-- **Icons**: Colorize key icons for recognition and personality
-- **Headers/titles**: Add color to section headers or key labels
-- **Hover states**: Introduce color on interaction
-
-### Background & Surfaces
-- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
-- **Colored sections**: Use subtle background colors to separate areas
-- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
-- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
-
-**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
-
-### Data Visualization
-- **Charts & graphs**: Use color to encode categories or values
-- **Heatmaps**: Color intensity shows density or importance
-- **Comparison**: Color coding for different datasets or timeframes
-
-### Borders & Accents
-- **Accent borders**: Add colored left/top borders to cards or sections
-- **Underlines**: Color underlines for emphasis or active states
-- **Dividers**: Subtle colored dividers instead of gray lines
-- **Focus rings**: Colored focus indicators matching brand
-
-### Typography Color
-- **Colored headings**: Use brand colors for section headings (maintain contrast)
-- **Highlight text**: Color for emphasis or categories
-- **Labels & tags**: Small colored labels for metadata or categories
-
-### Decorative Elements
-- **Illustrations**: Add colored illustrations or icons
-- **Shapes**: Geometric shapes in brand colors as background elements
-- **Gradients**: Colorful gradient overlays or mesh backgrounds
-- **Blobs/organic shapes**: Soft colored shapes for visual interest
-
-## Balance & Refinement
-
-Ensure color addition improves rather than overwhelms:
-
-### Maintain Hierarchy
-- **Dominant color** (60%): Primary brand color or most used accent
-- **Secondary color** (30%): Supporting color for variety
-- **Accent color** (10%): High contrast for key moments
-- **Neutrals** (remaining): Gray/black/white for structure
-
-### Accessibility
-- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
-- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
-- **Test for color blindness**: Verify red/green combinations work for all users
-
-### Cohesion
-- **Consistent palette**: Use colors from defined palette, not arbitrary choices
-- **Systematic application**: Same color meanings throughout (green always = success)
-- **Temperature consistency**: Warm palette stays warm, cool stays cool
-
-**NEVER**:
-- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
-- Apply color randomly without semantic meaning
-- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
-- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
-- Use pure black (`#000`) or pure white (`#fff`) for large areas
-- Violate WCAG contrast requirements
-- Use color as the only indicator (accessibility issue)
-- Make everything colorful (defeats the purpose)
-- Default to purple-blue gradients (AI slop aesthetic)
-
-## Verify Color Addition
-
-Test that colorization improves the experience:
-
-- **Better hierarchy**: Does color guide attention appropriately?
-- **Clearer meaning**: Does color help users understand states/categories?
-- **More engaging**: Does the interface feel warmer and more inviting?
-- **Still accessible**: Do all color combinations meet WCAG standards?
-- **Not overwhelming**: Is color balanced and purposeful?
-
-Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
\ No newline at end of file
diff --git a/dist/claude-code/.claude/commands/critique.md b/dist/claude-code/.claude/commands/critique.md
deleted file mode 100644
index 7a3af3595..000000000
--- a/dist/claude-code/.claude/commands/critique.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-name: critique
-description: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
-args:
- - name: area
- description: The feature or area to critique (optional)
- required: false
----
-
-Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback.
-
-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
-## Design Critique
-
-Evaluate the interface across these dimensions:
-
-### 1. AI Slop Detection (CRITICAL)
-
-**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025?
-
-Review the design against ALL the **DON'T** guidelines in the frontend-design skill—they are the fingerprints of AI-generated work. Check for the AI color palette, gradient text, dark mode with glowing accents, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells.
-
-**The test**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
-
-### 2. Visual Hierarchy
-- Does the eye flow to the most important element first?
-- Is there a clear primary action? Can you spot it in 2 seconds?
-- Do size, color, and position communicate importance correctly?
-- Is there visual competition between elements that should have different weights?
-
-### 3. Information Architecture
-- Is the structure intuitive? Would a new user understand the organization?
-- Is related content grouped logically?
-- Are there too many choices at once? (cognitive overload)
-- Is the navigation clear and predictable?
-
-### 4. Emotional Resonance
-- What emotion does this interface evoke? Is that intentional?
-- Does it match the brand personality?
-- Does it feel trustworthy, approachable, premium, playful—whatever it should feel?
-- Would the target user feel "this is for me"?
-
-### 5. Discoverability & Affordance
-- Are interactive elements obviously interactive?
-- Would a user know what to do without instructions?
-- Are hover/focus states providing useful feedback?
-- Are there hidden features that should be more visible?
-
-### 6. Composition & Balance
-- Does the layout feel balanced or uncomfortably weighted?
-- Is whitespace used intentionally or just leftover?
-- Is there visual rhythm in spacing and repetition?
-- Does asymmetry feel designed or accidental?
-
-### 7. Typography as Communication
-- Does the type hierarchy clearly signal what to read first, second, third?
-- Is body text comfortable to read? (line length, spacing, size)
-- Do font choices reinforce the brand/tone?
-- Is there enough contrast between heading levels?
-
-### 8. Color with Purpose
-- Is color used to communicate, not just decorate?
-- Does the palette feel cohesive?
-- Are accent colors drawing attention to the right things?
-- Does it work for colorblind users? (not just technically—does meaning still come through?)
-
-### 9. States & Edge Cases
-- Empty states: Do they guide users toward action, or just say "nothing here"?
-- Loading states: Do they reduce perceived wait time?
-- Error states: Are they helpful and non-blaming?
-- Success states: Do they confirm and guide next steps?
-
-### 10. Microcopy & Voice
-- Is the writing clear and concise?
-- Does it sound like a human (the right human for this brand)?
-- Are labels and buttons unambiguous?
-- Does error copy help users fix the problem?
-
-## Generate Critique Report
-
-Structure your feedback as a design director would:
-
-### Anti-Patterns Verdict
-**Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
-
-### Overall Impression
-A brief gut reaction—what works, what doesn't, and the single biggest opportunity.
-
-### What's Working
-Highlight 2-3 things done well. Be specific about why they work.
-
-### Priority Issues
-The 3-5 most impactful design problems, ordered by importance:
-
-For each issue:
-- **What**: Name the problem clearly
-- **Why it matters**: How this hurts users or undermines goals
-- **Fix**: What to do about it (be concrete)
-- **Command**: Which command to use (`/polish`, `/distill`, `/bolder`, `/quieter`, etc.)
-
-### Minor Observations
-Quick notes on smaller issues worth addressing.
-
-### Questions to Consider
-Provocative questions that might unlock better solutions:
-- "What if the primary action were more prominent?"
-- "Does this need to feel this complex?"
-- "What would a confident version of this look like?"
-
-**Remember**:
-- Be direct—vague feedback wastes everyone's time
-- Be specific—"the submit button" not "some elements"
-- Say what's wrong AND why it matters to users
-- Give concrete suggestions, not just "consider exploring..."
-- Prioritize ruthlessly—if everything is important, nothing is
-- Don't soften criticism—developers need honest feedback to ship great design
\ No newline at end of file
diff --git a/dist/claude-code/.claude/commands/delight.md b/dist/claude-code/.claude/commands/delight.md
deleted file mode 100644
index 788904b19..000000000
--- a/dist/claude-code/.claude/commands/delight.md
+++ /dev/null
@@ -1,316 +0,0 @@
----
-name: delight
-description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
-args:
- - name: target
- description: The feature or area to add delight to (optional)
- required: false
----
-
-Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
-
-## MANDATORY PREPARATION
-
-### Context Gathering (Do This First)
-
-You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality (playful vs professional vs quirky vs elegant), and what's appropriate for the domain.
-
-Attempt to gather these from the current thread or codebase.
-
-1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
-2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
-
-Do NOT proceed until you have answers. Delight that's wrong for the context is worse than no delight at all.
-
-### Use frontend-design skill
-
-Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
-
----
-
-## Assess Delight Opportunities
-
-Identify where delight would enhance (not distract from) the experience:
-
-1. **Find natural delight moments**:
- - **Success states**: Completed actions (save, send, publish)
- - **Empty states**: First-time experiences, onboarding
- - **Loading states**: Waiting periods that could be entertaining
- - **Achievements**: Milestones, streaks, completions
- - **Interactions**: Hover states, clicks, drags
- - **Errors**: Softening frustrating moments
- - **Easter eggs**: Hidden discoveries for curious users
-
-2. **Understand the context**:
- - What's the brand personality? (Playful? Professional? Quirky? Elegant?)
- - Who's the audience? (Tech-savvy? Creative? Corporate?)
- - What's the emotional context? (Accomplishment? Exploration? Frustration?)
- - What's appropriate? (Banking app ≠ gaming app)
-
-3. **Define delight strategy**:
- - **Subtle sophistication**: Refined micro-interactions (luxury brands)
- - **Playful personality**: Whimsical illustrations and copy (consumer apps)
- - **Helpful surprises**: Anticipating needs before users ask (productivity tools)
- - **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
-
-If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
-
-**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
-
-## Delight Principles
-
-Follow these guidelines:
-
-### Delight Amplifies, Never Blocks
-- Delight moments should be quick (< 1 second)
-- Never delay core functionality for delight
-- Make delight skippable or subtle
-- Respect user's time and task focus
-
-### Surprise and Discovery
-- Hide delightful details for users to discover
-- Reward exploration and curiosity
-- Don't announce every delight moment
-- Let users share discoveries with others
-
-### Appropriate to Context
-- Match delight to emotional moment (celebrate success, empathize with errors)
-- Respect the user's state (don't be playful during critical errors)
-- Match brand personality and audience expectations
-- Cultural sensitivity (what's delightful varies by culture)
-
-### Compound Over Time
-- Delight should remain fresh with repeated use
-- Vary responses (not same animation every time)
-- Reveal deeper layers with continued use
-- Build anticipation through patterns
-
-## Delight Techniques
-
-Add personality and joy through these methods:
-
-### Micro-interactions & Animation
-
-**Button delight**:
-```css
-/* Satisfying button press */
-.button {
- transition: transform 0.1s, box-shadow 0.1s;
-}
-.button:active {
- transform: translateY(2px);
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-}
-
-/* Ripple effect on click */
-/* Smooth lift on hover */
-.button:hover {
- transform: translateY(-2px);
- transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
-}
-```
-
-**Loading delight**:
-- Playful loading animations (not just spinners)
-- Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
-- Progress indication with encouraging messages
-- Skeleton screens with subtle animations
-
-**Success animations**:
-- Checkmark draw animation
-- Confetti burst for major achievements
-- Gentle scale + fade for confirmation
-- Satisfying sound effects (subtle)
-
-**Hover surprises**:
-- Icons that animate on hover
-- Color shifts or glow effects
-- Tooltip reveals with personality
-- Cursor changes (custom cursors for branded experiences)
-
-### Personality in Copy
-
-**Playful error messages**:
-```
-"Error 404"
-"This page is playing hide and seek. (And winning)"
-
-"Connection failed"
-"Looks like the internet took a coffee break. Want to retry?"
-```
-
-**Encouraging empty states**:
-```
-"No projects"
-"Your canvas awaits. Create something amazing."
-
-"No messages"
-"Inbox zero! You're crushing it today."
-```
-
-**Playful labels & tooltips**:
-```
-"Delete"
-"Send to void" (for playful brand)
-
-"Help"
-"Rescue me" (tooltip)
-```
-
-**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
-
-### Illustrations & Visual Personality
-
-**Custom illustrations**:
-- Empty state illustrations (not stock icons)
-- Error state illustrations (friendly monsters, quirky characters)
-- Loading state illustrations (animated characters)
-- Success state illustrations (celebrations)
-
-**Icon personality**:
-- Custom icon set matching brand personality
-- Animated icons (subtle motion on hover/click)
-- Illustrative icons (more detailed than generic)
-- Consistent style across all icons
-
-**Background effects**:
-- Subtle particle effects
-- Gradient mesh backgrounds
-- Geometric patterns
-- Parallax depth
-- Time-of-day themes (morning vs night)
-
-### Satisfying Interactions
-
-**Drag and drop delight**:
-- Lift effect on drag (shadow, scale)
-- Snap animation when dropped
-- Satisfying placement sound
-- Undo toast ("Dropped in wrong place? [Undo]")
-
-**Toggle switches**:
-- Smooth slide with spring physics
-- Color transition
-- Haptic feedback on mobile
-- Optional sound effect
-
-**Progress & achievements**:
-- Streak counters with celebratory milestones
-- Progress bars that "celebrate" at 100%
-- Badge unlocks with animation
-- Playful stats ("You're on fire! 5 days in a row")
-
-**Form interactions**:
-- Input fields that animate on focus
-- Checkboxes that bounce when checked
-- Success state that celebrates valid input
-- Auto-grow textareas
-
-### Sound Design
-
-**Subtle audio cues** (when appropriate):
-- Notification sounds (distinctive but not annoying)
-- Success sounds (satisfying "ding")
-- Error sounds (empathetic, not harsh)
-- Typing sounds for chat/messaging
-- Ambient background audio (very subtle)
-
-**IMPORTANT**:
-- Respect system sound settings
-- Provide mute option
-- Keep volumes quiet (subtle cues, not alarms)
-- Don't play on every interaction (sound fatigue is real)
-
-### Easter Eggs & Hidden Delights
-
-**Discovery rewards**:
-- Konami code unlocks special theme
-- Hidden keyboard shortcuts (Cmd+K for special features)
-- Hover reveals on logos or illustrations
-- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
-
-**Seasonal touches**:
-- Holiday themes (subtle, tasteful)
-- Seasonal color shifts
-- Weather-based variations
-- Time-based changes (dark at night, light during day)
-
-**Contextual personality**:
-- Different messages based on time of day
-- Responses to specific user actions
-- Randomized variations (not same every time)
-- Progressive reveals with continued use
-
-### Loading & Waiting States
-
-**Make waiting engaging**:
-- Interesting loading messages that rotate
-- Progress bars with personality
-- Mini-games during long loads
-- Fun facts or tips while waiting
-- Countdown with encouraging messages
-
-```
-Loading messages rotation:
-- "Waking up the servers..."
-- "Teaching robots to dance..."
-- "Consulting the magic 8-ball..."
-- "Counting backwards from infinity..."
-```
-
-### Celebration Moments
-
-**Success celebrations**:
-- Confetti for major milestones
-- Animated checkmarks for completions
-- Progress bar celebrations at 100%
-- "Achievement unlocked" style notifications
-- Personalized messages ("You published your 10th article!")
-
-**Milestone recognition**:
-- First-time actions get special treatment
-- Streak tracking and celebration
-- Progress toward goals
-- Anniversary celebrations
-
-## Implementation Patterns
-
-**Animation libraries**:
-- Framer Motion (React)
-- GSAP (universal)
-- Lottie (After Effects animations)
-- Canvas confetti (party effects)
-
-**Sound libraries**:
-- Howler.js (audio management)
-- Use-sound (React hook)
-
-**Physics libraries**:
-- React Spring (spring physics)
-- Popmotion (animation primitives)
-
-**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
-
-**NEVER**:
-- Delay core functionality for delight
-- Force users through delightful moments (make skippable)
-- Use delight to hide poor UX
-- Overdo it (less is more)
-- Ignore accessibility (animate responsibly, provide alternatives)
-- Make every interaction delightful (special moments should be special)
-- Sacrifice performance for delight
-- Be inappropriate for context (read the room)
-
-## Verify Delight Quality
-
-Test that delight actually delights:
-
-- **User reactions**: Do users smile? Share screenshots?
-- **Doesn't annoy**: Still pleasant after 100th time?
-- **Doesn't block**: Can users opt out or skip?
-- **Performant**: No jank, no slowdown
-- **Appropriate**: Matches brand and context
-- **Accessible**: Works with reduced motion, screen readers
-
-Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
\ No newline at end of file
diff --git a/dist/claude-code/.claude/commands/normalize.md b/dist/claude-code/.claude/commands/normalize.md
deleted file mode 100644
index 3c3cb0026..000000000
--- a/dist/claude-code/.claude/commands/normalize.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-name: normalize
-description: Normalize design to match your design system and ensure consistency
-args:
- - name: feature
- description: The page, route, or feature to normalize (optional)
- required: false
----
-
-Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
-
-## Plan
-
-Before making changes, deeply understand the context:
-
-1. **Discover the design system**: Search for design system documentation, UI guidelines, component libraries, or style guides (grep for "design system", "ui guide", "style guide", etc.). Study it thoroughly until you understand:
- - Core design principles and aesthetic direction
- - Target audience and personas
- - Component patterns and conventions
- - Design tokens (colors, typography, spacing)
-
- **CRITICAL**: If something isn't clear, ask. Don't guess at design system principles.
-
-2. **Analyze the current feature**: Assess what works and what doesn't:
- - Where does it deviate from design system patterns?
- - Which inconsistencies are cosmetic vs. functional?
- - What's the root cause—missing tokens, one-off implementations, or conceptual misalignment?
-
-3. **Create a normalization plan**: Define specific changes that will align the feature with the design system:
- - Which components can be replaced with design system equivalents?
- - Which styles need to use design tokens instead of hard-coded values?
- - How can UX patterns match established user flows?
-
- **IMPORTANT**: Great design is effective design. Prioritize UX consistency and usability over visual polish alone. Think through the best possible experience for your use case and personas first.
-
-## Execute
-
-Systematically address all inconsistencies across these dimensions:
-
-- **Typography**: Use design system fonts, sizes, weights, and line heights. Replace hard-coded values with typographic tokens or classes.
-- **Color & Theme**: Apply design system color tokens. Remove one-off color choices that break the palette.
-- **Spacing & Layout**: Use spacing tokens (margins, padding, gaps). Align with grid systems and layout patterns used elsewhere.
-- **Components**: Replace custom implementations with design system components. Ensure props and variants match established patterns.
-- **Motion & Interaction**: Match animation timing, easing, and interaction patterns to other features.
-- **Responsive Behavior**: Ensure breakpoints and responsive patterns align with design system standards.
-- **Accessibility**: Verify contrast ratios, focus states, ARIA labels match design system requirements.
-- **Progressive Disclosure**: Match information hierarchy and complexity management to established patterns.
-
-**NEVER**:
-- Create new one-off components when design system equivalents exist
-- Hard-code values that should use design tokens
-- Introduce new patterns that diverge from the design system
-- Compromise accessibility for visual consistency
-
-This is not an exhaustive list—apply judgment to identify all areas needing normalization.
-
-## Clean Up
-
-After normalization, ensure code quality:
-
-- **Consolidate reusable components**: If you created new components that should be shared, move them to the design system or shared UI component path.
-- **Remove orphaned code**: Delete unused implementations, styles, or files made obsolete by normalization.
-- **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions.
-- **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate.
-
-Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness.
\ No newline at end of file
diff --git a/dist/claude-code/.claude/commands/onboard.md b/dist/claude-code/.claude/commands/onboard.md
deleted file mode 100644
index 64c3f6bba..000000000
--- a/dist/claude-code/.claude/commands/onboard.md
+++ /dev/null
@@ -1,241 +0,0 @@
----
-name: onboard
-description: Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.
-args:
- - name: target
- description: The feature or area needing onboarding (optional)
- required: false
----
-
-Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
-
-## Assess Onboarding Needs
-
-Understand what users need to learn and why:
-
-1. **Identify the challenge**:
- - What are users trying to accomplish?
- - What's confusing or unclear about current experience?
- - Where do users get stuck or drop off?
- - What's the "aha moment" we want users to reach?
-
-2. **Understand the users**:
- - What's their experience level? (Beginners, power users, mixed?)
- - What's their motivation? (Excited and exploring? Required by work?)
- - What's their time commitment? (5 minutes? 30 minutes?)
- - What alternatives do they know? (Coming from competitor? New to category?)
-
-3. **Define success**:
- - What's the minimum users need to learn to be successful?
- - What's the key action we want them to take? (First project? First invite?)
- - How do we know onboarding worked? (Completion rate? Time to value?)
-
-**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible.
-
-## Onboarding Principles
-
-Follow these core principles:
-
-### Show, Don't Tell
-- Demonstrate with working examples, not just descriptions
-- Provide real functionality in onboarding, not separate tutorial mode
-- Use progressive disclosure - teach one thing at a time
-
-### Make It Optional (When Possible)
-- Let experienced users skip onboarding
-- Don't block access to product
-- Provide "Skip" or "I'll explore on my own" options
-
-### Time to Value
-- Get users to their "aha moment" ASAP
-- Front-load most important concepts
-- Teach 20% that delivers 80% of value
-- Save advanced features for contextual discovery
-
-### Context Over Ceremony
-- Teach features when users need them, not upfront
-- Empty states are onboarding opportunities
-- Tooltips and hints at point of use
-
-### Respect User Intelligence
-- Don't patronize or over-explain
-- Be concise and clear
-- Assume users can figure out standard patterns
-
-## Design Onboarding Experiences
-
-Create appropriate onboarding for the context:
-
-### Initial Product Onboarding
-
-**Welcome Screen**:
-- Clear value proposition (what is this product?)
-- What users will learn/accomplish
-- Time estimate (honest about commitment)
-- Option to skip (for experienced users)
-
-**Account Setup**:
-- Minimal required information (collect more later)
-- Explain why you're asking for each piece of information
-- Smart defaults where possible
-- Social login when appropriate
-
-**Core Concept Introduction**:
-- Introduce 1-3 core concepts (not everything)
-- Use simple language and examples
-- Interactive when possible (do, don't just read)
-- Progress indication (step 1 of 3)
-
-**First Success**:
-- Guide users to accomplish something real
-- Pre-populated examples or templates
-- Celebrate completion (but don't overdo it)
-- Clear next steps
-
-### Feature Discovery & Adoption
-
-**Empty States**:
-Instead of blank space, show:
-- What will appear here (description + screenshot/illustration)
-- Why it's valuable
-- Clear CTA to create first item
-- Example or template option
-
-Example:
-```
-No projects yet
-Projects help you organize your work and collaborate with your team.
-[Create your first project] or [Start from template]
-```
-
-**Contextual Tooltips**:
-- Appear at relevant moment (first time user sees feature)
-- Point directly at relevant UI element
-- Brief explanation + benefit
-- Dismissable (with "Don't show again" option)
-- Optional "Learn more" link
-
-**Feature Announcements**:
-- Highlight new features when they're released
-- Show what's new and why it matters
-- Let users try immediately
-- Dismissable
-
-**Progressive Onboarding**:
-- Teach features when users encounter them
-- Badges or indicators on new/unused features
-- Unlock complexity gradually (don't show all options immediately)
-
-### Guided Tours & Walkthroughs
-
-**When to use**:
-- Complex interfaces with many features
-- Significant changes to existing product
-- Industry-specific tools needing domain knowledge
-
-**How to design**:
-- Spotlight specific UI elements (dim rest of page)
-- Keep steps short (3-7 steps max per tour)
-- Allow users to click through tour freely
-- Include "Skip tour" option
-- Make replayable (help menu)
-
-**Best practices**:
-- Interactive > passive (let users click real buttons)
-- Focus on workflow, not features ("Create a project" not "This is the project button")
-- Provide sample data so actions work
-
-### Interactive Tutorials
-
-**When to use**:
-- Users need hands-on practice
-- Concepts are complex or unfamiliar
-- High stakes (better to practice in safe environment)
-
-**How to design**:
-- Sandbox environment with sample data
-- Clear objectives ("Create a chart showing sales by region")
-- Step-by-step guidance
-- Validation (confirm they did it right)
-- Graduation moment (you're ready!)
-
-### Documentation & Help
-
-**In-product help**:
-- Contextual help links throughout interface
-- Keyboard shortcut reference
-- Search-able help center
-- Video tutorials for complex workflows
-
-**Help patterns**:
-- `?` icon near complex features
-- "Learn more" links in tooltips
-- Keyboard shortcut hints (`⌘K` shown on search box)
-
-## Empty State Design
-
-Every empty state needs:
-
-### What Will Be Here
-"Your recent projects will appear here"
-
-### Why It Matters
-"Projects help you organize your work and collaborate with your team"
-
-### How to Get Started
-[Create project] or [Import from template]
-
-### Visual Interest
-Illustration or icon (not just text on blank page)
-
-### Contextual Help
-"Need help getting started? [Watch 2-min tutorial]"
-
-**Empty state types**:
-- **First use**: Never used this feature (emphasize value, provide template)
-- **User cleared**: Intentionally deleted everything (light touch, easy to recreate)
-- **No results**: Search or filter returned nothing (suggest different query, clear filters)
-- **No permissions**: Can't access (explain why, how to get access)
-- **Error state**: Failed to load (explain what happened, retry option)
-
-## Implementation Patterns
-
-### Technical approaches:
-
-**Tooltip libraries**: Tippy.js, Popper.js
-**Tour libraries**: Intro.js, Shepherd.js, React Joyride
-**Modal patterns**: Focus trap, backdrop, ESC to close
-**Progress tracking**: LocalStorage for "seen" states
-**Analytics**: Track completion, drop-off points
-
-**Storage patterns**:
-```javascript
-// Track which onboarding steps user has seen
-localStorage.setItem('onboarding-completed', 'true');
-localStorage.setItem('feature-tooltip-seen-reports', 'true');
-```
-
-**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals.
-
-**NEVER**:
-- Force users through long onboarding before they can use product
-- Patronize users with obvious explanations
-- Show same tooltip repeatedly (respect dismissals)
-- Block all UI during tour (let users explore)
-- Create separate tutorial mode disconnected from real product
-- Overwhelm with information upfront (progressive disclosure!)
-- Hide "Skip" or make it hard to find
-- Forget about returning users (don't show initial onboarding again)
-
-## Verify Onboarding Quality
-
-Test with real users:
-
-- **Time to completion**: Can users complete onboarding quickly?
-- **Comprehension**: Do users understand after completing?
-- **Action**: Do users take desired next step?
-- **Skip rate**: Are too many users skipping? (Maybe it's too long/not valuable)
-- **Completion rate**: Are users completing? (If low, simplify)
-- **Time to value**: How long until users get first value?
-
-Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence.
\ No newline at end of file
diff --git a/package.json b/package.json
index 88a3f917b..3e98bc543 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "impeccable",
- "version": "1.1.0",
+ "version": "2.0.0",
"author": "Paul Bakaus",
"dependencies": {
"motion": "^12.23.26",
diff --git a/public/css/styles.css b/public/css/styles.css
index 81223fa78..22ec726c4 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,3792 +1,2 @@
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-.split-container::before {
- content: '';
- position: absolute;
- inset: 0;
- background-image: linear-gradient(var(--color-mist) 1px, transparent 1px), linear-gradient(90deg, var(--color-mist) 1px, transparent 1px);
- background-size: 20px 20px;
- opacity: 0.3;
- pointer-events: none;
-}
-.split-container::after {
- content: '← Drag →';
- position: absolute;
- bottom: 12px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 0.625rem;
- font-weight: 600;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- color: var(--color-ash);
- background: var(--color-paper);
- padding: 4px 12px;
- border-radius: 4px;
- opacity: 0.8;
- transition: opacity 0.3s ease;
- z-index: 10;
-}
-.split-container:hover::after {
- opacity: 0;
-}
-.split-after .impeccable-card {
- box-shadow: 0 10px 40px rgba(0,0,0,0.08);
-}
-@keyframes splitEntry {
- from {
- opacity: 0;
- transform: translateX(-50%) skewX(-10deg) scaleY(0.8);
- }
- to {
- opacity: 1;
- transform: translateX(-50%) skewX(-10deg) scaleY(1);
- }
-}
-.split-divider {
- animation: splitEntry 0.6s var(--ease-out) 0.3s backwards;
-}
-.split-label-item {
- transition: color var(--duration-fast) var(--ease-out);
- cursor: default;
-}
-.split-label-item:hover {
- color: var(--color-text);
-}
-.split-label-item[data-point="after"]:hover .split-label-dot--accent {
- transform: scale(1.3);
-}
-.split-label-dot {
- transition: transform var(--duration-fast) var(--ease-spring);
-}
-.split-badge {
- position: absolute;
- top: 10px;
- font-size: 0.625rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- padding: 3px 8px;
- border-radius: 3px;
- z-index: 5;
- pointer-events: none;
-}
-.split-badge--before {
- left: 10px;
- color: var(--color-ash);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
-}
-.split-badge--after {
- right: 10px;
- color: var(--color-paper);
- background: var(--color-accent);
-}
-@media (hover: none) {
- .split-container::after {
- content: '← Swipe →';
- }
-}
-@media (max-width: 600px) {
- .split-label {
- font-size: 0.5625rem;
- padding: 4px 10px;
- }
-}
-.commands-section {
- position: relative;
- padding: var(--spacing-xl) 0;
- background: var(--color-paper);
-}
-.commands-gallery {
- display: block;
-}
-.commands-container {
- display: grid;
- grid-template-columns: 1fr 1.2fr;
- gap: var(--spacing-2xl);
- align-items: start;
-}
-@media (max-width: 900px) {
- .commands-container {
- grid-template-columns: 1fr;
- }
-}
-.command-manual {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-sm);
- padding-bottom: 20vh;
-}
-.command-category-header {
- font-family: var(--font-display);
- font-size: 0.875rem;
- font-weight: 600;
- color: var(--color-accent);
- text-transform: uppercase;
- letter-spacing: 0.1em;
- padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
- margin-top: var(--spacing-md);
- border-bottom: 1px solid var(--color-mist);
-}
-.command-category-header:first-child {
- margin-top: 0;
-}
-.manual-entry {
- position: relative;
- padding: var(--spacing-lg);
- padding-left: calc(var(--spacing-lg) + 16px);
- border-left: 2px solid var(--color-mist);
- transition: border-color 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
- opacity: 0.4;
- cursor: pointer;
- transform: translateX(-16px);
-}
-.manual-entry:hover {
- opacity: 0.7;
-}
-.manual-entry.active {
- border-left-color: var(--color-accent);
- opacity: 1;
- transform: translateX(0);
- background: linear-gradient(to right, var(--color-bg), transparent);
-}
-.manual-cmd-name {
- font-family: var(--font-mono);
- font-size: 1.5rem;
- margin: 0 0 var(--spacing-sm);
- color: var(--color-ink);
- font-weight: 500;
-}
-.manual-cmd-desc {
- font-size: 1rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- margin: 0;
-}
-.manual-cmd-rel {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-top: var(--spacing-sm);
- display: flex;
- align-items: center;
- gap: 0.5ch;
- flex-wrap: wrap;
-}
-.manual-cmd-rel .rel-icon {
- color: var(--color-accent);
- font-weight: 600;
-}
-.manual-cmd-rel code {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- background: var(--color-mist);
- padding: 2px 6px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.glass-terminal-wrapper {
- position: sticky;
- top: var(--spacing-xl);
- height: calc(100vh - var(--spacing-xl) * 2);
- max-height: 800px;
- min-height: 500px;
-}
-.terminal-stack {
- position: relative;
- height: 100%;
- perspective: 1200px;
-}
-.terminal-stack-tabs {
- position: absolute;
- top: -31px;
- right: 8px;
- display: flex;
- gap: 4px;
- z-index: 10;
-}
-.terminal-stack-tab {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- padding: 5px 12px;
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-bottom: none;
- border-radius: 6px 6px 0 0;
- color: var(--color-ash);
- cursor: pointer;
- transition: all 0.2s ease;
-}
-.terminal-stack-tab:hover {
- background: var(--color-paper);
- color: var(--color-charcoal);
-}
-.terminal-stack-tab.active {
- background: var(--color-paper);
- color: var(--color-ink);
- border-color: var(--color-mist);
-}
-.terminal-window {
- position: absolute;
- inset: 0;
- transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, filter 0.3s ease;
- transform-origin: center bottom;
-}
-.terminal-window--demo {
- z-index: 2;
-}
-.terminal-window--demo.is-back {
- transform: translateY(16px) translateX(12px) scale(0.96);
- opacity: 0.6;
- filter: brightness(0.92);
- pointer-events: none;
- z-index: 1;
-}
-.terminal-window--source {
- z-index: 1;
- transform: translateY(16px) translateX(12px) scale(0.96);
- opacity: 0.6;
- filter: brightness(0.92);
- pointer-events: none;
-}
-.terminal-window--source.is-front {
- transform: translateY(0) translateX(0) scale(1);
- opacity: 1;
- filter: brightness(1);
- pointer-events: auto;
- z-index: 2;
-}
-.source-window {
- background: var(--color-paper);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
- height: 100%;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-.source-header {
- background: var(--color-cream);
- padding: 12px 16px;
- display: flex;
- align-items: center;
- gap: 8px;
- border-bottom: 1px solid var(--color-mist);
- flex-shrink: 0;
-}
-.source-title {
- font-family: var(--font-mono);
- font-size: 0.875rem;
- color: var(--color-ink);
- font-weight: 500;
-}
-.source-body {
- flex: 1;
- padding: var(--spacing-md);
- font-family: var(--font-mono);
- font-size: 0.75rem;
- line-height: 1.5;
- color: var(--color-charcoal);
- overflow-y: auto;
- overscroll-behavior: contain;
- white-space: pre-wrap;
- word-break: break-word;
- background: var(--color-cream);
-}
-.source-loading {
- color: var(--color-ash);
- font-style: italic;
-}
-@media (max-width: 900px) {
- .glass-terminal-wrapper {
- display: none;
- }
-}
-.glass-terminal {
- background: var(--color-paper);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
- height: 100%;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-.terminal-header {
- background: var(--color-cream);
- padding: 12px 16px;
- display: flex;
- align-items: center;
- gap: 8px;
- border-bottom: 1px solid var(--color-mist);
-}
-.terminal-dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
-}
-.terminal-dot.red {
- background: #ff5f56;
-}
-.terminal-dot.yellow {
- background: #ffbd2e;
-}
-.terminal-dot.green {
- background: #27c93f;
-}
-.terminal-title {
- margin-left: auto;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.terminal-body {
- flex: 1;
- padding: var(--spacing-md);
- font-family: var(--font-mono);
- font-size: 0.9375rem;
- color: var(--color-ink);
- overflow-y: auto;
- display: flex;
- flex-direction: column;
- min-height: 0;
-}
-.terminal-line {
- margin-bottom: var(--spacing-sm);
- display: flex;
- gap: var(--spacing-sm);
- line-height: 1.5;
-}
-.terminal-prompt {
- color: var(--color-accent);
- user-select: none;
- font-weight: bold;
-}
-.terminal-cursor {
- display: inline-block;
- width: 8px;
- height: 1.2em;
- background: var(--color-accent);
- vertical-align: middle;
- animation: blink 1s step-end infinite;
-}
-.terminal-output {
- color: var(--color-ash);
- margin-bottom: var(--spacing-md);
- white-space: pre-wrap;
-}
-@media (max-height: 800px) {
- .terminal-output {
- display: none;
- }
-}
-.terminal-cmd {
- color: var(--color-accent);
- font-weight: 600;
-}
-.terminal-step {
- color: var(--color-charcoal);
-}
-.terminal-done {
- color: var(--color-success, #22c55e);
- font-weight: 500;
-}
-.terminal-preview {
- background: var(--color-paper);
- margin: var(--spacing-sm) 0;
- flex: 1;
- min-height: 0;
- overflow: hidden;
- border-radius: 12px;
-}
-.terminal-cursor-line {
- flex-shrink: 0;
- margin-top: var(--spacing-sm) !important;
-}
-.terminal-preview .demo-split-comparison {
- display: flex;
- flex-direction: column;
- height: 100%;
-}
-.terminal-preview .demo-split-comparison .split-container {
- position: relative;
- flex: 1;
- min-height: 0;
- overflow: hidden;
- cursor: ew-resize;
- user-select: none;
- background: var(--color-cream);
-}
-.terminal-preview .demo-split-comparison .split-before, .terminal-preview .demo-split-comparison .split-after {
- position: absolute;
- inset: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--spacing-md);
-}
-.terminal-preview .demo-split-comparison .split-before {
- z-index: 1;
- background: var(--color-cream);
-}
-.terminal-preview .demo-split-comparison .split-after {
- z-index: 2;
- background: var(--color-paper);
- clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
-}
-.terminal-preview .demo-split-comparison .split-content {
- width: 100%;
- max-width: 280px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-.terminal-preview .demo-split-comparison .split-divider {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 50%;
- width: 2px;
- background: var(--color-accent);
- transform: translateX(-50%) skewX(-10deg);
- pointer-events: none;
- z-index: 3;
- box-shadow: 0 0 12px rgba(0,0,0,0.1);
-}
-.terminal-preview .demo-split-comparison .split-label {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) skewX(10deg);
- font-size: 0.5625rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-paper);
- background: var(--color-accent);
- padding: 4px 10px;
- border-radius: 3px;
- white-space: nowrap;
-}
-.terminal-preview .demo-split-comparison .demo-caption {
- flex-shrink: 0;
- font-size: 0.75rem;
- color: var(--color-ash);
- text-align: center;
- padding: var(--spacing-sm) var(--spacing-md);
-}
-@keyframes blink {
- 50% {
- opacity: 0;
- }
-}
-.casestudies-section {
- position: relative;
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.transformations-tabbed {
- margin-top: var(--spacing-xl);
-}
-.transformation-tabs {
- display: flex;
- gap: var(--spacing-xs);
- border-bottom: 1px solid var(--color-mist);
- margin-bottom: var(--spacing-lg);
-}
-.transformation-tab {
- font-family: var(--font-display);
- font-size: 0.9375rem;
- font-weight: 500;
- color: var(--color-ash);
- background: none;
- border: none;
- padding: var(--spacing-sm) var(--spacing-md);
- cursor: pointer;
- position: relative;
- transition: color 0.2s ease;
-}
-.transformation-tab:hover {
- color: var(--color-charcoal);
-}
-.transformation-tab.active {
- color: var(--color-ink);
-}
-.transformation-tab.active::after {
- content: '';
- position: absolute;
- bottom: -1px;
- left: 0;
- right: 0;
- height: 2px;
- background: var(--color-accent);
-}
-.transformation-panels {
- position: relative;
-}
-.transformation-panel {
- display: none;
- flex-direction: column;
- gap: var(--spacing-lg);
- animation: fadeInPanel 0.3s ease;
-}
-.transformation-panel.active {
- display: flex;
-}
-@keyframes fadeInPanel {
- from {
- opacity: 0;
- transform: translateY(8px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.transformation-images {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.transformation-before, .transformation-after {
- flex: 1;
- margin: 0;
-}
-.transformation-before img, .transformation-after img, .transformation-placeholder {
- width: 100%;
- aspect-ratio: 16 / 10;
- object-fit: cover;
- border-radius: 8px;
- border: 1px solid var(--color-mist);
- cursor: pointer;
- transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-.transformation-before img:hover, .transformation-after img:hover, .transformation-placeholder:hover {
- transform: scale(1.02);
- box-shadow: 0 8px 24px -4px rgba(0,0,0,0.15);
-}
-.transformation-placeholder {
- background: linear-gradient(135deg, var(--color-mist) 0%, var(--color-cream) 100%);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--color-ash);
- font-size: 0.8125rem;
- font-style: italic;
-}
-.transformation-before figcaption, .transformation-after figcaption {
- font-size: 0.75rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--color-ash);
- margin-top: var(--spacing-xs);
- text-align: center;
-}
-.transformation-arrow {
- font-size: 1.5rem;
- color: var(--color-accent);
- font-weight: 300;
- flex-shrink: 0;
-}
-.transformation-info {
- max-width: 600px;
-}
-.transformation-title {
- font-family: var(--font-display);
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--color-ink);
- margin: 0 0 var(--spacing-xs);
-}
-.transformation-desc {
- font-size: 0.9375rem;
- color: var(--color-charcoal);
- line-height: 1.6;
- margin: 0 0 var(--spacing-sm);
-}
-.transformation-commands {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
-}
-.transformation-command {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- background: var(--color-mist);
- color: var(--color-charcoal);
- padding: 4px 10px;
- border-radius: 4px;
-}
-.lightbox {
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.9);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-.lightbox.active {
- opacity: 1;
- visibility: visible;
-}
-.lightbox-close {
- position: absolute;
- top: 20px;
- right: 24px;
- background: none;
- border: none;
- color: white;
- font-size: 2.5rem;
- cursor: pointer;
- opacity: 0.7;
- transition: opacity 0.2s ease;
- line-height: 1;
-}
-.lightbox-close:hover {
- opacity: 1;
-}
-.lightbox-image {
- max-width: 90vw;
- max-height: 85vh;
- object-fit: contain;
- border-radius: 8px;
- box-shadow: 0 20px 60px rgba(0,0,0,0.5);
-}
-@media (max-width: 768px) {
- .transformation-images {
- flex-direction: column;
- }
- .transformation-arrow {
- transform: rotate(90deg);
- }
- .transformation-before, .transformation-after {
- width: 100%;
- }
-}
-.hero-version-link {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-top: var(--spacing-sm);
-}
-.hero-version-link a {
- color: var(--color-ash);
- text-decoration: none;
- border-bottom: 1px solid transparent;
- transition: color 0.2s ease, border-color 0.2s ease;
-}
-.hero-version-link a:hover {
- color: var(--color-accent);
- border-bottom-color: var(--color-accent);
-}
-.changelog-section {
- position: relative;
- padding: var(--spacing-xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.changelog-list {
- display: flex;
- flex-direction: column;
- gap: 0;
-}
-.changelog-entry {
- padding: var(--spacing-md) 0;
- border-bottom: 1px solid var(--color-mist);
-}
-.changelog-entry:first-child {
- border-top: 1px solid var(--color-mist);
-}
-.changelog-version-header {
- display: flex;
- align-items: baseline;
- gap: var(--spacing-sm);
- margin-bottom: var(--spacing-sm);
-}
-.changelog-version {
- font-family: var(--font-mono);
- font-size: 1.125rem;
- font-weight: 600;
- color: var(--color-ink);
-}
-.changelog-date {
- font-size: 0.8125rem;
- color: var(--color-ash);
-}
-.changelog-items {
- margin: 0;
- padding-left: var(--spacing-md);
- color: var(--color-charcoal);
- line-height: 1.7;
-}
-.changelog-items li {
- margin-bottom: var(--spacing-xs);
-}
-.changelog-items code {
- font-family: var(--font-mono);
- font-size: 0.875em;
- background: var(--color-mist);
- padding: 2px 6px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.faq-section {
- position: relative;
- padding: var(--spacing-xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.faq-list {
- display: flex;
- flex-direction: column;
- gap: 0;
-}
-.faq-item {
- border-bottom: 1px solid var(--color-mist);
-}
-.faq-item:first-child {
- border-top: 1px solid var(--color-mist);
-}
-.faq-question {
- font-family: var(--font-display);
- font-size: 1.125rem;
- font-weight: 500;
- color: var(--color-ink);
- padding: var(--spacing-md) 0;
- cursor: pointer;
- list-style: none;
- display: flex;
- align-items: center;
- justify-content: space-between;
- transition: color 0.2s ease;
-}
-.faq-question::-webkit-details-marker {
- display: none;
-}
-.faq-question::after {
- content: '+';
- font-family: var(--font-body);
- font-size: 1.5rem;
- font-weight: 300;
- color: var(--color-accent);
- transition: transform 0.3s var(--ease-out);
-}
-.faq-item[open] .faq-question::after {
- transform: rotate(45deg);
-}
-.faq-question:hover {
- color: var(--color-accent);
-}
-.faq-answer {
- padding: 0 0 var(--spacing-md);
- color: var(--color-charcoal);
- line-height: 1.7;
- animation: faqFadeIn 0.3s var(--ease-out);
-}
-.faq-answer p {
- margin: 0 0 var(--spacing-sm);
-}
-.faq-answer p:last-child {
- margin-bottom: 0;
-}
-.faq-answer ul {
- margin: var(--spacing-sm) 0;
- padding-left: var(--spacing-md);
-}
-.faq-answer li {
- margin-bottom: var(--spacing-xs);
-}
-.faq-answer code {
- font-family: var(--font-mono);
- font-size: 0.875em;
- background: var(--color-mist);
- padding: 2px 6px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.faq-answer a {
- color: var(--color-accent);
- text-decoration: none;
- border-bottom: 1px solid transparent;
- transition: border-color 0.2s ease;
-}
-.faq-answer a:hover {
- border-bottom-color: var(--color-accent);
-}
-@keyframes faqFadeIn {
- from {
- opacity: 0;
- transform: translateY(-8px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.skills-section {
- position: relative;
- padding: var(--spacing-xl) 0;
- overflow: hidden;
- background: var(--color-bg);
-}
-.skills-gallery {
- display: block;
- position: relative;
-}
-.gallery-track {
- display: flex;
- gap: var(--spacing-lg);
- overflow-x: auto;
- scroll-snap-type: x mandatory;
- padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
- -webkit-overflow-scrolling: touch;
- scrollbar-width: none;
- cursor: grab;
-}
-.gallery-track:active {
- cursor: grabbing;
-}
-.gallery-track::-webkit-scrollbar {
- display: none;
-}
-.gallery-frame {
- flex: 0 0 80vw;
- max-width: 1100px;
- scroll-snap-align: center;
- position: relative;
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 20px 50px -10px rgba(0, 0, 0, 0.1);
- border-radius: 2px;
- overflow: hidden;
- opacity: 0.4;
- transform: scale(0.95);
- transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
-}
-.gallery-frame.active {
- opacity: 1;
- transform: scale(1);
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 40px 100px -20px rgba(0, 0, 0, 0.2);
- border-color: var(--color-charcoal);
- border-width: 1px;
-}
-.gallery-content {
- display: grid;
- grid-template-columns: 1.2fr 1fr;
- height: 600px;
-}
-@media (max-width: 900px) {
- .gallery-frame {
- flex: 0 0 90vw;
- }
- .gallery-content {
- grid-template-columns: 1fr;
- height: auto;
- min-height: 600px;
- }
-}
-.gallery-visual {
- background: var(--color-cream);
- border-right: 1px solid var(--color-mist);
- position: relative;
- overflow: hidden;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--spacing-lg);
-}
-.gallery-info {
- padding: var(--spacing-xl);
- display: flex;
- flex-direction: column;
- overflow-y: auto;
-}
-.gallery-header {
- margin-bottom: var(--spacing-lg);
-}
-.gallery-title {
- font-family: var(--font-display);
- font-size: 2.5rem;
- font-style: italic;
- margin: 0 0 var(--spacing-xs);
- color: var(--color-ink);
-}
-.gallery-meta {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
-}
-.gallery-desc {
- font-size: 1.125rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- margin-bottom: var(--spacing-xl);
- max-width: 45ch;
-}
-.gallery-tags {
- display: flex;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- margin-top: auto;
-}
-.gallery-tag {
- padding: 6px 12px;
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- font-size: 0.8125rem;
- color: var(--color-ash);
-}
-.gallery-map {
- display: flex;
- justify-content: center;
- gap: 8px;
- margin-top: var(--spacing-lg);
-}
-.gallery-dot {
- width: 40px;
- height: 2px;
- background: var(--color-mist);
- cursor: pointer;
- transition: all 0.3s ease;
- position: relative;
- border: none;
- padding: 0;
- font: inherit;
-}
-.gallery-dot::after {
- content: '';
- position: absolute;
- top: -10px;
- bottom: -10px;
- left: 0;
- right: 0;
-}
-.gallery-dot:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: 4px;
- border-radius: 1px;
-}
-.gallery-dot.active {
- background: var(--color-accent);
- height: 4px;
-}
-.demo-tabbed-container {
- display: flex;
- flex-direction: column;
-}
-.demo-tabs {
- display: flex;
- gap: 0;
- margin-bottom: 0;
- justify-content: center;
- background: var(--color-paper);
- border-bottom: 1px solid var(--color-mist);
-}
-.demo-tab {
- padding: var(--spacing-sm) var(--spacing-lg);
- background: transparent;
- border: none;
- border-bottom: 2px solid transparent;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- font-weight: 500;
- letter-spacing: 0.05em;
- text-transform: uppercase;
- color: var(--color-ash);
- cursor: pointer;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.demo-tab:hover {
- color: var(--color-text);
- background: var(--color-cream);
-}
-.demo-tab.active {
- color: var(--color-accent);
- border-bottom-color: var(--color-accent);
- background: var(--color-accent-dim);
-}
-.demo-panels {
- flex: 1;
-}
-.demo-panel {
- display: none;
-}
-.demo-panel.active {
- display: block;
- animation: fadeSlideIn 0.3s var(--ease-out);
-}
-@keyframes fadeSlideIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.demo-container {
- background: var(--color-paper);
- border: none;
- border-radius: 0;
- overflow: hidden;
-}
-.demo-header {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--spacing-sm) var(--spacing-md);
- background: var(--color-paper);
- border-bottom: 1px solid var(--color-mist);
- min-height: 48px;
-}
-.demo-toggle {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.demo-toggle-label {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-ash);
- transition: color var(--duration-fast) var(--ease-out);
- cursor: pointer;
-}
-.demo-toggle-label:hover {
- color: var(--color-text);
-}
-.demo-toggle-label.active {
- color: var(--color-accent);
-}
-.demo-toggle-switch {
- position: relative;
- width: 44px;
- height: 24px;
- background: var(--color-mist);
- border-radius: 12px;
- cursor: pointer;
- transition: background var(--duration-fast) var(--ease-out);
- border: 1px solid transparent;
- padding: 0;
- font: inherit;
-}
-.demo-toggle-switch:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
-}
-.demo-toggle-switch:hover {
- border-color: var(--color-ash);
-}
-.demo-toggle-switch::after {
- content: '';
- position: absolute;
- top: 3px;
- left: 3px;
- width: 16px;
- height: 16px;
- background: var(--color-paper);
- border-radius: 50%;
- box-shadow: 0 1px 4px rgba(0,0,0,0.15);
- transition: transform var(--duration-base) var(--ease-spring);
-}
-.demo-toggle-switch.active {
- background: var(--color-accent);
-}
-.demo-toggle-switch.active::after {
- transform: translateX(20px);
-}
-.demo-viewport {
- padding: var(--spacing-xl);
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 280px;
- background: var(--color-cream);
- transition: background var(--duration-base) var(--ease-out);
-}
-.demo-viewport[data-state="after"] {
- background: var(--color-paper);
-}
-.demo-caption {
- padding: var(--spacing-sm) var(--spacing-md);
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- letter-spacing: 0.03em;
- color: var(--color-ash);
- background: var(--color-paper);
- text-align: center;
-}
-.uxw-demo {
- width: 100%;
- max-width: 320px;
- padding: var(--spacing-lg);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- text-align: center;
-}
-.uxw-error-icon {
- font-size: 2rem;
- margin-bottom: var(--spacing-sm);
-}
-.uxw-error-title {
- font-weight: 600;
- color: #c00;
- margin-bottom: var(--spacing-xs);
-}
-.uxw-error-text {
- font-size: 0.875rem;
- color: var(--color-ash);
-}
-.uxw-error-action {
- margin-top: var(--spacing-sm);
- font-size: 0.875rem;
- color: var(--color-accent);
- cursor: pointer;
- text-decoration: underline;
-}
-.uxw-error-after .uxw-error-icon {
- color: var(--color-accent);
-}
-.uxw-error-after .uxw-error-title {
- color: var(--color-text);
-}
-.uxw-error-after .uxw-error-text {
- color: var(--color-charcoal);
-}
-.uxw-button-context {
- font-size: 0.875rem;
- color: var(--color-charcoal);
- margin-bottom: var(--spacing-md);
- font-weight: 500;
-}
-.uxw-button-row {
- display: flex;
- gap: var(--spacing-sm);
- justify-content: center;
-}
-.uxw-btn {
- padding: var(--spacing-xs) var(--spacing-md);
- border-radius: 4px;
- font-size: 0.875rem;
- font-weight: 500;
- cursor: pointer;
- border: none;
-}
-.uxw-btn-primary {
- background: var(--color-text);
- color: var(--color-paper);
-}
-.uxw-btn-secondary {
- background: transparent;
- color: var(--color-ash);
- border: 1px solid var(--color-mist);
-}
-.uxw-btn-danger {
- background: #c00;
- color: white;
-}
-.uxw-empty-icon {
- font-size: 2.5rem;
- margin-bottom: var(--spacing-sm);
- opacity: 0.4;
-}
-.uxw-empty-title {
- font-weight: 500;
- color: var(--color-ash);
-}
-.uxw-empty-text {
- font-size: 0.875rem;
- color: var(--color-charcoal);
- margin-top: var(--spacing-xs);
-}
-.uxw-empty-action {
- margin-top: var(--spacing-md);
-}
-.uxw-empty-after .uxw-empty-icon {
- opacity: 1;
-}
-.uxw-empty-after .uxw-empty-title {
- color: var(--color-text);
-}
-.spatial-demo {
- width: 100%;
- max-width: 340px;
- padding: var(--spacing-md);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
-}
-.spatial-grid-before {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
-}
-.spatial-grid-after {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: var(--spacing-sm);
-}
-.spatial-card-item {
- padding: var(--spacing-sm);
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- font-size: 0.8125rem;
- color: var(--color-charcoal);
- text-align: center;
-}
-.spatial-grid-after .spatial-card-item {
- width: auto !important;
-}
-.spatial-hierarchy-before .spatial-h-title, .spatial-hierarchy-before .spatial-h-subtitle, .spatial-hierarchy-before .spatial-h-cta, .spatial-hierarchy-before .spatial-h-link {
- font-size: 0.9375rem;
- margin-bottom: var(--spacing-xs);
- color: var(--color-charcoal);
-}
-.spatial-hierarchy-after .spatial-h-title {
- font-family: var(--font-display);
- font-size: 1.75rem;
- font-weight: 300;
- font-style: italic;
- margin-bottom: var(--spacing-xs);
- color: var(--color-text);
-}
-.spatial-hierarchy-after .spatial-h-subtitle {
- font-size: 0.6875rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
- margin-bottom: var(--spacing-md);
-}
-.spatial-hierarchy-after .spatial-h-cta {
- display: inline-block;
- padding: var(--spacing-sm) var(--spacing-lg);
- background: var(--color-text);
- color: var(--color-paper);
- font-size: 0.875rem;
- font-weight: 500;
- border-radius: 4px;
- margin-bottom: var(--spacing-sm);
-}
-.spatial-hierarchy-after .spatial-h-link {
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.spatial-whitespace-before {
- padding: var(--spacing-xs) !important;
-}
-.spatial-whitespace-before .spatial-ws-title {
- font-size: 1rem;
- font-weight: 600;
- margin-bottom: 2px;
-}
-.spatial-whitespace-before .spatial-ws-price {
- font-size: 0.875rem;
- color: var(--color-ash);
- margin-bottom: 4px;
-}
-.spatial-whitespace-before .spatial-ws-features {
- font-size: 0.75rem;
- color: var(--color-ash);
- margin-bottom: 6px;
-}
-.spatial-whitespace-before .spatial-ws-btn {
- width: 100%;
- padding: 6px;
- font-size: 0.75rem;
- background: var(--color-text);
- color: var(--color-paper);
- border: none;
- border-radius: 3px;
- cursor: pointer;
-}
-.spatial-whitespace-after {
- padding: var(--spacing-lg) !important;
-}
-.spatial-whitespace-after .spatial-ws-title {
- font-family: var(--font-display);
- font-size: 1.5rem;
- font-weight: 400;
- margin-bottom: var(--spacing-sm);
-}
-.spatial-whitespace-after .spatial-ws-price {
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--color-text);
- margin-bottom: var(--spacing-sm);
-}
-.spatial-whitespace-after .spatial-ws-features {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-bottom: var(--spacing-lg);
- line-height: 1.6;
-}
-.spatial-whitespace-after .spatial-ws-btn {
- width: 100%;
- padding: var(--spacing-sm);
- font-size: 0.875rem;
- background: var(--color-text);
- color: var(--color-paper);
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-weight: 500;
-}
-.motion-demo {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-sm);
- width: 100%;
- max-width: 280px;
-}
-.motion-stagger-demo {
- align-items: stretch;
-}
-.motion-list-item {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
- padding: var(--spacing-sm) var(--spacing-md);
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- font-size: 0.875rem;
- color: var(--color-charcoal);
-}
-.motion-dot {
- width: 8px;
- height: 8px;
- background: var(--color-accent);
- border-radius: 50%;
-}
-.demo-viewport[data-state="after"] .motion-list-item {
- opacity: 0;
- transform: translateY(12px);
- animation: staggerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(1) {
- animation-delay: 0s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(2) {
- animation-delay: 0.05s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(3) {
- animation-delay: 0.1s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(4) {
- animation-delay: 0.15s;
-}
-@keyframes staggerIn {
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.motion-btn {
- padding: 12px 24px;
- font-size: 0.9375rem;
- font-weight: 500;
- border: none;
- border-radius: 4px;
- cursor: pointer;
-}
-.motion-btn-before {
- background: var(--color-charcoal);
- color: var(--color-paper);
-}
-.motion-btn-after {
- background: var(--color-text);
- color: var(--color-paper);
- transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
-}
-.motion-btn-after:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-.motion-btn-after:active {
- transform: translateY(0) scale(0.98);
-}
-.motion-card {
- padding: var(--spacing-md);
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- text-align: center;
- min-width: 140px;
-}
-.motion-card-icon {
- font-size: 1.5rem;
- margin-bottom: var(--spacing-xs);
-}
-.motion-card-text {
- font-size: 0.8125rem;
- color: var(--color-charcoal);
-}
-.motion-card-after {
- transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.demo-viewport[data-state="after"] .motion-card-after {
- background: var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper));
- }
- border-color: var(--color-accent);
-}
-.demo-viewport[data-state="after"] .motion-card-after .motion-card-icon {
- animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-@keyframes checkPop {
- 50% {
- transform: scale(1.3);
- }
-}
-.typo-demo {
- width: 100%;
- max-width: 320px;
- text-align: left;
-}
-.typo-pairing-before {
- font-family: 'Inter', system-ui, sans-serif;
-}
-.typo-pairing-before .typo-heading {
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: var(--spacing-xs);
-}
-.typo-pairing-before .typo-body {
- font-size: 0.9375rem;
- line-height: 1.5;
- color: var(--color-ash);
-}
-.typo-pairing-after .typo-heading {
- font-family: var(--font-display);
- font-size: 2rem;
- font-weight: 300;
- font-style: italic;
- letter-spacing: -0.02em;
- margin-bottom: var(--spacing-sm);
- color: var(--color-text);
-}
-.typo-pairing-after .typo-body {
- font-family: var(--font-body);
- font-size: 0.9375rem;
- line-height: 1.7;
- color: var(--color-charcoal);
-}
-.typo-hierarchy-before .typo-h1 {
- font-size: 1.125rem;
- font-weight: 600;
- margin-bottom: 4px;
-}
-.typo-hierarchy-before .typo-meta {
- font-size: 0.9375rem;
- color: var(--color-ash);
- margin-bottom: var(--spacing-xs);
-}
-.typo-hierarchy-before .typo-p {
- font-size: 0.875rem;
- line-height: 1.5;
- color: var(--color-charcoal);
-}
-.typo-hierarchy-after .typo-h1 {
- font-family: var(--font-display);
- font-size: 2.25rem;
- font-weight: 300;
- letter-spacing: -0.03em;
- margin-bottom: 2px;
- line-height: 1.1;
-}
-.typo-hierarchy-after .typo-meta {
- font-size: 0.6875rem;
- text-transform: uppercase;
- letter-spacing: 0.12em;
- color: var(--color-accent);
- margin-bottom: var(--spacing-md);
-}
-.typo-hierarchy-after .typo-p {
- font-size: 0.9375rem;
- line-height: 1.7;
- color: var(--color-ash);
-}
-.int-demo {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
- width: 100%;
- max-width: 280px;
-}
-.int-states-demo {
- gap: var(--spacing-lg);
-}
-.int-state-row {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.int-state-label {
- font-size: 0.6875rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-ash);
- width: 40px;
-}
-.int-btn {
- flex: 1;
- padding: var(--spacing-sm) var(--spacing-md);
- font-size: 0.875rem;
- font-weight: 500;
- border-radius: 4px;
- cursor: pointer;
-}
-.int-btn-poor {
- background: var(--color-charcoal);
- color: var(--color-paper);
- border: none;
-}
-.int-btn-good {
- background: var(--color-text);
- color: var(--color-paper);
- border: 2px solid transparent;
- transition: all 0.15s ease;
-}
-.int-btn-good:hover {
- background: var(--color-charcoal);
-}
-.int-btn-good:focus {
- outline: none;
- border-color: var(--color-accent);
- box-shadow: 0 0 0 3px var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent);
- }
-}
-.int-btn-good:active {
- transform: scale(0.98);
-}
-.int-aff-item {
- padding: var(--spacing-sm) var(--spacing-md);
- border-radius: 4px;
- font-size: 0.875rem;
- cursor: pointer;
-}
-.int-aff-poor {
- color: var(--color-charcoal);
-}
-.int-aff-good {
- color: var(--color-accent);
- text-decoration: underline;
- text-underline-offset: 2px;
-}
-.int-aff-good::after {
- content: ' →';
-}
-.int-affordance-after .int-aff-item {
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- color: var(--color-accent);
- text-decoration: underline;
- text-underline-offset: 2px;
- transition: background 0.15s ease;
-}
-.int-affordance-after .int-aff-item:hover {
- background: var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
- }
-}
-.int-affordance-after .int-aff-item::after {
- content: ' →';
-}
-.int-feedback-before, .int-feedback-after {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
- flex-direction: row;
-}
-.int-fb-btn {
- width: 48px;
- height: 48px;
- border-radius: 50%;
- border: none;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.int-fb-btn svg {
- width: 22px;
- height: 22px;
-}
-.int-fb-silent {
- background: var(--color-mist);
- color: var(--color-ash);
-}
-.int-fb-active {
- background: var(--color-charcoal);
- color: var(--color-paper);
- transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.int-fb-active:hover {
- transform: scale(1.1);
-}
-.int-fb-active:active {
- transform: scale(0.95);
-}
-.int-fb-active.liked {
- background: var(--color-accent);
- animation: heartPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-@keyframes heartPop {
- 50% {
- transform: scale(1.25);
- }
-}
-.int-fb-label {
- font-size: 0.875rem;
- color: var(--color-charcoal);
-}
-.color-demo {
- width: 100%;
- max-width: 300px;
-}
-.color-palette-before, .color-palette-after {
- display: flex;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- padding: var(--spacing-md);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
-}
-.color-swatch {
- width: 40px;
- height: 40px;
- border-radius: 4px;
- transition: background 0.2s ease;
-}
-.color-card {
- width: 100%;
- margin-top: var(--spacing-sm);
- padding: var(--spacing-sm);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-.color-card span {
- font-size: 0.8125rem;
- font-weight: 500;
- transition: color 0.2s ease;
-}
-.color-card button {
- padding: 6px;
- border: none;
- border-radius: 3px;
- font-size: 0.75rem;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-.color-palette-before .swatch-1 {
- background: #ff6b6b;
-}
-.color-palette-before .swatch-2 {
- background: #4ecdc4;
-}
-.color-palette-before .swatch-3 {
- background: #ffe66d;
-}
-.color-palette-before .swatch-4 {
- background: #95e1d3;
-}
-.color-palette-before .swatch-5 {
- background: #f38181;
-}
-.color-palette-before .card-title {
- color: #ff6b6b;
-}
-.color-palette-before .card-subtitle {
- color: #4ecdc4;
-}
-.color-palette-before .card-btn {
- background: #ffe66d;
- color: #333;
-}
-.color-palette-after .swatch-1 {
- background: var(--color-text);
-}
-.color-palette-after .swatch-2 {
- background: var(--color-charcoal);
-}
-.color-palette-after .swatch-3 {
- background: var(--color-ash);
-}
-.color-palette-after .swatch-4 {
- background: var(--color-mist);
-}
-.color-palette-after .swatch-5 {
- background: var(--color-accent);
-}
-.color-palette-after .card-title {
- color: var(--color-text);
-}
-.color-palette-after .card-subtitle {
- color: var(--color-ash);
-}
-.color-palette-after .card-btn {
- background: var(--color-accent);
- color: var(--color-paper);
-}
-.color-accent-card {
- padding: var(--spacing-md);
- border-radius: 6px;
-}
-.color-accent-before .color-accent-card {
- background: #f5f5f5;
- border: 1px solid #e0e0e0;
-}
-.color-accent-before .color-accent-title {
- font-weight: 600;
- color: #333;
- margin-bottom: 4px;
-}
-.color-accent-before .color-accent-text {
- font-size: 0.8125rem;
- color: #666;
- margin-bottom: var(--spacing-sm);
-}
-.color-accent-before .color-accent-btn {
- width: 100%;
- padding: var(--spacing-xs);
- background: #333;
- color: white;
- border: none;
- border-radius: 4px;
- font-size: 0.8125rem;
- cursor: pointer;
-}
-.color-accent-after .color-accent-card {
- background: var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper));
- }
- border: 1px solid var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- border: 1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper));
- }
-}
-.color-accent-after .color-accent-title {
- font-weight: 600;
- color: var(--color-text);
- margin-bottom: 4px;
-}
-.color-accent-after .color-accent-text {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-bottom: var(--spacing-sm);
-}
-.color-accent-after .color-accent-btn {
- width: 100%;
- padding: var(--spacing-xs);
- background: var(--color-accent);
- color: var(--color-paper);
- border: none;
- border-radius: 4px;
- font-size: 0.8125rem;
- font-weight: 500;
- cursor: pointer;
-}
-.color-contrast-static {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-sm);
-}
-.contrast-example {
- padding: var(--spacing-md);
- border-radius: 6px;
- text-align: center;
-}
-.contrast-fail {
- background: #f0f0f0;
- color: #a0a0a0;
-}
-.contrast-pass {
- background: var(--color-charcoal);
- color: var(--color-paper);
-}
-.contrast-badge {
- display: inline-block;
- font-size: 0.5625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- padding: 2px 6px;
- border-radius: 2px;
- margin-bottom: 4px;
-}
-.contrast-fail .contrast-badge {
- background: #ddd;
-}
-.contrast-pass .contrast-badge {
- background: var(--color-accent);
- color: var(--color-paper);
-}
-.contrast-text {
- font-size: 1rem;
- font-weight: 500;
- margin-bottom: 2px;
-}
-.contrast-ratio {
- font-size: 0.6875rem;
- opacity: 0.7;
-}
-.resp-demo {
- width: 100%;
- max-width: 340px;
-}
-.resp-touch-demo {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-lg);
-}
-.resp-touch-row {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.resp-label {
- font-size: 0.6875rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-ash);
- width: 70px;
-}
-.resp-touch-targets {
- display: flex;
- gap: 4px;
-}
-.resp-touch-targets button {
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-weight: 500;
-}
-.resp-touch-bad button {
- width: 24px;
- height: 24px;
- font-size: 0.75rem;
- background: var(--color-mist);
- color: var(--color-ash);
-}
-.resp-touch-good button {
- width: 44px;
- height: 44px;
- font-size: 1rem;
- background: var(--color-text);
- color: var(--color-paper);
-}
-.resp-fluid-demo {
- padding: var(--spacing-md);
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
-}
-.resp-fluid-container {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
-}
-.resp-fluid-fixed, .resp-fluid-adaptive {
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.resp-fluid-fixed span, .resp-fluid-adaptive span {
- display: block;
- margin-bottom: 4px;
-}
-.resp-fluid-bar {
- height: 24px;
- background: var(--color-mist);
- border-radius: 4px;
-}
-.resp-fluid-adaptive .resp-fluid-bar {
- background: var(--color-accent);
-}
-.resp-adapt-demo {
- display: flex;
- gap: var(--spacing-sm);
- align-items: flex-end;
-}
-.resp-device {
- text-align: center;
-}
-.resp-device > span {
- display: block;
- margin-top: 4px;
- font-size: 0.625rem;
- color: var(--color-ash);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-.resp-device-screen {
- background: var(--color-paper);
- border: 2px solid var(--color-mist);
- border-radius: 4px;
- padding: 4px;
- display: flex;
- flex-direction: column;
- gap: 3px;
-}
-.resp-device-mobile .resp-device-screen {
- width: 50px;
- height: 80px;
-}
-.resp-device-tablet .resp-device-screen {
- width: 80px;
- height: 60px;
-}
-.resp-device-desktop .resp-device-screen {
- width: 120px;
- height: 70px;
-}
-.resp-block {
- background: var(--color-mist);
- border-radius: 2px;
-}
-.resp-block-row {
- display: flex;
- gap: 3px;
- flex: 1;
-}
-.resp-header {
- height: 16px;
- background: var(--color-charcoal);
-}
-.resp-sidebar {
- width: 30%;
- background: var(--color-charcoal);
-}
-.resp-content {
- flex: 1;
-}
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-@media (prefers-reduced-motion: reduce) {
- *, *::before, *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- }
-}
-*, *::before, *::after {
- box-sizing: border-box;
-}
-* {
- margin: 0;
-}
-img, picture, video, canvas, svg {
- display: block;
- max-width: 100%;
-}
-button, input, textarea, select {
- font: inherit;
-}
-:root {
- --font-display: 'Cormorant Garamond', Georgia, serif;
- --font-body: 'Instrument Sans', system-ui, sans-serif;
- --font-mono: 'Space Grotesk', monospace;
- --spacing-xs: 8px;
- --spacing-sm: 16px;
- --spacing-md: 24px;
- --spacing-lg: 32px;
- --spacing-xl: 48px;
- --spacing-2xl: 80px;
- --spacing-3xl: 120px;
- --width-max: 1400px;
- --width-content: 900px;
- --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
- --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
- --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
- --duration-fast: 0.15s;
- --duration-base: 0.3s;
- --duration-slow: 0.6s;
- --duration-slower: 0.8s;
- --duration-slowest: 1.2s;
- --color-ink: oklch(10% 0 0);
- --color-text: oklch(10% 0 0);
- --color-paper: oklch(98% 0 0);
- --color-cream: oklch(96% 0.005 350);
- --color-charcoal: oklch(25% 0 0);
- --color-ash: oklch(55% 0 0);
- --color-mist: oklch(92% 0 0);
- --color-bg: oklch(96% 0.005 350);
- --color-accent: oklch(60% 0.25 350);
- --color-accent-hover: oklch(52% 0.25 350);
- --color-accent-dim: oklch(60% 0.25 350 / 0.15);
- --color-accent-soft: oklch(60% 0.25 350 / 0.25);
- --cat-diagnostic-bg: #fdf4ff;
- --cat-diagnostic-border: #d946ef;
- --cat-diagnostic-text: #a21caf;
- --cat-quality-bg: #f0fdf4;
- --cat-quality-border: #22c55e;
- --cat-quality-text: #15803d;
- --cat-intensity-bg: #fffbeb;
- --cat-intensity-border: #f59e0b;
- --cat-intensity-text: #b45309;
- --cat-adaptation-bg: #eff6ff;
- --cat-adaptation-border: #3b82f6;
- --cat-adaptation-text: #1d4ed8;
- --cat-enhancement-bg: #fdf2f8;
- --cat-enhancement-border: #ec4899;
- --cat-enhancement-text: #be185d;
- --cat-system-bg: #f5f5f4;
- --cat-system-border: #78716c;
- --cat-system-text: #44403c;
-}
-.skip-link {
- position: absolute;
- top: -100%;
- left: 50%;
- transform: translateX(-50%);
- z-index: 10000;
- padding: var(--spacing-sm) var(--spacing-lg);
- background: var(--color-ink);
- color: var(--color-paper);
- font-weight: 600;
- text-decoration: none;
- border-radius: 0 0 8px 8px;
- transition: top 0.2s ease;
-}
-.skip-link:focus {
- top: 0;
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
-}
-html {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- overflow-x: clip;
-}
-body {
- font-family: var(--font-body);
- font-size: 16px;
- line-height: 1.625;
- color: var(--color-text);
- background: var(--color-paper);
- overflow-x: clip;
- min-height: 100vh;
- min-height: 100dvh;
-}
-h1, h2, h3, h4, h5, h6 {
- font-family: var(--font-display);
- font-weight: 400;
- line-height: 1.1;
- letter-spacing: -0.02em;
- color: var(--color-ink);
-}
-a {
- color: var(--color-accent);
- text-decoration: underline;
- text-decoration-thickness: 1px;
- text-underline-offset: 2px;
- transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
-}
-a:hover {
- color: var(--color-accent-hover);
- text-decoration-thickness: 2px;
-}
-.btn, .footer-logo, [class*="nav-item"] {
- text-decoration: none;
-}
-strong {
- font-weight: 600;
- color: var(--color-ink);
-}
-code {
- font-family: var(--font-mono);
- font-size: 0.9em;
- padding: 0.15em 0.4em;
- background: var(--color-accent-dim);
- color: var(--color-accent);
- border-radius: 4px;
-}
-::selection {
- background: var(--color-accent-soft);
- color: var(--color-ink);
-}
-.grain-overlay {
- position: fixed;
- inset: 0;
- pointer-events: none;
- z-index: 9999;
- opacity: 0.03;
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
- background-repeat: repeat;
-}
-.site-content {
- max-width: var(--width-max);
- margin: 0 auto;
- padding: 0 var(--spacing-lg);
-}
-@media (max-width: 768px) {
- .site-content {
- padding: 0 var(--spacing-md);
- }
-}
-.section-header {
- margin-bottom: var(--spacing-lg);
- position: relative;
-}
-.section-number {
- display: block;
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 500;
- letter-spacing: 0.05em;
- color: var(--color-ash);
- margin-bottom: var(--spacing-xs);
- text-transform: uppercase;
-}
-.section-title {
- font-size: clamp(1.75rem, 4vw, 2.5rem);
- font-weight: 400;
- line-height: 1.2;
- margin: 0;
-}
-.section-subtitle {
- font-size: 1rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- margin-top: var(--spacing-sm);
- max-width: 55ch;
-}
-.cheatsheet-link {
- color: var(--color-accent);
- text-decoration: none;
- font-size: 0.875rem;
- margin-left: 0.5em;
-}
-.cheatsheet-link:hover {
- text-decoration: underline;
-}
-.section-lead {
- font-size: 1rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- max-width: 55ch;
- margin-bottom: var(--spacing-lg);
-}
-.hero-combined {
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 100vh;
- min-height: 100dvh;
- padding: var(--spacing-2xl) 0;
- background: var(--color-paper);
-}
-.hero-combined-container {
- max-width: var(--width-max);
- margin: 0 auto;
- padding: 0 var(--spacing-lg);
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: var(--spacing-xl);
- align-items: center;
- width: 100%;
-}
-@media (max-width: 1024px) {
- .hero-combined-container {
- grid-template-columns: 1fr;
- gap: var(--spacing-lg);
- text-align: center;
- }
-}
-.hero-combined-left {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
-}
-@media (max-width: 1024px) {
- .hero-combined-left {
- align-items: center;
- }
-}
-.hero-title-combined {
- font-family: var(--font-display);
- font-size: clamp(2.5rem, 7vw, 4.5rem);
- font-weight: 300;
- font-style: italic;
- line-height: 1;
- letter-spacing: -0.02em;
- margin: 0;
- color: var(--color-ink);
-}
-.hero-tagline-combined {
- font-family: var(--font-display);
- font-size: clamp(1.125rem, 2.5vw, 1.75rem);
- font-weight: 400;
- font-style: italic;
- line-height: 1.3;
- margin: 0;
- color: var(--color-charcoal);
-}
-.hero-hook-text {
- font-size: 1rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- max-width: 45ch;
- margin: 0;
-}
-.hero-included-box {
- display: flex;
- flex-direction: column;
- gap: 6px;
- padding: 10px 14px;
- border: 1px solid var(--color-mist);
- background: transparent;
- max-width: 45ch;
-}
-.hero-included-title {
- font-family: var(--font-body);
- font-size: 0.5625rem;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
-}
-.hero-included-items {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: 6px;
- font-size: 0.8125rem;
- color: var(--color-charcoal);
- line-height: 1.5;
-}
-.hero-included-items em {
- font-style: normal;
- font-family: var(--font-mono);
- font-size: 0.75rem;
-}
-.hero-included-sep {
- color: var(--color-mist);
-}
-@media (max-width: 500px) {
- .hero-included-items {
- flex-direction: column;
- align-items: flex-start;
- gap: 4px;
- }
- .hero-included-sep {
- display: none;
- }
-}
-.hero-cta-group {
- display: flex;
- align-items: center;
- gap: var(--spacing-lg);
- margin-top: var(--spacing-sm);
-}
-@media (max-width: 600px) {
- .hero-cta-group {
- flex-direction: column;
- gap: var(--spacing-md);
- }
-}
-.hero-cta-combined {
- display: inline-block;
- padding: var(--spacing-sm) var(--spacing-xl);
- font-family: var(--font-body);
- font-size: 0.9rem;
- font-weight: 500;
- letter-spacing: 0.05em;
- text-transform: uppercase;
- text-decoration: none;
- color: var(--color-paper);
- background: var(--color-ink);
- border: none;
- transition: transform 0.2s ease, background 0.2s ease;
-}
-.hero-cta-combined:hover {
- transform: translateY(-2px);
- background: var(--color-accent);
- color: var(--color-paper);
-}
-.hero-logos-inline {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
-}
-.hero-logos-inline .hero-logos-label {
- font-size: 0.6875rem;
- color: var(--color-ash);
- letter-spacing: 0.03em;
-}
-.hero-logos-inline .hero-logos-row {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-.hero-logos-inline .hero-logos-row img {
- border-radius: 4px;
- opacity: 0.7;
- transition: opacity 0.2s ease;
-}
-.hero-logos-inline .hero-logos-row img:hover {
- opacity: 1;
-}
-.hero-combined-right {
- display: flex;
- justify-content: center;
-}
-.hero-combined-right .split-comparison {
- max-width: 520px;
- width: 100%;
-}
-.hero-combined-right .split-container {
- max-width: 100%;
-}
-.hero-bias-tags {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-xs);
- margin-top: var(--spacing-lg);
- padding-top: var(--spacing-md);
- border-top: 1px solid var(--color-mist);
- max-width: var(--width-max);
- margin-left: auto;
- margin-right: auto;
- width: 100%;
- padding-bottom: var(--spacing-md);
-}
-.problem-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.problem-content {
- display: grid;
- gap: var(--spacing-xl);
-}
-.split-comparison {
- position: relative;
- width: 100%;
- max-width: 600px;
- margin: 0 auto;
- padding: 20px;
- margin-top: -20px;
- margin-bottom: -20px;
-}
-.split-container {
- position: relative;
- width: 100%;
- max-width: 500px;
- height: 380px;
- margin: 0 auto;
- border-radius: 12px;
- overflow: hidden;
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- cursor: ew-resize;
- user-select: none;
-}
-.split-before, .split-after {
- position: absolute;
- inset: 0;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.split-before {
- z-index: 1;
-}
-.split-content {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.split-after {
- clip-path: polygon(78% 0%, 100% 0%, 100% 100%, 62% 100%);
- z-index: 2;
- background: var(--color-paper);
-}
-.split-divider {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 70%;
- width: 3px;
- background: var(--color-accent);
- transform: translateX(-50%) skewX(-10deg);
- pointer-events: none;
- z-index: 3;
- box-shadow: 0 0 20px rgba(0,0,0,0.15);
-}
-.split-label {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) skewX(10deg);
- font-size: 0.6875rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-paper);
- background: var(--color-accent);
- padding: 6px 14px;
- border-radius: 4px;
- white-space: nowrap;
- box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-}
-.slop-card {
- width: 280px;
- height: 280px;
- background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%);
- border-radius: 16px;
- padding: 24px;
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
- font-family: 'Inter', system-ui, sans-serif;
- display: flex;
- flex-direction: column;
-}
-.slop-header {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 16px;
-}
-.slop-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: linear-gradient(135deg, #8b5cf6, #7c3aed);
- flex-shrink: 0;
-}
-.slop-text {
- flex: 1;
-}
-.slop-title {
- font-size: 14px;
- font-weight: 600;
- color: #1f2937;
- margin-bottom: 2px;
-}
-.slop-subtitle {
- font-size: 12px;
- color: #6b7280;
-}
-.slop-body {
- font-size: 13px;
- line-height: 1.5;
- color: #4b5563;
- margin-bottom: auto;
- flex: 1;
-}
-.slop-button {
- width: 100%;
- padding: 10px 20px;
- background: linear-gradient(135deg, #8b5cf6, #7c3aed);
- color: white;
- border: none;
- border-radius: 8px;
- font-family: 'Inter', system-ui, sans-serif;
- font-size: 13px;
- font-weight: 500;
- cursor: pointer;
- margin-top: auto;
-}
-.slop-callouts {
- position: absolute;
- inset: 0;
- pointer-events: none;
-}
-.slop-callout {
- position: absolute;
- font-size: 0.625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.06em;
- color: var(--color-accent);
- background: var(--color-paper);
- padding: 4px 8px;
- border: 1px solid var(--color-accent);
- border-radius: 3px;
- white-space: nowrap;
- opacity: 0;
- animation: calloutFadeIn 0.4s var(--ease-out) forwards;
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-.slop-callout[data-point="font"] {
- top: 15%;
- right: 5%;
- animation-delay: 0.1s;
-}
-.slop-callout[data-point="gradient"] {
- top: 40%;
- left: 5%;
- animation-delay: 0.25s;
-}
-.slop-callout[data-point="copy"] {
- bottom: 35%;
- right: 8%;
- animation-delay: 0.4s;
-}
-.slop-callout[data-point="rounded"] {
- bottom: 12%;
- left: 10%;
- animation-delay: 0.55s;
-}
-@keyframes calloutFadeIn {
- from {
- opacity: 0;
- transform: scale(0.9);
- }
- to {
- opacity: 1;
- transform: scale(1);
- }
-}
-.impeccable-card {
- width: 280px;
- height: 300px;
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- padding: var(--spacing-lg);
- text-align: left;
- display: flex;
- flex-direction: column;
-}
-.impeccable-eyebrow {
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 500;
- letter-spacing: 0.15em;
- text-transform: uppercase;
- color: var(--color-accent);
- margin-bottom: var(--spacing-xs);
-}
-.impeccable-title {
- font-family: var(--font-display);
- font-size: 1.75rem;
- font-weight: 300;
- font-style: italic;
- color: var(--color-ink);
- margin-bottom: var(--spacing-sm);
- line-height: 1.1;
-}
-.impeccable-body {
- font-size: 0.875rem;
- line-height: 1.6;
- color: var(--color-ash);
- margin-bottom: auto;
- flex: 1;
-}
-.impeccable-button {
- display: inline-flex;
- margin-top: var(--spacing-sm);
- padding: 0.625rem 1.5rem;
- background: var(--color-ink);
- color: var(--color-paper);
- border: none;
- font-family: var(--font-body);
- font-size: 0.8125rem;
- font-weight: 500;
- letter-spacing: 0.03em;
- cursor: pointer;
- transition: all var(--duration-base) var(--ease-out);
- align-self: flex-start;
-}
-.impeccable-button:hover {
- background: var(--color-accent);
-}
-.split-labels {
- display: flex;
- justify-content: center;
- gap: var(--spacing-xl);
- margin-top: var(--spacing-md);
-}
-.split-label-item {
- display: flex;
- align-items: center;
- gap: var(--spacing-xs);
- font-size: 0.8125rem;
- color: var(--color-ash);
-}
-.split-label-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: var(--color-mist);
-}
-.split-label-dot--accent {
- background: var(--color-accent);
-}
-.solution-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.solution-content {
- display: grid;
- gap: var(--spacing-lg);
-}
-.solution-content .section-lead {
- margin-bottom: 0;
-}
-.solution-visual {
- display: grid;
- grid-template-columns: 1fr auto 1fr;
- gap: var(--spacing-lg);
- align-items: stretch;
-}
-@media (max-width: 900px) {
- .solution-visual {
- grid-template-columns: 1fr;
- gap: var(--spacing-md);
- }
-}
-.solution-visual-interactive {
- width: 100%;
- min-height: 380px;
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- position: relative;
- overflow: hidden;
-}
-.solution-pillar {
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- padding: var(--spacing-lg);
- transition: all var(--duration-base) var(--ease-out);
-}
-.solution-pillar:hover {
- border-color: var(--color-accent);
- transform: translateY(-4px);
- box-shadow: 0 20px 60px var(--color-accent-dim);
-}
-.pillar-header {
- text-align: center;
- margin-bottom: var(--spacing-lg);
- padding-bottom: var(--spacing-md);
- border-bottom: 1px solid var(--color-mist);
-}
-.pillar-icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 56px;
- height: 56px;
- border-radius: 50%;
- background: var(--color-accent-dim);
- color: var(--color-accent);
- margin-bottom: var(--spacing-sm);
-}
-.pillar-title {
- font-family: var(--font-display);
- font-size: 1.75rem;
- font-weight: 400;
- margin: 0 0 var(--spacing-xs);
-}
-.pillar-subtitle {
- font-size: 0.875rem;
- color: var(--color-ash);
- margin: 0;
-}
-.pillar-content {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-sm);
-}
-.pillar-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: var(--spacing-sm);
- background: var(--color-paper);
- border-radius: 4px;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.pillar-item:hover {
- background: var(--color-accent-dim);
-}
-.pillar-item-name {
- font-weight: 500;
- color: var(--color-ink);
- font-size: 0.9375rem;
-}
-.pillar-item-code {
- font-family: var(--font-mono);
- font-size: 0.875rem;
- font-weight: 500;
- color: var(--color-accent);
- background: transparent;
- padding: 0;
-}
-.pillar-item-desc {
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.pillar-item--more {
- justify-content: center;
- font-size: 0.8125rem;
- font-weight: 500;
- color: var(--color-accent);
- background: transparent;
- border: 1px dashed var(--color-mist);
-}
-.solution-connector {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.connector-plus {
- font-family: var(--font-display);
- font-size: 3rem;
- font-weight: 300;
- color: var(--color-accent);
- opacity: 0.5;
-}
-@media (max-width: 900px) {
- .solution-connector {
- padding: var(--spacing-sm) 0;
- }
- .connector-plus {
- font-size: 2rem;
- }
-}
-.skills-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.skills-gallery {
- display: grid;
- grid-template-columns: 200px 1fr;
- gap: var(--spacing-xl);
- align-items: start;
-}
-@media (max-width: 968px) {
- .skills-gallery {
- grid-template-columns: 1fr;
- gap: var(--spacing-lg);
- }
-}
-.skills-nav {
- display: flex;
- flex-direction: column;
- gap: 2px;
- position: sticky;
- top: var(--spacing-lg);
-}
-@media (max-width: 968px) {
- .skills-nav {
- flex-direction: row;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- position: static;
- }
-}
-.skill-nav-item {
- padding: var(--spacing-sm) var(--spacing-md);
- background: transparent;
- border: none;
- border-left: 2px solid transparent;
- color: var(--color-ash);
- font-family: var(--font-body);
- font-size: 0.9375rem;
- font-weight: 400;
- cursor: pointer;
- transition: all 0.2s ease;
- text-align: left;
- text-decoration: none;
- display: block;
-}
-.skill-nav-item:hover {
- color: var(--color-text);
- background: var(--color-cream);
-}
-.skill-nav-item.active {
- color: var(--color-accent);
- border-left-color: var(--color-accent);
- background: var(--color-accent-dim);
- font-weight: 500;
-}
-@media (max-width: 968px) {
- .skill-nav-item {
- border-left: none;
- border-bottom: 2px solid transparent;
- padding: var(--spacing-xs) var(--spacing-md);
- }
- .skill-nav-item.active {
- border-bottom-color: var(--color-accent);
- }
-}
-.skills-showcase {
- display: grid;
- grid-template-columns: 1.2fr 1fr;
- gap: var(--spacing-lg);
- align-items: start;
-}
-@media (max-width: 1100px) {
- .skills-showcase {
- grid-template-columns: 1fr;
- }
-}
-.loading-state {
- padding: var(--spacing-xl);
- text-align: center;
- color: var(--color-ash);
- font-style: italic;
-}
-.mobile-commands-layout {
- display: none;
-}
-@media (max-width: 900px) {
- .mobile-commands-layout {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
- }
- .commands-container {
- display: none;
- }
-}
-.mobile-carousel-wrapper {
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- scrollbar-width: none;
- padding: var(--spacing-xs) 0;
-}
-.mobile-carousel-wrapper::-webkit-scrollbar {
- display: none;
-}
-.mobile-carousel {
- display: flex;
- gap: var(--spacing-xs);
- padding-right: var(--spacing-md);
-}
-.mobile-cmd-pill {
- flex-shrink: 0;
- padding: var(--spacing-sm) var(--spacing-md);
- min-height: 44px;
- font-family: var(--font-mono);
- font-size: 0.8125rem;
- font-weight: 500;
- color: var(--color-ash);
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-radius: 100px;
- cursor: pointer;
- transition: all 0.2s ease;
- white-space: nowrap;
-}
-.mobile-cmd-pill:hover {
- color: var(--color-charcoal);
- border-color: var(--color-charcoal);
-}
-.mobile-cmd-pill.active {
- color: var(--color-paper);
- background: var(--color-ink);
- border-color: var(--color-ink);
-}
-.mobile-demo-area {
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- padding: var(--spacing-sm);
-}
-.mobile-demo-area .demo-split-comparison {
- width: 100%;
-}
-.mobile-demo-area .split-container {
- width: 100%;
- max-width: 100%;
- height: 320px;
-}
-.mobile-demo-area .demo-caption {
- font-size: 0.75rem;
- margin-top: var(--spacing-sm);
-}
-.mobile-info-area {
- padding-top: var(--spacing-sm);
-}
-.mobile-cmd-info {
- display: none;
- padding: var(--spacing-sm) 0;
-}
-.mobile-cmd-info.active {
- display: block;
-}
-.mobile-cmd-name {
- font-family: var(--font-mono);
- font-size: 1.125rem;
- font-weight: 600;
- color: var(--color-ink);
- margin: 0 0 var(--spacing-xs) 0;
-}
-.mobile-cmd-desc {
- font-size: 0.875rem;
- color: var(--color-charcoal);
- line-height: 1.5;
- margin: 0;
-}
-.mobile-cmd-rel {
- margin-top: var(--spacing-xs);
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.mobile-cmd-rel code {
- font-family: var(--font-mono);
- color: var(--color-ink);
-}
-.downloads-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.downloads-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: var(--spacing-lg);
-}
-.download-card {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- padding: var(--spacing-lg);
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- transition: all var(--duration-base) var(--ease-out);
-}
-.download-card:hover {
- border-color: var(--color-accent);
- transform: translateY(-4px);
- box-shadow: 0 20px 60px var(--color-accent-dim);
-}
-.download-card-icon {
- margin-bottom: var(--spacing-sm);
-}
-.download-card-icon img {
- width: 40px;
- height: 40px;
- object-fit: contain;
- border-radius: 8px;
-}
-.download-card-title {
- font-family: var(--font-display);
- font-size: 1.25rem;
- font-weight: 400;
- margin: 0 0 var(--spacing-sm) 0;
-}
-.download-card-note {
- font-size: 0.75rem;
- color: var(--color-ash);
- margin-bottom: var(--spacing-xs);
-}
-.download-card .btn {
- margin-top: var(--spacing-xs);
-}
-.install-command {
- display: flex;
- align-items: center;
- gap: var(--spacing-xs);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- padding: var(--spacing-sm);
- margin-top: var(--spacing-sm);
- width: 100%;
-}
-.install-command code {
- flex: 1;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--color-ink);
- background: transparent;
- padding: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.copy-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 28px;
- height: 28px;
- background: transparent;
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- color: var(--color-ash);
- cursor: pointer;
- flex-shrink: 0;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.copy-btn:hover {
- background: var(--color-accent-dim);
- border-color: var(--color-accent);
- color: var(--color-accent);
-}
-.copy-btn.copied {
- background: var(--color-accent);
- border-color: var(--color-accent);
- color: var(--color-paper);
-}
-.install-hint {
- font-size: 0.75rem;
- color: var(--color-ash);
- margin: var(--spacing-xs) 0 0 0;
-}
-.install-hint code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-mist);
- padding: 2px 5px;
- border-radius: 3px;
-}
-.download-card-details {
- width: 100%;
- margin-top: var(--spacing-sm);
- font-size: 0.8125rem;
- text-align: left;
-}
-.download-card-details summary {
- cursor: pointer;
- color: var(--color-ash);
- font-size: 0.75rem;
- padding: var(--spacing-xs) 0;
- list-style: none;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 4px;
-}
-.download-card-details summary::before {
- content: '▶';
- font-size: 0.5rem;
- transition: transform var(--duration-fast) var(--ease-out);
-}
-.download-card-details[open] summary::before {
- transform: rotate(90deg);
-}
-.download-card-details summary::-webkit-details-marker {
- display: none;
-}
-.download-card-details ol {
- margin: var(--spacing-sm) 0;
- padding-left: var(--spacing-md);
- color: var(--color-charcoal);
- line-height: 1.6;
-}
-.download-card-details li {
- margin-bottom: 4px;
-}
-.download-card-details code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-mist);
- padding: 2px 5px;
- border-radius: 3px;
-}
-.download-card-details a {
- color: var(--color-accent);
- text-decoration: none;
- font-size: 0.75rem;
-}
-.download-card-details a:hover {
- text-decoration: underline;
-}
-.opensource-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
- text-align: center;
-}
-.opensource-content {
- max-width: 500px;
- margin: 0 auto;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-md);
-}
-.opensource-title {
- font-size: clamp(1.5rem, 4vw, 2rem);
- font-weight: 300;
-}
-.opensource-desc {
- font-size: 1.125rem;
- color: var(--color-ash);
- line-height: 1.6;
-}
-.site-footer {
- border-top: 1px solid var(--color-mist);
- padding: var(--spacing-xl) var(--spacing-lg);
- background: var(--color-cream);
-}
-.footer-content {
- max-width: var(--width-max);
- margin: 0 auto;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- gap: var(--spacing-lg);
-}
-@media (max-width: 768px) {
- .footer-content {
- flex-direction: column;
- text-align: center;
- }
-}
-.footer-brand {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-xs);
-}
-.footer-logo {
- font-family: var(--font-display);
- font-size: 1.25rem;
- font-weight: 400;
- color: var(--color-ink);
-}
-.footer-tagline {
- font-size: 0.875rem;
- color: var(--color-ash);
-}
-.footer-links {
- display: flex;
- gap: var(--spacing-lg);
- flex-wrap: wrap;
-}
-.footer-links a {
- font-size: 0.875rem;
- color: var(--color-ash);
- transition: color var(--duration-fast) var(--ease-out);
-}
-.footer-links a:hover {
- color: var(--color-accent);
-}
-.footer-author {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: var(--spacing-md);
- flex-wrap: wrap;
- width: 100%;
- padding-top: var(--spacing-lg);
- margin-top: var(--spacing-md);
- border-top: 1px solid var(--color-mist);
-}
-.footer-author-label {
- font-size: 0.875rem;
- color: var(--color-ash);
-}
-.footer-author-label a {
- color: var(--color-text);
- transition: color var(--duration-fast) var(--ease-out);
-}
-.footer-author-label a:hover {
- color: var(--color-accent);
-}
-.footer-author-links {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
-}
-.footer-social-link {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 36px;
- height: 36px;
- color: var(--color-ash);
- background: transparent;
- border-radius: 50%;
- transition: all var(--duration-fast) var(--ease-out);
- text-decoration: none;
-}
-.footer-social-link:hover {
- color: var(--color-accent);
- background: var(--color-accent-dim);
-}
-.footer-author-divider {
- width: 1px;
- height: 20px;
- background: var(--color-mist);
- margin: 0 var(--spacing-xs);
-}
-.footer-newsletter {
- display: inline-flex;
- align-items: center;
- gap: 6px;
- font-size: 0.875rem;
- font-weight: 500;
- color: var(--color-text);
- text-decoration: none;
- padding: 8px 14px;
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 100px;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.footer-newsletter:hover {
- border-color: var(--color-accent);
- color: var(--color-accent);
-}
-.footer-newsletter svg {
- transition: transform var(--duration-fast) var(--ease-out);
-}
-.footer-newsletter:hover svg {
- transform: translateX(3px);
-}
-@media (max-width: 768px) {
- .footer-author {
- flex-direction: column;
- gap: var(--spacing-sm);
- }
- .footer-author-divider {
- display: none;
- }
-}
-.btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: var(--spacing-xs);
- padding: 1rem 2rem;
- font-family: var(--font-body);
- font-size: 0.9375rem;
- font-weight: 600;
- letter-spacing: 0.03em;
- border: none;
- cursor: pointer;
- transition: all var(--duration-base) var(--ease-out);
- position: relative;
- overflow: hidden;
- text-decoration: none;
-}
-.btn-primary {
- background: var(--color-ink);
- color: var(--color-paper);
-}
-.btn-primary::before {
- content: '';
- position: absolute;
- inset: 0;
- background: var(--color-accent);
- transform: translateY(100%);
- transition: transform var(--duration-base) var(--ease-out);
- z-index: 0;
-}
-.btn-primary:hover::before {
- transform: translateY(0);
-}
-.btn-primary:hover {
- color: var(--color-paper);
-}
-.btn-primary span, .btn-primary svg {
- position: relative;
- z-index: 1;
-}
-.btn-primary:not(:has(span)) {
- position: relative;
- z-index: 1;
-}
-.btn-secondary {
- background: transparent;
- color: var(--color-ink);
- border: 1px solid var(--color-ink);
-}
-.btn-secondary:hover {
- background: var(--color-ink);
- color: var(--color-paper);
-}
-.btn:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
-}
-.btn-primary:focus-visible {
- outline-color: var(--color-paper);
- box-shadow: 0 0 0 4px var(--color-accent);
-}
-.btn-secondary:focus-visible {
- outline-color: var(--color-accent);
-}
-@keyframes revealUp {
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-@keyframes fadeIn {
- to {
- opacity: 1;
- }
-}
-@keyframes float {
- 0%, 100% {
- transform: translateX(-50%) translateY(0);
- }
- 50% {
- transform: translateX(-50%) translateY(-8px);
- }
-}
-@keyframes bounce {
- 0%, 100% {
- transform: translateY(0);
- }
- 50% {
- transform: translateY(4px);
- }
-}
-[data-reveal] {
- opacity: 0;
- transform: translateY(30px);
- transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
-}
-[data-reveal].revealed {
- opacity: 1;
- transform: translateY(0);
-}
-[data-reveal]:nth-child(1) {
- transition-delay: 0s;
-}
-[data-reveal]:nth-child(2) {
- transition-delay: 0.1s;
-}
-[data-reveal]:nth-child(3) {
- transition-delay: 0.2s;
-}
-[data-reveal]:nth-child(4) {
- transition-delay: 0.3s;
-}
-@media (prefers-reduced-motion: reduce) {
- *, *::before, *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
- html {
- scroll-behavior: auto;
- }
- .hero-canvas {
- display: none;
- }
- .hero-scroll-indicator {
- animation: none;
- opacity: 1;
- }
- [data-reveal] {
- opacity: 1;
- transform: none;
- }
- .gallery-frame {
- opacity: 1;
- transform: none;
- }
-}
-.load-error {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- padding: var(--spacing-2xl) var(--spacing-lg);
- gap: var(--spacing-md);
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
-}
-.load-error-icon {
- font-size: 2.5rem;
- color: var(--color-accent);
-}
-.load-error-title {
- font-family: var(--font-display);
- font-size: 1.5rem;
- font-weight: 400;
- color: var(--color-ink);
- margin: 0;
-}
-.load-error-text {
- font-size: 1rem;
- color: var(--color-ash);
- max-width: 40ch;
- line-height: 1.5;
-}
-.load-error-retry {
- margin-top: var(--spacing-sm);
-}
-.bias-tags {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-sm);
- margin-top: var(--spacing-lg);
-}
-.bias-tags-label {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- font-weight: 500;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- color: var(--color-ash);
-}
-.bias-tags-list {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: var(--spacing-xs);
-}
-.bias-tag {
- font-size: 0.75rem;
- font-weight: 500;
- padding: 6px 12px;
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- color: var(--color-charcoal);
- transition: all var(--duration-fast) var(--ease-out);
-}
-.bias-tag:hover {
- border-color: var(--color-accent);
- color: var(--color-accent);
-}
-.antidote-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.patterns-categories {
- margin-bottom: var(--spacing-xl);
-}
-.pattern-tabs {
- display: flex;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- margin-bottom: var(--spacing-lg);
-}
-.pattern-tab {
- background: none;
- border: none;
- border-bottom: 2px solid transparent;
- font-family: var(--font-body);
- font-size: 0.875rem;
- color: var(--color-ash);
- padding: var(--spacing-xs) var(--spacing-sm);
- cursor: pointer;
- transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
-}
-.pattern-tab:hover {
- color: var(--color-charcoal);
-}
-.pattern-tab.active {
- color: var(--color-ink);
- font-weight: 500;
- border-bottom-color: var(--color-accent);
-}
-.pattern-tab:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
- border-radius: 4px;
-}
-.pattern-panel {
- display: none;
-}
-.pattern-panel.active {
- display: block;
-}
-.pattern-columns {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: var(--spacing-xl);
-}
-@media (max-width: 768px) {
- .pattern-columns {
- grid-template-columns: 1fr;
- gap: var(--spacing-md);
- }
-}
-.pattern-column-label {
- display: block;
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- margin-bottom: var(--spacing-sm);
- color: var(--color-ash);
-}
-.pattern-column--anti .pattern-column-label {
- color: var(--color-accent);
-}
-.pattern-column--do .pattern-column-label {
- color: var(--color-success, #22c55e);
-}
-.pattern-list {
- list-style: none;
- padding: 0;
- margin: 0;
- display: flex;
- flex-direction: column;
- gap: var(--spacing-xs);
-}
-.pattern-item {
- font-size: 0.8125rem;
- padding-left: var(--spacing-md);
- position: relative;
- line-height: 1.5;
-}
-.pattern-item--anti {
- color: var(--color-ash);
-}
-.pattern-item--anti::before {
- content: '×';
- position: absolute;
- left: 0;
- color: var(--color-accent);
- font-weight: 600;
-}
-.pattern-item--do {
- color: var(--color-charcoal);
-}
-.pattern-item--do::before {
- content: '✓';
- position: absolute;
- left: 0;
- color: var(--color-success, #22c55e);
- font-weight: 600;
-}
-.contribute-inline {
- font-size: 0.875rem;
- color: var(--color-ash);
- margin-top: var(--spacing-md);
-}
-.contribute-inline a {
- color: var(--color-accent);
- text-decoration: none;
-}
-.contribute-inline a:hover {
- text-decoration: underline;
-}
-.pillar-item--main {
- background: var(--color-accent-dim);
- border: 1px solid var(--color-accent);
-}
-.pillar-item--main .pillar-item-name {
- font-size: 1.125rem;
- font-weight: 600;
- color: var(--color-accent);
-}
-.pillar-item--ref {
- background: transparent;
- padding: var(--spacing-xs) var(--spacing-sm);
-}
-.pillar-item-label {
- font-size: 0.75rem;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--color-ash);
-}
-.pillar-refs {
- display: flex;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- padding: 0 var(--spacing-sm);
-}
-.pillar-ref {
- font-size: 0.6875rem;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 0.03em;
- padding: 4px 10px;
- background: var(--color-paper);
- color: var(--color-ash);
- border: 1px solid var(--color-mist);
- border-radius: 3px;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.pillar-ref:hover {
- border-color: var(--color-accent);
- color: var(--color-accent);
-}
-.pillar-command-group {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: var(--spacing-xs);
- padding: var(--spacing-sm);
- background: var(--color-paper);
- border-radius: 4px;
-}
-.pillar-group-label {
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--color-ash);
- width: 100%;
- margin-bottom: 4px;
-}
-.pillar-command-group .pillar-item-code {
- font-size: 0.8125rem;
- padding: 4px 8px;
- background: var(--color-accent-dim);
- border-radius: 3px;
-}
-.platforms-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.platforms-section .section-subtitle {
- max-width: 60ch;
-}
-.download-options {
- margin-bottom: var(--spacing-lg);
-}
-.prefix-toggle {
- display: inline-flex;
- align-items: center;
- gap: var(--spacing-sm);
- cursor: pointer;
- padding: var(--spacing-sm) var(--spacing-md);
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- transition: border-color var(--duration-fast) var(--ease-out);
-}
-.prefix-toggle:hover {
- border-color: var(--color-ash);
-}
-.prefix-toggle input {
- position: absolute;
- opacity: 0;
- width: 0;
- height: 0;
-}
-.prefix-toggle-slider {
- position: relative;
- width: 44px;
- height: 24px;
- background: var(--color-mist);
- border-radius: 24px;
- transition: background var(--duration-fast) var(--ease-out);
- flex-shrink: 0;
-}
-.prefix-toggle-slider::after {
- content: '';
- position: absolute;
- top: 3px;
- left: 3px;
- width: 18px;
- height: 18px;
- background: var(--color-paper);
- border-radius: 50%;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
- transition: transform var(--duration-fast) var(--ease-out);
-}
-.prefix-toggle input:checked + .prefix-toggle-slider {
- background: var(--color-accent);
-}
-.prefix-toggle input:checked + .prefix-toggle-slider::after {
- transform: translateX(20px);
-}
-.prefix-toggle input:focus-visible + .prefix-toggle-slider {
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
-}
-.prefix-toggle-label {
- font-size: 0.875rem;
- color: var(--color-charcoal);
-}
-.prefix-toggle-label code {
- font-family: var(--font-mono);
- font-size: 0.8125rem;
- background: var(--color-accent-dim);
- color: var(--color-accent);
- padding: 2px 6px;
- border-radius: 4px;
-}
-.download-tip {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-top: var(--spacing-sm);
-}
-.download-tip a {
- color: var(--color-accent);
- text-decoration: none;
-}
-.download-tip a:hover {
- text-decoration: underline;
-}
-.consulting-section {
- padding: var(--spacing-xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.consulting-content {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--spacing-lg);
- flex-wrap: wrap;
-}
-.consulting-actions {
- display: flex;
- gap: var(--spacing-sm);
- flex-shrink: 0;
-}
-.consulting-text {
- flex: 1;
- min-width: 280px;
-}
-.consulting-title {
- font-size: clamp(1.5rem, 4vw, 2rem);
- font-weight: 300;
- font-style: italic;
- margin: 0 0 var(--spacing-sm) 0;
-}
-.consulting-desc {
- font-size: 1rem;
- color: var(--color-charcoal);
- line-height: 1.6;
- margin: 0;
- max-width: 45ch;
-}
-@media (max-width: 600px) {
- .consulting-content {
- flex-direction: column;
- align-items: flex-start;
- }
- .consulting-actions {
- flex-direction: column;
- width: 100%;
- }
- .consulting-actions .btn {
- width: 100%;
- justify-content: center;
- }
-}
+.split-container:before{content:"";background-image:linear-gradient(var(--color-mist) 1px, transparent 1px), linear-gradient(90deg, var(--color-mist) 1px, transparent 1px);opacity:.3;pointer-events:none;background-size:20px 20px;position:absolute;inset:0}.split-container:after{content:"← Drag →";letter-spacing:.1em;text-transform:uppercase;color:var(--color-ash);background:var(--color-paper);opacity:.8;z-index:10;border-radius:4px;padding:4px 12px;font-size:.625rem;font-weight:600;transition:opacity .3s;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.split-container:hover:after{opacity:0}.split-after .impeccable-card{box-shadow:0 10px 40px #00000014}@keyframes splitEntry{0%{opacity:0;transform:translate(-50%)skew(-10deg)scaleY(.8)}to{opacity:1;transform:translate(-50%)skew(-10deg)scaleY(1)}}.split-divider{animation:splitEntry .6s var(--ease-out) .3s backwards}.split-label-item{transition:color var(--duration-fast) var(--ease-out);cursor:default}.split-label-item:hover{color:var(--color-text)}.split-label-item[data-point=after]:hover .split-label-dot--accent{transform:scale(1.3)}.split-label-dot{transition:transform var(--duration-fast) var(--ease-spring)}.split-badge{letter-spacing:.08em;text-transform:uppercase;z-index:5;pointer-events:none;border-radius:3px;padding:3px 8px;font-size:.625rem;font-weight:600;position:absolute;top:10px}.split-badge--before{color:var(--color-ash);background:var(--color-paper);border:1px solid var(--color-mist);left:10px}.split-badge--after{color:var(--color-paper);background:var(--color-accent);right:10px}@media (hover:none){.split-container:after{content:"← Swipe →"}}@media (max-width:600px){.split-label{padding:4px 10px;font-size:.5625rem}}.commands-section{padding:var(--spacing-xl) 0;background:var(--color-paper);position:relative}.commands-gallery{display:block}.commands-container{gap:var(--spacing-2xl);grid-template-columns:1fr 1.2fr;align-items:start;display:grid}@media (max-width:900px){.commands-container{grid-template-columns:1fr}}.command-manual{gap:var(--spacing-sm);flex-direction:column;padding-bottom:20vh;display:flex}.command-category-header{font-family:var(--font-display);color:var(--color-accent);text-transform:uppercase;letter-spacing:.1em;padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);margin-top:var(--spacing-md);border-bottom:1px solid var(--color-mist);font-size:.875rem;font-weight:600}.command-category-header:first-child{margin-top:0}.manual-entry{padding:var(--spacing-lg);padding-left:calc(var(--spacing-lg) + 16px);border-left:2px solid var(--color-mist);transition:border-color .4s var(--ease-out), opacity .4s var(--ease-out), background .4s var(--ease-out), transform .4s var(--ease-out);opacity:.4;cursor:pointer;position:relative;transform:translate(-16px)}.manual-entry:hover{opacity:.7}.manual-entry.active{border-left-color:var(--color-accent);opacity:1;background:linear-gradient(to right, var(--color-bg), transparent);transform:translate(0)}.manual-cmd-name{font-family:var(--font-mono);margin:0 0 var(--spacing-sm);color:var(--color-ink);font-size:1.5rem;font-weight:500}.manual-cmd-desc{color:var(--color-charcoal);margin:0;font-size:1rem;line-height:1.6}.manual-cmd-rel{color:var(--color-ash);margin-top:var(--spacing-sm);flex-wrap:wrap;align-items:center;gap:.5ch;font-size:.8125rem;display:flex}.manual-cmd-rel .rel-icon{color:var(--color-accent);font-weight:600}.manual-cmd-rel code{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-ink);border-radius:3px;padding:2px 6px;font-size:.75rem}.glass-terminal-wrapper{top:var(--spacing-xl);height:calc(100vh - var(--spacing-xl) * 2);min-height:500px;max-height:800px;position:sticky}.terminal-stack{perspective:1200px;height:100%;position:relative}.terminal-stack-tabs{z-index:10;gap:4px;display:flex;position:absolute;top:-31px;right:8px}.terminal-stack-tab{font-family:var(--font-mono);background:var(--color-cream);border:1px solid var(--color-mist);color:var(--color-ash);cursor:pointer;border-bottom:none;border-radius:6px 6px 0 0;padding:5px 12px;font-size:.75rem;transition:all .2s}.terminal-stack-tab:hover{background:var(--color-paper);color:var(--color-charcoal)}.terminal-stack-tab.active{background:var(--color-paper);color:var(--color-ink);border-color:var(--color-mist)}.terminal-window{transform-origin:bottom;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s,filter .3s;position:absolute;inset:0}.terminal-window--demo{z-index:2}.terminal-window--demo.is-back{opacity:.6;filter:brightness(.92);pointer-events:none;z-index:1;transform:translateY(16px)translate(12px)scale(.96)}.terminal-window--source{z-index:1;opacity:.6;filter:brightness(.92);pointer-events:none;transform:translateY(16px)translate(12px)scale(.96)}.terminal-window--source.is-front{opacity:1;filter:brightness();pointer-events:auto;z-index:2;transform:translateY(0)translate(0)scale(1)}.source-window{background:var(--color-paper);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-mist);border-radius:8px;flex-direction:column;height:100%;display:flex;overflow:hidden;box-shadow:0 20px 60px -10px #00000026}.source-header{background:var(--color-cream);border-bottom:1px solid var(--color-mist);flex-shrink:0;align-items:center;gap:8px;padding:12px 16px;display:flex}.source-title{font-family:var(--font-mono);color:var(--color-ink);font-size:.875rem;font-weight:500}.source-body{padding:var(--spacing-md);font-family:var(--font-mono);color:var(--color-charcoal);overscroll-behavior:contain;white-space:pre-wrap;word-break:break-word;background:var(--color-cream);flex:1;font-size:.75rem;line-height:1.5;overflow-y:auto}.source-loading{color:var(--color-ash);font-style:italic}@media (max-width:900px){.glass-terminal-wrapper{display:none}}.glass-terminal{background:var(--color-paper);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-mist);border-radius:8px;flex-direction:column;height:100%;display:flex;overflow:hidden;box-shadow:0 20px 60px -10px #00000026}.terminal-header{background:var(--color-cream);border-bottom:1px solid var(--color-mist);align-items:center;gap:8px;padding:12px 16px;display:flex}.terminal-dot{border-radius:50%;width:10px;height:10px}.terminal-dot.red{background:#ff5f56}.terminal-dot.yellow{background:#ffbd2e}.terminal-dot.green{background:#27c93f}.terminal-title{font-family:var(--font-mono);color:var(--color-ash);margin-left:auto;font-size:.75rem}.terminal-body{padding:var(--spacing-md);font-family:var(--font-mono);color:var(--color-ink);flex-direction:column;flex:1;min-height:0;font-size:.9375rem;display:flex;overflow-y:auto}.terminal-line{margin-bottom:var(--spacing-sm);gap:var(--spacing-sm);line-height:1.5;display:flex}.terminal-prompt{color:var(--color-accent);-webkit-user-select:none;user-select:none;font-weight:700}.terminal-cursor{background:var(--color-accent);vertical-align:middle;width:8px;height:1.2em;animation:1s step-end infinite blink;display:inline-block}.terminal-output{color:var(--color-ash);margin-bottom:var(--spacing-md);white-space:pre-wrap}@media (max-height:800px){.terminal-output{display:none}}.terminal-cmd{color:var(--color-accent);font-weight:600}.terminal-step{color:var(--color-charcoal)}.terminal-done{color:var(--color-success,#22c55e);font-weight:500}.terminal-preview{background:var(--color-paper);margin:var(--spacing-sm) 0;border-radius:12px;flex:1;min-height:0;overflow:hidden}.terminal-cursor-line{flex-shrink:0;margin-top:var(--spacing-sm)!important}.terminal-preview .demo-split-comparison{flex-direction:column;height:100%;display:flex}.terminal-preview .demo-split-comparison .split-container{cursor:ew-resize;-webkit-user-select:none;user-select:none;background:var(--color-cream);flex:1;min-height:0;position:relative;overflow:hidden}.terminal-preview .demo-split-comparison .split-before,.terminal-preview .demo-split-comparison .split-after{padding:var(--spacing-md);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.terminal-preview .demo-split-comparison .split-before{z-index:1;background:var(--color-cream)}.terminal-preview .demo-split-comparison .split-after{z-index:2;background:var(--color-paper);clip-path:polygon(58% 0%,100% 0%,100% 100%,42% 100%)}.terminal-preview .demo-split-comparison .split-content{flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:280px;display:flex}.terminal-preview .demo-split-comparison .split-divider{background:var(--color-accent);pointer-events:none;z-index:3;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)skew(-10deg);box-shadow:0 0 12px #0000001a}.terminal-preview .demo-split-comparison .split-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-paper);background:var(--color-accent);white-space:nowrap;border-radius:3px;padding:4px 10px;font-size:.5625rem;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)skew(10deg)}.terminal-preview .demo-split-comparison .demo-caption{color:var(--color-ash);text-align:center;padding:var(--spacing-sm) var(--spacing-md);flex-shrink:0;font-size:.75rem}@keyframes blink{50%{opacity:0}}.casestudies-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist);position:relative}.transformations-tabbed{margin-top:var(--spacing-xl)}.transformation-tabs{gap:var(--spacing-xs);border-bottom:1px solid var(--color-mist);margin-bottom:var(--spacing-lg);display:flex}.transformation-tab{font-family:var(--font-display);color:var(--color-ash);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;background:0 0;border:none;font-size:.9375rem;font-weight:500;transition:color .2s;position:relative}.transformation-tab:hover{color:var(--color-charcoal)}.transformation-tab.active{color:var(--color-ink)}.transformation-tab.active:after{content:"";background:var(--color-accent);height:2px;position:absolute;bottom:-1px;left:0;right:0}.transformation-panels{position:relative}.transformation-panel{gap:var(--spacing-lg);flex-direction:column;animation:.3s fadeInPanel;display:none}.transformation-panel.active{display:flex}@keyframes fadeInPanel{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.transformation-images{align-items:center;gap:var(--spacing-md);display:flex}.transformation-before,.transformation-after{flex:1;margin:0}.transformation-before img,.transformation-after img,.transformation-placeholder{aspect-ratio:16/10;object-fit:cover;border:1px solid var(--color-mist);cursor:pointer;border-radius:8px;width:100%;transition:transform .2s,box-shadow .2s}.transformation-before img:hover,.transformation-after img:hover,.transformation-placeholder:hover{transform:scale(1.02);box-shadow:0 8px 24px -4px #00000026}.transformation-placeholder{background:linear-gradient(135deg, var(--color-mist) 0%, var(--color-cream) 100%);color:var(--color-ash);justify-content:center;align-items:center;font-size:.8125rem;font-style:italic;display:flex}.transformation-before figcaption,.transformation-after figcaption{text-transform:uppercase;letter-spacing:.05em;color:var(--color-ash);margin-top:var(--spacing-xs);text-align:center;font-size:.75rem;font-weight:600}.transformation-arrow{color:var(--color-accent);flex-shrink:0;font-size:1.5rem;font-weight:300}.transformation-info{max-width:600px}.transformation-title{font-family:var(--font-display);color:var(--color-ink);margin:0 0 var(--spacing-xs);font-size:1.25rem;font-weight:600}.transformation-desc{color:var(--color-charcoal);margin:0 0 var(--spacing-sm);font-size:.9375rem;line-height:1.6}.transformation-commands{flex-wrap:wrap;gap:6px;display:flex}.transformation-command{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-charcoal);border-radius:4px;padding:4px 10px;font-size:.75rem}.lightbox{z-index:1000;opacity:0;visibility:hidden;background:#000000e6;justify-content:center;align-items:center;transition:opacity .3s,visibility .3s;display:flex;position:fixed;inset:0}.lightbox.active{opacity:1;visibility:visible}.lightbox-close{color:#fff;cursor:pointer;opacity:.7;background:0 0;border:none;font-size:2.5rem;line-height:1;transition:opacity .2s;position:absolute;top:20px;right:24px}.lightbox-close:hover{opacity:1}.lightbox-image{object-fit:contain;border-radius:8px;max-width:90vw;max-height:85vh;box-shadow:0 20px 60px #00000080}@media (max-width:768px){.transformation-images{flex-direction:column}.transformation-arrow{transform:rotate(90deg)}.transformation-before,.transformation-after{width:100%}}.hero-version-link{color:var(--color-ash);margin-top:var(--spacing-sm);font-size:.8125rem}.hero-version-link a{color:var(--color-ash);border-bottom:1px solid #0000;text-decoration:none;transition:color .2s,border-color .2s}.hero-version-link a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}.changelog-section{padding:var(--spacing-xl) 0;border-top:1px solid var(--color-mist);position:relative}.changelog-list{flex-direction:column;gap:0;display:flex}.changelog-entry{padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-mist)}.changelog-entry:first-child{border-top:1px solid var(--color-mist)}.changelog-version-header{align-items:baseline;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);display:flex}.changelog-version{font-family:var(--font-mono);color:var(--color-ink);font-size:1.125rem;font-weight:600}.changelog-date{color:var(--color-ash);font-size:.8125rem}.changelog-items{padding-left:var(--spacing-md);color:var(--color-charcoal);margin:0;line-height:1.7}.changelog-items li{margin-bottom:var(--spacing-xs)}.changelog-items code{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-ink);border-radius:3px;padding:2px 6px;font-size:.875em}.faq-section{padding:var(--spacing-xl) 0;border-top:1px solid var(--color-mist);position:relative}.faq-list{flex-direction:column;gap:0;display:flex}.faq-item{border-bottom:1px solid var(--color-mist)}.faq-item:first-child{border-top:1px solid var(--color-mist)}.faq-question{font-family:var(--font-display);color:var(--color-ink);padding:var(--spacing-md) 0;cursor:pointer;justify-content:space-between;align-items:center;font-size:1.125rem;font-weight:500;list-style:none;transition:color .2s;display:flex}.faq-question::-webkit-details-marker{display:none}.faq-question:after{content:"+";font-family:var(--font-body);color:var(--color-accent);transition:transform .3s var(--ease-out);font-size:1.5rem;font-weight:300}.faq-item[open] .faq-question:after{transform:rotate(45deg)}.faq-question:hover{color:var(--color-accent)}.faq-answer{padding:0 0 var(--spacing-md);color:var(--color-charcoal);animation:faqFadeIn .3s var(--ease-out);line-height:1.7}.faq-answer p{margin:0 0 var(--spacing-sm)}.faq-answer p:last-child{margin-bottom:0}.faq-answer ul{margin:var(--spacing-sm) 0;padding-left:var(--spacing-md)}.faq-answer li{margin-bottom:var(--spacing-xs)}.faq-answer code{font-family:var(--font-mono);background:var(--color-mist);color:var(--color-ink);border-radius:3px;padding:2px 6px;font-size:.875em}.faq-answer a{color:var(--color-accent);border-bottom:1px solid #0000;text-decoration:none;transition:border-color .2s}.faq-answer a:hover{border-bottom-color:var(--color-accent)}@keyframes faqFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.skills-section{padding:var(--spacing-xl) 0;background:var(--color-bg);position:relative;overflow:hidden}.skills-gallery{display:block;position:relative}.gallery-track{gap:var(--spacing-lg);scroll-snap-type:x mandatory;padding:var(--spacing-md) var(--spacing-lg) var(--spacing-xl);-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;display:flex;overflow-x:auto}.gallery-track:active{cursor:grabbing}.gallery-track::-webkit-scrollbar{display:none}.gallery-frame{scroll-snap-align:center;background:var(--color-paper);border:1px solid var(--color-mist);opacity:.4;max-width:1100px;transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);border-radius:2px;flex:0 0 80vw;position:relative;overflow:hidden;transform:scale(.95);box-shadow:0 4px 6px -1px #0000000d,0 20px 50px -10px #0000001a}.gallery-frame.active{opacity:1;border-color:var(--color-charcoal);border-width:1px;transform:scale(1);box-shadow:0 20px 25px -5px #0000001a,0 40px 100px -20px #0003}.gallery-content{grid-template-columns:1.2fr 1fr;height:600px;display:grid}@media (max-width:900px){.gallery-frame{flex:0 0 90vw}.gallery-content{grid-template-columns:1fr;height:auto;min-height:600px}}.gallery-visual{background:var(--color-cream);border-right:1px solid var(--color-mist);padding:var(--spacing-lg);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.gallery-info{padding:var(--spacing-xl);flex-direction:column;display:flex;overflow-y:auto}.gallery-header{margin-bottom:var(--spacing-lg)}.gallery-title{font-family:var(--font-display);margin:0 0 var(--spacing-xs);color:var(--color-ink);font-size:2.5rem;font-style:italic}.gallery-meta{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);font-size:.75rem}.gallery-desc{color:var(--color-charcoal);margin-bottom:var(--spacing-xl);max-width:45ch;font-size:1.125rem;line-height:1.6}.gallery-tags{gap:var(--spacing-xs);flex-wrap:wrap;margin-top:auto;display:flex}.gallery-tag{border:1px solid var(--color-mist);color:var(--color-ash);border-radius:4px;padding:6px 12px;font-size:.8125rem}.gallery-map{margin-top:var(--spacing-lg);justify-content:center;gap:8px;display:flex}.gallery-dot{background:var(--color-mist);cursor:pointer;width:40px;height:2px;font:inherit;border:none;padding:0;transition:all .3s;position:relative}.gallery-dot:after{content:"";position:absolute;inset:-10px 0}.gallery-dot:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;border-radius:1px}.gallery-dot.active{background:var(--color-accent);height:4px}.demo-tabbed-container{flex-direction:column;display:flex}.demo-tabs{background:var(--color-paper);border-bottom:1px solid var(--color-mist);justify-content:center;gap:0;margin-bottom:0;display:flex}.demo-tab{padding:var(--spacing-sm) var(--spacing-lg);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--color-ash);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:0 0;border:none;border-bottom:2px solid #0000;font-size:.75rem;font-weight:500}.demo-tab:hover{color:var(--color-text);background:var(--color-cream)}.demo-tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent);background:var(--color-accent-dim)}.demo-panels{flex:1}.demo-panel{display:none}.demo-panel.active{animation:fadeSlideIn .3s var(--ease-out);display:block}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.demo-container{background:var(--color-paper);border:none;border-radius:0;overflow:hidden}.demo-header{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-paper);border-bottom:1px solid var(--color-mist);justify-content:center;align-items:center;min-height:48px;display:flex}.demo-toggle{align-items:center;gap:var(--spacing-md);display:flex}.demo-toggle-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ash);transition:color var(--duration-fast) var(--ease-out);cursor:pointer;font-size:.6875rem;font-weight:600}.demo-toggle-label:hover{color:var(--color-text)}.demo-toggle-label.active{color:var(--color-accent)}.demo-toggle-switch{background:var(--color-mist);cursor:pointer;width:44px;height:24px;transition:background var(--duration-fast) var(--ease-out);font:inherit;border:1px solid #0000;border-radius:12px;padding:0;position:relative}.demo-toggle-switch:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.demo-toggle-switch:hover{border-color:var(--color-ash)}.demo-toggle-switch:after{content:"";background:var(--color-paper);width:16px;height:16px;transition:transform var(--duration-base) var(--ease-spring);border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #00000026}.demo-toggle-switch.active{background:var(--color-accent)}.demo-toggle-switch.active:after{transform:translate(20px)}.demo-viewport{padding:var(--spacing-xl);background:var(--color-cream);min-height:280px;transition:background var(--duration-base) var(--ease-out);justify-content:center;align-items:center;display:flex}.demo-viewport[data-state=after]{background:var(--color-paper)}.demo-caption{padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-mono);letter-spacing:.03em;color:var(--color-ash);background:var(--color-paper);text-align:center;font-size:.6875rem}.uxw-demo{width:100%;max-width:320px;padding:var(--spacing-lg);background:var(--color-paper);border:1px solid var(--color-mist);text-align:center;border-radius:6px}.uxw-error-icon{margin-bottom:var(--spacing-sm);font-size:2rem}.uxw-error-title{color:#c00;margin-bottom:var(--spacing-xs);font-weight:600}.uxw-error-text{color:var(--color-ash);font-size:.875rem}.uxw-error-action{margin-top:var(--spacing-sm);color:var(--color-accent);cursor:pointer;font-size:.875rem;text-decoration:underline}.uxw-error-after .uxw-error-icon{color:var(--color-accent)}.uxw-error-after .uxw-error-title{color:var(--color-text)}.uxw-error-after .uxw-error-text{color:var(--color-charcoal)}.uxw-button-context{color:var(--color-charcoal);margin-bottom:var(--spacing-md);font-size:.875rem;font-weight:500}.uxw-button-row{gap:var(--spacing-sm);justify-content:center;display:flex}.uxw-btn{padding:var(--spacing-xs) var(--spacing-md);cursor:pointer;border:none;border-radius:4px;font-size:.875rem;font-weight:500}.uxw-btn-primary{background:var(--color-text);color:var(--color-paper)}.uxw-btn-secondary{color:var(--color-ash);border:1px solid var(--color-mist);background:0 0}.uxw-btn-danger{color:#fff;background:#c00}.uxw-empty-icon{margin-bottom:var(--spacing-sm);opacity:.4;font-size:2.5rem}.uxw-empty-title{color:var(--color-ash);font-weight:500}.uxw-empty-text{color:var(--color-charcoal);margin-top:var(--spacing-xs);font-size:.875rem}.uxw-empty-action{margin-top:var(--spacing-md)}.uxw-empty-after .uxw-empty-icon{opacity:1}.uxw-empty-after .uxw-empty-title{color:var(--color-text)}.spatial-demo{width:100%;max-width:340px;padding:var(--spacing-md);background:var(--color-paper);border:1px solid var(--color-mist);border-radius:6px}.spatial-grid-before{flex-wrap:wrap;gap:6px;display:flex}.spatial-grid-after{gap:var(--spacing-sm);grid-template-columns:1fr 1fr;display:grid}.spatial-card-item{padding:var(--spacing-sm);background:var(--color-bg);border:1px solid var(--color-mist);color:var(--color-charcoal);text-align:center;border-radius:4px;font-size:.8125rem}.spatial-grid-after .spatial-card-item{width:auto!important}.spatial-hierarchy-before .spatial-h-title,.spatial-hierarchy-before .spatial-h-subtitle,.spatial-hierarchy-before .spatial-h-cta,.spatial-hierarchy-before .spatial-h-link{margin-bottom:var(--spacing-xs);color:var(--color-charcoal);font-size:.9375rem}.spatial-hierarchy-after .spatial-h-title{font-family:var(--font-display);margin-bottom:var(--spacing-xs);color:var(--color-text);font-size:1.75rem;font-style:italic;font-weight:300}.spatial-hierarchy-after .spatial-h-subtitle{text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);margin-bottom:var(--spacing-md);font-size:.6875rem}.spatial-hierarchy-after .spatial-h-cta{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-text);color:var(--color-paper);margin-bottom:var(--spacing-sm);border-radius:4px;font-size:.875rem;font-weight:500;display:inline-block}.spatial-hierarchy-after .spatial-h-link{color:var(--color-ash);font-size:.75rem}.spatial-whitespace-before{padding:var(--spacing-xs)!important}.spatial-whitespace-before .spatial-ws-title{margin-bottom:2px;font-size:1rem;font-weight:600}.spatial-whitespace-before .spatial-ws-price{color:var(--color-ash);margin-bottom:4px;font-size:.875rem}.spatial-whitespace-before .spatial-ws-features{color:var(--color-ash);margin-bottom:6px;font-size:.75rem}.spatial-whitespace-before .spatial-ws-btn{background:var(--color-text);width:100%;color:var(--color-paper);cursor:pointer;border:none;border-radius:3px;padding:6px;font-size:.75rem}.spatial-whitespace-after{padding:var(--spacing-lg)!important}.spatial-whitespace-after .spatial-ws-title{font-family:var(--font-display);margin-bottom:var(--spacing-sm);font-size:1.5rem;font-weight:400}.spatial-whitespace-after .spatial-ws-price{color:var(--color-text);margin-bottom:var(--spacing-sm);font-size:1.25rem;font-weight:600}.spatial-whitespace-after .spatial-ws-features{color:var(--color-ash);margin-bottom:var(--spacing-lg);font-size:.8125rem;line-height:1.6}.spatial-whitespace-after .spatial-ws-btn{width:100%;padding:var(--spacing-sm);background:var(--color-text);color:var(--color-paper);cursor:pointer;border:none;border-radius:4px;font-size:.875rem;font-weight:500}.motion-demo{align-items:center;gap:var(--spacing-sm);flex-direction:column;width:100%;max-width:280px;display:flex}.motion-stagger-demo{align-items:stretch}.motion-list-item{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-mist);color:var(--color-charcoal);border-radius:4px;font-size:.875rem;display:flex}.motion-dot{background:var(--color-accent);border-radius:50%;width:8px;height:8px}.demo-viewport[data-state=after] .motion-list-item{opacity:0;animation:.35s cubic-bezier(.16,1,.3,1) forwards staggerIn;transform:translateY(12px)}.demo-viewport[data-state=after] .motion-list-item:first-child{animation-delay:0s}.demo-viewport[data-state=after] .motion-list-item:nth-child(2){animation-delay:50ms}.demo-viewport[data-state=after] .motion-list-item:nth-child(3){animation-delay:.1s}.demo-viewport[data-state=after] .motion-list-item:nth-child(4){animation-delay:.15s}@keyframes staggerIn{to{opacity:1;transform:translateY(0)}}.motion-btn{cursor:pointer;border:none;border-radius:4px;padding:12px 24px;font-size:.9375rem;font-weight:500}.motion-btn-before{background:var(--color-charcoal);color:var(--color-paper)}.motion-btn-after{background:var(--color-text);color:var(--color-paper);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}.motion-btn-after:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.motion-btn-after:active{transform:translateY(0)scale(.98)}.motion-card{padding:var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-mist);text-align:center;border-radius:6px;min-width:140px}.motion-card-icon{margin-bottom:var(--spacing-xs);font-size:1.5rem}.motion-card-text{color:var(--color-charcoal);font-size:.8125rem}.motion-card-after{transition:all .3s cubic-bezier(.34,1.56,.64,1)}.demo-viewport[data-state=after] .motion-card-after{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.demo-viewport[data-state=after] .motion-card-after{background:color-mix(in oklch, var(--color-accent) 10%, var(--color-paper))}}.demo-viewport[data-state=after] .motion-card-after{border-color:var(--color-accent)}.demo-viewport[data-state=after] .motion-card-after .motion-card-icon{animation:.4s cubic-bezier(.34,1.56,.64,1) checkPop}@keyframes checkPop{50%{transform:scale(1.3)}}.typo-demo{text-align:left;width:100%;max-width:320px}.typo-pairing-before{font-family:Inter,system-ui,sans-serif}.typo-pairing-before .typo-heading{margin-bottom:var(--spacing-xs);font-size:1.5rem;font-weight:600}.typo-pairing-before .typo-body{color:var(--color-ash);font-size:.9375rem;line-height:1.5}.typo-pairing-after .typo-heading{font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:var(--spacing-sm);color:var(--color-text);font-size:2rem;font-style:italic;font-weight:300}.typo-pairing-after .typo-body{font-family:var(--font-body);color:var(--color-charcoal);font-size:.9375rem;line-height:1.7}.typo-hierarchy-before .typo-h1{margin-bottom:4px;font-size:1.125rem;font-weight:600}.typo-hierarchy-before .typo-meta{color:var(--color-ash);margin-bottom:var(--spacing-xs);font-size:.9375rem}.typo-hierarchy-before .typo-p{color:var(--color-charcoal);font-size:.875rem;line-height:1.5}.typo-hierarchy-after .typo-h1{font-family:var(--font-display);letter-spacing:-.03em;margin-bottom:2px;font-size:2.25rem;font-weight:300;line-height:1.1}.typo-hierarchy-after .typo-meta{text-transform:uppercase;letter-spacing:.12em;color:var(--color-accent);margin-bottom:var(--spacing-md);font-size:.6875rem}.typo-hierarchy-after .typo-p{color:var(--color-ash);font-size:.9375rem;line-height:1.7}.int-demo{gap:var(--spacing-md);flex-direction:column;width:100%;max-width:280px;display:flex}.int-states-demo{gap:var(--spacing-lg)}.int-state-row{align-items:center;gap:var(--spacing-md);display:flex}.int-state-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-ash);width:40px;font-size:.6875rem}.int-btn{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;border-radius:4px;flex:1;font-size:.875rem;font-weight:500}.int-btn-poor{background:var(--color-charcoal);color:var(--color-paper);border:none}.int-btn-good{background:var(--color-text);color:var(--color-paper);border:2px solid #0000;transition:all .15s}.int-btn-good:hover{background:var(--color-charcoal)}.int-btn-good:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent);outline:none}@supports (color:color-mix(in lab, red, red)){.int-btn-good:focus{box-shadow:0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent)}}.int-btn-good:active{transform:scale(.98)}.int-aff-item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;border-radius:4px;font-size:.875rem}.int-aff-poor{color:var(--color-charcoal)}.int-aff-good{color:var(--color-accent);text-underline-offset:2px;text-decoration:underline}.int-aff-good:after{content:" →"}.int-affordance-after .int-aff-item{background:var(--color-bg);border:1px solid var(--color-mist);color:var(--color-accent);text-underline-offset:2px;text-decoration:underline;transition:background .15s}.int-affordance-after .int-aff-item:hover{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.int-affordance-after .int-aff-item:hover{background:color-mix(in oklch, var(--color-accent) 5%, var(--color-paper))}}.int-affordance-after .int-aff-item:after{content:" →"}.int-feedback-before,.int-feedback-after{align-items:center;gap:var(--spacing-md);flex-direction:row;display:flex}.int-fb-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.int-fb-btn svg{width:22px;height:22px}.int-fb-silent{background:var(--color-mist);color:var(--color-ash)}.int-fb-active{background:var(--color-charcoal);color:var(--color-paper);transition:all .15s cubic-bezier(.34,1.56,.64,1)}.int-fb-active:hover{transform:scale(1.1)}.int-fb-active:active{transform:scale(.95)}.int-fb-active.liked{background:var(--color-accent);animation:.35s cubic-bezier(.34,1.56,.64,1) heartPop}@keyframes heartPop{50%{transform:scale(1.25)}}.int-fb-label{color:var(--color-charcoal);font-size:.875rem}.color-demo{width:100%;max-width:300px}.color-palette-before,.color-palette-after{gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--color-paper);border:1px solid var(--color-mist);border-radius:6px;flex-wrap:wrap;display:flex}.color-swatch{border-radius:4px;width:40px;height:40px;transition:background .2s}.color-card{width:100%;margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:var(--color-paper);border:1px solid var(--color-mist);border-radius:4px;flex-direction:column;gap:4px;display:flex}.color-card span{font-size:.8125rem;font-weight:500;transition:color .2s}.color-card button{cursor:pointer;border:none;border-radius:3px;padding:6px;font-size:.75rem;font-weight:500;transition:all .2s}.color-palette-before .swatch-1{background:#ff6b6b}.color-palette-before .swatch-2{background:#4ecdc4}.color-palette-before .swatch-3{background:#ffe66d}.color-palette-before .swatch-4{background:#95e1d3}.color-palette-before .swatch-5{background:#f38181}.color-palette-before .card-title{color:#ff6b6b}.color-palette-before .card-subtitle{color:#4ecdc4}.color-palette-before .card-btn{color:#333;background:#ffe66d}.color-palette-after .swatch-1{background:var(--color-text)}.color-palette-after .swatch-2{background:var(--color-charcoal)}.color-palette-after .swatch-3{background:var(--color-ash)}.color-palette-after .swatch-4{background:var(--color-mist)}.color-palette-after .swatch-5{background:var(--color-accent)}.color-palette-after .card-title{color:var(--color-text)}.color-palette-after .card-subtitle{color:var(--color-ash)}.color-palette-after .card-btn{background:var(--color-accent);color:var(--color-paper)}.color-accent-card{padding:var(--spacing-md);border-radius:6px}.color-accent-before .color-accent-card{background:#f5f5f5;border:1px solid #e0e0e0}.color-accent-before .color-accent-title{color:#333;margin-bottom:4px;font-weight:600}.color-accent-before .color-accent-text{color:#666;margin-bottom:var(--spacing-sm);font-size:.8125rem}.color-accent-before .color-accent-btn{width:100%;padding:var(--spacing-xs);color:#fff;cursor:pointer;background:#333;border:none;border-radius:4px;font-size:.8125rem}.color-accent-after .color-accent-card{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.color-accent-after .color-accent-card{background:color-mix(in oklch, var(--color-accent) 8%, var(--color-paper))}}.color-accent-after .color-accent-card{border:1px solid var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.color-accent-after .color-accent-card{border:1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper))}}.color-accent-after .color-accent-title{color:var(--color-text);margin-bottom:4px;font-weight:600}.color-accent-after .color-accent-text{color:var(--color-ash);margin-bottom:var(--spacing-sm);font-size:.8125rem}.color-accent-after .color-accent-btn{width:100%;padding:var(--spacing-xs);background:var(--color-accent);color:var(--color-paper);cursor:pointer;border:none;border-radius:4px;font-size:.8125rem;font-weight:500}.color-contrast-static{gap:var(--spacing-sm);flex-direction:column;display:flex}.contrast-example{padding:var(--spacing-md);text-align:center;border-radius:6px}.contrast-fail{color:#a0a0a0;background:#f0f0f0}.contrast-pass{background:var(--color-charcoal);color:var(--color-paper)}.contrast-badge{text-transform:uppercase;letter-spacing:.1em;border-radius:2px;margin-bottom:4px;padding:2px 6px;font-size:.5625rem;font-weight:600;display:inline-block}.contrast-fail .contrast-badge{background:#ddd}.contrast-pass .contrast-badge{background:var(--color-accent);color:var(--color-paper)}.contrast-text{margin-bottom:2px;font-size:1rem;font-weight:500}.contrast-ratio{opacity:.7;font-size:.6875rem}.resp-demo{width:100%;max-width:340px}.resp-touch-demo{gap:var(--spacing-lg);flex-direction:column;display:flex}.resp-touch-row{align-items:center;gap:var(--spacing-md);display:flex}.resp-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-ash);width:70px;font-size:.6875rem}.resp-touch-targets{gap:4px;display:flex}.resp-touch-targets button{cursor:pointer;border:none;border-radius:4px;font-weight:500}.resp-touch-bad button{background:var(--color-mist);width:24px;height:24px;color:var(--color-ash);font-size:.75rem}.resp-touch-good button{background:var(--color-text);width:44px;height:44px;color:var(--color-paper);font-size:1rem}.resp-fluid-demo{padding:var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-mist);border-radius:6px}.resp-fluid-container{gap:var(--spacing-md);flex-direction:column;display:flex}.resp-fluid-fixed,.resp-fluid-adaptive{color:var(--color-ash);font-size:.75rem}.resp-fluid-fixed span,.resp-fluid-adaptive span{margin-bottom:4px;display:block}.resp-fluid-bar{background:var(--color-mist);border-radius:4px;height:24px}.resp-fluid-adaptive .resp-fluid-bar{background:var(--color-accent)}.resp-adapt-demo{gap:var(--spacing-sm);align-items:flex-end;display:flex}.resp-device{text-align:center}.resp-device>span{color:var(--color-ash);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;font-size:.625rem;display:block}.resp-device-screen{background:var(--color-paper);border:2px solid var(--color-mist);border-radius:4px;flex-direction:column;gap:3px;padding:4px;display:flex}.resp-device-mobile .resp-device-screen{width:50px;height:80px}.resp-device-tablet .resp-device-screen{width:80px;height:60px}.resp-device-desktop .resp-device-screen{width:120px;height:70px}.resp-block{background:var(--color-mist);border-radius:2px}.resp-block-row{flex:1;gap:3px;display:flex}.resp-header{background:var(--color-charcoal);height:16px}.resp-sidebar{background:var(--color-charcoal);width:30%}.resp-content{flex:1}@keyframes fadeIn{to{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}*,:before,:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{max-width:100%;display:block}button,input,textarea,select{font:inherit}:root{--font-display:"Cormorant Garamond", Georgia, serif;--font-body:"Instrument Sans", system-ui, sans-serif;--font-mono:"Space Grotesk", monospace;--spacing-xs:8px;--spacing-sm:16px;--spacing-md:24px;--spacing-lg:32px;--spacing-xl:48px;--spacing-2xl:80px;--spacing-3xl:120px;--width-max:1400px;--width-content:900px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.15s;--duration-base:.3s;--duration-slow:.6s;--duration-slower:.8s;--duration-slowest:1.2s;--color-ink:oklch(10% 0 0);--color-text:oklch(10% 0 0);--color-paper:oklch(98% 0 0);--color-cream:oklch(96% .005 350);--color-charcoal:oklch(25% 0 0);--color-ash:oklch(55% 0 0);--color-mist:oklch(92% 0 0);--color-bg:oklch(96% .005 350);--color-accent:oklch(60% .25 350);--color-accent-hover:oklch(52% .25 350);--color-accent-dim:oklch(60% .25 350/.15);--color-accent-soft:oklch(60% .25 350/.25);--cat-diagnostic-bg:#fdf4ff;--cat-diagnostic-border:#d946ef;--cat-diagnostic-text:#a21caf;--cat-quality-bg:#f0fdf4;--cat-quality-border:#22c55e;--cat-quality-text:#15803d;--cat-intensity-bg:#fffbeb;--cat-intensity-border:#f59e0b;--cat-intensity-text:#b45309;--cat-adaptation-bg:#eff6ff;--cat-adaptation-border:#3b82f6;--cat-adaptation-text:#1d4ed8;--cat-enhancement-bg:#fdf2f8;--cat-enhancement-border:#ec4899;--cat-enhancement-text:#be185d;--cat-system-bg:#f5f5f4;--cat-system-border:#78716c;--cat-system-text:#44403c}.skip-link{z-index:10000;padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-ink);color:var(--color-paper);border-radius:0 0 8px 8px;font-weight:600;text-decoration:none;transition:top .2s;position:absolute;top:-100%;left:50%;transform:translate(-50%)}.skip-link:focus{outline:2px solid var(--color-accent);outline-offset:2px;top:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;overflow-x:clip}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-paper);min-height:100dvh;font-size:16px;line-height:1.625;overflow-x:clip}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-ink);font-weight:400;line-height:1.1}a{color:var(--color-accent);text-underline-offset:2px;transition:color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);text-decoration:underline;text-decoration-thickness:1px}a:hover{color:var(--color-accent-hover);text-decoration-thickness:2px}.btn,.footer-logo,[class*=nav-item]{text-decoration:none}strong{color:var(--color-ink);font-weight:600}code{font-family:var(--font-mono);background:var(--color-accent-dim);color:var(--color-accent);border-radius:4px;padding:.15em .4em;font-size:.9em}::selection{background:var(--color-accent-soft);color:var(--color-ink)}.grain-overlay{pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;position:fixed;inset:0}.site-content{max-width:var(--width-max);padding:0 var(--spacing-lg);margin:0 auto}@media (max-width:768px){.site-content{padding:0 var(--spacing-md)}}.section-header{margin-bottom:var(--spacing-lg);position:relative}.section-number{font-family:var(--font-mono);letter-spacing:.05em;color:var(--color-ash);margin-bottom:var(--spacing-xs);text-transform:uppercase;font-size:.625rem;font-weight:500;display:block}.section-title{margin:0;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:400;line-height:1.2}.section-subtitle{color:var(--color-charcoal);margin-top:var(--spacing-sm);max-width:55ch;font-size:1rem;line-height:1.6}.cheatsheet-link{color:var(--color-accent);margin-left:.5em;font-size:.875rem;text-decoration:none}.cheatsheet-link:hover{text-decoration:underline}.section-lead{color:var(--color-charcoal);max-width:55ch;margin-bottom:var(--spacing-lg);font-size:1rem;line-height:1.6}.hero-combined{min-height:100dvh;padding:var(--spacing-2xl) 0;background:var(--color-paper);flex-direction:column;justify-content:center;display:flex}.hero-combined-container{max-width:var(--width-max);padding:0 var(--spacing-lg);gap:var(--spacing-xl);grid-template-columns:1fr 1fr;align-items:center;width:100%;margin:0 auto;display:grid}@media (max-width:1024px){.hero-combined-container{gap:var(--spacing-lg);text-align:center;grid-template-columns:1fr}}.hero-combined-left{gap:var(--spacing-md);flex-direction:column;display:flex}@media (max-width:1024px){.hero-combined-left{align-items:center}}.hero-title-combined{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-ink);margin:0;font-size:clamp(2.5rem,7vw,4.5rem);font-style:italic;font-weight:300;line-height:1}.hero-tagline-combined{font-family:var(--font-display);color:var(--color-charcoal);margin:0;font-size:clamp(1.125rem,2.5vw,1.75rem);font-style:italic;font-weight:400;line-height:1.3}.hero-hook-text{color:var(--color-charcoal);max-width:45ch;margin:0;font-size:1rem;line-height:1.6}.hero-included-box{border:1px solid var(--color-mist);background:0 0;flex-direction:column;gap:6px;max-width:45ch;padding:10px 14px;display:flex}.hero-included-title{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ash);font-size:.5625rem;font-weight:500}.hero-included-items{color:var(--color-charcoal);flex-wrap:wrap;align-items:center;gap:6px;font-size:.8125rem;line-height:1.5;display:flex}.hero-included-items em{font-style:normal;font-family:var(--font-mono);font-size:.75rem}.hero-included-sep{color:var(--color-mist)}@media (max-width:500px){.hero-included-items{flex-direction:column;align-items:flex-start;gap:4px}.hero-included-sep{display:none}}.hero-cta-group{align-items:center;gap:var(--spacing-lg);margin-top:var(--spacing-sm);display:flex}@media (max-width:600px){.hero-cta-group{gap:var(--spacing-md);flex-direction:column}}.hero-cta-combined{padding:var(--spacing-sm) var(--spacing-xl);font-family:var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--color-paper);background:var(--color-ink);border:none;font-size:.9rem;font-weight:500;text-decoration:none;transition:transform .2s,background .2s;display:inline-block}.hero-cta-combined:hover{background:var(--color-accent);color:var(--color-paper);transform:translateY(-2px)}.hero-logos-inline{align-items:center;gap:var(--spacing-sm);display:flex}.hero-logos-inline .hero-logos-label{color:var(--color-ash);letter-spacing:.03em;font-size:.6875rem}.hero-logos-inline .hero-logos-row{align-items:center;gap:8px;display:flex}.hero-logos-inline .hero-logos-row img{opacity:.7;border-radius:4px;transition:opacity .2s}.hero-logos-inline .hero-logos-row img:hover{opacity:1}.hero-combined-right{justify-content:center;display:flex}.hero-combined-right .split-comparison{width:100%;max-width:520px}.hero-combined-right .split-container{max-width:100%}.hero-bias-tags{align-items:center;gap:var(--spacing-xs);margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--color-mist);max-width:var(--width-max);width:100%;padding-bottom:var(--spacing-md);flex-direction:column;margin-left:auto;margin-right:auto;display:flex}.problem-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.problem-content{gap:var(--spacing-xl);display:grid}.split-comparison{width:100%;max-width:600px;margin:-20px auto;padding:20px;position:relative}.split-container{background:var(--color-cream);border:1px solid var(--color-mist);cursor:ew-resize;-webkit-user-select:none;user-select:none;border-radius:12px;width:100%;max-width:500px;height:380px;margin:0 auto;position:relative;overflow:hidden}.split-before,.split-after{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.split-before{z-index:1}.split-content{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.split-after{clip-path:polygon(78% 0%,100% 0%,100% 100%,62% 100%);z-index:2;background:var(--color-paper)}.split-divider{background:var(--color-accent);pointer-events:none;z-index:3;width:3px;position:absolute;top:0;bottom:0;left:70%;transform:translate(-50%)skew(-10deg);box-shadow:0 0 20px #00000026}.split-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-paper);background:var(--color-accent);white-space:nowrap;border-radius:4px;padding:6px 14px;font-size:.6875rem;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)skew(10deg);box-shadow:0 2px 8px #0003}.slop-card{background:linear-gradient(135deg,#f5f3ff 0%,#ede9fe 50%,#ddd6fe 100%);border-radius:16px;flex-direction:column;width:280px;height:280px;padding:24px;font-family:Inter,system-ui,sans-serif;display:flex;box-shadow:0 4px 6px -1px #0000001a}.slop-header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.slop-avatar{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;flex-shrink:0;width:40px;height:40px}.slop-text{flex:1}.slop-title{color:#1f2937;margin-bottom:2px;font-size:14px;font-weight:600}.slop-subtitle{color:#6b7280;font-size:12px}.slop-body{color:#4b5563;flex:1;margin-bottom:auto;font-size:13px;line-height:1.5}.slop-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:8px;width:100%;margin-top:auto;padding:10px 20px;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:500}.slop-callouts{pointer-events:none;position:absolute;inset:0}.slop-callout{text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent);background:var(--color-paper);border:1px solid var(--color-accent);white-space:nowrap;opacity:0;animation:calloutFadeIn .4s var(--ease-out) forwards;border-radius:3px;padding:4px 8px;font-size:.625rem;font-weight:600;position:absolute;box-shadow:0 2px 8px #0000001a}.slop-callout[data-point=font]{animation-delay:.1s;top:15%;right:5%}.slop-callout[data-point=gradient]{animation-delay:.25s;top:40%;left:5%}.slop-callout[data-point=copy]{animation-delay:.4s;bottom:35%;right:8%}.slop-callout[data-point=rounded]{animation-delay:.55s;bottom:12%;left:10%}@keyframes calloutFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.impeccable-card{background:var(--color-paper);border:1px solid var(--color-mist);width:280px;height:300px;padding:var(--spacing-lg);text-align:left;flex-direction:column;display:flex}.impeccable-eyebrow{font-family:var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--spacing-xs);font-size:.625rem;font-weight:500}.impeccable-title{font-family:var(--font-display);color:var(--color-ink);margin-bottom:var(--spacing-sm);font-size:1.75rem;font-style:italic;font-weight:300;line-height:1.1}.impeccable-body{color:var(--color-ash);flex:1;margin-bottom:auto;font-size:.875rem;line-height:1.6}.impeccable-button{margin-top:var(--spacing-sm);background:var(--color-ink);color:var(--color-paper);font-family:var(--font-body);letter-spacing:.03em;cursor:pointer;transition:all var(--duration-base) var(--ease-out);border:none;align-self:flex-start;padding:.625rem 1.5rem;font-size:.8125rem;font-weight:500;display:inline-flex}.impeccable-button:hover{background:var(--color-accent)}.split-labels{justify-content:center;gap:var(--spacing-xl);margin-top:var(--spacing-md);display:flex}.split-label-item{align-items:center;gap:var(--spacing-xs);color:var(--color-ash);font-size:.8125rem;display:flex}.split-label-dot{background:var(--color-mist);border-radius:50%;width:8px;height:8px}.split-label-dot--accent{background:var(--color-accent)}.solution-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.solution-content{gap:var(--spacing-lg);display:grid}.solution-content .section-lead{margin-bottom:0}.solution-visual{gap:var(--spacing-lg);grid-template-columns:1fr auto 1fr;align-items:stretch;display:grid}@media (max-width:900px){.solution-visual{gap:var(--spacing-md);grid-template-columns:1fr}}.solution-visual-interactive{background:var(--color-paper);border:1px solid var(--color-mist);border-radius:8px;width:100%;min-height:380px;position:relative;overflow:hidden}.solution-pillar{background:var(--color-cream);border:1px solid var(--color-mist);padding:var(--spacing-lg);transition:all var(--duration-base) var(--ease-out)}.solution-pillar:hover{border-color:var(--color-accent);box-shadow:0 20px 60px var(--color-accent-dim);transform:translateY(-4px)}.pillar-header{text-align:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-mist)}.pillar-icon{background:var(--color-accent-dim);width:56px;height:56px;color:var(--color-accent);margin-bottom:var(--spacing-sm);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.pillar-title{font-family:var(--font-display);margin:0 0 var(--spacing-xs);font-size:1.75rem;font-weight:400}.pillar-subtitle{color:var(--color-ash);margin:0;font-size:.875rem}.pillar-content{gap:var(--spacing-sm);flex-direction:column;display:flex}.pillar-item{padding:var(--spacing-sm);background:var(--color-paper);transition:all var(--duration-fast) var(--ease-out);border-radius:4px;justify-content:space-between;align-items:center;display:flex}.pillar-item:hover{background:var(--color-accent-dim)}.pillar-item-name{color:var(--color-ink);font-size:.9375rem;font-weight:500}.pillar-item-code{font-family:var(--font-mono);color:var(--color-accent);background:0 0;padding:0;font-size:.875rem;font-weight:500}.pillar-item-desc{color:var(--color-ash);font-size:.75rem}.pillar-item--more{color:var(--color-accent);border:1px dashed var(--color-mist);background:0 0;justify-content:center;font-size:.8125rem;font-weight:500}.solution-connector{justify-content:center;align-items:center;display:flex}.connector-plus{font-family:var(--font-display);color:var(--color-accent);opacity:.5;font-size:3rem;font-weight:300}@media (max-width:900px){.solution-connector{padding:var(--spacing-sm) 0}.connector-plus{font-size:2rem}}.skills-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.skills-gallery{gap:var(--spacing-xl);grid-template-columns:200px 1fr;align-items:start;display:grid}@media (max-width:968px){.skills-gallery{gap:var(--spacing-lg);grid-template-columns:1fr}}.skills-nav{top:var(--spacing-lg);flex-direction:column;gap:2px;display:flex;position:sticky}@media (max-width:968px){.skills-nav{gap:var(--spacing-xs);flex-flow:wrap;position:static}}.skill-nav-item{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-ash);font-family:var(--font-body);cursor:pointer;text-align:left;background:0 0;border:none;border-left:2px solid #0000;font-size:.9375rem;font-weight:400;text-decoration:none;transition:all .2s;display:block}.skill-nav-item:hover{color:var(--color-text);background:var(--color-cream)}.skill-nav-item.active{color:var(--color-accent);border-left-color:var(--color-accent);background:var(--color-accent-dim);font-weight:500}@media (max-width:968px){.skill-nav-item{padding:var(--spacing-xs) var(--spacing-md);border-bottom:2px solid #0000;border-left:none}.skill-nav-item.active{border-bottom-color:var(--color-accent)}}.skills-showcase{gap:var(--spacing-lg);grid-template-columns:1.2fr 1fr;align-items:start;display:grid}@media (max-width:1100px){.skills-showcase{grid-template-columns:1fr}}.loading-state{padding:var(--spacing-xl);text-align:center;color:var(--color-ash);font-style:italic}.mobile-commands-layout{display:none}@media (max-width:900px){.mobile-commands-layout{gap:var(--spacing-md);flex-direction:column;display:flex}.commands-container{display:none}}.mobile-carousel-wrapper{-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:var(--spacing-xs) 0;overflow-x:auto}.mobile-carousel-wrapper::-webkit-scrollbar{display:none}.mobile-carousel{gap:var(--spacing-xs);padding-right:var(--spacing-md);display:flex}.mobile-cmd-pill{padding:var(--spacing-sm) var(--spacing-md);min-height:44px;font-family:var(--font-mono);color:var(--color-ash);background:var(--color-cream);border:1px solid var(--color-mist);cursor:pointer;white-space:nowrap;border-radius:100px;flex-shrink:0;font-size:.8125rem;font-weight:500;transition:all .2s}.mobile-cmd-pill:hover{color:var(--color-charcoal);border-color:var(--color-charcoal)}.mobile-cmd-pill.active{color:var(--color-paper);background:var(--color-ink);border-color:var(--color-ink)}.mobile-demo-area{background:var(--color-cream);border:1px solid var(--color-mist);padding:var(--spacing-sm);border-radius:8px}.mobile-demo-area .demo-split-comparison{width:100%}.mobile-demo-area .split-container{width:100%;max-width:100%;height:320px}.mobile-demo-area .demo-caption{margin-top:var(--spacing-sm);font-size:.75rem}.mobile-info-area{padding-top:var(--spacing-sm)}.mobile-cmd-info{padding:var(--spacing-sm) 0;display:none}.mobile-cmd-info.active{display:block}.mobile-cmd-name{font-family:var(--font-mono);color:var(--color-ink);margin:0 0 var(--spacing-xs) 0;font-size:1.125rem;font-weight:600}.mobile-cmd-desc{color:var(--color-charcoal);margin:0;font-size:.875rem;line-height:1.5}.mobile-cmd-rel{margin-top:var(--spacing-xs);color:var(--color-ash);font-size:.75rem}.mobile-cmd-rel code{font-family:var(--font-mono);color:var(--color-ink)}.downloads-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.downloads-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.download-card{text-align:center;padding:var(--spacing-lg);background:var(--color-cream);border:1px solid var(--color-mist);transition:all var(--duration-base) var(--ease-out);flex-direction:column;align-items:center;display:flex}.download-card:hover{border-color:var(--color-accent);box-shadow:0 20px 60px var(--color-accent-dim);transform:translateY(-4px)}.download-card-icon{margin-bottom:var(--spacing-sm)}.download-card-icon img{object-fit:contain;border-radius:8px;width:40px;height:40px}.download-card-title{font-family:var(--font-display);margin:0 0 var(--spacing-sm) 0;font-size:1.25rem;font-weight:400}.download-card-note{color:var(--color-ash);margin-bottom:var(--spacing-xs);font-size:.75rem}.download-card .btn{margin-top:var(--spacing-xs)}.install-command{align-items:center;gap:var(--spacing-xs);background:var(--color-paper);border:1px solid var(--color-mist);padding:var(--spacing-sm);margin-top:var(--spacing-sm);border-radius:6px;width:100%;display:flex}.install-command code{font-family:var(--font-mono);color:var(--color-ink);white-space:nowrap;text-overflow:ellipsis;background:0 0;flex:1;padding:0;font-size:.75rem;overflow:hidden}.copy-btn{border:1px solid var(--color-mist);width:28px;height:28px;color:var(--color-ash);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:0 0;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.copy-btn:hover{background:var(--color-accent-dim);border-color:var(--color-accent);color:var(--color-accent)}.copy-btn.copied{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-paper)}.install-hint{color:var(--color-ash);margin:var(--spacing-xs) 0 0 0;font-size:.75rem}.install-hint code{font-family:var(--font-mono);background:var(--color-mist);border-radius:3px;padding:2px 5px;font-size:.6875rem}.download-card-details{width:100%;margin-top:var(--spacing-sm);text-align:left;font-size:.8125rem}.download-card-details summary{cursor:pointer;color:var(--color-ash);padding:var(--spacing-xs) 0;justify-content:center;align-items:center;gap:4px;font-size:.75rem;list-style:none;display:flex}.download-card-details summary:before{content:"▶";transition:transform var(--duration-fast) var(--ease-out);font-size:.5rem}.download-card-details[open] summary:before{transform:rotate(90deg)}.download-card-details summary::-webkit-details-marker{display:none}.download-card-details ol{margin:var(--spacing-sm) 0;padding-left:var(--spacing-md);color:var(--color-charcoal);line-height:1.6}.download-card-details li{margin-bottom:4px}.download-card-details code{font-family:var(--font-mono);background:var(--color-mist);border-radius:3px;padding:2px 5px;font-size:.6875rem}.download-card-details a{color:var(--color-accent);font-size:.75rem;text-decoration:none}.download-card-details a:hover{text-decoration:underline}.opensource-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist);text-align:center}.opensource-content{align-items:center;gap:var(--spacing-md);flex-direction:column;max-width:500px;margin:0 auto;display:flex}.opensource-title{font-size:clamp(1.5rem,4vw,2rem);font-weight:300}.opensource-desc{color:var(--color-ash);font-size:1.125rem;line-height:1.6}.site-footer{border-top:1px solid var(--color-mist);padding:var(--spacing-xl) var(--spacing-lg);background:var(--color-cream)}.footer-content{max-width:var(--width-max);justify-content:space-between;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap;margin:0 auto;display:flex}@media (max-width:768px){.footer-content{text-align:center;flex-direction:column}}.footer-brand{gap:var(--spacing-xs);flex-direction:column;display:flex}.footer-logo{font-family:var(--font-display);color:var(--color-ink);font-size:1.25rem;font-weight:400}.footer-tagline{color:var(--color-ash);font-size:.875rem}.footer-links{gap:var(--spacing-lg);flex-wrap:wrap;display:flex}.footer-links a{color:var(--color-ash);transition:color var(--duration-fast) var(--ease-out);font-size:.875rem}.footer-links a:hover{color:var(--color-accent)}.footer-author{justify-content:center;align-items:center;gap:var(--spacing-md);width:100%;padding-top:var(--spacing-lg);margin-top:var(--spacing-md);border-top:1px solid var(--color-mist);flex-wrap:wrap;display:flex}.footer-author-label{color:var(--color-ash);font-size:.875rem}.footer-author-label a{color:var(--color-text);transition:color var(--duration-fast) var(--ease-out)}.footer-author-label a:hover{color:var(--color-accent)}.footer-author-links{align-items:center;gap:var(--spacing-sm);display:flex}.footer-social-link{width:36px;height:36px;color:var(--color-ash);transition:all var(--duration-fast) var(--ease-out);background:0 0;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;display:flex}.footer-social-link:hover{color:var(--color-accent);background:var(--color-accent-dim)}.footer-author-divider{background:var(--color-mist);width:1px;height:20px;margin:0 var(--spacing-xs)}.footer-newsletter{color:var(--color-text);background:var(--color-paper);border:1px solid var(--color-mist);transition:all var(--duration-fast) var(--ease-out);border-radius:100px;align-items:center;gap:6px;padding:8px 14px;font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.footer-newsletter:hover{border-color:var(--color-accent);color:var(--color-accent)}.footer-newsletter svg{transition:transform var(--duration-fast) var(--ease-out)}.footer-newsletter:hover svg{transform:translate(3px)}@media (max-width:768px){.footer-author{gap:var(--spacing-sm);flex-direction:column}.footer-author-divider{display:none}}.btn{justify-content:center;align-items:center;gap:var(--spacing-xs);font-family:var(--font-body);letter-spacing:.03em;cursor:pointer;transition:all var(--duration-base) var(--ease-out);border:none;padding:1rem 2rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn-primary{background:var(--color-ink);color:var(--color-paper)}.btn-primary:before{content:"";background:var(--color-accent);transition:transform var(--duration-base) var(--ease-out);z-index:0;position:absolute;inset:0;transform:translateY(100%)}.btn-primary:hover:before{transform:translateY(0)}.btn-primary:hover{color:var(--color-paper)}.btn-primary span,.btn-primary svg,.btn-primary:not(:has(span)){z-index:1;position:relative}.btn-secondary{color:var(--color-ink);border:1px solid var(--color-ink);background:0 0}.btn-secondary:hover{background:var(--color-ink);color:var(--color-paper)}.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn-primary:focus-visible{outline-color:var(--color-paper);box-shadow:0 0 0 4px var(--color-accent)}.btn-secondary:focus-visible{outline-color:var(--color-accent)}@keyframes revealUp{to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(-8px)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}[data-reveal]{opacity:0;transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);transform:translateY(30px)}[data-reveal].revealed{opacity:1;transform:translateY(0)}[data-reveal]:first-child{transition-delay:0s}[data-reveal]:nth-child(2){transition-delay:.1s}[data-reveal]:nth-child(3){transition-delay:.2s}[data-reveal]:nth-child(4){transition-delay:.3s}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}.hero-canvas{display:none}.hero-scroll-indicator{opacity:1;animation:none}[data-reveal],.gallery-frame{opacity:1;transform:none}}.load-error{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);justify-content:center;align-items:center;gap:var(--spacing-md);background:var(--color-cream);border:1px solid var(--color-mist);border-radius:8px;flex-direction:column;display:flex}.load-error-icon{color:var(--color-accent);font-size:2.5rem}.load-error-title{font-family:var(--font-display);color:var(--color-ink);margin:0;font-size:1.5rem;font-weight:400}.load-error-text{color:var(--color-ash);max-width:40ch;font-size:1rem;line-height:1.5}.load-error-retry{margin-top:var(--spacing-sm)}.bias-tags{align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg);flex-direction:column;display:flex}.bias-tags-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ash);font-size:.6875rem;font-weight:500}.bias-tags-list{justify-content:center;gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.bias-tag{background:var(--color-cream);border:1px solid var(--color-mist);color:var(--color-charcoal);transition:all var(--duration-fast) var(--ease-out);padding:6px 12px;font-size:.75rem;font-weight:500}.bias-tag:hover{border-color:var(--color-accent);color:var(--color-accent)}.antidote-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.patterns-categories{margin-bottom:var(--spacing-xl)}.pattern-tabs{gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);flex-wrap:wrap;display:flex}.pattern-tab{font-family:var(--font-body);color:var(--color-ash);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;transition:color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);background:0 0;border:none;border-bottom:2px solid #0000;font-size:.875rem}.pattern-tab:hover{color:var(--color-charcoal)}.pattern-tab.active{color:var(--color-ink);border-bottom-color:var(--color-accent);font-weight:500}.pattern-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}.pattern-panel{display:none}.pattern-panel.active{display:block}.pattern-columns{gap:var(--spacing-xl);grid-template-columns:1fr 1fr;display:grid}@media (max-width:768px){.pattern-columns{gap:var(--spacing-md);grid-template-columns:1fr}}.pattern-column-label{text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--spacing-sm);color:var(--color-ash);font-size:.6875rem;font-weight:600;display:block}.pattern-column--anti .pattern-column-label{color:var(--color-accent)}.pattern-column--do .pattern-column-label{color:var(--color-success,#22c55e)}.pattern-list{gap:var(--spacing-xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.pattern-item{padding-left:var(--spacing-md);font-size:.8125rem;line-height:1.5;position:relative}.pattern-item--anti{color:var(--color-ash)}.pattern-item--anti:before{content:"×";color:var(--color-accent);font-weight:600;position:absolute;left:0}.pattern-item--do{color:var(--color-charcoal)}.pattern-item--do:before{content:"✓";color:var(--color-success,#22c55e);font-weight:600;position:absolute;left:0}.contribute-inline{color:var(--color-ash);margin-top:var(--spacing-md);font-size:.875rem}.contribute-inline a{color:var(--color-accent);text-decoration:none}.contribute-inline a:hover{text-decoration:underline}.pillar-item--main{background:var(--color-accent-dim);border:1px solid var(--color-accent)}.pillar-item--main .pillar-item-name{color:var(--color-accent);font-size:1.125rem;font-weight:600}.pillar-item--ref{padding:var(--spacing-xs) var(--spacing-sm);background:0 0}.pillar-item-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-ash);font-size:.75rem;font-weight:500}.pillar-refs{gap:var(--spacing-xs);padding:0 var(--spacing-sm);flex-wrap:wrap;display:flex}.pillar-ref{text-transform:uppercase;letter-spacing:.03em;background:var(--color-paper);color:var(--color-ash);border:1px solid var(--color-mist);transition:all var(--duration-fast) var(--ease-out);border-radius:3px;padding:4px 10px;font-size:.6875rem;font-weight:500}.pillar-ref:hover{border-color:var(--color-accent);color:var(--color-accent)}.pillar-command-group{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--color-paper);border-radius:4px;flex-wrap:wrap;display:flex}.pillar-group-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-ash);width:100%;margin-bottom:4px;font-size:.6875rem;font-weight:600}.pillar-command-group .pillar-item-code{background:var(--color-accent-dim);border-radius:3px;padding:4px 8px;font-size:.8125rem}.platforms-section{padding:var(--spacing-2xl) 0;border-top:1px solid var(--color-mist)}.platforms-section .section-subtitle{max-width:60ch}.download-options{margin-bottom:var(--spacing-lg)}.prefix-toggle{align-items:center;gap:var(--spacing-sm);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-cream);border:1px solid var(--color-mist);transition:border-color var(--duration-fast) var(--ease-out);border-radius:8px;display:inline-flex}.prefix-toggle:hover{border-color:var(--color-ash)}.prefix-toggle input{opacity:0;width:0;height:0;position:absolute}.prefix-toggle-slider{background:var(--color-mist);width:44px;height:24px;transition:background var(--duration-fast) var(--ease-out);border-radius:24px;flex-shrink:0;position:relative}.prefix-toggle-slider:after{content:"";background:var(--color-paper);width:18px;height:18px;transition:transform var(--duration-fast) var(--ease-out);border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000026}.prefix-toggle input:checked+.prefix-toggle-slider{background:var(--color-accent)}.prefix-toggle input:checked+.prefix-toggle-slider:after{transform:translate(20px)}.prefix-toggle input:focus-visible+.prefix-toggle-slider{outline:2px solid var(--color-accent);outline-offset:2px}.prefix-toggle-label{color:var(--color-charcoal);font-size:.875rem}.prefix-toggle-label code{font-family:var(--font-mono);background:var(--color-accent-dim);color:var(--color-accent);border-radius:4px;padding:2px 6px;font-size:.8125rem}.download-tip{color:var(--color-ash);margin-top:var(--spacing-sm);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 c5fe96ad1..c596c6764 100644
--- a/public/index.html
+++ b/public/index.html
@@ -54,7 +54,7 @@
+
+
- v1.1.0 — /simplify renamed to /distill
+v2.0.0 — Unified skills architecture + Copilot & Antigravity
@@ -182,7 +184,7 @@Same skills and commands, packaged for your tool of choice.
+Same skills, packaged for your tool of choice.
+
+ user-invokable: true.agents/skills/).agent/skills/)