diff --git a/CLAUDE.md b/CLAUDE.md
index 773b98b28..f91a4d343 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,17 +1,17 @@
# Project Instructions for Claude
-## CSS Build Process
+## CSS
-**IMPORTANT**: After modifying any CSS files in `public/css/` (especially `workflow.css` or `main.css`), you MUST rebuild the Tailwind CSS:
-
-```bash
-bunx @tailwindcss/cli -i public/css/main.css -o public/css/styles.css
-```
+Plain hand-written CSS, no Tailwind, no build step. Bun's HTML loader resolves
+`` and inlines `@import` chains automatically for both
+`bun run dev` and `bun run build`.
The CSS architecture:
-- `public/css/main.css` - Main entry point, imports Tailwind and all other CSS files
+- `public/css/main.css` - Main entry point, imports the partials and defines tokens/reset
- `public/css/workflow.css` - Commands section, glass terminal, case studies styles
-- `public/css/styles.css` - **Compiled output** (do not edit directly)
+- `public/css/gallery.css`, `skill-demos.css`, `problem-section.css` - section partials
+
+Edit any of these directly and reload — no rebuild needed.
## Development Server
diff --git a/public/css/styles.css b/public/css/styles.css
deleted file mode 100644
index 8aee30fb1..000000000
--- a/public/css/styles.css
+++ /dev/null
@@ -1,5741 +0,0 @@
-/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-.split-container::before {
- content: '';
- position: absolute;
- inset: 0;
- background-image: linear-gradient(var(--color-mist) 1px, transparent 1px), linear-gradient(90deg, var(--color-mist) 1px, transparent 1px);
- background-size: 20px 20px;
- opacity: 0.3;
- pointer-events: none;
-}
-.split-container::after {
- content: '← Drag →';
- position: absolute;
- bottom: 12px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 0.625rem;
- font-weight: 600;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- color: var(--color-ash);
- background: var(--color-paper);
- padding: 4px 12px;
- border-radius: 4px;
- opacity: 0.8;
- transition: opacity 0.3s ease;
- z-index: 10;
-}
-.split-container:hover::after {
- opacity: 0;
-}
-.split-after .impeccable-card {
- box-shadow: 0 10px 40px rgba(0,0,0,0.08);
-}
-@keyframes splitEntry {
- from {
- opacity: 0;
- transform: translateX(-50%) skewX(-10deg) scaleY(0.8);
- }
- to {
- opacity: 1;
- transform: translateX(-50%) skewX(-10deg) scaleY(1);
- }
-}
-.split-divider {
- animation: splitEntry 0.6s var(--ease-out) 0.3s backwards;
-}
-.split-label-item {
- transition: color var(--duration-fast) var(--ease-out);
- cursor: default;
-}
-.split-label-item:hover {
- color: var(--color-text);
-}
-.split-label-item[data-point="after"]:hover .split-label-dot--accent {
- transform: scale(1.3);
-}
-.split-label-dot {
- transition: transform var(--duration-fast) var(--ease-spring);
-}
-.split-badge {
- position: absolute;
- top: 10px;
- font-size: 0.625rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- padding: 3px 8px;
- border-radius: 3px;
- z-index: 5;
- pointer-events: none;
-}
-.split-badge--before {
- left: 10px;
- color: var(--color-ash);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
-}
-.split-badge--after {
- right: 10px;
- color: var(--color-paper);
- background: var(--color-accent);
-}
-@media (hover: none) {
- .split-container::after {
- content: '← Swipe →';
- }
-}
-@media (max-width: 600px) {
- .split-label {
- font-size: 0.5625rem;
- padding: 4px 10px;
- }
-}
-.commands-section {
- position: relative;
- padding: var(--spacing-xl) 0;
- background: var(--color-paper);
-}
-.commands-gallery {
- display: block;
-}
-.magazine-spread[data-category="create"] {
- --spread-accent: oklch(55% 0.20 340);
-}
-.magazine-spread[data-category="evaluate"] {
- --spread-accent: oklch(55% 0.20 300);
-}
-.magazine-spread[data-category="refine"] {
- --spread-accent: oklch(55% 0.18 260);
-}
-.magazine-spread[data-category="simplify"] {
- --spread-accent: oklch(55% 0.20 80);
-}
-.magazine-spread[data-category="harden"] {
- --spread-accent: oklch(55% 0.20 160);
-}
-.magazine-spread[data-category="system"] {
- --spread-accent: oklch(45% 0.05 0);
-}
-.magazine-container {
- position: relative;
- width: 100%;
- display: grid;
- grid-template-columns: 200px 1fr;
- gap: var(--spacing-lg);
- align-items: start;
- overflow: hidden;
-}
-@media (min-width: 1100px) {
- .magazine-container {
- background: white;
- border-radius: 16px;
- padding: var(--spacing-lg);
- }
-}
-.fisheye-list {
- position: relative;
- height: 400px;
- align-self: center;
- overflow: hidden;
- mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
- -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
-}
-.fisheye-scroll {
- height: 100%;
- overflow-y: auto;
- scrollbar-width: none;
- position: relative;
-}
-.fisheye-scroll::-webkit-scrollbar {
- display: none;
-}
-.fisheye-item {
- display: block;
- font-family: var(--font-display);
- font-size: 1.5rem;
- font-weight: 400;
- color: var(--color-ink);
- background: none;
- border: none;
- padding: 0;
- position: absolute;
- left: 0;
- cursor: pointer;
- white-space: nowrap;
- text-align: left;
- width: 100%;
- line-height: 1.3;
- transform-origin: left center;
- will-change: transform, opacity;
-}
-.fisheye-slash {
- color: var(--color-mist);
- font-weight: 300;
-}
-.fisheye-item.is-active {
- font-weight: 600;
-}
-.fisheye-item.is-active .fisheye-slash {
- color: var(--color-accent);
-}
-.fisheye-beta {
- font-family: var(--font-body);
- font-size: 0.45rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-ash);
- border: 1px solid var(--color-mist);
- border-radius: 3px;
- padding: 1px 4px;
- margin-left: 0.35em;
- vertical-align: middle;
-}
-.magazine-viewport {
- position: relative;
- height: 520px;
- overflow: hidden;
-}
-.magazine-spread {
- position: absolute;
- inset: 0;
- display: grid;
- grid-template-columns: 38% 1fr;
- grid-template-rows: 1fr auto;
- gap: 0 var(--spacing-2xl);
- padding: var(--spacing-lg) var(--spacing-lg);
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
- transform: translateY(16px);
- will-change: opacity, transform;
-}
-.magazine-spread.active {
- opacity: 1;
- pointer-events: auto;
- transform: translateY(0);
- z-index: 2;
-}
-.magazine-spread.exiting {
- opacity: 0;
- transform: translateY(-16px);
- z-index: 1;
-}
-.spread-identity {
- grid-column: 1;
- grid-row: 1 / 3;
- display: flex;
- flex-direction: column;
- justify-content: center;
- gap: var(--spacing-md);
- padding-right: var(--spacing-lg);
-}
-.spread-category-label {
- font-family: var(--font-body);
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.14em;
- color: var(--spread-accent);
-}
-.spread-command-name {
- white-space: nowrap;
- font-family: var(--font-display);
- font-size: clamp(3rem, 5.5vw, 5.5rem);
- font-weight: 600;
- line-height: 0.95;
- color: var(--color-ink);
- margin: 0;
- letter-spacing: -0.02em;
-}
-.spread-command-name .spread-slash {
- color: var(--spread-accent);
- font-weight: 300;
-}
-.spread-command-name .beta-badge {
- font-family: var(--font-body);
- font-size: 0.55rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--spread-accent);
- border: 1px solid var(--spread-accent);
- border-radius: 3px;
- padding: 2px 6px;
- vertical-align: super;
- margin-left: 8px;
-}
-.spread-description {
- font-family: var(--font-body);
- font-size: 0.9375rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- max-width: 360px;
-}
-.spread-flow {
- display: flex;
- align-items: center;
- gap: 6px;
- flex-wrap: nowrap;
- margin-top: var(--spacing-xs);
- white-space: nowrap;
-}
-.spread-flow-label {
- font-family: var(--font-body);
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.spread-flow-icon {
- color: var(--spread-accent);
- font-weight: 600;
- font-size: 0.8125rem;
-}
-.spread-flow-cmd {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-mist);
- padding: 2px 7px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.spread-demo-area {
- grid-column: 2;
- grid-row: 1 / 3;
- display: flex;
- flex-direction: column;
- min-height: 0;
- overflow: hidden;
-}
-.spread-demo-area .demo-split-comparison {
- display: flex;
- flex-direction: column;
- height: 100%;
- flex: 1;
- min-height: 0;
-}
-.spread-demo-area .demo-split-comparison .split-container {
- position: relative;
- flex: 1;
- min-height: 0;
- overflow: hidden;
- cursor: ew-resize;
- user-select: none;
- background: var(--color-cream);
-}
-.spread-demo-area .demo-split-comparison .split-before, .spread-demo-area .demo-split-comparison .split-after {
- position: absolute;
- inset: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--spacing-md);
-}
-.spread-demo-area .demo-split-comparison .split-before {
- z-index: 1;
- background: var(--color-cream);
-}
-.spread-demo-area .demo-split-comparison .split-after {
- z-index: 2;
- background: var(--color-paper);
- clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
-}
-.spread-demo-area .demo-split-comparison .split-content {
- width: 100%;
- max-width: 320px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-.spread-demo-area .demo-split-comparison .split-divider {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 50%;
- width: 2px;
- background: var(--spread-accent, var(--color-accent));
- transform: translateX(-50%) skewX(-10deg);
- pointer-events: none;
- z-index: 3;
- box-shadow: 0 0 12px rgba(0,0,0,0.1);
-}
-.spread-demo-area .demo-split-comparison .split-label {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) skewX(10deg);
- font-size: 0.5625rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-paper);
- background: var(--spread-accent, var(--color-accent));
- padding: 4px 10px;
- border-radius: 3px;
- white-space: nowrap;
-}
-.spread-demo-area .demo-split-comparison .demo-caption {
- flex-shrink: 0;
- font-size: 0.75rem;
- color: var(--color-ash);
- text-align: center;
- padding: var(--spacing-sm) var(--spacing-md);
-}
-.spread-demo-area .demo-container {
- flex: 1;
- display: flex;
- flex-direction: column;
-}
-.spread-demo-area .demo-container .demo-viewport {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- max-width: 420px;
- background: none;
- min-height: auto;
-}
-.commands-container {
- display: grid;
- grid-template-columns: 1fr 1.2fr;
- gap: var(--spacing-2xl);
- align-items: start;
-}
-@media (max-width: 900px) {
- .commands-container {
- grid-template-columns: 1fr;
- }
-}
-.command-manual {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-sm);
- padding-bottom: 20vh;
-}
-.command-category-header {
- font-family: var(--font-display);
- font-size: 0.875rem;
- font-weight: 600;
- color: var(--color-accent);
- text-transform: uppercase;
- letter-spacing: 0.1em;
- padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
- margin-top: var(--spacing-md);
- border-bottom: 1px solid var(--color-mist);
-}
-.command-category-header:first-child {
- margin-top: 0;
-}
-.manual-entry {
- position: relative;
- padding: var(--spacing-lg);
- padding-left: calc(var(--spacing-lg) + 16px);
- border-left: 2px solid var(--color-mist);
- transition: border-color 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
- opacity: 0.4;
- cursor: pointer;
- transform: translateX(-16px);
-}
-.manual-entry:hover {
- opacity: 0.7;
-}
-.manual-entry.active {
- border-left-color: var(--color-accent);
- opacity: 1;
- transform: translateX(0);
- background: linear-gradient(to right, var(--color-bg), transparent);
-}
-.manual-cmd-name {
- font-family: var(--font-mono);
- font-size: 1.5rem;
- margin: 0 0 var(--spacing-sm);
- color: var(--color-ink);
- font-weight: 500;
-}
-.beta-badge {
- font-family: var(--font-body);
- font-size: 0.55rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-accent);
- border: 1px solid var(--color-accent);
- border-radius: 3px;
- padding: 1px 5px;
- vertical-align: middle;
- margin-left: 6px;
-}
-.manual-cmd-desc {
- font-size: 0.875rem;
- line-height: 1.5;
- color: var(--color-charcoal);
- margin: 0;
-}
-.manual-cmd-rel {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-top: var(--spacing-sm);
- display: flex;
- align-items: center;
- gap: 0.5ch;
- flex-wrap: wrap;
-}
-.manual-cmd-rel .rel-icon {
- color: var(--color-accent);
- font-weight: 600;
-}
-.manual-cmd-rel code {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- background: var(--color-mist);
- padding: 2px 6px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.glass-terminal-wrapper {
- position: sticky;
- top: 50vh;
- transform: translateY(-50%);
- height: calc(100vh - var(--spacing-xl) * 2);
- max-height: 800px;
- min-height: 500px;
-}
-.terminal-stack {
- position: relative;
- height: 100%;
- perspective: 1200px;
-}
-.terminal-stack-tabs {
- position: absolute;
- top: -31px;
- right: 8px;
- display: flex;
- gap: 4px;
- z-index: 10;
-}
-.terminal-stack-tab {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- padding: 5px 12px;
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-bottom: none;
- border-radius: 6px 6px 0 0;
- color: var(--color-ash);
- cursor: pointer;
- transition: all 0.2s ease;
-}
-.terminal-stack-tab:hover {
- background: var(--color-paper);
- color: var(--color-charcoal);
-}
-.terminal-stack-tab.active {
- background: var(--color-paper);
- color: var(--color-ink);
- border-color: var(--color-mist);
-}
-.terminal-window {
- position: absolute;
- inset: 0;
- transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, filter 0.3s ease;
- transform-origin: center bottom;
-}
-.terminal-window--demo {
- z-index: 2;
-}
-.terminal-window--demo.is-back {
- transform: translateY(16px) translateX(12px) scale(0.96);
- opacity: 0.6;
- filter: brightness(0.92);
- pointer-events: none;
- z-index: 1;
-}
-.terminal-window--source {
- z-index: 1;
- transform: translateY(16px) translateX(12px) scale(0.96);
- opacity: 0.6;
- filter: brightness(0.92);
- pointer-events: none;
-}
-.terminal-window--source.is-front {
- transform: translateY(0) translateX(0) scale(1);
- opacity: 1;
- filter: brightness(1);
- pointer-events: auto;
- z-index: 2;
-}
-.source-window {
- background: var(--color-paper);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
- height: 100%;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-.source-header {
- background: var(--color-cream);
- padding: 12px 16px;
- display: flex;
- align-items: center;
- gap: 8px;
- border-bottom: 1px solid var(--color-mist);
- flex-shrink: 0;
-}
-.source-title {
- font-family: var(--font-mono);
- font-size: 0.875rem;
- color: var(--color-ink);
- font-weight: 500;
-}
-.source-body {
- flex: 1;
- padding: var(--spacing-md);
- font-family: var(--font-mono);
- font-size: 0.75rem;
- line-height: 1.5;
- color: var(--color-charcoal);
- overflow-y: auto;
- overscroll-behavior: contain;
- white-space: pre-wrap;
- word-break: break-word;
- background: var(--color-cream);
-}
-.source-loading {
- color: var(--color-ash);
- font-style: italic;
-}
-@media (max-width: 900px) {
- .magazine-container {
- display: none;
- }
- .fisheye-list {
- display: none;
- }
- .glass-terminal-wrapper {
- display: none;
- }
-}
-.glass-terminal {
- background: var(--color-paper);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
- height: 100%;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-.terminal-header {
- background: var(--color-cream);
- padding: 12px 16px;
- display: flex;
- align-items: center;
- gap: 8px;
- border-bottom: 1px solid var(--color-mist);
-}
-.terminal-dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
-}
-.terminal-dot.red {
- background: #ff5f56;
-}
-.terminal-dot.yellow {
- background: #ffbd2e;
-}
-.terminal-dot.green {
- background: #27c93f;
-}
-.terminal-title {
- margin-left: auto;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.terminal-body {
- flex: 1;
- padding: var(--spacing-md);
- font-family: var(--font-mono);
- font-size: 0.9375rem;
- color: var(--color-ink);
- overflow-y: auto;
- display: flex;
- flex-direction: column;
- min-height: 0;
-}
-.terminal-line {
- margin-bottom: var(--spacing-sm);
- display: flex;
- gap: var(--spacing-sm);
- line-height: 1.5;
-}
-.terminal-prompt {
- color: var(--color-accent);
- user-select: none;
- font-weight: bold;
-}
-.terminal-cursor {
- display: inline-block;
- width: 8px;
- height: 1.2em;
- background: var(--color-accent);
- vertical-align: middle;
- animation: blink 1s step-end infinite;
-}
-.terminal-output {
- color: var(--color-ash);
- margin-bottom: var(--spacing-md);
- white-space: pre-wrap;
-}
-@media (max-height: 800px) {
- .terminal-output {
- display: none;
- }
-}
-.terminal-cmd {
- color: var(--color-accent);
- font-weight: 600;
-}
-.terminal-step {
- color: var(--color-charcoal);
-}
-.terminal-done {
- color: var(--color-success, #22c55e);
- font-weight: 500;
-}
-.terminal-preview {
- background: var(--color-paper);
- margin: var(--spacing-sm) 0;
- flex: 1;
- min-height: 0;
- overflow: hidden;
- border-radius: 12px;
-}
-.terminal-cursor-line {
- flex-shrink: 0;
- margin-top: var(--spacing-sm) !important;
-}
-.terminal-preview .demo-split-comparison {
- display: flex;
- flex-direction: column;
- height: 100%;
-}
-.terminal-preview .demo-split-comparison .split-container {
- position: relative;
- flex: 1;
- min-height: 0;
- overflow: hidden;
- cursor: ew-resize;
- user-select: none;
- background: var(--color-cream);
-}
-.terminal-preview .demo-split-comparison .split-before, .terminal-preview .demo-split-comparison .split-after {
- position: absolute;
- inset: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--spacing-md);
-}
-.terminal-preview .demo-split-comparison .split-before {
- z-index: 1;
- background: var(--color-cream);
-}
-.terminal-preview .demo-split-comparison .split-after {
- z-index: 2;
- background: var(--color-paper);
- clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
-}
-.terminal-preview .demo-split-comparison .split-content {
- width: 100%;
- max-width: 280px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-.terminal-preview .demo-split-comparison .split-divider {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 50%;
- width: 2px;
- background: var(--color-accent);
- transform: translateX(-50%) skewX(-10deg);
- pointer-events: none;
- z-index: 3;
- box-shadow: 0 0 12px rgba(0,0,0,0.1);
-}
-.terminal-preview .demo-split-comparison .split-label {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) skewX(10deg);
- font-size: 0.5625rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-paper);
- background: var(--color-accent);
- padding: 4px 10px;
- border-radius: 3px;
- white-space: nowrap;
-}
-.terminal-preview .demo-split-comparison .demo-caption {
- flex-shrink: 0;
- font-size: 0.75rem;
- color: var(--color-ash);
- text-align: center;
- padding: var(--spacing-sm) var(--spacing-md);
-}
-@keyframes blink {
- 50% {
- opacity: 0;
- }
-}
-.casestudies-section {
- position: relative;
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.transformations-tabbed {
- margin-top: var(--spacing-xl);
-}
-.transformation-tabs {
- display: flex;
- gap: var(--spacing-xs);
- border-bottom: 1px solid var(--color-mist);
- margin-bottom: var(--spacing-lg);
-}
-.transformation-tab {
- font-family: var(--font-display);
- font-size: 0.9375rem;
- font-weight: 500;
- color: var(--color-ash);
- background: none;
- border: none;
- padding: var(--spacing-sm) var(--spacing-md);
- cursor: pointer;
- position: relative;
- transition: color 0.2s ease;
-}
-.transformation-tab:hover {
- color: var(--color-charcoal);
-}
-.transformation-tab.active {
- color: var(--color-ink);
-}
-.transformation-tab.active::after {
- content: '';
- position: absolute;
- bottom: -1px;
- left: 0;
- right: 0;
- height: 2px;
- background: var(--color-accent);
-}
-.transformation-panels {
- position: relative;
-}
-.transformation-panel {
- display: none;
- flex-direction: column;
- gap: var(--spacing-lg);
- animation: fadeInPanel 0.3s ease;
-}
-.transformation-panel.active {
- display: flex;
-}
-@keyframes fadeInPanel {
- from {
- opacity: 0;
- transform: translateY(8px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.transformation-images {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.transformation-before, .transformation-after {
- flex: 1;
- margin: 0;
-}
-.transformation-before img, .transformation-after img, .transformation-placeholder {
- width: 100%;
- aspect-ratio: 16 / 10;
- object-fit: cover;
- border-radius: 8px;
- border: 1px solid var(--color-mist);
- cursor: pointer;
- transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-.transformation-before img:hover, .transformation-after img:hover, .transformation-placeholder:hover {
- transform: scale(1.02);
- box-shadow: 0 8px 24px -4px rgba(0,0,0,0.15);
-}
-.transformation-placeholder {
- background: linear-gradient(135deg, var(--color-mist) 0%, var(--color-cream) 100%);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--color-ash);
- font-size: 0.8125rem;
- font-style: italic;
-}
-.transformation-before figcaption, .transformation-after figcaption {
- font-size: 0.75rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--color-ash);
- margin-top: var(--spacing-xs);
- text-align: center;
-}
-.transformation-arrow {
- font-size: 1.5rem;
- color: var(--color-accent);
- font-weight: 300;
- flex-shrink: 0;
-}
-.transformation-info {
- max-width: 600px;
-}
-.transformation-title {
- font-family: var(--font-display);
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--color-ink);
- margin: 0 0 var(--spacing-xs);
-}
-.transformation-desc {
- font-size: 0.9375rem;
- color: var(--color-charcoal);
- line-height: 1.6;
- margin: 0 0 var(--spacing-sm);
-}
-.transformation-commands {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
-}
-.transformation-command {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- background: var(--color-mist);
- color: var(--color-charcoal);
- padding: 4px 10px;
- border-radius: 4px;
-}
-.lightbox {
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.9);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-.lightbox.active {
- opacity: 1;
- visibility: visible;
-}
-.lightbox-close {
- position: absolute;
- top: 20px;
- right: 24px;
- background: none;
- border: none;
- color: white;
- font-size: 2.5rem;
- cursor: pointer;
- opacity: 0.7;
- transition: opacity 0.2s ease;
- line-height: 1;
-}
-.lightbox-close:hover {
- opacity: 1;
-}
-.lightbox-image {
- max-width: 90vw;
- max-height: 85vh;
- object-fit: contain;
- border-radius: 8px;
- box-shadow: 0 20px 60px rgba(0,0,0,0.5);
-}
-@media (max-width: 768px) {
- .transformation-images {
- flex-direction: column;
- }
- .transformation-arrow {
- transform: rotate(90deg);
- }
- .transformation-before, .transformation-after {
- width: 100%;
- }
-}
-.hero-version-link {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-top: var(--spacing-sm);
-}
-.hero-version-link a {
- color: var(--color-ash);
- text-decoration: none;
- border-bottom: 1px solid transparent;
- transition: color 0.2s ease, border-color 0.2s ease;
-}
-.hero-version-link a:hover {
- color: var(--color-accent);
- border-bottom-color: var(--color-accent);
-}
-.changelog-faq-row {
- position: relative;
-}
-@media (min-width: 1024px) {
- .changelog-faq-row {
- display: grid;
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
- column-gap: calc(var(--spacing-xl) * 1.5);
- border-top: 1px solid var(--color-mist);
- }
- .changelog-faq-row > .changelog-section, .changelog-faq-row > .faq-section {
- border-top: none;
- }
- .changelog-faq-row > .faq-section {
- border-left: 1px solid var(--color-mist);
- padding-left: calc(var(--spacing-xl) * 0.75);
- margin-left: calc(var(--spacing-xl) * -0.75);
- }
-}
-.changelog-section {
- position: relative;
- padding: var(--spacing-xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.changelog-list {
- display: flex;
- flex-direction: column;
- gap: 0;
-}
-.changelog-entry {
- padding: var(--spacing-md) 0;
-}
-.changelog-entry + .changelog-entry {
- border-top: 1px solid var(--color-mist);
-}
-.changelog-version-header {
- display: flex;
- align-items: baseline;
- gap: var(--spacing-sm);
- margin-bottom: var(--spacing-sm);
-}
-.changelog-version {
- font-family: var(--font-mono);
- font-size: 1.125rem;
- font-weight: 600;
- color: var(--color-ink);
-}
-.changelog-date {
- font-size: 0.8125rem;
- color: var(--color-ash);
-}
-.changelog-items {
- margin: 0;
- padding-left: var(--spacing-md);
- color: var(--color-charcoal);
- line-height: 1.7;
- max-width: 70ch;
-}
-.changelog-items li {
- margin-bottom: var(--spacing-xs);
-}
-.changelog-items code {
- font-family: var(--font-mono);
- font-size: 0.875em;
- background: var(--color-mist);
- padding: 2px 6px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.changelog-older {
- margin-top: var(--spacing-sm);
-}
-.changelog-older-toggle {
- font-family: var(--font-body);
- font-size: 0.875rem;
- font-weight: 500;
- color: var(--color-accent);
- padding: var(--spacing-md) 0;
- cursor: pointer;
- list-style: none;
- display: flex;
- align-items: center;
- gap: 6px;
- transition: color 0.2s ease;
-}
-.changelog-older-toggle::-webkit-details-marker {
- display: none;
-}
-.changelog-older-toggle::before {
- content: '+';
- font-size: 1.25rem;
- font-weight: 300;
- transition: transform 0.3s var(--ease-out);
-}
-.changelog-older[open] .changelog-older-toggle::before {
- transform: rotate(45deg);
-}
-.changelog-older-toggle:hover {
- color: var(--color-accent-hover);
-}
-.changelog-older-entries {
- animation: faqFadeIn 0.3s var(--ease-out);
-}
-.faq-section {
- position: relative;
- padding: var(--spacing-xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.faq-list {
- display: flex;
- flex-direction: column;
- gap: 0;
-}
-.faq-item {
- border-bottom: 1px solid var(--color-mist);
-}
-.faq-question {
- font-family: var(--font-display);
- font-size: 1.125rem;
- font-weight: 500;
- color: var(--color-ink);
- padding: var(--spacing-md) 0;
- cursor: pointer;
- list-style: none;
- display: flex;
- align-items: center;
- justify-content: space-between;
- transition: color 0.2s ease;
-}
-.faq-question::-webkit-details-marker {
- display: none;
-}
-.faq-question::after {
- content: '+';
- font-family: var(--font-body);
- font-size: 1.5rem;
- font-weight: 300;
- color: var(--color-accent);
- transition: transform 0.3s var(--ease-out);
-}
-.faq-item[open] .faq-question::after {
- transform: rotate(45deg);
-}
-.faq-question:hover {
- color: var(--color-accent);
-}
-.faq-answer {
- padding: 0 0 var(--spacing-md);
- color: var(--color-charcoal);
- line-height: 1.7;
- max-width: 70ch;
- animation: faqFadeIn 0.3s var(--ease-out);
-}
-.faq-answer p {
- margin: 0 0 var(--spacing-sm);
-}
-.faq-answer p:last-child {
- margin-bottom: 0;
-}
-.faq-answer ul {
- margin: var(--spacing-sm) 0;
- padding-left: var(--spacing-md);
-}
-.faq-answer li {
- margin-bottom: var(--spacing-xs);
-}
-.faq-answer code {
- font-family: var(--font-mono);
- font-size: 0.875em;
- background: var(--color-mist);
- padding: 2px 6px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.faq-answer a {
- color: var(--color-accent);
- text-decoration: none;
- border-bottom: 1px solid transparent;
- transition: border-color 0.2s ease;
-}
-.faq-answer a:hover {
- border-bottom-color: var(--color-accent);
-}
-@media (max-width: 600px) {
- .faq-question {
- font-size: 1rem;
- padding: var(--spacing-md) 0;
- min-height: 44px;
- gap: var(--spacing-sm);
- }
- .faq-answer {
- font-size: 0.875rem;
- }
- .changelog-version {
- font-size: 1rem;
- }
- .changelog-version-header {
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- }
- .changelog-items {
- padding-left: var(--spacing-sm);
- font-size: 0.875rem;
- }
- .changelog-older-toggle {
- min-height: 44px;
- }
-}
-@keyframes faqFadeIn {
- from {
- opacity: 0;
- transform: translateY(-8px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.skills-section {
- position: relative;
- padding: var(--spacing-xl) 0;
- overflow: hidden;
- background: var(--color-bg);
-}
-.skills-gallery {
- display: block;
- position: relative;
-}
-.gallery-track {
- display: flex;
- gap: var(--spacing-lg);
- overflow-x: auto;
- scroll-snap-type: x mandatory;
- padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
- -webkit-overflow-scrolling: touch;
- scrollbar-width: none;
- cursor: grab;
-}
-.gallery-track:active {
- cursor: grabbing;
-}
-.gallery-track::-webkit-scrollbar {
- display: none;
-}
-.gallery-frame {
- flex: 0 0 80vw;
- max-width: 1100px;
- scroll-snap-align: center;
- position: relative;
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 20px 50px -10px rgba(0, 0, 0, 0.1);
- border-radius: 2px;
- overflow: hidden;
- opacity: 0.4;
- transform: scale(0.95);
- transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
-}
-.gallery-frame.active {
- opacity: 1;
- transform: scale(1);
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 40px 100px -20px rgba(0, 0, 0, 0.2);
- border-color: var(--color-charcoal);
- border-width: 1px;
-}
-.gallery-content {
- display: grid;
- grid-template-columns: 1.2fr 1fr;
- height: 600px;
-}
-@media (max-width: 900px) {
- .gallery-frame {
- flex: 0 0 90vw;
- }
- .gallery-content {
- grid-template-columns: 1fr;
- height: auto;
- min-height: 600px;
- }
-}
-.gallery-visual {
- background: var(--color-cream);
- border-right: 1px solid var(--color-mist);
- position: relative;
- overflow: hidden;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--spacing-lg);
-}
-.gallery-info {
- padding: var(--spacing-xl);
- display: flex;
- flex-direction: column;
- overflow-y: auto;
-}
-.gallery-header {
- margin-bottom: var(--spacing-lg);
-}
-.gallery-title {
- font-family: var(--font-display);
- font-size: 2.5rem;
- font-style: italic;
- margin: 0 0 var(--spacing-xs);
- color: var(--color-ink);
-}
-.gallery-meta {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
-}
-.gallery-desc {
- font-size: 1.125rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- margin-bottom: var(--spacing-xl);
- max-width: 45ch;
-}
-.gallery-tags {
- display: flex;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- margin-top: auto;
-}
-.gallery-tag {
- padding: 6px 12px;
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- font-size: 0.8125rem;
- color: var(--color-ash);
-}
-.gallery-map {
- display: flex;
- justify-content: center;
- gap: 8px;
- margin-top: var(--spacing-lg);
-}
-.gallery-dot {
- width: 40px;
- height: 2px;
- background: var(--color-mist);
- cursor: pointer;
- transition: all 0.3s ease;
- position: relative;
- border: none;
- padding: 0;
- font: inherit;
-}
-.gallery-dot::after {
- content: '';
- position: absolute;
- top: -10px;
- bottom: -10px;
- left: 0;
- right: 0;
-}
-.gallery-dot:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: 4px;
- border-radius: 1px;
-}
-.gallery-dot.active {
- background: var(--color-accent);
- height: 4px;
-}
-.demo-tabbed-container {
- display: flex;
- flex-direction: column;
-}
-.demo-tabs {
- display: flex;
- gap: 0;
- margin-bottom: 0;
- justify-content: center;
- background: var(--color-paper);
- border-bottom: 1px solid var(--color-mist);
-}
-.demo-tab {
- padding: var(--spacing-sm) var(--spacing-lg);
- background: transparent;
- border: none;
- border-bottom: 2px solid transparent;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- font-weight: 500;
- letter-spacing: 0.05em;
- text-transform: uppercase;
- color: var(--color-ash);
- cursor: pointer;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.demo-tab:hover {
- color: var(--color-text);
- background: var(--color-cream);
-}
-.demo-tab.active {
- color: var(--color-accent);
- border-bottom-color: var(--color-accent);
- background: var(--color-accent-dim);
-}
-.demo-panels {
- flex: 1;
-}
-.demo-panel {
- display: none;
-}
-.demo-panel.active {
- display: block;
- animation: fadeSlideIn 0.3s var(--ease-out);
-}
-@keyframes fadeSlideIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.demo-container {
- background: var(--color-paper);
- border: none;
- border-radius: 0;
- overflow: hidden;
-}
-.demo-header {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--spacing-sm) var(--spacing-md);
- background: var(--color-paper);
- border-bottom: 1px solid var(--color-mist);
- min-height: 48px;
-}
-.demo-toggle {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.demo-toggle-label {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-ash);
- transition: color var(--duration-fast) var(--ease-out);
- cursor: pointer;
-}
-.demo-toggle-label:hover {
- color: var(--color-text);
-}
-.demo-toggle-label.active {
- color: var(--color-accent);
-}
-.demo-toggle-switch {
- position: relative;
- width: 44px;
- height: 24px;
- background: var(--color-mist);
- border-radius: 12px;
- cursor: pointer;
- transition: background var(--duration-fast) var(--ease-out);
- border: 1px solid transparent;
- padding: 0;
- font: inherit;
-}
-.demo-toggle-switch:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
-}
-.demo-toggle-switch:hover {
- border-color: var(--color-ash);
-}
-.demo-toggle-switch::after {
- content: '';
- position: absolute;
- top: 3px;
- left: 3px;
- width: 16px;
- height: 16px;
- background: var(--color-paper);
- border-radius: 50%;
- box-shadow: 0 1px 4px rgba(0,0,0,0.15);
- transition: transform var(--duration-base) var(--ease-spring);
-}
-.demo-toggle-switch.active {
- background: var(--color-accent);
-}
-.demo-toggle-switch.active::after {
- transform: translateX(20px);
-}
-.demo-viewport {
- padding: var(--spacing-xl);
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 280px;
- background: var(--color-cream);
- transition: background var(--duration-base) var(--ease-out);
-}
-.demo-viewport[data-state="after"] {
- background: var(--color-paper);
-}
-.demo-caption {
- padding: var(--spacing-sm) var(--spacing-md);
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- letter-spacing: 0.03em;
- color: var(--color-ash);
- text-align: center;
-}
-.uxw-demo {
- width: 100%;
- max-width: 320px;
- padding: var(--spacing-lg);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- text-align: center;
-}
-.uxw-error-icon {
- font-size: 2rem;
- margin-bottom: var(--spacing-sm);
-}
-.uxw-error-title {
- font-weight: 600;
- color: #c00;
- margin-bottom: var(--spacing-xs);
-}
-.uxw-error-text {
- font-size: 0.875rem;
- color: var(--color-ash);
-}
-.uxw-error-action {
- margin-top: var(--spacing-sm);
- font-size: 0.875rem;
- color: var(--color-accent);
- cursor: pointer;
- text-decoration: underline;
-}
-.uxw-error-after .uxw-error-icon {
- color: var(--color-accent);
-}
-.uxw-error-after .uxw-error-title {
- color: var(--color-text);
-}
-.uxw-error-after .uxw-error-text {
- color: var(--color-charcoal);
-}
-.uxw-button-context {
- font-size: 0.875rem;
- color: var(--color-charcoal);
- margin-bottom: var(--spacing-md);
- font-weight: 500;
-}
-.uxw-button-row {
- display: flex;
- gap: var(--spacing-sm);
- justify-content: center;
-}
-.uxw-btn {
- padding: var(--spacing-xs) var(--spacing-md);
- border-radius: 4px;
- font-size: 0.875rem;
- font-weight: 500;
- cursor: pointer;
- border: none;
-}
-.uxw-btn-primary {
- background: var(--color-text);
- color: var(--color-paper);
-}
-.uxw-btn-secondary {
- background: transparent;
- color: var(--color-ash);
- border: 1px solid var(--color-mist);
-}
-.uxw-btn-danger {
- background: #c00;
- color: white;
-}
-.uxw-empty-icon {
- font-size: 2.5rem;
- margin-bottom: var(--spacing-sm);
- opacity: 0.4;
-}
-.uxw-empty-title {
- font-weight: 500;
- color: var(--color-ash);
-}
-.uxw-empty-text {
- font-size: 0.875rem;
- color: var(--color-charcoal);
- margin-top: var(--spacing-xs);
-}
-.uxw-empty-action {
- margin-top: var(--spacing-md);
-}
-.uxw-empty-after .uxw-empty-icon {
- opacity: 1;
-}
-.uxw-empty-after .uxw-empty-title {
- color: var(--color-text);
-}
-.spatial-demo {
- width: 100%;
- max-width: 340px;
- padding: var(--spacing-md);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
-}
-.spatial-grid-before {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
-}
-.spatial-grid-after {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: var(--spacing-sm);
-}
-.spatial-card-item {
- padding: var(--spacing-sm);
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- font-size: 0.8125rem;
- color: var(--color-charcoal);
- text-align: center;
-}
-.spatial-grid-after .spatial-card-item {
- width: auto !important;
-}
-.spatial-hierarchy-before .spatial-h-title, .spatial-hierarchy-before .spatial-h-subtitle, .spatial-hierarchy-before .spatial-h-cta, .spatial-hierarchy-before .spatial-h-link {
- font-size: 0.9375rem;
- margin-bottom: var(--spacing-xs);
- color: var(--color-charcoal);
-}
-.spatial-hierarchy-after .spatial-h-title {
- font-family: var(--font-display);
- font-size: 1.75rem;
- font-weight: 300;
- font-style: italic;
- margin-bottom: var(--spacing-xs);
- color: var(--color-text);
-}
-.spatial-hierarchy-after .spatial-h-subtitle {
- font-size: 0.6875rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
- margin-bottom: var(--spacing-md);
-}
-.spatial-hierarchy-after .spatial-h-cta {
- display: inline-block;
- padding: var(--spacing-sm) var(--spacing-lg);
- background: var(--color-text);
- color: var(--color-paper);
- font-size: 0.875rem;
- font-weight: 500;
- border-radius: 4px;
- margin-bottom: var(--spacing-sm);
-}
-.spatial-hierarchy-after .spatial-h-link {
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.spatial-whitespace-before {
- padding: var(--spacing-xs) !important;
-}
-.spatial-whitespace-before .spatial-ws-title {
- font-size: 1rem;
- font-weight: 600;
- margin-bottom: 2px;
-}
-.spatial-whitespace-before .spatial-ws-price {
- font-size: 0.875rem;
- color: var(--color-ash);
- margin-bottom: 4px;
-}
-.spatial-whitespace-before .spatial-ws-features {
- font-size: 0.75rem;
- color: var(--color-ash);
- margin-bottom: 6px;
-}
-.spatial-whitespace-before .spatial-ws-btn {
- width: 100%;
- padding: 6px;
- font-size: 0.75rem;
- background: var(--color-text);
- color: var(--color-paper);
- border: none;
- border-radius: 3px;
- cursor: pointer;
-}
-.spatial-whitespace-after {
- padding: var(--spacing-lg) !important;
-}
-.spatial-whitespace-after .spatial-ws-title {
- font-family: var(--font-display);
- font-size: 1.5rem;
- font-weight: 400;
- margin-bottom: var(--spacing-sm);
-}
-.spatial-whitespace-after .spatial-ws-price {
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--color-text);
- margin-bottom: var(--spacing-sm);
-}
-.spatial-whitespace-after .spatial-ws-features {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-bottom: var(--spacing-lg);
- line-height: 1.6;
-}
-.spatial-whitespace-after .spatial-ws-btn {
- width: 100%;
- padding: var(--spacing-sm);
- font-size: 0.875rem;
- background: var(--color-text);
- color: var(--color-paper);
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-weight: 500;
-}
-.motion-demo {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-sm);
- width: 100%;
- max-width: 280px;
-}
-.motion-stagger-demo {
- align-items: stretch;
-}
-.motion-list-item {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
- padding: var(--spacing-sm) var(--spacing-md);
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- font-size: 0.875rem;
- color: var(--color-charcoal);
-}
-.motion-dot {
- width: 8px;
- height: 8px;
- background: var(--color-accent);
- border-radius: 50%;
-}
-.demo-viewport[data-state="after"] .motion-list-item {
- opacity: 0;
- transform: translateY(12px);
- animation: staggerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(1) {
- animation-delay: 0s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(2) {
- animation-delay: 0.05s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(3) {
- animation-delay: 0.1s;
-}
-.demo-viewport[data-state="after"] .motion-list-item:nth-child(4) {
- animation-delay: 0.15s;
-}
-@keyframes staggerIn {
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.motion-btn {
- padding: 12px 24px;
- font-size: 0.9375rem;
- font-weight: 500;
- border: none;
- border-radius: 4px;
- cursor: pointer;
-}
-.motion-btn-before {
- background: var(--color-charcoal);
- color: var(--color-paper);
-}
-.motion-btn-after {
- background: var(--color-text);
- color: var(--color-paper);
- transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
-}
-.motion-btn-after:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-.motion-btn-after:active {
- transform: translateY(0) scale(0.98);
-}
-.motion-card {
- padding: var(--spacing-md);
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- text-align: center;
- min-width: 140px;
-}
-.motion-card-icon {
- font-size: 1.5rem;
- margin-bottom: var(--spacing-xs);
-}
-.motion-card-text {
- font-size: 0.8125rem;
- color: var(--color-charcoal);
-}
-.motion-card-after {
- transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.demo-viewport[data-state="after"] .motion-card-after {
- background: var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper));
- }
- border-color: var(--color-accent);
-}
-.demo-viewport[data-state="after"] .motion-card-after .motion-card-icon {
- animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-@keyframes checkPop {
- 50% {
- transform: scale(1.3);
- }
-}
-.typo-demo {
- width: 100%;
- max-width: 320px;
- text-align: left;
-}
-.typo-pairing-before {
- font-family: 'Inter', system-ui, sans-serif;
-}
-.typo-pairing-before .typo-heading {
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: var(--spacing-xs);
-}
-.typo-pairing-before .typo-body {
- font-size: 0.9375rem;
- line-height: 1.5;
- color: var(--color-ash);
-}
-.typo-pairing-after .typo-heading {
- font-family: var(--font-display);
- font-size: 2rem;
- font-weight: 300;
- font-style: italic;
- letter-spacing: -0.02em;
- margin-bottom: var(--spacing-sm);
- color: var(--color-text);
-}
-.typo-pairing-after .typo-body {
- font-family: var(--font-body);
- font-size: 0.9375rem;
- line-height: 1.7;
- color: var(--color-charcoal);
-}
-.typo-hierarchy-before .typo-h1 {
- font-size: 1.125rem;
- font-weight: 600;
- margin-bottom: 4px;
-}
-.typo-hierarchy-before .typo-meta {
- font-size: 0.9375rem;
- color: var(--color-ash);
- margin-bottom: var(--spacing-xs);
-}
-.typo-hierarchy-before .typo-p {
- font-size: 0.875rem;
- line-height: 1.5;
- color: var(--color-charcoal);
-}
-.typo-hierarchy-after .typo-h1 {
- font-family: var(--font-display);
- font-size: 2.25rem;
- font-weight: 300;
- letter-spacing: -0.03em;
- margin-bottom: 2px;
- line-height: 1.1;
-}
-.typo-hierarchy-after .typo-meta {
- font-size: 0.6875rem;
- text-transform: uppercase;
- letter-spacing: 0.12em;
- color: var(--color-accent);
- margin-bottom: var(--spacing-md);
-}
-.typo-hierarchy-after .typo-p {
- font-size: 0.9375rem;
- line-height: 1.7;
- color: var(--color-ash);
-}
-.int-demo {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
- width: 100%;
- max-width: 280px;
-}
-.int-states-demo {
- gap: var(--spacing-lg);
-}
-.int-state-row {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.int-state-label {
- font-size: 0.6875rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-ash);
- width: 40px;
-}
-.int-btn {
- flex: 1;
- padding: var(--spacing-sm) var(--spacing-md);
- font-size: 0.875rem;
- font-weight: 500;
- border-radius: 4px;
- cursor: pointer;
-}
-.int-btn-poor {
- background: var(--color-charcoal);
- color: var(--color-paper);
- border: none;
-}
-.int-btn-good {
- background: var(--color-text);
- color: var(--color-paper);
- border: 2px solid transparent;
- transition: all 0.15s ease;
-}
-.int-btn-good:hover {
- background: var(--color-charcoal);
-}
-.int-btn-good:focus {
- outline: none;
- border-color: var(--color-accent);
- box-shadow: 0 0 0 3px var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent);
- }
-}
-.int-btn-good:active {
- transform: scale(0.98);
-}
-.int-aff-item {
- padding: var(--spacing-sm) var(--spacing-md);
- border-radius: 4px;
- font-size: 0.875rem;
- cursor: pointer;
-}
-.int-aff-poor {
- color: var(--color-charcoal);
-}
-.int-aff-good {
- color: var(--color-accent);
- text-decoration: underline;
- text-underline-offset: 2px;
-}
-.int-aff-good::after {
- content: ' →';
-}
-.int-affordance-after .int-aff-item {
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- color: var(--color-accent);
- text-decoration: underline;
- text-underline-offset: 2px;
- transition: background 0.15s ease;
-}
-.int-affordance-after .int-aff-item:hover {
- background: var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
- }
-}
-.int-affordance-after .int-aff-item::after {
- content: ' →';
-}
-.int-feedback-before, .int-feedback-after {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
- flex-direction: row;
-}
-.int-fb-btn {
- width: 48px;
- height: 48px;
- border-radius: 50%;
- border: none;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.int-fb-btn svg {
- width: 22px;
- height: 22px;
-}
-.int-fb-silent {
- background: var(--color-mist);
- color: var(--color-ash);
-}
-.int-fb-active {
- background: var(--color-charcoal);
- color: var(--color-paper);
- transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.int-fb-active:hover {
- transform: scale(1.1);
-}
-.int-fb-active:active {
- transform: scale(0.95);
-}
-.int-fb-active.liked {
- background: var(--color-accent);
- animation: heartPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-@keyframes heartPop {
- 50% {
- transform: scale(1.25);
- }
-}
-.int-fb-label {
- font-size: 0.875rem;
- color: var(--color-charcoal);
-}
-.color-demo {
- width: 100%;
- max-width: 300px;
-}
-.color-palette-before, .color-palette-after {
- display: flex;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- padding: var(--spacing-md);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
-}
-.color-swatch {
- width: 40px;
- height: 40px;
- border-radius: 4px;
- transition: background 0.2s ease;
-}
-.color-card {
- width: 100%;
- margin-top: var(--spacing-sm);
- padding: var(--spacing-sm);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-.color-card span {
- font-size: 0.8125rem;
- font-weight: 500;
- transition: color 0.2s ease;
-}
-.color-card button {
- padding: 6px;
- border: none;
- border-radius: 3px;
- font-size: 0.75rem;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-.color-palette-before .swatch-1 {
- background: #ff6b6b;
-}
-.color-palette-before .swatch-2 {
- background: #4ecdc4;
-}
-.color-palette-before .swatch-3 {
- background: #ffe66d;
-}
-.color-palette-before .swatch-4 {
- background: #95e1d3;
-}
-.color-palette-before .swatch-5 {
- background: #f38181;
-}
-.color-palette-before .card-title {
- color: #ff6b6b;
-}
-.color-palette-before .card-subtitle {
- color: #4ecdc4;
-}
-.color-palette-before .card-btn {
- background: #ffe66d;
- color: #333;
-}
-.color-palette-after .swatch-1 {
- background: var(--color-text);
-}
-.color-palette-after .swatch-2 {
- background: var(--color-charcoal);
-}
-.color-palette-after .swatch-3 {
- background: var(--color-ash);
-}
-.color-palette-after .swatch-4 {
- background: var(--color-mist);
-}
-.color-palette-after .swatch-5 {
- background: var(--color-accent);
-}
-.color-palette-after .card-title {
- color: var(--color-text);
-}
-.color-palette-after .card-subtitle {
- color: var(--color-ash);
-}
-.color-palette-after .card-btn {
- background: var(--color-accent);
- color: var(--color-paper);
-}
-.color-accent-card {
- padding: var(--spacing-md);
- border-radius: 6px;
-}
-.color-accent-before .color-accent-card {
- background: #f5f5f5;
- border: 1px solid #e0e0e0;
-}
-.color-accent-before .color-accent-title {
- font-weight: 600;
- color: #333;
- margin-bottom: 4px;
-}
-.color-accent-before .color-accent-text {
- font-size: 0.8125rem;
- color: #666;
- margin-bottom: var(--spacing-sm);
-}
-.color-accent-before .color-accent-btn {
- width: 100%;
- padding: var(--spacing-xs);
- background: #333;
- color: white;
- border: none;
- border-radius: 4px;
- font-size: 0.8125rem;
- cursor: pointer;
-}
-.color-accent-after .color-accent-card {
- background: var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper));
- }
- border: 1px solid var(--color-accent);
- @supports (color: color-mix(in lab, red, red)) {
- border: 1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper));
- }
-}
-.color-accent-after .color-accent-title {
- font-weight: 600;
- color: var(--color-text);
- margin-bottom: 4px;
-}
-.color-accent-after .color-accent-text {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-bottom: var(--spacing-sm);
-}
-.color-accent-after .color-accent-btn {
- width: 100%;
- padding: var(--spacing-xs);
- background: var(--color-accent);
- color: var(--color-paper);
- border: none;
- border-radius: 4px;
- font-size: 0.8125rem;
- font-weight: 500;
- cursor: pointer;
-}
-.color-contrast-static {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-sm);
-}
-.contrast-example {
- padding: var(--spacing-md);
- border-radius: 6px;
- text-align: center;
-}
-.contrast-fail {
- background: #f0f0f0;
- color: #a0a0a0;
-}
-.contrast-pass {
- background: var(--color-charcoal);
- color: var(--color-paper);
-}
-.contrast-badge {
- display: inline-block;
- font-size: 0.5625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- padding: 2px 6px;
- border-radius: 2px;
- margin-bottom: 4px;
-}
-.contrast-fail .contrast-badge {
- background: #ddd;
-}
-.contrast-pass .contrast-badge {
- background: var(--color-accent);
- color: var(--color-paper);
-}
-.contrast-text {
- font-size: 1rem;
- font-weight: 500;
- margin-bottom: 2px;
-}
-.contrast-ratio {
- font-size: 0.6875rem;
- opacity: 0.7;
-}
-.resp-demo {
- width: 100%;
- max-width: 340px;
-}
-.resp-touch-demo {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-lg);
-}
-.resp-touch-row {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.resp-label {
- font-size: 0.6875rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-ash);
- width: 70px;
-}
-.resp-touch-targets {
- display: flex;
- gap: 4px;
-}
-.resp-touch-targets button {
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-weight: 500;
-}
-.resp-touch-bad button {
- width: 24px;
- height: 24px;
- font-size: 0.75rem;
- background: var(--color-mist);
- color: var(--color-ash);
-}
-.resp-touch-good button {
- width: 44px;
- height: 44px;
- font-size: 1rem;
- background: var(--color-text);
- color: var(--color-paper);
-}
-.resp-fluid-demo {
- padding: var(--spacing-md);
- background: var(--color-bg);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
-}
-.resp-fluid-container {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
-}
-.resp-fluid-fixed, .resp-fluid-adaptive {
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.resp-fluid-fixed span, .resp-fluid-adaptive span {
- display: block;
- margin-bottom: 4px;
-}
-.resp-fluid-bar {
- height: 24px;
- background: var(--color-mist);
- border-radius: 4px;
-}
-.resp-fluid-adaptive .resp-fluid-bar {
- background: var(--color-accent);
-}
-.resp-adapt-demo {
- display: flex;
- gap: var(--spacing-sm);
- align-items: flex-end;
-}
-.resp-device {
- text-align: center;
-}
-.resp-device > span {
- display: block;
- margin-top: 4px;
- font-size: 0.625rem;
- color: var(--color-ash);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-.resp-device-screen {
- background: var(--color-paper);
- border: 2px solid var(--color-mist);
- border-radius: 4px;
- padding: 4px;
- display: flex;
- flex-direction: column;
- gap: 3px;
-}
-.resp-device-mobile .resp-device-screen {
- width: 50px;
- height: 80px;
-}
-.resp-device-tablet .resp-device-screen {
- width: 80px;
- height: 60px;
-}
-.resp-device-desktop .resp-device-screen {
- width: 120px;
- height: 70px;
-}
-.resp-block {
- background: var(--color-mist);
- border-radius: 2px;
-}
-.resp-block-row {
- display: flex;
- gap: 3px;
- flex: 1;
-}
-.resp-header {
- height: 16px;
- background: var(--color-charcoal);
-}
-.resp-sidebar {
- width: 30%;
- background: var(--color-charcoal);
-}
-.resp-content {
- flex: 1;
-}
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-@media (prefers-reduced-motion: reduce) {
- *, *::before, *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- }
-}
-*, *::before, *::after {
- box-sizing: border-box;
-}
-* {
- margin: 0;
-}
-img, picture, video, canvas, svg {
- display: block;
- max-width: 100%;
-}
-button, input, textarea, select {
- font: inherit;
-}
-:root {
- --font-display: 'Cormorant Garamond', Georgia, serif;
- --font-body: 'Instrument Sans', system-ui, sans-serif;
- --font-mono: 'Space Grotesk', monospace;
- --spacing-xs: 8px;
- --spacing-sm: 16px;
- --spacing-md: 24px;
- --spacing-lg: 32px;
- --spacing-xl: 48px;
- --spacing-2xl: 80px;
- --spacing-3xl: 120px;
- --width-max: 1400px;
- --width-content: 900px;
- --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
- --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
- --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 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-create-bg: #fdf2f8;
- --cat-create-border: #ec4899;
- --cat-create-text: #be185d;
- --cat-evaluate-bg: #fdf4ff;
- --cat-evaluate-border: #d946ef;
- --cat-evaluate-text: #a21caf;
- --cat-refine-bg: #eff6ff;
- --cat-refine-border: #3b82f6;
- --cat-refine-text: #1d4ed8;
- --cat-simplify-bg: #fffbeb;
- --cat-simplify-border: #f59e0b;
- --cat-simplify-text: #b45309;
- --cat-harden-bg: #f0fdf4;
- --cat-harden-border: #22c55e;
- --cat-harden-text: #15803d;
- --cat-system-bg: #f5f5f4;
- --cat-system-border: #78716c;
- --cat-system-text: #44403c;
-}
-.skip-link {
- position: absolute;
- top: -100%;
- left: 50%;
- transform: translateX(-50%);
- z-index: 10000;
- padding: var(--spacing-sm) var(--spacing-lg);
- background: var(--color-ink);
- color: var(--color-paper);
- font-weight: 600;
- text-decoration: none;
- border-radius: 0 0 8px 8px;
- transition: top 0.2s ease;
-}
-.skip-link:focus {
- top: 0;
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
-}
-.section-nav {
- position: fixed;
- bottom: var(--spacing-md);
- left: 50%;
- transform: translateX(-50%) translateY(20px);
- z-index: 100;
- display: flex;
- align-items: center;
- gap: 2px;
- padding: 4px;
- background: oklch(98% 0 0 / 0.85);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
- border: 1px solid var(--color-mist);
- border-radius: 100px;
- box-shadow: 0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
-}
-.section-nav.is-visible {
- opacity: 1;
- pointer-events: auto;
- transform: translateX(-50%) translateY(0);
-}
-.section-nav-item {
- display: flex;
- align-items: center;
- gap: 4px;
- padding: 8px 12px;
- text-decoration: none;
- border-radius: 100px;
- transition: background 0.2s ease, color 0.2s ease;
-}
-.section-nav-item:hover {
- background: var(--color-mist);
- text-decoration: none;
-}
-.section-nav-item.is-active {
- background: var(--color-ink);
-}
-.section-nav-item.is-active .section-nav-num {
- color: var(--color-paper);
-}
-.section-nav-item.is-active .section-nav-label {
- color: var(--color-paper);
-}
-.section-nav-num {
- font-family: var(--font-mono);
- font-size: 0.5625rem;
- font-weight: 500;
- color: var(--color-ash);
- letter-spacing: 0.02em;
- transition: color 0.2s ease;
-}
-.section-nav-label {
- font-family: var(--font-body);
- font-size: 0.6875rem;
- font-weight: 500;
- color: var(--color-charcoal);
- transition: color 0.2s ease;
- white-space: nowrap;
-}
-@media (max-width: 700px) {
- .section-nav-label {
- display: none;
- }
- .section-nav-item {
- padding: 8px 10px;
- }
-}
-@media (max-width: 400px) {
- .section-nav-item {
- padding: 8px;
- }
- .section-nav-num {
- font-size: 0.625rem;
- }
-}
-html {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- overflow-x: clip;
-}
-body {
- font-family: var(--font-body);
- font-size: 16px;
- line-height: 1.625;
- color: var(--color-text);
- background: var(--color-paper);
- overflow-x: clip;
- min-height: 100vh;
- min-height: 100dvh;
-}
-h1, h2, h3, h4, h5, h6 {
- font-family: var(--font-display);
- font-weight: 400;
- line-height: 1.1;
- letter-spacing: -0.02em;
- color: var(--color-ink);
-}
-a {
- color: var(--color-accent);
- text-decoration: underline;
- text-decoration-thickness: 1px;
- text-underline-offset: 2px;
- transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
-}
-a:hover {
- color: var(--color-accent-hover);
- text-decoration-thickness: 2px;
-}
-.btn, .footer-logo, [class*="nav-item"] {
- text-decoration: none;
-}
-strong {
- font-weight: 600;
- color: var(--color-ink);
-}
-code {
- font-family: var(--font-mono);
- font-size: 0.9em;
- padding: 0.15em 0.4em;
- background: var(--color-accent-dim);
- color: var(--color-accent);
- border-radius: 4px;
-}
-::selection {
- background: var(--color-accent-soft);
- color: var(--color-ink);
-}
-.grain-overlay {
- position: fixed;
- inset: 0;
- pointer-events: none;
- z-index: 9999;
- opacity: 0.03;
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
- background-repeat: repeat;
-}
-.site-content {
- max-width: var(--width-max);
- margin: 0 auto;
- padding: 0 var(--spacing-lg);
-}
-@media (max-width: 768px) {
- .site-content {
- padding: 0 var(--spacing-md);
- }
-}
-.section-header {
- margin-bottom: var(--spacing-lg);
- position: relative;
-}
-.section-number {
- display: block;
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 500;
- letter-spacing: 0.05em;
- color: var(--color-ash);
- margin-bottom: var(--spacing-xs);
- text-transform: uppercase;
-}
-.section-title {
- font-size: clamp(1.75rem, 4vw, 2.5rem);
- font-weight: 400;
- line-height: 1.2;
- margin: 0;
-}
-.section-subtitle {
- font-size: 1rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- margin-top: var(--spacing-sm);
- max-width: 55ch;
-}
-.cheatsheet-link {
- color: var(--color-accent);
- text-decoration: none;
- font-size: 0.875rem;
- margin-left: 0.5em;
-}
-.cheatsheet-link:hover {
- text-decoration: underline;
-}
-.section-lead {
- font-size: 1rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- max-width: 55ch;
- margin-bottom: var(--spacing-lg);
-}
-.hero-combined {
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 100vh;
- min-height: 100dvh;
- padding: var(--spacing-lg) 0 var(--spacing-2xl);
- background: var(--color-paper);
-}
-.github-link {
- position: absolute;
- top: var(--spacing-md);
- right: var(--spacing-lg);
- z-index: 10;
- color: var(--color-ash);
- transition: color 0.2s ease;
- display: flex;
- align-items: center;
- gap: 6px;
- text-decoration: none;
-}
-.github-link:hover {
- color: var(--color-ink);
- text-decoration: none;
-}
-.github-stars {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- font-weight: 500;
- color: var(--color-ash);
- transition: color 0.2s ease;
-}
-.github-link:hover .github-stars {
- color: var(--color-ink);
-}
-.hero-combined-container {
- max-width: var(--width-max);
- margin: 0 auto;
- padding: 0 var(--spacing-lg);
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: var(--spacing-xl);
- align-items: center;
- width: 100%;
-}
-@media (max-width: 1024px) {
- .hero-combined-container {
- grid-template-columns: 1fr;
- gap: var(--spacing-lg);
- text-align: center;
- }
-}
-@media (max-width: 768px) {
- .hero-combined-right {
- order: -1;
- padding-top: var(--spacing-xl);
- }
- .hero-combined-container {
- gap: var(--spacing-md);
- }
- .hero-combined-left {
- gap: var(--spacing-sm);
- padding-top: var(--spacing-md);
- }
- .hero-hook-text, .hero-included-box, .hero-cta-group {
- margin-top: var(--spacing-xs);
- }
-}
-.hero-combined-left {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
-}
-@media (max-width: 1024px) {
- .hero-combined-left {
- align-items: center;
- }
-}
-.hero-title-combined {
- font-family: var(--font-display);
- font-size: clamp(2.5rem, 7vw, 4.5rem);
- font-weight: 300;
- font-style: italic;
- line-height: 1;
- letter-spacing: -0.02em;
- margin: 0;
- color: var(--color-ink);
-}
-.hero-tagline-combined {
- font-family: var(--font-display);
- font-size: clamp(1.125rem, 2.5vw, 1.75rem);
- font-weight: 400;
- font-style: italic;
- line-height: 1.3;
- margin: 0;
- color: var(--color-charcoal);
-}
-.hero-hook-text {
- font-size: 1rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- max-width: 45ch;
- margin: 0;
-}
-.hero-hook-text--short {
- display: none;
-}
-@media (max-width: 768px) {
- .hero-hook-text--full {
- display: none;
- }
- .hero-hook-text--short {
- display: block;
- }
-}
-.hero-included-box {
- display: flex;
- flex-direction: column;
- gap: 6px;
- padding: 10px 14px;
- border: 1px solid var(--color-mist);
- background: transparent;
- max-width: 45ch;
-}
-.hero-included-title {
- font-family: var(--font-body);
- font-size: 0.5625rem;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
-}
-.hero-included-items {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: 6px;
- font-size: 0.8125rem;
- color: var(--color-charcoal);
- line-height: 1.5;
-}
-.hero-included-items em {
- font-style: normal;
- font-family: var(--font-mono);
- font-size: 0.75rem;
-}
-.hero-included-sep {
- color: var(--color-mist);
-}
-@media (max-width: 500px) {
- .hero-included-items {
- flex-direction: column;
- align-items: flex-start;
- gap: 4px;
- }
- .hero-included-sep {
- display: none;
- }
-}
-.hero-cta-group {
- display: flex;
- align-items: center;
- gap: var(--spacing-lg);
- margin-top: var(--spacing-sm);
-}
-@media (max-width: 600px) {
- .hero-cta-group {
- flex-direction: column;
- gap: var(--spacing-md);
- }
-}
-.hero-cta-combined {
- display: inline-block;
- padding: var(--spacing-sm) var(--spacing-xl);
- font-family: var(--font-body);
- font-size: 0.9rem;
- font-weight: 500;
- letter-spacing: 0.05em;
- text-transform: uppercase;
- text-decoration: none;
- color: var(--color-paper);
- background: var(--color-ink);
- border: none;
- transition: transform 0.2s ease, background 0.2s ease;
-}
-.hero-cta-combined:hover {
- transform: translateY(-2px);
- background: var(--color-accent);
- color: var(--color-paper);
-}
-.hero-logos-inline {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 6px;
-}
-.hero-logos-inline .hero-logos-label {
- font-size: 0.6875rem;
- color: var(--color-ash);
- letter-spacing: 0.03em;
-}
-.hero-logos-inline .hero-logos-row {
- display: flex;
- align-items: center;
- gap: 8px;
- flex-wrap: wrap;
-}
-.hero-logos-inline .hero-logos-row img {
- border-radius: 4px;
- opacity: 0.7;
- transition: opacity 0.2s ease;
-}
-.hero-logos-inline .hero-logos-row img:hover {
- opacity: 1;
-}
-.hero-combined-right {
- display: flex;
- justify-content: center;
-}
-.hero-combined-right .split-comparison {
- max-width: 520px;
- width: 100%;
-}
-.hero-combined-right .split-container {
- max-width: 100%;
-}
-.hero-bias-tags {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-xs);
- margin-top: var(--spacing-lg);
- padding-top: var(--spacing-md);
- border-top: 1px solid var(--color-mist);
- max-width: var(--width-max);
- margin-left: auto;
- margin-right: auto;
- width: 100%;
- padding-bottom: var(--spacing-md);
-}
-.problem-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.problem-content {
- display: grid;
- gap: var(--spacing-xl);
-}
-.split-comparison {
- position: relative;
- width: 100%;
- max-width: 600px;
- margin: 0 auto;
- padding: 20px;
- margin-top: -20px;
- margin-bottom: -20px;
-}
-.split-container {
- position: relative;
- width: 100%;
- max-width: 500px;
- height: 380px;
- margin: 0 auto;
- border-radius: 12px;
- overflow: hidden;
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- cursor: ew-resize;
- user-select: none;
-}
-.split-before, .split-after {
- position: absolute;
- inset: 0;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.split-before {
- z-index: 1;
-}
-.split-content {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.split-after {
- clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
- z-index: 2;
- background: var(--color-paper);
-}
-.split-divider {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 50%;
- width: 3px;
- background: var(--color-accent);
- transform: translateX(-50%) skewX(-10deg);
- pointer-events: none;
- z-index: 3;
- box-shadow: 0 0 20px rgba(0,0,0,0.15);
-}
-.split-label {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) skewX(10deg);
- font-size: 0.6875rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-paper);
- background: var(--color-accent);
- padding: 6px 14px;
- border-radius: 4px;
- white-space: nowrap;
- box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-}
-.slop-card {
- width: 280px;
- height: 280px;
- background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%);
- border-radius: 16px;
- padding: 24px;
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
- font-family: 'Inter', system-ui, sans-serif;
- display: flex;
- flex-direction: column;
-}
-.slop-header {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 16px;
-}
-.slop-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: linear-gradient(135deg, #8b5cf6, #7c3aed);
- flex-shrink: 0;
-}
-.slop-text {
- flex: 1;
-}
-.slop-title {
- font-size: 14px;
- font-weight: 600;
- color: #1f2937;
- margin-bottom: 2px;
-}
-.slop-subtitle {
- font-size: 12px;
- color: #6b7280;
-}
-.slop-body {
- font-size: 13px;
- line-height: 1.5;
- color: #4b5563;
- margin-bottom: auto;
- flex: 1;
-}
-.slop-button {
- width: 100%;
- padding: 10px 20px;
- background: linear-gradient(135deg, #8b5cf6, #7c3aed);
- color: white;
- border: none;
- border-radius: 8px;
- font-family: 'Inter', system-ui, sans-serif;
- font-size: 13px;
- font-weight: 500;
- cursor: pointer;
- margin-top: auto;
-}
-.slop-callouts {
- position: absolute;
- inset: 0;
- pointer-events: none;
-}
-.slop-callout {
- position: absolute;
- font-size: 0.625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.06em;
- color: var(--color-accent);
- background: var(--color-paper);
- padding: 4px 8px;
- border: 1px solid var(--color-accent);
- border-radius: 3px;
- white-space: nowrap;
- opacity: 0;
- animation: calloutFadeIn 0.4s var(--ease-out) forwards;
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-.slop-callout[data-point="font"] {
- top: 15%;
- right: 5%;
- animation-delay: 0.1s;
-}
-.slop-callout[data-point="gradient"] {
- top: 40%;
- left: 5%;
- animation-delay: 0.25s;
-}
-.slop-callout[data-point="copy"] {
- bottom: 35%;
- right: 8%;
- animation-delay: 0.4s;
-}
-.slop-callout[data-point="rounded"] {
- bottom: 12%;
- left: 10%;
- animation-delay: 0.55s;
-}
-@keyframes calloutFadeIn {
- from {
- opacity: 0;
- transform: scale(0.9);
- }
- to {
- opacity: 1;
- transform: scale(1);
- }
-}
-.impeccable-card {
- width: 280px;
- height: 300px;
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- padding: var(--spacing-lg);
- text-align: left;
- display: flex;
- flex-direction: column;
-}
-.impeccable-eyebrow {
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 500;
- letter-spacing: 0.15em;
- text-transform: uppercase;
- color: var(--color-accent);
- margin-bottom: var(--spacing-xs);
-}
-.impeccable-title {
- font-family: var(--font-display);
- font-size: 1.75rem;
- font-weight: 300;
- font-style: italic;
- color: var(--color-ink);
- margin-bottom: var(--spacing-sm);
- line-height: 1.1;
-}
-.impeccable-body {
- font-size: 0.875rem;
- line-height: 1.6;
- color: var(--color-ash);
- margin-bottom: auto;
- flex: 1;
-}
-.impeccable-button {
- display: inline-flex;
- margin-top: var(--spacing-sm);
- padding: 0.625rem 1.5rem;
- background: var(--color-ink);
- color: var(--color-paper);
- border: none;
- font-family: var(--font-body);
- font-size: 0.8125rem;
- font-weight: 500;
- letter-spacing: 0.03em;
- cursor: pointer;
- transition: all var(--duration-base) var(--ease-out);
- align-self: flex-start;
-}
-.impeccable-button:hover {
- background: var(--color-accent);
-}
-.split-labels {
- display: flex;
- justify-content: center;
- gap: var(--spacing-xl);
- margin-top: var(--spacing-md);
-}
-.split-label-item {
- display: flex;
- align-items: center;
- gap: var(--spacing-xs);
- font-size: 0.8125rem;
- color: var(--color-ash);
-}
-@media (max-width: 768px) {
- .split-comparison {
- padding: 8px;
- margin-top: -8px;
- margin-bottom: -8px;
- }
- .split-labels {
- display: none;
- }
-}
-.split-label-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: var(--color-mist);
-}
-.split-label-dot--accent {
- background: var(--color-accent);
-}
-.foundation-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.foundation-content {
- display: grid;
- gap: var(--spacing-lg);
-}
-.foundation-grid {
- display: flex;
- align-items: flex-end;
- height: 600px;
- gap: var(--spacing-sm);
- margin-top: -80px;
- position: relative;
-}
-.foundation-column {
- flex: 1;
- display: flex;
- flex-direction: column;
- height: 100%;
- justify-content: flex-end;
- cursor: pointer;
- min-width: 0;
-}
-.foundation-card {
- padding: var(--spacing-md);
- background: white;
- border: 1px solid var(--color-bg);
- border-radius: 12px;
- display: flex;
- flex-direction: column;
- height: 280px;
- margin-bottom: var(--spacing-xs);
- transition: transform var(--duration-slow) var(--ease-out-quint), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
- position: relative;
- z-index: 2;
- box-sizing: border-box;
-}
-.foundation-column:hover .foundation-card {
- transform: translateY(-12px);
- border-color: var(--color-accent);
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
-}
-.foundation-plinth {
- width: 100%;
- background: repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 2px, transparent 2px, transparent 10px);
- border: 1px solid var(--color-mist);
- border-bottom: none;
- border-radius: 8px 8px 0 0;
- transition: all var(--duration-base) var(--ease-out);
-}
-.foundation-column:hover .foundation-plinth {
- background: var(--color-mist);
- opacity: 0.7;
-}
-.plinth-1 {
- height: 4%;
-}
-.plinth-2 {
- height: 12%;
-}
-.plinth-3 {
- height: 20%;
-}
-.plinth-4 {
- height: 28%;
-}
-.plinth-5 {
- height: 36%;
-}
-.plinth-6 {
- height: 44%;
-}
-.plinth-7 {
- height: 52%;
-}
-.foundation-card-viz {
- height: 52px;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- color: var(--color-ink);
- margin-bottom: var(--spacing-md);
-}
-.foundation-card-header {
- display: flex;
- align-items: baseline;
- gap: var(--spacing-xs);
- margin-bottom: 8px;
- overflow: hidden;
-}
-.foundation-card-label {
- font-family: var(--font-display);
- font-size: 1.35rem;
- color: var(--color-ink);
- line-height: 1.1;
-}
-.foundation-card-count {
- font-family: var(--font-mono);
- font-size: 0.7rem;
- color: var(--color-accent);
- flex-shrink: 0;
-}
-.foundation-card-detail {
- font-size: 0.875rem;
- color: var(--color-ash);
- line-height: 1.4;
- margin: auto 0 0 0;
-}
-.foundation-svg {
- width: 44px;
- height: 44px;
-}
-.anim-draw {
- stroke-dasharray: 100;
- stroke-dashoffset: 100;
- animation: draw-breathe 4s ease-in-out infinite;
-}
-.foundation-column:hover .anim-draw {
- animation: draw-in 0.8s var(--ease-out) forwards;
-}
-.anim-draw-delay {
- stroke-dasharray: 100;
- stroke-dashoffset: 100;
-}
-.foundation-column:hover .anim-draw-delay {
- animation: draw-in 1s var(--ease-out) 0.2s forwards;
-}
-@keyframes draw-breathe {
- 0%, 100% {
- stroke-dashoffset: 100;
- }
- 50% {
- stroke-dashoffset: 40;
- }
-}
-@keyframes draw-in {
- from {
- stroke-dashoffset: 100;
- }
- to {
- stroke-dashoffset: 0;
- }
-}
-.anim-move-x {
- animation: pulse-x 3s ease-in-out infinite;
-}
-.foundation-column:hover .anim-move-x {
- animation: spread-x 0.6s var(--ease-in-out) forwards;
-}
-.anim-move-x-opp {
- animation: pulse-x-opp 3s ease-in-out infinite;
-}
-.foundation-column:hover .anim-move-x-opp {
- animation: spread-x-opp 0.6s var(--ease-in-out) forwards;
-}
-.anim-fade-in {
- opacity: 0;
- transition: opacity 0.6s var(--ease-in-out);
-}
-.foundation-column:hover .anim-fade-in {
- opacity: 1;
-}
-@keyframes pulse-x {
- 0%, 100% {
- transform: translateX(0);
- }
- 50% {
- transform: translateX(1.5px);
- }
-}
-@keyframes pulse-x-opp {
- 0%, 100% {
- transform: translateX(0);
- }
- 50% {
- transform: translateX(-1.5px);
- }
-}
-@keyframes spread-x {
- from {
- transform: translateX(0);
- }
- to {
- transform: translateX(4px);
- }
-}
-@keyframes spread-x-opp {
- from {
- transform: translateX(0);
- }
- to {
- transform: translateX(-4px);
- }
-}
-.anim-res-frame, .anim-res-img, .anim-res-title, .anim-res-line-1, .anim-res-line-2 {
- transform-box: fill-box;
- transform-origin: 50% 50%;
- transition: transform 0.4s var(--ease-in-out);
-}
-.anim-res-frame {
- transition-delay: 0s;
-}
-.anim-res-img {
- transition-delay: 0s;
-}
-.anim-res-title {
- transition-delay: 0s;
-}
-.anim-res-line-1 {
- transition-delay: 0s;
-}
-.anim-res-line-2 {
- transition-delay: 0s;
-}
-.foundation-column:hover .anim-res-frame {
- transform: scaleX(0.57) scaleY(1.17);
- transition-delay: 0s;
-}
-.foundation-column:hover .anim-res-img {
- transform: translate(6px, -4px) scale(0.65);
- transition-delay: 0.05s;
-}
-.foundation-column:hover .anim-res-title {
- transform: translate(-7px, 6px) scaleX(0.65);
- transition-delay: 0.1s;
-}
-.foundation-column:hover .anim-res-line-1 {
- transform: translate(-7px, 4.75px) scaleX(0.65);
- transition-delay: 0.15s;
-}
-.foundation-column:hover .anim-res-line-2 {
- transform: translate(-6px, 4.25px) scaleX(0.6);
- transition-delay: 0.2s;
-}
-.anim-toggle-move {
- animation: toggle-wobble 3s ease-in-out infinite;
-}
-.foundation-column:hover .anim-toggle-move {
- animation: toggle-snap 0.35s var(--ease-in-out) forwards;
-}
-@keyframes toggle-wobble {
- 0%, 100% {
- transform: translateX(0);
- }
- 50% {
- transform: translateX(2px);
- }
-}
-@keyframes toggle-snap {
- from {
- transform: translateX(0);
- fill: var(--color-mist);
- }
- to {
- transform: translateX(8px);
- fill: var(--color-accent);
- }
-}
-.anim-squash-ball {
- transform-origin: 20px 20px;
- animation: ball-bob 2.5s ease-in-out infinite;
-}
-.foundation-column:hover .anim-squash-ball {
- animation: bounce-ball 1.5s linear infinite;
-}
-@keyframes ball-bob {
- 0%, 100% {
- transform: translateY(0);
- }
- 50% {
- transform: translateY(3px);
- }
-}
-@keyframes bounce-ball {
- 0% {
- transform: translateY(0);
- }
- 6% {
- transform: translateY(0.5px);
- }
- 18% {
- transform: translateY(4px);
- }
- 35% {
- transform: translateY(12px);
- }
- 42% {
- transform: translateY(12px) scaleX(1.3) scaleY(0.6);
- }
- 48% {
- transform: translateY(12px);
- }
- 65% {
- transform: translateY(4px);
- }
- 78% {
- transform: translateY(0.5px);
- }
- 88%, 100% {
- transform: translateY(0);
- }
-}
-.anim-blink {
- animation: blink-key 1s step-end infinite;
-}
-@keyframes blink-key {
- 0%, 100% {
- opacity: 1;
- }
- 50% {
- opacity: 0;
- }
-}
-@media (max-width: 1200px) {
- .foundation-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- height: auto;
- gap: var(--spacing-md);
- margin-top: var(--spacing-xl);
- }
- .foundation-column {
- height: auto;
- }
- .foundation-card {
- height: auto;
- min-height: 200px;
- }
- .foundation-plinth {
- display: none;
- }
- .foundation-column:hover .foundation-card {
- transform: translateY(-4px);
- }
- .foundation-card:hover .anim-draw {
- animation: draw-in 0.8s var(--ease-out) forwards;
- }
- .foundation-card:hover .anim-draw-delay {
- animation: draw-in 1s var(--ease-out) 0.2s forwards;
- }
- .foundation-card:hover .anim-move-x {
- animation: spread-x 0.6s var(--ease-in-out) forwards;
- }
- .foundation-card:hover .anim-move-x-opp {
- animation: spread-x-opp 0.6s var(--ease-in-out) forwards;
- }
- .foundation-card:hover .anim-fade-in {
- opacity: 1;
- }
- .foundation-card:hover .anim-res-frame {
- transform: scaleX(0.57) scaleY(1.17);
- }
- .foundation-card:hover .anim-res-img {
- transform: translate(6px, -4px) scale(0.65);
- }
- .foundation-card:hover .anim-res-title {
- transform: translate(-7px, 6px) scaleX(0.65);
- }
- .foundation-card:hover .anim-res-line-1 {
- transform: translate(-7px, 4.75px) scaleX(0.65);
- }
- .foundation-card:hover .anim-res-line-2 {
- transform: translate(-6px, 4.25px) scaleX(0.6);
- }
- .foundation-card:hover .anim-toggle-move {
- animation: toggle-snap 0.35s var(--ease-in-out) forwards;
- }
- .foundation-card:hover .anim-squash-ball {
- animation: bounce-ball 1.5s linear infinite;
- }
-}
-@media (max-width: 768px) {
- .foundation-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-@media (max-width: 520px) {
- .foundation-grid {
- grid-template-columns: 1fr;
- gap: var(--spacing-sm);
- }
- .foundation-card {
- display: grid;
- grid-template-columns: auto 1fr;
- grid-template-rows: auto auto;
- align-items: start;
- min-height: auto;
- padding: var(--spacing-sm) var(--spacing-md);
- gap: 0 var(--spacing-md);
- }
- .foundation-card-viz {
- grid-row: 1 / -1;
- align-self: center;
- height: auto;
- margin-bottom: 0;
- }
- .foundation-card-header {
- margin-bottom: 2px;
- }
- .foundation-card-label {
- font-size: 1.1rem;
- }
- .foundation-card-detail {
- margin: 0;
- font-size: 0.8125rem;
- }
-}
-.foundation-cta {
- text-align: center;
-}
-.foundation-cta-text {
- font-size: 0.9375rem;
- color: var(--color-charcoal);
- margin: 0;
-}
-.foundation-cta-text code {
- font-family: var(--font-mono);
- font-size: 0.875rem;
- color: var(--color-ink);
-}
-.foundation-slash {
- color: var(--color-accent);
-}
-.language-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.language-content {
- display: grid;
- gap: var(--spacing-lg);
-}
-.language-section, .language-section * {
- min-width: 0;
-}
-.language-content .section-lead {
- margin-bottom: 0;
-}
-.commands-subsection {
- display: grid;
- gap: var(--spacing-md);
-}
-.commands-header-subtitle {
- font-size: 0.9375rem;
- color: var(--color-warm-gray);
- margin: 0;
-}
-.visual-mode-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.visual-mode-content {
- display: grid;
- gap: var(--spacing-lg);
-}
-.visual-mode-demo {
- display: grid;
- grid-template-columns: 3fr 2fr;
- gap: var(--spacing-xl);
- align-items: start;
-}
-@media (max-width: 900px) {
- .visual-mode-demo {
- grid-template-columns: 1fr;
- }
-}
-.visual-mode-preview {
- border-radius: 8px;
- overflow: hidden;
- border: 1px solid var(--color-mist);
- box-shadow: 0 8px 30px -6px rgba(0,0,0,0.12);
-}
-.visual-mode-preview-header {
- display: flex;
- align-items: center;
- gap: 6px;
- padding: 10px 14px;
- background: var(--color-cream);
- border-bottom: 1px solid var(--color-mist);
-}
-.visual-mode-preview-dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
-}
-.visual-mode-preview-dot.red {
- background: #ff5f56;
-}
-.visual-mode-preview-dot.yellow {
- background: #ffbd2e;
-}
-.visual-mode-preview-dot.green {
- background: #27c93f;
-}
-.visual-mode-preview-title {
- margin-left: auto;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.visual-mode-iframe {
- display: block;
- width: 100%;
- height: 480px;
- border: none;
- background: white;
-}
-.visual-mode-details {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-xl);
- padding: var(--spacing-md) 0;
-}
-.visual-mode-feature {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-xs);
-}
-.visual-mode-feature-label {
- display: block;
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-accent);
-}
-.visual-mode-feature p {
- font-size: 0.9375rem;
- line-height: 1.55;
- color: var(--color-charcoal);
- margin: 0;
-}
-.visual-mode-feature code {
- font-family: var(--font-mono);
- font-size: 0.875rem;
- color: var(--color-ink);
-}
-.solution-section {
- padding: var(--spacing-2xl) 0;
-}
-.solution-content {
- display: grid;
- gap: var(--spacing-lg);
-}
-.solution-content .section-lead {
- margin-bottom: 0;
-}
-.solution-visual {
- display: grid;
- grid-template-columns: 1fr auto 1fr;
- gap: var(--spacing-lg);
- align-items: stretch;
-}
-@media (max-width: 900px) {
- .solution-visual {
- grid-template-columns: 1fr;
- gap: var(--spacing-md);
- }
-}
-.solution-visual-interactive {
- width: 100%;
- min-height: 380px;
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- position: relative;
- overflow: visible;
-}
-.solution-pillar {
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- padding: var(--spacing-lg);
- transition: all var(--duration-base) var(--ease-out);
-}
-.solution-pillar:hover {
- border-color: var(--color-accent);
- transform: translateY(-4px);
- box-shadow: 0 20px 60px var(--color-accent-dim);
-}
-.pillar-header {
- text-align: center;
- margin-bottom: var(--spacing-lg);
- padding-bottom: var(--spacing-md);
- border-bottom: 1px solid var(--color-mist);
-}
-.pillar-icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 56px;
- height: 56px;
- border-radius: 50%;
- background: var(--color-accent-dim);
- color: var(--color-accent);
- margin-bottom: var(--spacing-sm);
-}
-.pillar-title {
- font-family: var(--font-display);
- font-size: 1.75rem;
- font-weight: 400;
- margin: 0 0 var(--spacing-xs);
-}
-.pillar-subtitle {
- font-size: 0.875rem;
- color: var(--color-ash);
- margin: 0;
-}
-.pillar-content {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-sm);
-}
-.pillar-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: var(--spacing-sm);
- background: var(--color-paper);
- border-radius: 4px;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.pillar-item:hover {
- background: var(--color-accent-dim);
-}
-.pillar-item-name {
- font-weight: 500;
- color: var(--color-ink);
- font-size: 0.9375rem;
-}
-.pillar-item-code {
- font-family: var(--font-mono);
- font-size: 0.875rem;
- font-weight: 500;
- color: var(--color-accent);
- background: transparent;
- padding: 0;
-}
-.pillar-item-desc {
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.pillar-item--more {
- justify-content: center;
- font-size: 0.8125rem;
- font-weight: 500;
- color: var(--color-accent);
- background: transparent;
- border: 1px dashed var(--color-mist);
-}
-.solution-connector {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.connector-plus {
- font-family: var(--font-display);
- font-size: 3rem;
- font-weight: 300;
- color: var(--color-accent);
- opacity: 0.5;
-}
-@media (max-width: 900px) {
- .solution-connector {
- padding: var(--spacing-sm) 0;
- }
- .connector-plus {
- font-size: 2rem;
- }
-}
-.skills-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.skills-gallery {
- display: grid;
- grid-template-columns: 200px 1fr;
- gap: var(--spacing-xl);
- align-items: start;
-}
-@media (max-width: 968px) {
- .skills-gallery {
- grid-template-columns: 1fr;
- gap: var(--spacing-lg);
- }
-}
-.skills-nav {
- display: flex;
- flex-direction: column;
- gap: 2px;
- position: sticky;
- top: var(--spacing-lg);
-}
-@media (max-width: 968px) {
- .skills-nav {
- flex-direction: row;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- position: static;
- }
-}
-.skill-nav-item {
- padding: var(--spacing-sm) var(--spacing-md);
- background: transparent;
- border: none;
- border-left: 2px solid transparent;
- color: var(--color-ash);
- font-family: var(--font-body);
- font-size: 0.9375rem;
- font-weight: 400;
- cursor: pointer;
- transition: all 0.2s ease;
- text-align: left;
- text-decoration: none;
- display: block;
-}
-.skill-nav-item:hover {
- color: var(--color-text);
- background: var(--color-cream);
-}
-.skill-nav-item.active {
- color: var(--color-accent);
- border-left-color: var(--color-accent);
- background: var(--color-accent-dim);
- font-weight: 500;
-}
-@media (max-width: 968px) {
- .skill-nav-item {
- border-left: none;
- border-bottom: 2px solid transparent;
- padding: var(--spacing-xs) var(--spacing-md);
- }
- .skill-nav-item.active {
- border-bottom-color: var(--color-accent);
- }
-}
-.skills-showcase {
- display: grid;
- grid-template-columns: 1.2fr 1fr;
- gap: var(--spacing-lg);
- align-items: start;
-}
-@media (max-width: 1100px) {
- .skills-showcase {
- grid-template-columns: 1fr;
- }
-}
-.loading-state {
- padding: var(--spacing-xl);
- text-align: center;
- color: var(--color-ash);
- font-style: italic;
-}
-.mobile-commands-layout {
- display: none;
-}
-@media (max-width: 900px) {
- .mobile-commands-layout {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
- min-width: 0;
- width: 100%;
- }
- .mobile-commands-layout > * {
- min-width: 0;
- max-width: 100%;
- }
- .commands-container {
- display: none;
- }
-}
-.mobile-carousel-wrapper {
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- scrollbar-width: none;
- padding: var(--spacing-xs) 0;
-}
-.mobile-carousel-wrapper::-webkit-scrollbar {
- display: none;
-}
-.mobile-carousel {
- display: flex;
- gap: var(--spacing-xs);
- padding-right: var(--spacing-md);
-}
-.mobile-cmd-pill {
- flex-shrink: 0;
- padding: var(--spacing-sm) var(--spacing-md);
- min-height: 44px;
- font-family: var(--font-mono);
- font-size: 0.8125rem;
- font-weight: 500;
- color: var(--color-charcoal);
- background: none;
- border: none;
- border-radius: 100px;
- cursor: pointer;
- transition: background 0.2s ease, color 0.2s ease;
- white-space: nowrap;
-}
-.mobile-cmd-pill:hover {
- background: var(--color-mist);
-}
-.mobile-cmd-pill.active {
- color: var(--color-paper);
- background: var(--color-ink);
-}
-.mobile-demo-area {
- padding: 0;
-}
-.mobile-demo-area .demo-split-comparison {
- width: 100%;
-}
-.mobile-demo-area .split-container {
- width: 100%;
- max-width: 100%;
- height: 320px;
-}
-.mobile-demo-area .demo-caption {
- font-size: 0.75rem;
- margin-top: var(--spacing-sm);
-}
-.mobile-info-area {
- padding-top: var(--spacing-sm);
-}
-.mobile-cmd-info {
- display: none;
- padding: var(--spacing-sm) 0;
-}
-.mobile-cmd-info.active {
- display: block;
-}
-.mobile-cmd-name {
- font-family: var(--font-mono);
- font-size: 1.125rem;
- font-weight: 600;
- color: var(--color-ink);
- margin: 0 0 var(--spacing-xs) 0;
-}
-.mobile-cmd-desc {
- font-size: 0.875rem;
- color: var(--color-charcoal);
- line-height: 1.5;
- margin: 0;
-}
-.mobile-cmd-rel {
- margin-top: var(--spacing-xs);
- font-size: 0.75rem;
- color: var(--color-ash);
-}
-.mobile-cmd-rel code {
- font-family: var(--font-mono);
- color: var(--color-ink);
-}
-.downloads-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.downloads-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: var(--spacing-lg);
-}
-.download-card {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- padding: var(--spacing-lg);
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- transition: all var(--duration-base) var(--ease-out);
-}
-.download-card:hover {
- border-color: var(--color-accent);
- transform: translateY(-4px);
- box-shadow: 0 20px 60px var(--color-accent-dim);
-}
-.download-card-icon {
- margin-bottom: var(--spacing-sm);
-}
-.download-card-icon img {
- width: 40px;
- height: 40px;
- object-fit: contain;
- border-radius: 8px;
-}
-.download-card-title {
- font-family: var(--font-display);
- font-size: 1.25rem;
- font-weight: 400;
- margin: 0 0 var(--spacing-sm) 0;
-}
-.download-card-note {
- font-size: 0.75rem;
- color: var(--color-ash);
- margin-bottom: var(--spacing-xs);
-}
-.download-card .btn {
- margin-top: var(--spacing-xs);
-}
-.install-command {
- display: flex;
- align-items: center;
- gap: var(--spacing-xs);
- background: var(--color-paper);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- padding: var(--spacing-sm);
- margin-top: var(--spacing-sm);
- width: 100%;
-}
-.install-command code {
- flex: 1;
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--color-ink);
- background: transparent;
- padding: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.copy-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 28px;
- height: 28px;
- background: transparent;
- border: 1px solid var(--color-mist);
- border-radius: 4px;
- color: var(--color-ash);
- cursor: pointer;
- flex-shrink: 0;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.copy-btn:hover {
- background: var(--color-accent-dim);
- border-color: var(--color-accent);
- color: var(--color-accent);
-}
-.copy-btn.copied {
- background: var(--color-accent);
- border-color: var(--color-accent);
- color: var(--color-paper);
-}
-.install-hint {
- font-size: 0.75rem;
- color: var(--color-ash);
- margin: var(--spacing-xs) 0 0 0;
-}
-.install-hint code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-mist);
- padding: 2px 5px;
- border-radius: 3px;
-}
-.download-card-details {
- width: 100%;
- margin-top: var(--spacing-sm);
- font-size: 0.8125rem;
- text-align: left;
-}
-.download-card-details summary {
- cursor: pointer;
- color: var(--color-ash);
- font-size: 0.75rem;
- padding: var(--spacing-xs) 0;
- list-style: none;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 4px;
-}
-.download-card-details summary::before {
- content: '▶';
- font-size: 0.5rem;
- transition: transform var(--duration-fast) var(--ease-out);
-}
-.download-card-details[open] summary::before {
- transform: rotate(90deg);
-}
-.download-card-details summary::-webkit-details-marker {
- display: none;
-}
-.download-card-details ol {
- margin: var(--spacing-sm) 0;
- padding-left: var(--spacing-md);
- color: var(--color-charcoal);
- line-height: 1.6;
-}
-.download-card-details li {
- margin-bottom: 4px;
-}
-.download-card-details code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-mist);
- padding: 2px 5px;
- border-radius: 3px;
-}
-.download-card-details a {
- color: var(--color-accent);
- text-decoration: none;
- font-size: 0.75rem;
-}
-.download-card-details a:hover {
- text-decoration: underline;
-}
-.opensource-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
- text-align: center;
-}
-.opensource-content {
- max-width: 500px;
- margin: 0 auto;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-md);
-}
-.opensource-title {
- font-size: clamp(1.5rem, 4vw, 2rem);
- font-weight: 300;
-}
-.opensource-desc {
- font-size: 1.125rem;
- color: var(--color-ash);
- line-height: 1.6;
-}
-.site-footer {
- border-top: 1px solid var(--color-mist);
- padding: var(--spacing-xl) var(--spacing-lg);
- background: var(--color-cream);
-}
-.footer-row {
- max-width: var(--width-max);
- margin: 0 auto;
- display: grid;
- grid-template-columns: auto 1fr auto;
- align-items: center;
- gap: var(--spacing-xl);
-}
-.footer-logo {
- font-family: var(--font-display);
- font-size: 1.25rem;
- font-weight: 400;
- color: var(--color-ink);
- text-decoration: none;
-}
-.footer-links {
- display: flex;
- justify-content: center;
- gap: var(--spacing-lg);
- flex-wrap: wrap;
-}
-.footer-links a {
- font-size: 0.875rem;
- color: var(--color-ash);
- text-decoration: none;
- transition: color var(--duration-fast) var(--ease-out);
-}
-.footer-links a:hover {
- color: var(--color-accent);
-}
-.footer-credit {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
- font-size: 0.875rem;
- color: var(--color-ash);
- white-space: nowrap;
-}
-.footer-credit a {
- color: var(--color-text);
- text-decoration: none;
- transition: color var(--duration-fast) var(--ease-out);
-}
-.footer-credit a:hover {
- color: var(--color-accent);
-}
-.footer-social-link {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- padding: 4px;
- color: var(--color-ash);
- transition: color var(--duration-fast) var(--ease-out);
-}
-.footer-social-link:hover {
- color: var(--color-accent);
-}
-@media (max-width: 900px) {
- .footer-row {
- grid-template-columns: 1fr;
- justify-items: center;
- text-align: center;
- gap: var(--spacing-md);
- }
- .footer-links {
- justify-content: center;
- gap: var(--spacing-sm) var(--spacing-md);
- font-size: 0.8125rem;
- }
- .site-footer {
- padding: var(--spacing-lg) var(--spacing-md);
- }
-}
-.btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: var(--spacing-xs);
- padding: 1rem 2rem;
- font-family: var(--font-body);
- font-size: 0.9375rem;
- font-weight: 600;
- letter-spacing: 0.03em;
- border: none;
- cursor: pointer;
- transition: all var(--duration-base) var(--ease-out);
- position: relative;
- overflow: hidden;
- text-decoration: none;
-}
-.btn-primary {
- background: var(--color-ink);
- color: var(--color-paper);
-}
-.btn-primary::before {
- content: '';
- position: absolute;
- inset: 0;
- background: var(--color-accent);
- transform: translateY(100%);
- transition: transform var(--duration-base) var(--ease-out);
- z-index: 0;
-}
-.btn-primary:hover::before {
- transform: translateY(0);
-}
-.btn-primary:hover {
- color: var(--color-paper);
-}
-.btn-primary span, .btn-primary svg {
- position: relative;
- z-index: 1;
-}
-.btn-primary:not(:has(span)) {
- position: relative;
- z-index: 1;
-}
-.btn-secondary {
- background: transparent;
- color: var(--color-ink);
- border: 1px solid var(--color-ink);
-}
-.btn-secondary:hover {
- background: var(--color-ink);
- color: var(--color-paper);
-}
-.btn:focus-visible {
- outline: 2px solid var(--color-accent);
- outline-offset: 2px;
-}
-.btn-primary:focus-visible {
- outline-color: var(--color-paper);
- box-shadow: 0 0 0 4px var(--color-accent);
-}
-.btn-secondary:focus-visible {
- outline-color: var(--color-accent);
-}
-@keyframes revealUp {
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-@keyframes fadeIn {
- to {
- opacity: 1;
- }
-}
-@keyframes float {
- 0%, 100% {
- transform: translateX(-50%) translateY(0);
- }
- 50% {
- transform: translateX(-50%) translateY(-8px);
- }
-}
-@keyframes bounce {
- 0%, 100% {
- transform: translateY(0);
- }
- 50% {
- transform: translateY(4px);
- }
-}
-[data-reveal] {
- opacity: 0;
- transform: translateY(30px);
- transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
-}
-[data-reveal].revealed {
- opacity: 1;
- transform: translateY(0);
-}
-[data-reveal]:nth-child(1) {
- transition-delay: 0s;
-}
-[data-reveal]:nth-child(2) {
- transition-delay: 0.1s;
-}
-[data-reveal]:nth-child(3) {
- transition-delay: 0.2s;
-}
-[data-reveal]:nth-child(4) {
- transition-delay: 0.3s;
-}
-@media (prefers-reduced-motion: reduce) {
- *, *::before, *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
- html {
- scroll-behavior: auto;
- }
- .hero-canvas {
- display: none;
- }
- .hero-scroll-indicator {
- animation: none;
- opacity: 1;
- }
- [data-reveal] {
- opacity: 1;
- transform: none;
- }
- .gallery-frame {
- opacity: 1;
- transform: none;
- }
-}
-.load-error {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- padding: var(--spacing-2xl) var(--spacing-lg);
- gap: var(--spacing-md);
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
-}
-.load-error-icon {
- font-size: 2.5rem;
- color: var(--color-accent);
-}
-.load-error-title {
- font-family: var(--font-display);
- font-size: 1.5rem;
- font-weight: 400;
- color: var(--color-ink);
- margin: 0;
-}
-.load-error-text {
- font-size: 1rem;
- color: var(--color-ash);
- max-width: 40ch;
- line-height: 1.5;
-}
-.load-error-retry {
- margin-top: var(--spacing-sm);
-}
-.bias-tags {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-sm);
- margin-top: var(--spacing-lg);
-}
-.bias-tags-label {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- font-weight: 500;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- color: var(--color-ash);
-}
-.bias-tags-list {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: var(--spacing-xs);
-}
-.bias-tag {
- font-size: 0.75rem;
- font-weight: 500;
- padding: 6px 12px;
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- color: var(--color-charcoal);
- transition: all var(--duration-fast) var(--ease-out);
-}
-.bias-tag:hover {
- border-color: var(--color-accent);
- color: var(--color-accent);
-}
-.antidote-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.antidote-row {
- display: flex;
- gap: var(--spacing-xl);
- align-items: stretch;
- margin-bottom: var(--spacing-xl);
-}
-.antidote-row .patterns-tabbed {
- flex: 1;
- min-width: 0;
- margin-bottom: 0;
-}
-.gallery-stack-container {
- flex: 0 0 clamp(320px, 34vw, 420px);
- display: flex;
- flex-direction: column;
- gap: var(--spacing-xs);
- position: relative;
-}
-.gallery-stack-header {
- display: flex;
- align-items: center;
- gap: var(--spacing-xs);
- white-space: nowrap;
-}
-.gallery-stack-title {
- font-family: var(--font-display);
- font-size: 1rem;
- font-weight: 600;
- color: var(--color-ink);
- flex: 1;
-}
-.gallery-stack-btn {
- width: 24px;
- height: 24px;
- border-radius: 50%;
- border: 1px solid var(--color-mist);
- background: white;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 0.6875rem;
- color: var(--color-charcoal);
- flex-shrink: 0;
- transition: border-color var(--duration-fast), background var(--duration-fast);
- position: relative;
-}
-.gallery-stack-btn::after {
- content: '';
- position: absolute;
- inset: -10px;
-}
-.gallery-stack-btn:hover {
- border-color: var(--color-charcoal);
-}
-.gallery-stack {
- position: relative;
- width: calc(100% - 20px);
- aspect-ratio: 3 / 2;
- margin-bottom: 20px;
-}
-.gallery-stack-card {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- border-radius: 8px;
- overflow: hidden;
- border: 1px solid var(--color-mist);
- text-decoration: none;
- background: white;
- transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, box-shadow 0.35s ease;
- will-change: transform, opacity;
-}
-.gallery-stack-card img {
- flex: 1;
- min-height: 0;
- width: 100%;
- object-fit: cover;
- object-position: top left;
-}
-.gallery-stack-label {
- padding: 6px 10px;
- font-size: 0.75rem;
- font-weight: 600;
- color: var(--color-charcoal);
- flex-shrink: 0;
-}
-.gallery-stack-card[data-offset="0"] {
- z-index: 3;
- transform: translate(0, 0);
- opacity: 1;
- box-shadow: 0 2px 12px oklch(0.2 0 0 / 0.1);
-}
-.gallery-stack-card[data-offset="1"] {
- z-index: 2;
- transform: translate(8px, 8px);
- opacity: 1;
- box-shadow: 0 1px 6px oklch(0.2 0 0 / 0.08);
- pointer-events: none;
-}
-.gallery-stack-card[data-offset="2"] {
- z-index: 1;
- transform: translate(16px, 16px);
- opacity: 1;
- box-shadow: 0 1px 4px oklch(0.2 0 0 / 0.06);
- pointer-events: none;
-}
-.gallery-stack-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="2"]) {
- z-index: 0;
- transform: translate(20px, 20px);
- opacity: 0;
- pointer-events: none;
-}
-.gallery-stack-link {
- font-size: 0.75rem;
- font-weight: 500;
- color: var(--color-accent);
- text-decoration: none;
- text-align: center;
-}
-.gallery-stack-link:hover {
- text-decoration: underline;
-}
-@media (max-width: 900px) {
- .antidote-row {
- flex-direction: column;
- }
- .gallery-stack-container {
- flex: none;
- width: 100%;
- max-width: 360px;
- }
-}
-.patterns-tabbed {
- margin-bottom: var(--spacing-xl);
- background: white;
- border-radius: 8px;
- padding: var(--spacing-lg);
-}
-.patterns-tabs {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
- margin-bottom: var(--spacing-md);
-}
-@media (max-width: 768px) {
- .patterns-tabs {
- flex-wrap: nowrap;
- overflow-x: auto;
- scrollbar-width: none;
- -webkit-overflow-scrolling: touch;
- margin-left: calc(-1 * var(--spacing-lg));
- margin-right: calc(-1 * var(--spacing-lg));
- padding-left: var(--spacing-lg);
- padding-right: var(--spacing-lg);
- }
- .patterns-tabs::-webkit-scrollbar {
- display: none;
- }
-}
-.patterns-tab {
- font-family: var(--font-body);
- font-size: 0.75rem;
- font-weight: 500;
- color: var(--color-charcoal);
- background: none;
- border: none;
- border-radius: 100px;
- padding: 6px 12px;
- cursor: pointer;
- white-space: nowrap;
- transition: background 0.2s ease, color 0.2s ease;
-}
-.patterns-tab:hover {
- background: var(--color-mist);
-}
-.patterns-tab.is-active {
- background: var(--color-ink);
- color: var(--color-paper);
-}
-.patterns-content {
- display: none;
-}
-.patterns-content.is-active {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-md);
-}
-.patterns-col ul {
- list-style: none;
- padding: 0;
- margin: 0;
- display: flex;
- flex-direction: column;
- gap: 6px;
-}
-.patterns-col li {
- font-size: 0.8125rem;
- line-height: 1.55;
- padding-left: var(--spacing-sm);
- position: relative;
- color: var(--color-charcoal);
- overflow-wrap: break-word;
- word-break: break-word;
-}
-.patterns-col--dont li::before {
- content: '\00d7';
- position: absolute;
- left: 0;
- color: var(--color-accent);
- font-weight: 600;
-}
-.patterns-col--do li::before {
- content: '\2713';
- position: absolute;
- left: 0;
- color: var(--color-success, #22c55e);
- font-weight: 600;
-}
-.detection-callout {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
- text-decoration: none;
- color: inherit;
- padding: var(--spacing-sm) 0;
- border-top: 1px solid var(--color-mist);
-}
-.detection-callout-image {
- display: block;
- width: 132px;
- height: 112px;
- flex-shrink: 0;
- object-fit: cover;
- object-position: top left;
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- transition: border-color 0.2s ease;
-}
-.detection-callout:hover .detection-callout-image {
- border-color: var(--color-accent);
-}
-.detection-callout-inner {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- gap: 6px;
-}
-.detection-eyebrow {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-accent);
-}
-.detection-callout-title {
- font-family: var(--font-display);
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--color-ink);
- letter-spacing: -0.01em;
- line-height: 1.15;
-}
-.detection-callout:hover .detection-callout-title {
- color: var(--color-accent);
-}
-.detection-desc {
- flex: 1;
- font-size: 0.8125rem;
- line-height: 1.55;
- color: var(--color-ash);
- min-width: 200px;
-}
-.detection-desc code {
- font-family: var(--font-mono);
- font-size: 0.8125rem;
- color: var(--color-charcoal);
-}
-.detection-cmd {
- flex-shrink: 0;
- font-family: var(--font-body);
- font-size: 0.875rem;
- font-weight: 600;
- color: var(--color-ink);
- white-space: nowrap;
- transition: color 0.15s ease;
-}
-.detection-callout:hover .detection-cmd {
- color: var(--color-accent);
-}
-.antidote-footer {
- text-align: center;
-}
-.antidote-suggest-link {
- font-size: 0.8125rem;
- color: var(--color-ash);
- text-decoration: none;
-}
-.antidote-suggest-link:hover {
- color: var(--color-accent);
- text-decoration: underline;
-}
-.pillar-item--main {
- background: var(--color-accent-dim);
- border: 1px solid var(--color-accent);
-}
-.pillar-item--main .pillar-item-name {
- font-size: 1.125rem;
- font-weight: 600;
- color: var(--color-accent);
-}
-.pillar-item--ref {
- background: transparent;
- padding: var(--spacing-xs) var(--spacing-sm);
-}
-.pillar-item-label {
- font-size: 0.75rem;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--color-ash);
-}
-.pillar-refs {
- display: flex;
- flex-wrap: wrap;
- gap: var(--spacing-xs);
- padding: 0 var(--spacing-sm);
-}
-.pillar-ref {
- font-size: 0.6875rem;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 0.03em;
- padding: 4px 10px;
- background: var(--color-paper);
- color: var(--color-ash);
- border: 1px solid var(--color-mist);
- border-radius: 3px;
- transition: all var(--duration-fast) var(--ease-out);
-}
-.pillar-ref:hover {
- border-color: var(--color-accent);
- color: var(--color-accent);
-}
-.pillar-command-group {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: var(--spacing-xs);
- padding: var(--spacing-sm);
- background: var(--color-paper);
- border-radius: 4px;
-}
-.pillar-group-label {
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--color-ash);
- width: 100%;
- margin-bottom: 4px;
-}
-.pillar-command-group .pillar-item-code {
- font-size: 0.8125rem;
- padding: 4px 8px;
- background: var(--color-accent-dim);
- border-radius: 3px;
-}
-.platforms-section {
- padding: var(--spacing-2xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-@media (min-width: 1100px) {
- .platforms-section {
- border-top: none;
- }
-}
-.platforms-section .section-subtitle {
- max-width: 60ch;
-}
-.install-row-primary {
- display: grid;
- grid-template-columns: 1.1fr 0.9fr;
- gap: var(--spacing-xl);
- align-items: start;
- margin: 0 0 var(--spacing-xl);
- background: white;
- border-radius: 16px;
- padding: var(--spacing-lg);
- min-width: 0;
-}
-.install-primary-main {
- display: flex;
- flex-direction: column;
- min-width: 0;
-}
-.install-primary-alts {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-lg);
- min-width: 0;
- padding-left: var(--spacing-xl);
- border-left: 1px solid var(--color-mist);
-}
-.install-alts-label {
- display: block;
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.14em;
- color: var(--color-ash);
-}
-.install-alt-sublabel {
- font-family: var(--font-body);
- font-size: 0.75rem;
- font-weight: 400;
- color: var(--color-ash);
- text-transform: none;
- letter-spacing: 0;
- margin-left: 4px;
-}
-.install-zip-links {
- display: flex;
- flex-direction: column;
- gap: 6px;
- margin-top: var(--spacing-xs);
-}
-.install-zip-link {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
- padding: 8px 12px;
- font-family: var(--font-body);
- font-size: 0.8125rem;
- color: var(--color-charcoal);
- background: transparent;
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- cursor: pointer;
- text-align: left;
- transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
-}
-.install-zip-link:hover {
- border-color: var(--color-accent);
- color: var(--color-accent);
-}
-.install-zip-link svg {
- flex-shrink: 0;
- color: var(--color-ash);
-}
-.install-zip-link:hover svg {
- color: var(--color-accent);
-}
-.install-zip-link-name {
- font-weight: 600;
- color: var(--color-ink);
- white-space: nowrap;
-}
-.install-zip-link:hover .install-zip-link-name {
- color: var(--color-accent);
-}
-.install-zip-link-examples {
- display: flex;
- flex-wrap: nowrap;
- gap: 4px;
- margin-left: auto;
-}
-.install-alt-method .install-zip-link-examples code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-accent-dim);
- color: var(--color-accent);
- padding: 2px 6px;
- border-radius: 3px;
- white-space: nowrap;
-}
-.install-path {
- display: flex;
- flex-direction: column;
- min-width: 0;
-}
-.install-path-primary {
- background: white;
- border-radius: 16px;
- padding: var(--spacing-lg);
-}
-.install-accordion {
- display: flex;
- flex-direction: column;
- margin: 0 0 var(--spacing-xl);
-}
-.install-step {
- border-top: 1px solid var(--color-mist);
-}
-.install-step:last-child {
- border-bottom: 1px solid var(--color-mist);
-}
-.install-step-summary {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
- padding: var(--spacing-md) var(--spacing-xs);
- cursor: pointer;
- list-style: none;
- transition: background var(--duration-fast) var(--ease-out);
-}
-.install-step-summary::-webkit-details-marker {
- display: none;
-}
-.install-step-summary:hover {
- background: var(--color-cream);
-}
-.install-step-summary h3 {
- flex: 1;
- margin: 0;
-}
-.install-step-arrow {
- flex-shrink: 0;
- color: var(--color-ash);
- transition: transform var(--duration-base) var(--ease-out);
-}
-.install-step[open] .install-step-arrow {
- transform: rotate(90deg);
-}
-.install-step-body {
- padding: 0 var(--spacing-xs) var(--spacing-md);
- display: flex;
- flex-direction: column;
-}
-.install-step-body .install-path-desc {
- margin-top: 0;
-}
-.install-step-status {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin: 0 0 var(--spacing-sm);
- font-style: italic;
-}
-.install-path-title {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- gap: 10px;
- font-family: var(--font-display);
- font-size: 1.5rem;
- font-weight: 600;
- margin: 0 0 var(--spacing-sm);
- line-height: 1.2;
-}
-.install-path-badge {
- font-family: var(--font-mono);
- font-size: 0.5rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-accent);
- border: 1px solid var(--color-accent);
- border-radius: 3px;
- padding: 2px 6px;
- vertical-align: middle;
- margin-left: 6px;
- position: relative;
- top: -2px;
-}
-.install-path-badge-muted {
- color: var(--color-ash);
- border-color: var(--color-mist);
-}
-.install-path-desc {
- font-size: 0.9375rem;
- line-height: 1.6;
- color: var(--color-charcoal);
- margin: 0 0 var(--spacing-md);
-}
-.terminal-header-license {
- margin-left: auto;
- font-size: 0.6875rem;
- color: oklch(65% 0.01 350);
- letter-spacing: 0.01em;
-}
-.terminal-header-license a {
- color: inherit;
- text-decoration: underline;
- text-decoration-color: oklch(85% 0.005 350);
- text-underline-offset: 2px;
-}
-.terminal-header-license a:hover {
- color: var(--color-charcoal);
-}
-.install-path-terminal {
- margin-bottom: var(--spacing-sm);
-}
-.install-path-terminal .glass-terminal {
- height: auto;
-}
-.install-path-terminal .terminal-body {
- padding: 0;
-}
-.install-path-next {
- font-size: 0.8125rem;
- color: var(--color-charcoal);
- line-height: 1.5;
- margin-top: auto;
- padding-top: var(--spacing-md);
-}
-.install-path-next code {
- font-family: var(--font-mono);
- font-size: 0.8125rem;
- font-weight: 600;
- color: var(--color-ink);
-}
-.install-path-slash {
- color: var(--color-accent);
-}
-.install-path-subcommands {
- display: flex;
- flex-direction: column;
- gap: 6px;
- margin-top: var(--spacing-sm);
-}
-.install-path-subcommand {
- font-size: 0.75rem;
- color: var(--color-charcoal);
- line-height: 1.4;
-}
-.install-path-subcommand code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- font-weight: 600;
- color: var(--color-ink);
- background: var(--color-mist);
- padding: 2px 6px;
- border-radius: 3px;
- margin-right: 4px;
-}
-.install-path-link {
- margin-top: auto;
- padding-top: var(--spacing-md);
- font-size: 0.8125rem;
-}
-.install-path-link a {
- color: var(--color-accent);
- text-decoration: none;
-}
-.install-path-link a:hover {
- text-decoration: underline;
-}
-.install-cmd-block {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-xs);
- margin-bottom: var(--spacing-sm);
-}
-.install-cmd-line {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
- padding: 10px 14px;
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- min-width: 0;
-}
-.install-cmd-line .terminal-prompt {
- flex-shrink: 0;
- color: var(--color-accent);
- font-family: var(--font-mono);
- font-size: 0.8125rem;
-}
-.install-cmd-line code {
- flex: 1;
- font-family: var(--font-mono);
- font-size: 0.8125rem;
- color: var(--color-ink);
- background: transparent;
- padding: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.install-cmd-line .copy-btn {
- flex-shrink: 0;
-}
-.install-cmd-note {
- font-size: 0.75rem;
- color: var(--color-ash);
- line-height: 1.5;
-}
-.install-cmd-note code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-mist);
- padding: 2px 5px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.install-together {
- max-width: 960px;
- margin: 0 0 var(--spacing-xl);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- padding: var(--spacing-sm) var(--spacing-md);
-}
-.install-together-inner {
- display: flex;
- align-items: center;
- gap: var(--spacing-md);
-}
-.install-together-badge {
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--color-accent);
- border: 1px solid var(--color-accent);
- padding: 2px 10px;
- border-radius: 99px;
- flex-shrink: 0;
- white-space: nowrap;
-}
-.install-together-text {
- font-size: 0.8125rem;
- line-height: 1.55;
- color: var(--color-ash);
- margin: 0;
-}
-.install-path-step {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 22px;
- height: 22px;
- border-radius: 50%;
- border: 1.5px solid var(--color-accent);
- color: var(--color-accent);
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 700;
- line-height: 1;
- flex-shrink: 0;
-}
-.install-updated-subscribe {
- display: grid;
- grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
- gap: var(--spacing-sm);
- margin-bottom: var(--spacing-md);
- align-items: stretch;
-}
-.install-updated-substack {
- display: block;
- width: 100%;
- min-width: 0;
- height: 130px;
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- background: var(--color-paper);
-}
-.install-updated-x {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: space-between;
- gap: var(--spacing-xs);
- height: 130px;
- padding: var(--spacing-sm) var(--spacing-md);
- border: 1px solid var(--color-mist);
- border-radius: 8px;
- background: var(--color-paper);
- color: var(--color-ink);
- text-decoration: none;
- transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
-}
-.install-updated-x:hover {
- border-color: var(--color-ink);
- background: var(--color-cream);
-}
-.install-updated-x-icon {
- color: var(--color-ink);
- flex-shrink: 0;
-}
-.install-updated-x-label {
- font-size: 0.6875rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-ash);
- font-family: var(--font-mono);
-}
-.install-updated-x-handle {
- font-size: 1rem;
- font-weight: 600;
- color: var(--color-ink);
- letter-spacing: -0.01em;
-}
-.install-updated-x:hover .install-updated-x-handle {
- color: var(--color-accent);
-}
-.install-updated-refs {
- margin-top: auto;
- padding-top: var(--spacing-md);
- border-top: 1px solid var(--color-mist);
-}
-.install-updated-refs-label {
- display: block;
- font-family: var(--font-mono);
- font-size: 0.5625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
- margin-bottom: 8px;
-}
-.install-updated-ref {
- display: block;
- font-size: 0.8125rem;
- color: var(--color-charcoal);
- text-decoration: none;
- margin-bottom: 6px;
- transition: color var(--duration-fast) var(--ease-out);
-}
-a.install-updated-ref:hover {
- color: var(--color-accent);
-}
-.install-updated-ref-terminal {
- display: flex;
- align-items: center;
- gap: var(--spacing-xs);
- font-family: var(--font-mono);
- font-size: 0.75rem;
- color: var(--color-charcoal);
- background: var(--color-cream);
- border: 1px solid var(--color-mist);
- border-radius: 6px;
- padding: 6px 10px;
- margin-top: 8px;
-}
-.install-updated-ref-terminal .terminal-prompt {
- color: var(--color-ash);
- font-size: 0.75rem;
-}
-.install-updated-ref-terminal code {
- font-family: inherit;
- font-size: inherit;
- background: none;
- padding: 0;
- color: var(--color-ink);
-}
-@media (max-width: 900px) {
- .install-row-primary {
- grid-template-columns: 1fr;
- gap: var(--spacing-lg);
- max-width: calc(100vw - var(--spacing-md) * 2);
- }
- .install-primary-alts {
- padding-left: 0;
- padding-top: var(--spacing-lg);
- border-left: none;
- border-top: 1px solid var(--color-mist);
- }
- .install-path-primary {
- margin-bottom: var(--spacing-sm);
- padding: var(--spacing-md);
- }
- .install-path-title {
- font-size: 1.25rem;
- }
- .install-path-desc {
- font-size: 0.875rem;
- overflow-wrap: break-word;
- }
- .install-together-inner {
- flex-direction: column;
- align-items: flex-start;
- gap: var(--spacing-xs);
- }
- .install-updated-subscribe {
- grid-template-columns: 1fr;
- }
- .install-updated-substack {
- height: 130px;
- }
- .install-updated-x {
- height: auto;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- gap: var(--spacing-sm);
- padding: var(--spacing-sm) var(--spacing-md);
- }
- .install-updated-x-label {
- display: none;
- }
- .install-terminal-cmd code {
- font-size: 0.75rem;
- white-space: normal;
- overflow-wrap: break-word;
- }
- .install-alt-method {
- padding: var(--spacing-sm);
- }
- .install-alt-method .install-terminal-cmd code {
- font-size: 0.6875rem;
- white-space: normal;
- overflow-wrap: break-word;
- }
- .install-alt-method .install-terminal-cmd .copy-btn {
- display: none;
- }
- .install-path-terminal .glass-terminal {
- box-shadow: none;
- }
- .install-terminal {
- max-width: 100%;
- }
- .install-alternatives {
- max-width: 100%;
- }
-}
-.install-terminal {
- max-width: 640px;
- margin: 0 auto;
-}
-.install-terminal .glass-terminal {
- height: auto;
-}
-.install-terminal .terminal-body {
- padding: 0;
- display: flex;
- flex-direction: column;
-}
-.install-terminal-row {
- display: flex;
- flex-direction: column;
- gap: 6px;
- padding: var(--spacing-md) var(--spacing-lg);
-}
-.install-terminal-label {
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
-}
-.install-terminal-cmd {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
-}
-.install-terminal-cmd .terminal-prompt {
- flex-shrink: 0;
-}
-.install-terminal-cmd code {
- flex: 1;
- font-family: var(--font-mono);
- font-size: 0.9375rem;
- color: var(--color-ink);
- background: transparent;
- padding: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.install-terminal-cmd .copy-btn {
- flex-shrink: 0;
-}
-.install-terminal-cmd .btn {
- padding: 0.5rem 1rem;
- font-size: 0.8125rem;
-}
-.install-terminal-note {
- font-size: 0.75rem;
- color: var(--color-ash);
- padding-left: calc(0.75rem + var(--spacing-sm));
-}
-.install-terminal-note code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-mist);
- padding: 2px 5px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.install-terminal-divider {
- height: 1px;
- background: var(--color-mist);
- margin: 0;
-}
-@media (max-width: 600px) {
- .install-terminal-row {
- padding: var(--spacing-sm) var(--spacing-md);
- }
- .install-terminal-cmd code {
- font-size: 0.75rem;
- }
-}
-.install-providers {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--spacing-sm);
- margin-top: var(--spacing-md);
-}
-.install-providers-label {
- font-size: 0.75rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
-}
-.install-providers-row {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: var(--spacing-sm);
-}
-.install-provider-badge {
- display: flex;
- align-items: center;
- gap: 6px;
- font-size: 0.8125rem;
- color: var(--color-charcoal);
-}
-.install-provider-badge img {
- border-radius: 4px;
-}
-.install-alternatives {
- max-width: 640px;
- margin: var(--spacing-sm) auto 0;
-}
-.install-alternatives-toggle {
- font-family: var(--font-mono);
- font-size: 0.75rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--color-ash);
- cursor: pointer;
- padding: var(--spacing-sm) 0;
- list-style: none;
- display: flex;
- align-items: center;
- gap: 6px;
- transition: color var(--duration-fast) var(--ease-out);
-}
-.install-alternatives-toggle::-webkit-details-marker {
- display: none;
-}
-.install-alternatives-toggle::before {
- content: '';
- display: inline-block;
- width: 0;
- height: 0;
- border-left: 5px solid currentColor;
- border-top: 4px solid transparent;
- border-bottom: 4px solid transparent;
- transition: transform var(--duration-fast) var(--ease-out);
-}
-.install-alternatives[open] .install-alternatives-toggle::before {
- transform: rotate(90deg);
-}
-.install-alternatives-toggle:hover {
- color: var(--color-charcoal);
-}
-.install-alternatives-content {
- animation: altFadeIn 0.2s var(--ease-out);
-}
-@keyframes altFadeIn {
- from {
- opacity: 0;
- transform: translateY(-4px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-.install-alt-method {
- padding: var(--spacing-md) var(--spacing-lg);
-}
-.install-alt-label {
- display: block;
- font-family: var(--font-mono);
- font-size: 0.625rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--color-ash);
- margin-bottom: 6px;
-}
-.install-alt-method .install-terminal-cmd {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
-}
-.install-alt-method .terminal-prompt {
- color: var(--color-accent);
- font-family: var(--font-mono);
- font-weight: bold;
- user-select: none;
-}
-.install-alt-method code {
- font-family: var(--font-mono);
- font-size: 0.875rem;
- color: var(--color-ink);
-}
-.install-alt-note {
- display: block;
- font-size: 0.75rem;
- color: var(--color-ash);
- margin-top: 4px;
-}
-.install-alt-note code {
- font-family: var(--font-mono);
- font-size: 0.6875rem;
- background: var(--color-mist);
- padding: 2px 5px;
- border-radius: 3px;
- color: var(--color-ink);
-}
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-@media (max-width: 600px) {
- .install-alt-method code {
- font-size: 0.75rem;
- }
-}
-.has-tooltip {
- position: relative;
- cursor: default;
-}
-.has-tooltip::after {
- content: attr(data-tooltip);
- position: absolute;
- bottom: calc(100% + 8px);
- left: 50%;
- transform: translateX(-50%);
- padding: 6px 10px;
- background: var(--color-ink);
- color: var(--color-paper);
- font-size: 0.6875rem;
- line-height: 1.4;
- border-radius: 6px;
- white-space: nowrap;
- pointer-events: none;
- opacity: 0;
- transition: opacity 0.15s ease;
- z-index: 100;
-}
-.has-tooltip:hover::after {
- opacity: 1;
-}
-.hero-logo-icon {
- display: inline-flex;
- align-items: center;
-}
-.download-tip {
- font-size: 0.8125rem;
- color: var(--color-ash);
- margin-top: var(--spacing-sm);
- text-align: center;
-}
-.download-tip a {
- color: var(--color-accent);
- text-decoration: none;
-}
-.download-tip a:hover {
- text-decoration: underline;
-}
-.consulting-section {
- padding: var(--spacing-xl) 0;
- border-top: 1px solid var(--color-mist);
-}
-.consulting-content {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--spacing-lg);
- flex-wrap: wrap;
-}
-.consulting-actions {
- display: flex;
- gap: var(--spacing-sm);
- flex-shrink: 0;
-}
-.consulting-text {
- flex: 1;
- min-width: 280px;
-}
-.consulting-title {
- font-size: clamp(1.5rem, 4vw, 2rem);
- font-weight: 300;
- font-style: italic;
- margin: 0 0 var(--spacing-sm) 0;
-}
-.consulting-desc {
- font-size: 1rem;
- color: var(--color-charcoal);
- line-height: 1.6;
- margin: 0;
- max-width: 45ch;
-}
-@media (max-width: 600px) {
- .consulting-content {
- flex-direction: column;
- align-items: flex-start;
- }
- .consulting-actions {
- flex-direction: column;
- width: 100%;
- }
- .consulting-actions .btn {
- width: 100%;
- justify-content: center;
- }
-}
diff --git a/scripts/build.js b/scripts/build.js
index bf5c79efd..f74a85f23 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -20,7 +20,6 @@ import { fileURLToPath } from 'url';
import { readSourceFiles, readPatterns } from './lib/utils.js';
import { createTransformer, PROVIDERS } from './lib/transformers/index.js';
import { createAllZips } from './lib/zip.js';
-import { execSync } from 'child_process';
/**
* Generate authoritative counts from source data and write to public/js/generated/counts.js.
@@ -181,30 +180,9 @@ const __dirname = path.dirname(__filename);
const ROOT_DIR = path.resolve(__dirname, '..');
const DIST_DIR = path.join(ROOT_DIR, 'dist');
-/**
- * Build Tailwind CSS using the CLI
- * Tailwind v4 uses @theme directive which Bun's CSS bundler doesn't understand
- */
-function buildTailwindCSS() {
- const inputFile = path.join(ROOT_DIR, 'public', 'css', 'main.css');
- const outputFile = path.join(ROOT_DIR, 'public', 'css', 'styles.css');
-
- console.log('🎨 Building Tailwind CSS...');
- try {
- execSync(`bunx @tailwindcss/cli -i "${inputFile}" -o "${outputFile}" --minify`, {
- cwd: ROOT_DIR,
- stdio: 'inherit'
- });
- console.log('✓ Tailwind CSS compiled\n');
- } catch (error) {
- console.error('Failed to build Tailwind CSS:', error.message);
- process.exit(1);
- }
-}
-
/**
* Build static site using Bun's HTML bundler
- * CSS is pre-compiled by Tailwind CLI, then bundled with HTML/JS
+ * Bun's HTML loader resolves and inlines CSS @imports.
*/
async function buildStaticSite() {
const entrypoints = [
@@ -441,10 +419,7 @@ function generateCFConfig(buildDir) {
async function build() {
console.log('🔨 Building cross-provider design skills...\n');
- // Build CSS with Tailwind CLI (handles @theme directive)
- buildTailwindCSS();
-
- // Bundle HTML, JS, and compiled CSS with Bun
+ // Bundle HTML, JS, and CSS with Bun
await buildStaticSite();
// Copy root-level static assets that need stable (unhashed) URLs