odac 1.4.3 → 1.4.5

package/template/public/assets/css/style.css

@@ -1,1835 +0,0 @@
-/* ============================================
-   Odac Template Stylesheet
-   Modern, responsive design with smooth transitions
-   ============================================ */
-
-/* CSS Variables - Dark Theme with Indigo */
-:root {
-  /* Indigo Color Palette */
-  --primary: #6366f1;
-  --primary-dark: #4f46e5;
-  --primary-light: #818cf8;
-  --accent: #8b5cf6;
-  --success: #10b981;
-  --error: #ef4444;
-
-  /* Dark Theme Colors */
-  --bg-primary: #0f172a;
-  --bg-secondary: #1e293b;
-  --bg-tertiary: #334155;
-  --text-primary: #f1f5f9;
-  --text-secondary: #cbd5e1;
-  --text-muted: #94a3b8;
-  --border: #334155;
-  --shadow: rgba(0, 0, 0, 0.3);
-
-  /* Additional Color Variables */
-  --white: #ffffff;
-  --text-dark: #0f172a;
-  --text-light: #cbd5e1;
-  --secondary: #cbd5e1;
-
-  /* Card & Surface */
-  --card-bg: #1e293b;
-  --code-bg: #0f172a;
-  --code-color: #e2e8f0;
-
-  /* Typography */
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-
-  /* Spacing */
-  --spacing-xs: 0.5rem;
-  --spacing-sm: 1rem;
-  --spacing-md: 2rem;
-  --spacing-lg: 3rem;
-  --spacing-xl: 4rem;
-
-  /* Layout */
-  --max-width: 1200px;
-  --border-radius: 0.5rem;
-  --transition: all 0.3s ease;
-}
-
-/* ============================================
-   Reset & Base Styles
-   ============================================ */
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 16px;
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: var(--font-sans);
-  color: var(--text-primary);
-  line-height: 1.6;
-  background-color: var(--bg-primary);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ============================================
-   Typography
-   ============================================ */
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 700;
-  line-height: 1.2;
-  margin-bottom: var(--spacing-sm);
-  color: var(--text-primary);
-}
-
-h1 {
-  font-size: 2.5rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-p {
-  margin-bottom: var(--spacing-sm);
-  color: var(--text-secondary);
-}
-
-a {
-  color: var(--primary);
-  text-decoration: none;
-  transition: var(--transition);
-}
-
-a:hover {
-  color: var(--primary-dark);
-}
-
-code {
-  font-family: var(--font-mono);
-  background-color: var(--secondary);
-  color: var(--text-dark);
-  padding: 0.2rem 0.4rem;
-  border-radius: 0.25rem;
-  font-size: 0.9em;
-}
-
-pre {
-  font-family: var(--font-mono);
-  background-color: var(--secondary);
-  color: var(--text-dark);
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius);
-  overflow-x: auto;
-  margin-bottom: var(--spacing-sm);
-}
-
-pre code {
-  background: none;
-  padding: 0;
-}
-
-/* ============================================
-   Layout & Container
-   ============================================ */
-
-.container {
-  max-width: var(--max-width);
-  margin: 0 auto;
-  padding: 0 var(--spacing-sm);
-}
-
-/* ============================================
-   Header & Navigation
-   ============================================ */
-
-.navbar {
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  padding: var(--spacing-sm) 0;
-  backdrop-filter: blur(10px);
-}
-
-.navbar .container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.nav-brand {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--primary);
-}
-
-.brand-icon {
-  font-size: 1.75rem;
-}
-
-.brand-name {
-  font-weight: 700;
-}
-
-.nav-links {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-}
-
-.nav-link {
-  color: var(--text-secondary);
-  font-weight: 500;
-  padding: 0.5rem 1rem;
-  border-radius: var(--border-radius);
-  transition: var(--transition);
-  text-decoration: none;
-}
-
-.nav-link:hover,
-.nav-link.active {
-  color: var(--primary);
-  background-color: var(--bg-tertiary);
-}
-
-header {
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-header .container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: var(--spacing-sm);
-  padding-bottom: var(--spacing-sm);
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.logo {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--primary);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.logo-icon {
-  font-size: 1.75rem;
-}
-
-.logo-text {
-  font-weight: 700;
-}
-
-nav ul {
-  list-style: none;
-  display: flex;
-  gap: var(--spacing-md);
-  align-items: center;
-}
-
-.nav {
-  display: flex;
-  gap: var(--spacing-sm);
-}
-
-nav a {
-  color: var(--text-light);
-  font-weight: 500;
-  padding: 0.5rem 1rem;
-  border-radius: var(--border-radius);
-  transition: var(--transition);
-}
-
-nav a:hover,
-nav a.active {
-  color: var(--text-dark);
-  background-color: var(--secondary);
-}
-
-/* ============================================
-   Hero Section
-   ============================================ */
-
-.hero {
-  text-align: center;
-  padding: var(--spacing-xl) 0;
-  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
-  color: var(--text-primary);
-  border-bottom: 1px solid var(--border);
-}
-
-.hero-content {
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0 var(--spacing-md);
-}
-
-.hero h1,
-.hero-title {
-  font-size: 3rem;
-  margin-bottom: var(--spacing-sm);
-  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.hero p,
-.hero-subtitle,
-.hero-description {
-  font-size: 1.25rem;
-  color: var(--text-secondary);
-  max-width: 700px;
-  margin: 0 auto var(--spacing-md);
-}
-
-.hero-subtitle {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.hero-description {
-  font-size: 1.125rem;
-}
-
-.hero-buttons {
-  display: flex;
-  gap: var(--spacing-sm);
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-/* ============================================
-   Feature Cards
-   ============================================ */
-
-.features {
-  padding: var(--spacing-xl) 0;
-}
-
-.section-title {
-  text-align: center;
-  font-size: 2.5rem;
-  margin-bottom: var(--spacing-md);
-  color: var(--text-primary);
-  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.features-grid,
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-md);
-}
-
-.feature-card {
-  background: var(--white);
-  color: var(--text-dark);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-md);
-  transition: var(--transition);
-  box-shadow: 0 2px 4px var(--shadow);
-}
-
-.feature-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px var(--shadow);
-}
-
-.feature-icon {
-  font-size: 3rem;
-  margin-bottom: var(--spacing-sm);
-  display: block;
-}
-
-.feature-card h3,
-.feature-title {
-  color: var(--text-dark);
-  margin-bottom: var(--spacing-xs);
-}
-
-.feature-card p,
-.feature-description {
-  color: var(--text-light);
-  margin-bottom: 0;
-}
-
-/* ============================================
-   Buttons
-   ============================================ */
-
-.btn {
-  display: inline-block;
-  padding: 0.75rem 1.5rem;
-  border-radius: var(--border-radius);
-  font-weight: 600;
-  text-align: center;
-  cursor: pointer;
-  transition: var(--transition);
-  border: none;
-  font-size: 1rem;
-  font-family: var(--font-sans);
-}
-
-.btn-primary {
-  background-color: var(--primary);
-  color: white;
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-}
-
-.btn-primary:hover {
-  background-color: var(--primary-dark);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
-}
-
-.btn-secondary {
-  background-color: var(--bg-tertiary);
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-}
-
-.btn-secondary:hover {
-  background-color: var(--bg-secondary);
-  border-color: var(--primary);
-}
-
-.btn-success {
-  background-color: var(--success);
-  color: white;
-}
-
-.btn-success:hover {
-  background-color: #059669;
-}
-
-/* ============================================
-   Forms
-   ============================================ */
-
-.form-section {
-  padding: var(--spacing-xl) 0;
-  background-color: var(--secondary);
-  color: var(--text-dark);
-}
-
-form {
-  max-width: 600px;
-  margin: 0 auto;
-  background: var(--white);
-  color: var(--text-dark);
-  padding: var(--spacing-md);
-  border-radius: var(--border-radius);
-  box-shadow: 0 4px 8px var(--shadow);
-}
-
-.form-group {
-  margin-bottom: var(--spacing-sm);
-}
-
-label,
-.form-label {
-  display: block;
-  margin-bottom: var(--spacing-xs);
-  font-weight: 600;
-  color: var(--text-dark);
-}
-
-input[type='text'],
-input[type='email'],
-textarea,
-.form-input {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  font-family: var(--font-sans);
-  font-size: 1rem;
-  transition: var(--transition);
-}
-
-input:focus,
-textarea:focus,
-.form-input:focus {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-}
-
-textarea,
-textarea.form-input {
-  resize: vertical;
-  min-height: 120px;
-}
-
-.form-error {
-  color: var(--error);
-  font-size: 0.875rem;
-  margin-top: var(--spacing-xs);
-  display: block;
-  min-height: 1.25rem;
-}
-
-.form-error:empty {
-  display: none;
-}
-
-.form-error.show {
-  display: block;
-}
-
-input.error,
-textarea.error {
-  border-color: var(--error);
-}
-
-.form-success {
-  background-color: var(--accent);
-  color: var(--white);
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius);
-  margin-top: var(--spacing-sm);
-  display: none;
-}
-
-.form-success.show {
-  display: block;
-}
-
-[odac-form-success] {
-  background-color: var(--accent);
-  color: var(--white);
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius);
-  margin-top: var(--spacing-sm);
-  display: none;
-}
-
-[odac-form-success]:not(:empty) {
-  display: block;
-}
-
-/* ============================================
-   Demo Section
-   ============================================ */
-
-.demo,
-.demo-section {
-  padding: var(--spacing-xl) 0;
-  background: var(--secondary);
-  color: var(--text-dark);
-}
-
-.demo-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-md);
-}
-
-.demo-card {
-  background: var(--white);
-  color: var(--text-dark);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-md);
-  box-shadow: 0 2px 4px var(--shadow);
-}
-
-.demo-title {
-  color: var(--text-dark);
-  margin-bottom: var(--spacing-xs);
-}
-
-.demo-description {
-  color: var(--text-light);
-  margin-bottom: var(--spacing-md);
-}
-
-.demo-box {
-  background: var(--white);
-  color: var(--text-dark);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-md);
-  margin-top: var(--spacing-md);
-  box-shadow: 0 2px 4px var(--shadow);
-}
-
-.contact-form {
-  margin-top: var(--spacing-sm);
-}
-
-.stats-display {
-  background: var(--secondary);
-  color: var(--text-dark);
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius);
-  margin-top: var(--spacing-sm);
-  display: none;
-}
-
-.stats-display.show {
-  display: block;
-}
-
-.stats-display p {
-  margin-bottom: var(--spacing-xs);
-  color: var(--text-dark);
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--spacing-sm);
-}
-
-.stat-item {
-  background: var(--white);
-  color: var(--text-dark);
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius);
-  border-left: 3px solid var(--primary);
-}
-
-.stat-item strong {
-  color: var(--text-dark);
-  display: block;
-  margin-bottom: 0.25rem;
-}
-
-/* ============================================
-   Code Examples
-   ============================================ */
-
-.code-examples {
-  padding: var(--spacing-xl) 0;
-}
-
-.examples-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-md);
-}
-
-.code-example {
-  margin: var(--spacing-md) 0;
-}
-
-.code-example h4 {
-  margin-bottom: var(--spacing-xs);
-  color: var(--text-dark);
-}
-
-.example-title {
-  color: var(--text-dark);
-  margin-bottom: var(--spacing-xs);
-  font-size: 1.5rem;
-}
-
-.example-description {
-  color: var(--text-light);
-  margin-bottom: var(--spacing-sm);
-}
-
-.cta {
-  text-align: center;
-  margin-top: var(--spacing-xl);
-  padding: var(--spacing-lg);
-  background: var(--secondary);
-  color: var(--text-dark);
-  border-radius: var(--border-radius);
-}
-
-.cta-text {
-  font-size: 1.25rem;
-  color: var(--text-dark);
-  margin-bottom: var(--spacing-sm);
-  font-weight: 600;
-}
-
-/* ============================================
-   Footer
-   ============================================ */
-
-footer {
-  background-color: var(--text-dark);
-  color: var(--white);
-  padding: var(--spacing-md) 0;
-  margin-top: var(--spacing-xl);
-  text-align: center;
-}
-
-.footer-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  align-items: center;
-}
-
-footer p {
-  color: var(--secondary);
-  margin-bottom: 0;
-}
-
-footer a {
-  color: var(--white);
-  text-decoration: underline;
-}
-
-footer a:hover {
-  color: var(--primary);
-}
-
-/* ============================================
-   About Page Styles
-   ============================================ */
-
-.content-section {
-  padding: var(--spacing-lg) 0;
-}
-
-.content-section h2 {
-  margin-bottom: var(--spacing-md);
-  text-align: center;
-}
-
-.lead {
-  font-size: 1.25rem;
-  color: var(--text-light);
-  max-width: 700px;
-  margin: 0 auto;
-}
-
-.component-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-md);
-}
-
-.component-card {
-  background: var(--white);
-  color: var(--text-dark);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-md);
-  transition: var(--transition);
-}
-
-.component-card:hover {
-  box-shadow: 0 4px 8px var(--shadow);
-  transform: translateY(-2px);
-}
-
-.component-card h3 {
-  margin-bottom: var(--spacing-xs);
-}
-
-.philosophy-list {
-  list-style: none;
-  max-width: 700px;
-  margin: var(--spacing-md) auto;
-}
-
-.philosophy-list li {
-  padding: var(--spacing-sm);
-  margin-bottom: var(--spacing-sm);
-  background: var(--white);
-  color: var(--text-dark);
-  border-radius: var(--border-radius);
-  box-shadow: 0 2px 4px var(--shadow);
-  line-height: 1.6;
-}
-
-.philosophy-list li * {
-  color: inherit;
-}
-
-.philosophy-list strong {
-  color: var(--primary);
-  font-weight: 600;
-}
-
-.philosophy-list code {
-  background-color: var(--bg-tertiary);
-  color: var(--text-primary);
-  padding: 0.2rem 0.4rem;
-  border-radius: 0.25rem;
-}
-
-.links-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-md);
-}
-
-.link-card {
-  background: var(--white);
-  color: var(--text-dark);
-  border: 2px solid var(--border);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-md);
-  transition: var(--transition);
-  display: block;
-}
-
-.link-card:hover {
-  border-color: var(--primary);
-  box-shadow: 0 4px 12px var(--shadow);
-  transform: translateY(-2px);
-}
-
-.link-card h3 {
-  color: var(--text-dark);
-  margin-bottom: var(--spacing-xs);
-}
-
-.link-card p {
-  color: var(--text-light);
-  margin-bottom: 0;
-}
-
-/* ============================================
-   Documentation Page Styles
-   ============================================ */
-
-.docs-page {
-  padding: var(--spacing-md) 0;
-}
-
-.docs-header {
-  text-align: center;
-  padding: var(--spacing-lg) 0;
-  background: var(--secondary);
-  color: var(--text-dark);
-  border-radius: var(--border-radius);
-  margin-bottom: var(--spacing-lg);
-}
-
-.docs-intro {
-  font-size: 1.125rem;
-  color: var(--text-light);
-  max-width: 700px;
-  margin: 0 auto;
-}
-
-.examples-container {
-  margin: var(--spacing-lg) 0;
-}
-
-.example-card {
-  background: var(--white);
-  color: var(--text-dark);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-md);
-  margin-bottom: var(--spacing-md);
-  box-shadow: 0 2px 4px var(--shadow);
-}
-
-.example-title {
-  color: var(--text-dark);
-  margin-bottom: var(--spacing-xs);
-}
-
-.example-description {
-  color: var(--text-light);
-  margin-bottom: var(--spacing-sm);
-}
-
-.code-block {
-  background: var(--text-dark);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-sm);
-  overflow-x: auto;
-}
-
-.code-block pre {
-  background: transparent;
-  margin: 0;
-  padding: 0;
-}
-
-.code-block code {
-  color: #e5e7eb;
-  background: transparent;
-  font-size: 0.875rem;
-  line-height: 1.6;
-}
-
-.resources-section {
-  margin: var(--spacing-xl) 0;
-  padding: var(--spacing-lg) 0;
-  background: var(--secondary);
-  color: var(--text-dark);
-  border-radius: var(--border-radius);
-}
-
-.resources-section h2 {
-  text-align: center;
-  margin-bottom: var(--spacing-md);
-}
-
-.resource-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: var(--spacing-md);
-  max-width: var(--max-width);
-  margin: 0 auto;
-  padding: 0 var(--spacing-sm);
-}
-
-.resource-card {
-  background: var(--white);
-  color: var(--text-dark);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-md);
-  transition: var(--transition);
-}
-
-.resource-card:hover {
-  box-shadow: 0 4px 12px var(--shadow);
-  transform: translateY(-2px);
-}
-
-.resource-card h3 {
-  color: var(--text-dark);
-  margin-bottom: var(--spacing-xs);
-}
-
-.resource-card p {
-  color: var(--text-light);
-  margin-bottom: var(--spacing-sm);
-}
-
-.resource-link {
-  color: var(--primary);
-  font-weight: 600;
-  display: inline-block;
-  margin-top: var(--spacing-xs);
-}
-
-.resource-link:hover {
-  color: var(--primary-dark);
-}
-
-.features-overview {
-  margin: var(--spacing-xl) 0;
-}
-
-.features-overview h2 {
-  text-align: center;
-  margin-bottom: var(--spacing-md);
-}
-
-.feature-list {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.feature-item {
-  padding: var(--spacing-sm);
-  margin-bottom: var(--spacing-sm);
-  background: var(--white);
-  color: var(--text-dark);
-  border-left: 4px solid var(--primary);
-  border-radius: var(--border-radius);
-}
-
-.feature-item h4 {
-  color: var(--text-dark);
-  margin-bottom: var(--spacing-xs);
-}
-
-.feature-item p {
-  color: var(--text-light);
-  margin-bottom: 0;
-}
-
-.getting-started {
-  margin: var(--spacing-xl) 0;
-  padding: var(--spacing-lg);
-  background: var(--white);
-  border-radius: var(--border-radius);
-  border: 1px solid var(--border);
-}
-
-.getting-started h2 {
-  text-align: center;
-  margin-bottom: var(--spacing-md);
-}
-
-.steps-list {
-  max-width: 700px;
-  margin: 0 auto;
-  padding-left: var(--spacing-md);
-}
-
-.steps-list li {
-  margin-bottom: var(--spacing-sm);
-  padding-left: var(--spacing-xs);
-  color: var(--text-light);
-}
-
-.steps-list strong {
-  color: var(--text-dark);
-}
-
-.tips-section {
-  margin: var(--spacing-xl) 0;
-  padding: var(--spacing-lg);
-  background: var(--secondary);
-  color: var(--text-dark);
-  border-radius: var(--border-radius);
-}
-
-.tips-section h2 {
-  text-align: center;
-  margin-bottom: var(--spacing-md);
-}
-
-.tips-list {
-  max-width: 700px;
-  margin: 0 auto;
-  list-style: none;
-}
-
-.tips-list li {
-  padding: var(--spacing-sm);
-  margin-bottom: var(--spacing-sm);
-  background: var(--white);
-  color: var(--text-dark);
-  border-radius: var(--border-radius);
-  border-left: 3px solid var(--accent);
-}
-
-.tips-list strong {
-  color: var(--text-dark);
-}
-
-/* ============================================
-   Utility Classes
-   ============================================ */
-
-/* Spacing */
-.mt-xs {
-  margin-top: var(--spacing-xs);
-}
-.mt-sm {
-  margin-top: var(--spacing-sm);
-}
-.mt-md {
-  margin-top: var(--spacing-md);
-}
-.mt-lg {
-  margin-top: var(--spacing-lg);
-}
-.mt-xl {
-  margin-top: var(--spacing-xl);
-}
-
-.mb-xs {
-  margin-bottom: var(--spacing-xs);
-}
-.mb-sm {
-  margin-bottom: var(--spacing-sm);
-}
-.mb-md {
-  margin-bottom: var(--spacing-md);
-}
-.mb-lg {
-  margin-bottom: var(--spacing-lg);
-}
-.mb-xl {
-  margin-bottom: var(--spacing-xl);
-}
-
-.pt-xs {
-  padding-top: var(--spacing-xs);
-}
-.pt-sm {
-  padding-top: var(--spacing-sm);
-}
-.pt-md {
-  padding-top: var(--spacing-md);
-}
-.pt-lg {
-  padding-top: var(--spacing-lg);
-}
-.pt-xl {
-  padding-top: var(--spacing-xl);
-}
-
-.pb-xs {
-  padding-bottom: var(--spacing-xs);
-}
-.pb-sm {
-  padding-bottom: var(--spacing-sm);
-}
-.pb-md {
-  padding-bottom: var(--spacing-md);
-}
-.pb-lg {
-  padding-bottom: var(--spacing-lg);
-}
-.pb-xl {
-  padding-bottom: var(--spacing-xl);
-}
-
-/* Text Alignment */
-.text-center {
-  text-align: center;
-}
-.text-left {
-  text-align: left;
-}
-.text-right {
-  text-align: right;
-}
-
-/* Display */
-.hidden {
-  display: none;
-}
-.block {
-  display: block;
-}
-.inline-block {
-  display: inline-block;
-}
-.flex {
-  display: flex;
-}
-.grid {
-  display: grid;
-}
-
-/* Flexbox Utilities */
-.flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.gap-xs {
-  gap: var(--spacing-xs);
-}
-.gap-sm {
-  gap: var(--spacing-sm);
-}
-.gap-md {
-  gap: var(--spacing-md);
-}
-.gap-lg {
-  gap: var(--spacing-lg);
-}
-
-/* ============================================
-   Responsive Breakpoints
-   ============================================ */
-
-/* Tablet: 768px - 1024px */
-@media (max-width: 1024px) {
-  :root {
-    --spacing-lg: 2.5rem;
-    --spacing-xl: 3rem;
-  }
-
-  .hero h1 {
-    font-size: 2.5rem;
-  }
-
-  .features-grid {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  }
-}
-
-/* Mobile: < 768px */
-@media (max-width: 768px) {
-  :root {
-    --spacing-md: 1.5rem;
-    --spacing-lg: 2rem;
-    --spacing-xl: 2.5rem;
-  }
-
-  html {
-    font-size: 14px;
-  }
-
-  h1 {
-    font-size: 2rem;
-  }
-
-  h2 {
-    font-size: 1.75rem;
-  }
-
-  h3 {
-    font-size: 1.25rem;
-  }
-
-  .hero h1 {
-    font-size: 2rem;
-  }
-
-  .hero p {
-    font-size: 1rem;
-  }
-
-  .navbar .container {
-    flex-direction: column;
-    gap: var(--spacing-sm);
-  }
-
-  .nav-links {
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    width: 100%;
-  }
-
-  .nav-link {
-    display: block;
-    text-align: center;
-  }
-
-  .header-content {
-    flex-direction: column;
-    gap: var(--spacing-sm);
-  }
-
-  .nav {
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    width: 100%;
-  }
-
-  nav ul {
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    width: 100%;
-  }
-
-  nav a {
-    display: block;
-    text-align: center;
-  }
-
-  .hero-buttons {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .btn {
-    width: 100%;
-  }
-
-  .features-grid,
-  .feature-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .demo-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .examples-grid {
-    grid-template-columns: 1fr;
-  }
-
-  form {
-    padding: var(--spacing-sm);
-  }
-}
-
-/* Small Mobile: < 480px */
-@media (max-width: 480px) {
-  .container {
-    padding: 0 var(--spacing-xs);
-  }
-
-  .hero {
-    padding: var(--spacing-md) 0;
-  }
-
-  .features,
-  .form-section,
-  .demo-section {
-    padding: var(--spacing-md) 0;
-  }
-}
-
-/* ============================================
-   Animations & Transitions
-   ============================================ */
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.fade-in {
-  animation: fadeIn 0.6s ease-out;
-}
-
-/* Smooth page transitions */
-[odac-page] {
-  animation: fadeIn 0.4s ease-out;
-}
-
-/* Loading state */
-.loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-/* Hover effects for interactive elements */
-.interactive {
-  transition: var(--transition);
-  cursor: pointer;
-}
-
-.interactive:hover {
-  transform: scale(1.02);
-}
-
-/* Focus visible for accessibility */
-*:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-/* Getting Started Page Styles */
-.hero-actions {
-  display: flex;
-  gap: 1rem;
-  margin-top: 2rem;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.hero-actions .btn {
-  text-decoration: none;
-  color: white;
-}
-
-.hero-actions .btn-primary {
-  color: white !important;
-}
-
-.hero-actions .btn-primary:hover {
-  color: white !important;
-}
-
-.hero-actions .btn-secondary {
-  color: var(--text-primary);
-}
-
-.hero-actions .btn-secondary:hover {
-  color: var(--text-primary);
-}
-
-.structure-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 2rem;
-  margin-top: 2rem;
-}
-
-.structure-item {
-  padding: 1.5rem;
-  background: var(--card-bg);
-  color: var(--text-primary);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-}
-
-.structure-icon {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-}
-
-.structure-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: var(--text-primary);
-}
-
-.structure-description {
-  color: var(--text-secondary);
-  margin-bottom: 1rem;
-  line-height: 1.6;
-}
-
-.structure-path {
-  display: inline-block;
-  padding: 0.25rem 0.75rem;
-  background: var(--code-bg);
-  border-radius: 4px;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  color: var(--code-color);
-  border: 1px solid var(--border);
-}
-
-.quickstart-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  margin-top: 2rem;
-  max-width: 900px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.quickstart-step {
-  position: relative;
-  padding: 2rem 1.5rem;
-  background: var(--card-bg);
-  color: var(--text-primary);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-}
-
-.step-number {
-  position: absolute;
-  top: -1rem;
-  left: 1.5rem;
-  width: 2.5rem;
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--primary);
-  color: white;
-  border-radius: 50%;
-  font-weight: 700;
-  font-size: 1.25rem;
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
-}
-
-.step-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-  color: var(--text-primary);
-}
-
-.step-description {
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin-bottom: 1rem;
-}
-
-.code-snippet {
-  background: var(--code-bg);
-  color: var(--code-color);
-  padding: 1rem;
-  border-radius: 6px;
-  overflow-x: auto;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  line-height: 1.5;
-  border: 1px solid var(--border);
-}
-
-.code-snippet code {
-  background: none;
-  padding: 0;
-  color: inherit;
-}
-
-.features-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-top: 2rem;
-}
-
-.feature-item {
-  display: flex;
-  gap: 1.5rem;
-  padding: 1.5rem;
-  background: var(--card-bg);
-  color: var(--text-primary);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s,
-    border-color 0.2s;
-}
-
-.feature-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
-  border-color: var(--primary);
-}
-
-.feature-item .feature-icon {
-  font-size: 2rem;
-  flex-shrink: 0;
-}
-
-.feature-content h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: var(--text-primary);
-}
-
-.feature-content p {
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-
-.feature-content code {
-  background: var(--code-bg);
-  padding: 0.125rem 0.375rem;
-  border-radius: 3px;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  color: var(--code-color);
-  border: 1px solid var(--border);
-}
-
-.resources {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  padding: 4rem 0;
-  border-top: 1px solid var(--border);
-}
-
-.resources-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
-  margin-top: 2rem;
-}
-
-.resource-card {
-  display: block;
-  padding: 2rem;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  text-decoration: none;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s,
-    border-color 0.2s;
-}
-
-.resource-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
-  border-color: var(--primary);
-}
-
-.resource-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-.resource-card h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: var(--text-primary);
-}
-
-.resource-card p {
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-
-.next-steps {
-  margin-top: 3rem;
-  padding: 2rem;
-  background: var(--bg-primary);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  text-align: center;
-}
-
-.next-steps h3 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  color: var(--text-primary);
-}
-
-.next-steps p {
-  color: var(--text-secondary);
-  line-height: 1.8;
-  margin-bottom: 0.5rem;
-}
-
-.next-steps code {
-  background: var(--code-bg);
-  padding: 0.125rem 0.5rem;
-  border-radius: 3px;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  color: var(--code-color);
-  border: 1px solid var(--border);
-}
-
-.next-steps a {
-  color: var(--primary);
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.next-steps a:hover {
-  color: var(--primary-light);
-  text-decoration: underline;
-}
-
-.section-description {
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 1.125rem;
-  margin-top: 0.5rem;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* Page Hero (for About and Docs pages) */
-.page-hero {
-  text-align: center;
-  padding: 3rem 0 2rem;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 3rem;
-}
-
-.page-hero h1 {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-}
-
-.page-hero .lead {
-  font-size: 1.25rem;
-  color: var(--text-secondary);
-  max-width: 700px;
-  margin: 0 auto;
-}
-
-/* Content Sections */
-.content-section {
-  margin-bottom: 3rem;
-}
-
-.content-section h2 {
-  font-size: 2rem;
-  margin-bottom: 1.5rem;
-  color: var(--text-primary);
-}
-
-.content-section p {
-  font-size: 1.125rem;
-  line-height: 1.8;
-  color: var(--text-secondary);
-  margin-bottom: 1.5rem;
-}
-
-.content-section code {
-  background: var(--code-bg);
-  padding: 0.125rem 0.5rem;
-  border-radius: 3px;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  color: var(--code-color);
-  border: 1px solid var(--border);
-}
-
-/* Component Grid */
-.component-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-  margin-top: 2rem;
-}
-
-.component-card {
-  padding: 1.5rem;
-  background: var(--card-bg);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  transition:
-    transform 0.2s,
-    border-color 0.2s;
-}
-
-.component-card:hover {
-  transform: translateY(-2px);
-  border-color: var(--primary);
-}
-
-.component-card h3 {
-  font-size: 1.25rem;
-  margin-bottom: 0.75rem;
-  color: var(--text-primary);
-}
-
-.component-card p {
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin: 0;
-}
-
-/* Links Grid */
-.links-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-  margin-top: 2rem;
-}
-
-.link-card {
-  display: block;
-  padding: 2rem;
-  background: var(--card-bg);
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  text-decoration: none;
-  color: inherit;
-  transition:
-    transform 0.2s,
-    border-color 0.2s,
-    box-shadow 0.2s;
-}
-
-.link-card:hover {
-  transform: translateY(-4px);
-  border-color: var(--primary);
-  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
-}
-
-.link-card h3 {
-  font-size: 1.25rem;
-  margin-bottom: 0.5rem;
-  color: var(--text-primary);
-}
-
-.link-card p {
-  color: var(--text-secondary);
-  margin: 0;
-}
-
-/* Example Sections */
-.example-section {
-  margin-bottom: 4rem;
-}
-
-.example-section h2 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-  color: var(--text-primary);
-}
-
-.example-section > p {
-  font-size: 1.125rem;
-  color: var(--text-secondary);
-  margin-bottom: 2rem;
-}
-
-.code-example {
-  margin-bottom: 2rem;
-}
-
-.code-example h3 {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.code-example .code-block {
-  background: var(--code-bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1.5rem;
-  overflow-x: auto;
-}
-
-.code-example .code-block code {
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--code-color);
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-.code-example .code-block pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}