/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* ============================================
   OKLUME LANDING PAGE STYLES
   Professional Front-End Structure
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

   /* ============================================
      CSS RESET & BASE
      ============================================ */
   
   *,
   *::before,
   *::after {
       -webkit-box-sizing: border-box;
               box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   html {
       scroll-behavior: smooth;
       overflow-x: hidden;
   }
   
   body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       font-size: 1rem;
       line-height: 1.4;
       color: var(--contrast);
       background: oklch(1 0 0);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       overflow-x: hidden;
   }
   
   /* ============================================
      CSS VARIABLES
      ============================================ */
   
   :root {
       /* Colors - Using OKLCH for brand consistency */
       --color-bg: oklch(1 0 0);
       --color-bg-alt: oklch(0.98 0 0);
       --color-text: oklch(0.25 0 0);
       --color-text-muted: oklch(0.5 0 0);
       --color-accent: oklch(0.5 0.25 250);
       --color-accent-hover: oklch(0.45 0.25 250);
       --color-border: oklch(0.9 0 0);
       --color-success: oklch(0.6 0.2 130);
       --color-warning: oklch(0.7 0.15 70);
       --contrast: oklch(0.25 0 0);
       
       /* Spacing System */
       --space-xs: 0.5rem;
       --space-sm: 1rem;
       --space-md: 2rem;
       --space-lg: 4rem;
       --space-xl: 5rem;
       
       /* Typography */
       --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
       
       --text-xs: 0.75rem;
       --text-sm: 0.875rem;
       --text-base: 1rem;
       --text-lg: 1.125rem;
       --text-xl: 1.25rem;
       --text-2xl: 1.5rem;
       --text-3xl: 2rem;
       --text-4xl: 3rem;
       
       /* Layout */
       --container-width: 1200px;
       --container-padding: 2rem;
       --border-radius: 8px;
       --border-radius-sm: 4px;
       --border-radius-lg: 16px;
       
       /* Animation */
       --transition-fast: 150ms ease;
       --transition-base: 250ms ease;
       --transition-slow: 350ms ease;
       
       /* Z-index */
       --z-header: 100;
       --z-modal: 1000;
   
       /* Oklume */
       /* --oklume-max-width: 370px; */
   }
   
   @media (prefers-reduced-motion: reduce) {
       :root {
           --transition-fast: 0ms;
           --transition-base: 0ms;
           --transition-slow: 0ms;
       }
       
       html {
           scroll-behavior: auto;
       }
   }
   
   /* ============================================
      LAYOUT UTILITIES
      ============================================ */
   
   .container {
       max-width: var(--container-width);
       margin: 0 auto;
       padding: 0 var(--container-padding);
       width: 100%;
       overflow-wrap: break-word;
       word-wrap: break-word;
       overflow-x: hidden;
   }
   
   /* ============================================
      TYPOGRAPHY
      ============================================ */
   
   h1, h2, h3, h4, h5, h6 {
       line-height: 1.2;
       font-weight: 800;
       margin: 0;
   }
   
   h1 {
       font-size: var(--text-2xl);
   }
   
   h2 {
       font-size: var(--text-4xl);
   }
   
   h3 {
       font-size: var(--text-2xl);
   }
   
   p {
       margin: 0 0 var(--space-sm) 0;
   }
   
   p:last-child {
       margin-bottom: 0;
   }
   
   code {
       font-family: var(--font-mono);
       font-size: 0.9em;
       background: var(--color-bg-alt);
       padding: 0.2em 0.4em;
       border-radius: var(--border-radius-sm);
       word-break: break-word;
   }
   
   pre {
       font-family: var(--font-mono);
       font-size: var(--text-sm);
       line-height: 1.5;
       overflow-x: auto;
       overflow-y: hidden;
       padding: var(--space-md);
       background: var(--color-bg);
       border-radius: var(--border-radius);
       margin: 0;
       max-width: 100%;
       white-space: pre;
       -webkit-overflow-scrolling: touch;
   }
   
   pre code {
       background: none;
       padding: 0;
       word-break: normal;
       white-space: pre;
       display: block;
   }
   a {
       text-decoration: none;
       color: var(--contrast);
   }
   
   /* ============================================
      COMPONENTS
      ============================================ */
   
   /* Buttons */
   .button {
       display: -webkit-inline-box;
       display: -ms-inline-flexbox;
       display: inline-flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       gap: var(--space-xs);
       padding: 0.75rem 1.5rem;
       font-size: var(--text-base);
       font-weight: 500;
       text-decoration: none;
       border: none;
       border-radius: var(--border-radius);
       cursor: pointer;
       -webkit-transition: all var(--transition-base);
       -o-transition: all var(--transition-base);
       transition: all var(--transition-base);
       white-space: nowrap;
       min-height: 44px; /* Touch target */
   }
   .button-inline {
       width: 100%;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
   }
   
   .button:focus {
       outline: 2px solid var(--color-accent);
       outline-offset: 2px;
   }
   
   .button-primary {
       background: var(--color-accent);
       color: white;
   }
   
   .button-primary:hover {
       background: var(--color-accent-hover);
       -webkit-transform: translateY(-2px);
           -ms-transform: translateY(-2px);
               transform: translateY(-2px);
   }
   
   .button-secondary {
       background: oklch(1 0 0);
       color: oklch(0.25 0 0);
       border: 1px solid oklch(1 0 0);
       -webkit-box-shadow: 0 0 0 1px oklch(0.95 0 0);
               box-shadow: 0 0 0 1px oklch(0.95 0 0);
   }
   
   .button-secondary:hover {
       background: oklch(0.05 0 0);
       border-color: oklch(0.2 0 0);
       color: oklch(1 0 0);
       -webkit-box-shadow: 0 0 0 1px oklch(0.3 0 0);
               box-shadow: 0 0 0 1px oklch(0.3 0 0);
   }
   
   /* Badges */
   .badge {
       display: -webkit-inline-box;
       display: -ms-inline-flexbox;
       display: inline-flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       padding: 0.40rem 0.80rem;
       font-size: var(--text-sm);
       background: oklch(1 0 0);
       color: oklch(0.25 0 0);
       border-radius: 999px;
       border: 1px solid oklch(1 0 0);
       -webkit-box-shadow: 0 0 0 1px oklch(0.99 0 0);
               box-shadow: 0 0 0 1px oklch(0.99 0 0);
       white-space: nowrap;
   }
   
   .contrast {
       color:var(--contrast) !important;
   }
   
   /* ============================================
      HEADER
      ============================================ */
   
   .header {
       position: sticky;
       top: 0;
       z-index: var(--z-header);
       -webkit-backdrop-filter: blur(8px);
               backdrop-filter: blur(8px);
   }
   
   .header-content {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: justify;
           -ms-flex-pack: justify;
               justify-content: space-between;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       padding: var(--space-sm) 0;
       min-height: 60px;
   }
   
   .nav {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: var(--space-md);
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
   }
   
   .nav-link {
       text-decoration: none;
       font-weight: 500;
       color: var(--contrast);
       -webkit-transition: color var(--transition-fast);
       -o-transition: color var(--transition-fast);
       transition: color var(--transition-fast);
       padding: 0.5rem 0;
   }
   
   .nav-link:hover {
       color: var(--contrast);
   }
   
   .nav-link:focus {
       outline: 2px solid var(--color-accent);
       outline-offset: 2px;
       border-radius: var(--border-radius-sm);
   }
   
   .github-button {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       gap: var(--space-xs);
       padding: 0.5rem 1rem;
       background: oklch(1 0 0);
       border: 1px solid oklch(1 0 0);
       border-radius: var(--border-radius);
       color: oklch(0.25 0 0);
       -webkit-box-shadow: 0 0 0 1px oklch(0.95 0 0);
               box-shadow: 0 0 0 1px oklch(0.95 0 0);
       text-decoration: none;
       font-size: var(--text-base);
       font-weight: 500;
       -webkit-transition: all var(--transition-fast);
       -o-transition: all var(--transition-fast);
       transition: all var(--transition-fast);
       min-height: 36px;
   }
   
   .github-button:hover {
       background: oklch(0.05 0 0);
       color: oklch(1 0 0);
       border-color: oklch(0.05 0 0);
       -webkit-box-shadow: 0 0 0 1px oklch(0.3 0 0);
               box-shadow: 0 0 0 1px oklch(0.3 0 0);
   }
   
   .github-button:focus {
       outline: 2px solid oklch(0.3 0 0);
       outline-offset: 2px;
   }
   
   /* ============================================
      HERO SECTION
      ============================================ */
   
   .hero {
       padding: var(--space-xl) 0;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
   }
   
   .hero-content {
       display: -ms-grid;
       display: grid;
       -ms-grid-columns: 1fr var(--space-lg) 1fr;
       grid-template-columns: 1fr 1fr;
       gap: var(--space-lg);
       -webkit-box-align: start;
           -ms-flex-align: start;
               align-items: flex-start;
       margin-bottom: var(--space-lg);
   }
   
   .hero-title {
       font-family: "Dela Gothic One", sans-serif;
       font-size: clamp(4rem, 6vw, 8rem);
       margin-bottom: 40px;
   }
   
   .hero-subtitle {
       font-size: var(--text-xl);
       margin-bottom: var(--space-md);
   }
   
   .hero-badges {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: var(--space-sm);
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   }
   
   .hero-demo {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
   }
   
   .demo-hint {
       text-align: center;
       font-size: var(--text-sm);
       margin-top: var(--space-sm);
       -webkit-animation: bounce 2s ease-in-out infinite;
               animation: bounce 2s ease-in-out infinite;
   }
   
   @-webkit-keyframes bounce {
       0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
       50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
   }
   
   @keyframes bounce {
       0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
       50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
   }
   
   .hero-cta {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: var(--space-sm);
       margin-top: var(--space-sm);
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   }
   
   /* ============================================
      PROBLEM SECTION
      ============================================ */
   
   .problem {
       padding: var(--space-xl) 0;
       background: var(--color-bg);
   }
   
   .section-title {
       text-align: center;
       color: oklch(0.25 0 0);
       margin-bottom: var(--space-sm);
   }
   
   .section-subtitle {
       text-align: center;
       font-size: var(--text-lg);
       color: oklch(0.25 0 0);
       max-width: 700px;
       margin: 0 auto var(--space-lg);
   }
   
   /* ============================================
      COMPACT PROBLEM EXAMPLES
      ============================================ */
   
   .problem-examples-compact {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       gap: var(--space-md);
   }
   
   .compact-example {
       background: var(--color-bg);
   }
   
   .compact-title {
       font-size: var(--text-lg);
       color: oklch(0.25 0 0);
       margin-bottom: var(--space-xs);
       text-align: center;
   }
   
   .compact-description {
       font-size: var(--text-sm);
       color: oklch(0.4 0 0);
       text-align: center;
       margin-bottom: var(--space-md);
       line-height: 1.5;
   }
   
   .compact-content {
       display: -ms-grid;
       display: grid;
       -ms-grid-columns: 1fr;
       grid-template-columns: 1fr;
       gap: var(--space-md);
       -webkit-box-align: start;
           -ms-flex-align: start;
               align-items: start;
       max-width: 100%;
   }
   
   .compact-side {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       gap: var(--space-xs);
   }
   
   .compact-label {
       font-size: var(--text-sm);
       color: oklch(0.3 0 0);
       font-weight: 500;
       text-align: center;
   }
   
   .color-row-compact {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: 8px;
       width: 100%;
       overflow: hidden;
   }
   
   .color-box-compact {
       -webkit-box-flex: 1;
           -ms-flex: 1 1 0px;
               flex: 1 1 0;
       min-width: 0;
       height: 50px;
       border-radius: var(--border-radius);
   }
   
   .gradient-compact {
       height: 50px;
       border-radius: var(--border-radius-sm);
       border: 1px solid var(--color-border);
       width: 100%;
       max-width: 100%;
   }
   
   .compact-note {
       font-size: var(--text-xs);
       text-align: center;
       font-weight: 500;
   }
   
   .note-bad {
       color: oklch(0.62 0.24 32);
   }
   
   .note-good {
       color: oklch(0.72 0.26 152);
   }
   
   /* ============================================
      PLAYGROUND SECTION
      ============================================ */
   
   .playground {
       padding: var(--space-xl) 0;
   }
   
   .playground-content {
       display: -ms-grid;
       display: grid;
       -ms-grid-columns: 1fr;
       grid-template-columns: 1fr;
       gap: var(--space-md);
       margin-top: var(--space-lg);
   }
   
   .playground-controls {
       background: var(--color-bg);
       border-radius: var(--border-radius-lg);
       border: 1px solid var(--color-border);
       padding: var(--space-md);
       height: -webkit-fit-content;
       height: -moz-fit-content;
       height: fit-content;
   }
   
   .controls-title {
       font-size: var(--text-lg);
       margin-bottom: var(--space-md);
       color: oklch(0.25 0 0);
   }
   
   .control-group {
       margin-bottom: var(--space-sm);
       padding-bottom: var(--space-sm);
       width: 100%;
   }
   
   .control-group:last-child {
       padding-bottom: 0;
       margin-bottom: 0;
   }
   
   .control-group .button-inline {
       max-width: 100%;
       -webkit-box-sizing: border-box;
               box-sizing: border-box;
   }
   
   .control-label {
       display: block;
       font-size: var(--text-sm);
       font-weight: 600;
       color: oklch(0.3 0 0);
       margin-bottom: var(--space-xs);
   }
   
   .radio-group {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: var(--space-xs);
   }
   
   .radio-option {
       -webkit-box-flex: 1;
           -ms-flex: 1;
               flex: 1;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       padding: 0.5rem;
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius);
       color: oklch(0.25 0 0);
       cursor: pointer;
       -webkit-transition: all var(--transition-fast);
       -o-transition: all var(--transition-fast);
       transition: all var(--transition-fast);
       font-size: var(--text-sm);
   }
   
   .radio-option:has(input:checked) {
       background: var(--color-accent);
       color: white;
       border-color: var(--color-accent);
   }
   
   .radio-option input {
       display: none;
   }
   
   .checkbox-option {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       gap: var(--space-xs);
       padding: 0.5rem;
       cursor: pointer;
       color: oklch(0.25 0 0);
       -webkit-transition: background var(--transition-fast);
       -o-transition: background var(--transition-fast);
       transition: background var(--transition-fast);
       border-radius: var(--border-radius);
       margin-bottom: var(--space-xs);
   }
   
   .checkbox-option:hover {
       background: var(--color-bg);
   }
   
   .checkbox-option input {
       width: 18px;
       height: 18px;
       cursor: pointer;
       accent-color: var(--color-accent);
   }
   
   .checkbox-option:last-child {
       margin-bottom: 0;
   }
   
   .preset-colors {
       display: -ms-grid;
       display: grid;
       -ms-grid-columns: 1fr var(--space-xs) 1fr var(--space-xs) 1fr;
       grid-template-columns: repeat(3, 1fr);
       gap: var(--space-xs);
       width: 100%;
       max-width: 100%;
   }
   
   .preset-color {
       width: 100%;
       aspect-ratio: 1;
       border: none;
       border-radius: var(--border-radius);
       cursor: pointer;
       -webkit-transition: all var(--transition-fast);
       -o-transition: all var(--transition-fast);
       transition: all var(--transition-fast);
       padding: 0;
       max-width: 100%;
   }
   
   .preset-color:hover {
       -webkit-transform: scale(1.05);
           -ms-transform: scale(1.05);
               transform: scale(1.05);
       -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
               box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
   
   .preset-color:focus {
       outline: 2px solid var(--color-accent);
       outline-offset: 2px;
   }
   
   .playground-preview {
       background: var(--color-bg);
       border-radius: var(--border-radius-lg);
       border: 1px solid var(--color-border);
       padding: var(--space-md);
       overflow: hidden;
   }
   
   .preview-container {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       background: var(--color-bg);
       margin-bottom: var(--space-md);
       min-height: 300px;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       width: 100%;
       overflow-x: auto;
       overflow-y: visible;
       -webkit-overflow-scrolling: touch;
   }
   
   #playground-picker-wrapper {
       width: 100%;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       gap: var(--space-md);
   }
   
   #playground-picker {
       width: 100%;
       max-width: 100%;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
   }
   
   #playground-trigger {
       margin: 0;
   }
   .generated-code {
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius);
       margin-top: var(--space-md);
   }
   
   .generated-code .code-header {
       background: var(--color-bg);
       border-radius: var(--border-radius) var(--border-radius) 0 0;
       color: oklch(0.25 0 0);
   }
   
   .generated-code pre {
       background: var(--color-bg);
       border-radius: 0 0 var(--border-radius) var(--border-radius);
       color: oklch(0.25 0 0);
       margin: 0;
   }
   
   /* ============================================
      FEATURES SECTION
      ============================================ */
   
   .features {
       background: var(--color-bg);
       padding: var(--space-xl) 0;
   }
   
   .features-grid {
       display: -ms-grid;
       display: grid;
       -ms-grid-columns: 1fr var(--space-md) 1fr var(--space-md) 1fr var(--space-md) 1fr;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       gap: var(--space-md);
       margin-top: var(--space-lg);
   }
   
   .feature-card {
       padding: var(--space-md);
       background: var(--color-bg);
       color: oklch(0.25 0 0);
       border-radius: var(--border-radius-lg);
       border: 1px solid var(--color-border);
       -webkit-transition: all var(--transition-base);
       -o-transition: all var(--transition-base);
       transition: all var(--transition-base);
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       height: 100%;
   }
   
   .feature-icon {
       width: 48px;
       height: 48px;
       color: var(--color-accent);
       margin-bottom: var(--space-sm);
       -ms-flex-negative: 0;
           flex-shrink: 0;
   }
   
   .feature-title {
       margin-bottom: var(--space-xs);
   }
   
   .feature-description {
       color: var(--color-text-muted);
       font-size: var(--text-base);
       -webkit-box-flex: 1;
           -ms-flex: 1;
               flex: 1;
   }
   
   /* ============================================
      QUICK START SECTION
      ============================================ */
   
   .quickstart {
       padding: var(--space-xl) 0;
   }
   
   /* Tabs Navigation */
   .quickstart-tabs {
       margin-top: var(--space-lg);
   }
   
   .tabs-nav {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: var(--space-xs);
       margin-bottom: var(--space-lg);
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   }
   
   .tab-button {
       padding: 0.75rem 1.5rem;
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius);
       font-size: var(--text-base);
       font-weight: 500;
       color: oklch(0.25 0 0);
       cursor: pointer;
       -webkit-transition: all var(--transition-base);
       -o-transition: all var(--transition-base);
       transition: all var(--transition-base);
       white-space: nowrap;
   }
   
   .tab-button:hover {
       background: oklch(0.96 0 0);
       border-color: oklch(0.85 0 0);
   }
   
   .tab-button.active {
       background: var(--color-accent);
       color: white;
       border-color: var(--color-accent);
   }
   
   .tab-button:focus {
       outline: 2px solid var(--color-accent);
       outline-offset: 2px;
   }
   
   /* Tab Content */
   .tab-content {
       display: none;
   }
   
   .tab-content.active {
       display: block;
   }
   
   /* Installation Steps */
   .quickstart-step {
       margin-bottom: var(--space-lg);
   }
   
   .quickstart-step:last-child {
       margin-bottom: 0;
   }
   
   .step-title {
       font-size: var(--text-lg);
       font-weight: 600;
       color: oklch(0.25 0 0);
       margin-bottom: var(--space-sm);
   }
   
   .step-description {
       color: var(--color-text-muted);
       margin-bottom: var(--space-sm);
       line-height: 1.6;
   }
   
   /* Download List */
   .download-list {
       list-style: none;
       padding: 0;
       margin: var(--space-sm) 0;
   }
   
   .download-list li {
       padding: var(--space-sm);
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius);
       margin-bottom: var(--space-xs);
   }
   
   .download-list li:last-child {
       margin-bottom: 0;
   }
   
   .download-list a {
       color: var(--color-accent);
       text-decoration: none;
       font-weight: 500;
       -webkit-transition: color var(--transition-fast);
       -o-transition: color var(--transition-fast);
       transition: color var(--transition-fast);
   }
   
   .download-list a:hover {
       color: var(--color-accent-hover);
       text-decoration: underline;
   }
   
   .code-block {
       margin: var(--space-sm) 0;
       background: var(--color-bg);
       border-radius: var(--border-radius-lg);
       overflow: hidden;
       color: oklch(0.25 0 0);
       border: 1px solid var(--color-border);
   }
   
   .code-header {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: justify;
           -ms-flex-pack: justify;
               justify-content: space-between;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       padding: var(--space-sm) var(--space-md);
       background: var(--color-bg);
       color: oklch(0.25 0 0);
       border-bottom: 1px solid var(--color-border);
   }
   
   .code-language {
       font-family: var(--font-mono);
       font-size: var(--text-sm);
       color: oklch(0.25 0 0);
   }
   
   .copy-button {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       gap: var(--space-xs);
       padding: 0.5rem 1rem;
       background: transparent;
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius-sm);
       font-size: var(--text-sm);
       cursor: pointer;
       -webkit-transition: all var(--transition-fast);
       -o-transition: all var(--transition-fast);
       transition: all var(--transition-fast);
       min-height: 36px;
   }
   
   .copy-button:hover {
       background: var(--color-accent);
       color: white;
       border-color: var(--color-accent);
   }
   
   .copy-button:focus {
       outline: 2px solid var(--color-accent);
       outline-offset: 2px;
   }
   
   .copy-button.copied {
       background: var(--color-success);
       color: white;
       border-color: var(--color-success);
   }
   
   .quickstart-actions {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: var(--space-sm);
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       margin-top: var(--space-lg);
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   }
   
   /* ============================================
      FAQ SECTION
      ============================================ */
   
   .faq {
       padding: var(--space-xl) 0;
       background: var(--color-bg);
   }
   
   .faq-list {
       max-width: 800px;
       margin: 0 auto;
   }
   
   .faq-item {
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius);
       margin-bottom: var(--space-sm);
       overflow: hidden;
       background: var(--color-bg);
   }
   
   .faq-question {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: justify;
           -ms-flex-pack: justify;
               justify-content: space-between;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       padding: var(--space-md);
       font-weight: 600;
       color: oklch(0.25 0 0);
       cursor: pointer;
       -webkit-user-select: none;
          -moz-user-select: none;
           -ms-user-select: none;
               user-select: none;
       -webkit-transition: background var(--transition-fast);
       -o-transition: background var(--transition-fast);
       transition: background var(--transition-fast);
       min-height: 60px;
   }
   
   .faq-question:hover {
       background: oklch(0.96 0 0);
   }
   
   .faq-question:focus {
       outline: 2px solid var(--color-accent);
       outline-offset: -2px;
   }
   
   .faq-icon {
       -webkit-transition: -webkit-transform var(--transition-base);
       transition: -webkit-transform var(--transition-base);
       -o-transition: transform var(--transition-base);
       transition: transform var(--transition-base);
       transition: transform var(--transition-base), -webkit-transform var(--transition-base);
       -ms-flex-negative: 0;
           flex-shrink: 0;
   }
   
   details[open] .faq-icon {
       -webkit-transform: rotate(180deg);
           -ms-transform: rotate(180deg);
               transform: rotate(180deg);
   }
   
   .faq-answer {
       padding: var(--space-md);
       color: var(--color-text-muted);
       line-height: 1.6;
   }
   
   .faq-answer pre {
       margin-top: var(--space-sm);
   }
   
   /* ============================================
      FOOTER
      ============================================ */
   
   .footer {
       padding: var(--space-xl) 0 var(--space-md);
       border-top: 1px solid var(--color-border);
   }
   
   .footer-cta {
       text-align: center;
       margin-bottom: var(--space-lg);
   }
   
   .footer-title {
       margin-bottom: var(--space-sm);
   }
   
   .footer-subtitle {
       font-size: var(--text-lg);
       margin-bottom: var(--space-md);
   }
   
   .footer-actions {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: var(--space-sm);
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   }
   
   .footer-info {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: justify;
           -ms-flex-pack: justify;
               justify-content: space-between;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       padding-top: var(--space-lg);
       border-top: 1px solid var(--color-border);
       font-size: var(--text-sm);
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
       gap: var(--space-md);
   }
   
   .footer-links {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       gap: var(--space-md);
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   }
   
   .footer-links a {
       color: var(--contrast);
       text-decoration: none;
       -webkit-transition: color var(--transition-fast);
       -o-transition: color var(--transition-fast);
       transition: color var(--transition-fast);
   }
   
   .footer-links a:hover {
       color: var(--contrast);
   }
   
   .footer-links a:focus {
       outline: 2px solid var(--color-accent);
       outline-offset: 2px;
       border-radius: var(--border-radius-sm);
   }
   
   /* ============================================
      RESPONSIVE DESIGN
      ============================================ */
   
   /* Tablet and up - two-column layout for playground */
   @media (min-width: 769px) {
       .playground-content {
           -ms-grid-columns: minmax(300px, 350px) var(--space-lg) 1fr;
           grid-template-columns: minmax(300px, 350px) 1fr;
           gap: var(--space-lg);
       }
   
       .playground-controls {
           position: sticky;
           top: 80px;
       }
   
       .preview-container {
           min-height: 400px;
       }
   }
   
   @media (max-width: 768px) {
       :root {
           --container-padding: 1rem;
       }
   
       .hero-content {
           -ms-grid-columns: 1fr;
           grid-template-columns: 1fr;
           gap: var(--space-md);
       }
   
       .playground-controls,
       .playground-preview {
           padding: var(--space-sm);
       }
   
       .preview-container {
           padding: var(--space-sm);
       }
   
       .controls-title {
           font-size: var(--text-base);
           margin-bottom: var(--space-sm);
       }
   
       .preset-colors {
           -ms-grid-columns: 1fr var(--space-sm) 1fr var(--space-sm) 1fr;
           grid-template-columns: repeat(3, 1fr);
           gap: var(--space-sm);
       }
   
       .preset-color {
           min-height: 60px;
       }
   
       .hero-title {
           font-size: 6rem;
           text-align: center;
       }
       .hero-subtitle {
           text-align: center;
       }
       .hero-badges {
           -webkit-box-pack: center;
               -ms-flex-pack: center;
                   justify-content: center;
       }
       .hero-cta,
       .footer-actions,
       .quickstart-actions {
           -webkit-box-orient: vertical;
           -webkit-box-direction: normal;
               -ms-flex-direction: column;
                   flex-direction: column;
           -webkit-box-align: center;
               -ms-flex-align: center;
                   align-items: center;
       }
   
       .button {
           width: 100%;
           max-width: 300px;
       }
   
       /* Quick Start Tabs Mobile */
       .tabs-nav {
           -webkit-box-orient: vertical;
           -webkit-box-direction: normal;
               -ms-flex-direction: column;
                   flex-direction: column;
           gap: var(--space-xs);
       }
   
       .tab-button {
           width: 100%;
           padding: 0.75rem 1rem;
           font-size: var(--text-sm);
       }
       
       .nav {
           gap: var(--space-sm);
       }
       
       .github-button {
           padding: 0.375rem 0.75rem;
           font-size: var(--text-xs);
       }
       
       .features-grid {
           -ms-grid-columns: 1fr;
           grid-template-columns: 1fr;
       }
       
       .footer-info {
           -webkit-box-orient: vertical;
           -webkit-box-direction: normal;
               -ms-flex-direction: column;
                   flex-direction: column;
           text-align: center;
       }
       
       .footer-links {
           -webkit-box-pack: center;
               -ms-flex-pack: center;
                   justify-content: center;
       }
   }
   
   /* Medium mobile devices */
   @media (max-width: 640px) {
       .playground-content {
           gap: var(--space-sm);
       }
   
       .control-label {
           font-size: var(--text-sm);
       }
   
       .radio-option,
       .checkbox-option {
           min-height: 44px; /* Touch-friendly target */
       }
   
       .preset-color {
           min-height: 55px;
       }
   }
   
   @media (max-width: 480px) {
       .hero {
           padding: var(--space-lg) 0;
           min-height: 80vh;
       }
       
       .hero-title {
           font-size: 3.5rem;
           text-align: center;
       }
       
       .hero-subtitle {
           font-size: var(--text-lg);
           text-align: center;
       }
       
       .section-title {
           font-size: var(--text-3xl);
       }
   
       .feature-card {
           padding: var(--space-sm);
       }
       
       .code-header {
           padding: var(--space-xs) var(--space-sm);
       }
       
       .faq-question {
           padding: var(--space-sm);
           min-height: auto;
       }
       
       .faq-answer {
           padding: 0 var(--space-sm) var(--space-sm);
       }
   
       /* Playground mobile optimizations */
       .playground {
           padding: var(--space-lg) 0;
       }
   
       .playground-content {
           gap: var(--space-sm);
           margin-top: var(--space-md);
       }
   
       .preview-container {
           min-height: 250px;
       }
   
       .control-group {
           margin-bottom: var(--space-sm);
           padding-bottom: var(--space-sm);
       }
   
       .radio-option {
           padding: 0.4rem;
           font-size: var(--text-xs);
       }
   
       .checkbox-option {
           padding: 0.4rem;
           font-size: var(--text-sm);
       }
   
       .preset-colors {
           -ms-grid-columns: 1fr 0.5rem 1fr 0.5rem 1fr;
           grid-template-columns: repeat(3, 1fr);
           gap: 0.5rem;
       }
   
       .preset-color {
           min-height: 50px;
       }
   
       .generated-code {
           margin-top: var(--space-sm);
       }
   
       .generated-code pre {
           font-size: var(--text-xs);
           padding: var(--space-sm);
       }
   }
   
   /* ============================================
      ACCESSIBILITY
      ============================================ */
   
   @media (prefers-reduced-motion: reduce) {
       .demo-hint {
           -webkit-animation: none;
                   animation: none;
       }
       
       .feature-card:hover {
           -webkit-transform: none;
               -ms-transform: none;
                   transform: none;
       }
       
       .button-primary:hover {
           -webkit-transform: none;
               -ms-transform: none;
                   transform: none;
       }
   }
   
   /* High contrast mode support */
   @media (prefers-contrast: high) {
       :root {
           --color-border: oklch(0.2 0 0);
           --color-text-muted: oklch(0.3 0 0);
       }
   }
   
   /* Focus visible for better keyboard navigation */
   @supports selector(:focus-visible) {
       .button:focus:not(:focus-visible),
       .nav-link:focus:not(:focus-visible),
       .github-button:focus:not(:focus-visible),
       .copy-button:focus:not(:focus-visible),
       .faq-question:focus:not(:focus-visible) {
           outline: none;
       }
   }
   
   /* ============================================
      PRINT STYLES
      ============================================ */
   
   @media print {
       .header,
       .hero-cta,
       .footer-actions,
       .copy-button {
           display: none;
       }
       
       .hero {
           min-height: auto;
           padding: var(--space-md) 0;
       }
   
       .feature-card {
           -webkit-column-break-inside: avoid;
              -moz-column-break-inside: avoid;
                   break-inside: avoid;
       }
       
       /* Compact examples responsive */
       .compact-content {
           -ms-grid-columns: 1fr;
           grid-template-columns: 1fr;
           gap: var(--space-sm);
       }
       
       .color-row-compact {
           gap: 4px;
       }
   
       .color-box-compact {
           height: 40px;
           border-radius: var(--border-radius);
       }
       
       .gradient-compact {
           height: 40px;
       }
   }