:root,
.editor-styles-wrapper {
  --background: 36 40% 97%;
  --foreground: 20 16% 14%;

  --card: 0 0% 100%;
  --card-foreground: 20 16% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 20 16% 14%;

  --primary: 38 92% 45%;
  --primary-foreground: 20 20% 8%;
  --secondary: 36 30% 90%;
  --secondary-foreground: 20 12% 26%;
  --muted: 36 20% 92%;
  --muted-foreground: 20 8% 40%;
  --accent: 38 92% 50%;
  --accent-foreground: 20 20% 8%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --success: 148 60% 38%;
  --success-foreground: 152 67% 97%;
  --warning: 36 94% 46%;
  --warning-foreground: 44 96% 95%;
  --info: 213 90% 52%;
  --info-foreground: 210 40% 98%;

  --border: 30 20% 82%;
  --input: 30 20% 82%;
  --ring: 38 92% 50%;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --touch-target-size: 44px;

  --layer-base: 0;
  --layer-sticky: 40;
  --layer-nav: 50;
  --layer-overlay: 60;
  --layer-modal: 70;
  --layer-toast: 80;

  --radius: 0.75rem;
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-control: var(--radius-md);
  --radius-surface: calc(var(--radius) + 0.125rem);
  --radius-emphasis: calc(var(--radius) + 0.375rem);
  --radius-pill: 9999px;

  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-inverse-background: hsl(var(--inverse-background));
  --color-inverse-foreground: hsl(var(--inverse-foreground));
  --color-inverse-muted-foreground: hsl(var(--inverse-muted-foreground));
  --color-inverse-border: hsl(var(--inverse-border));
  --color-inverse-surface: hsl(var(--inverse-surface));
  --color-inverse-surface-hover: hsl(var(--inverse-surface-hover));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-info: hsl(var(--info));
  --color-info-foreground: hsl(var(--info-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-surface-1: hsl(var(--surface-1));
  --color-surface-2: hsl(var(--surface-2));
  --color-surface-3: hsl(var(--surface-3));
  --color-surface-hover: hsl(var(--surface-hover));
  --color-surface-active: hsl(var(--surface-active));
  --color-text-strong: hsl(var(--text-strong));
  --color-text-body: hsl(var(--text-body));
  --color-text-subtle: hsl(var(--text-subtle));
  --color-text-meta: hsl(var(--text-meta));
  --color-interactive-border-hover: hsl(var(--interactive-border-hover));
  --color-interactive-border-active: hsl(var(--interactive-border-active));
  --color-interactive-surface-hover: hsl(var(--interactive-surface-hover));
  --color-interactive-surface-active: hsl(var(--interactive-surface-active));
  --color-language-typescript: hsl(var(--language-typescript));
  --color-language-python: hsl(var(--language-python));
  --color-language-javascript: hsl(var(--language-javascript));
  --color-language-php: hsl(var(--language-php));
  --color-language-markdown: hsl(var(--language-markdown));
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  --sidebar-background: 35 35% 96%;
  --sidebar-foreground: 20 16% 14%;
  --sidebar-primary: 38 92% 50%;
  --sidebar-primary-foreground: 20 20% 8%;
  --sidebar-accent: 36 30% 90%;
  --sidebar-accent-foreground: 20 16% 14%;
  --sidebar-border: 30 20% 82%;
  --sidebar-ring: 38 92% 50%;

  --inverse-background: 20 14% 8%;
  --inverse-foreground: 39 71% 95%;
  --inverse-muted-foreground: 38 47% 78%;
  --inverse-border: 39 66% 74% / 0.35;
  --inverse-surface: 0 0% 0% / 0.24;
  --inverse-surface-hover: 0 0% 0% / 0.4;

  --surface-1: 0 0% 100%;
  --surface-2: 36 25% 95%;
  --surface-3: 36 20% 92%;
  --surface-hover: 36 26% 94%;
  --surface-active: 36 30% 90%;

  --text-strong: 20 16% 14%;
  --text-body: 20 12% 26%;
  --text-subtle: 20 9% 36%;
  --text-meta: 20 8% 40%;

  --interactive-border-hover: 38 72% 56%;
  --interactive-border-active: 38 82% 50%;
  --interactive-surface-hover: 36 28% 91%;
  --interactive-surface-active: 36 30% 88%;

  --overlay-scrim-soft: 0 0% 0% / 0.18;
  --overlay-scrim-medium: 0 0% 0% / 0.32;
  --overlay-scrim-strong: 0 0% 0% / 0.58;
  --overlay-brand-amber: 33 98% 56% / 0.22;
  --overlay-brand-indigo: 223 44% 16% / 0.32;
  --overlay-footer-amber-1: 31 100% 56% / 0.19;
  --overlay-footer-amber-2: 30 100% 54% / 0.14;

  --language-typescript: 38 92% 50%;
  --language-python: 210 60% 55%;
  --language-javascript: 50 90% 55%;
  --language-php: 250 52% 58%;
  --language-markdown: 160 60% 45%;

  --text-size-eyebrow: 0.625rem;
  --text-size-meta: 0.6875rem;
  --tracking-eyebrow: 0.08em;

  --motion-duration-fast: 160ms;
  --motion-duration-medium: 260ms;
  --motion-duration-slow: 420ms;
  --motion-duration-hover: var(--motion-duration-fast);
  --motion-duration-enter: var(--motion-duration-medium);
  --motion-duration-route: 220ms;
  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --animate-accordion-down: accordion-down var(--motion-duration-fast) var(--motion-ease-standard);
  --animate-accordion-up: accordion-up var(--motion-duration-fast) var(--motion-ease-standard);
  --animate-fade-in: fade-in var(--motion-duration-slow) var(--motion-ease-standard) forwards;
  --animate-slide-in: slide-in var(--motion-duration-medium) var(--motion-ease-standard) forwards;

  --gradient-surface-hero: linear-gradient(135deg, hsl(38 92% 50% / 0.14) 0%, transparent 50%);
  --gradient-surface-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(36 25% 94%) 100%);
  --gradient-surface-emphasis: linear-gradient(135deg, hsl(38 92% 50%) 0%, hsl(28 85% 55%) 100%);
  --gradient-hero: var(--gradient-surface-hero);
  --gradient-card: var(--gradient-surface-card);
  --gradient-accent: var(--gradient-surface-emphasis);

  --shadow-surface-1: 0 4px 24px -4px hsl(20 20% 15% / 0.08);
  --shadow-surface-2: 0 12px 32px -14px hsl(20 20% 15% / 0.2);
  --shadow-overlay: 0 24px 48px -20px hsl(20 20% 10% / 0.5);
  --shadow-emphasis: 0 0 40px -10px hsl(38 92% 50% / 0.15);
  --shadow-surface-strong: 0 26px 46px -26px hsl(26 86% 30% / 0.42), inset 0 1px 0 hsl(42 88% 86% / 0.2);
  --shadow-card: var(--shadow-surface-1);
  --shadow-glow: var(--shadow-emphasis);
  --shadow-cta-hero: 0 18px 38px hsl(0 0% 0% / 0.45);

  --border-emphasis: 35 84% 44% / 0.32;
  --text-shadow-hero-title: 0 14px 28px hsl(0 0% 0% / 0.8);
  --text-shadow-hero-body: 0 8px 18px hsl(0 0% 0% / 0.75);
  --text-shadow-inverse-strong: 0 10px 18px hsl(0 0% 0% / 0.7);
  --text-shadow-avatar-monogram: 0 4px 12px hsl(0 0% 0% / 0.5);

  --gradient-avatar-monogram: radial-gradient(circle at 30% 30%, hsl(38 92% 50% / 0.3), transparent 60%),
    linear-gradient(135deg, hsl(20 14% 12%) 0%, hsl(20 10% 8%) 100%);

  color-scheme: light;
}

:root[data-theme="dark"],
.dark,
body.dark,
body.is-dark-theme,
.editor-styles-wrapper[data-theme="dark"],
.editor-styles-wrapper.is-dark-theme {
  --background: 20 14% 4%;
  --foreground: 36 33% 92%;

  --card: 20 10% 8%;
  --card-foreground: 36 33% 92%;
  --popover: 20 10% 8%;
  --popover-foreground: 36 33% 92%;

  --primary: 38 92% 50%;
  --primary-foreground: 20 14% 4%;
  --secondary: 20 8% 14%;
  --secondary-foreground: 36 20% 72%;
  --muted: 20 8% 12%;
  --muted-foreground: 36 10% 50%;
  --accent: 38 92% 50%;
  --accent-foreground: 20 14% 4%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --success: 152 62% 45%;
  --success-foreground: 152 70% 12%;
  --warning: 40 96% 56%;
  --warning-foreground: 34 74% 14%;
  --info: 213 95% 64%;
  --info-foreground: 224 76% 12%;

  --border: 20 10% 16%;
  --input: 20 10% 16%;
  --ring: 38 92% 50%;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --touch-target-size: 44px;
  --layer-base: 0;
  --layer-sticky: 40;
  --layer-nav: 50;
  --layer-overlay: 60;
  --layer-modal: 70;
  --layer-toast: 80;
  --sidebar-background: 20 10% 6%;
  --sidebar-foreground: 36 33% 92%;
  --sidebar-primary: 38 92% 50%;
  --sidebar-primary-foreground: 20 14% 4%;
  --sidebar-accent: 20 8% 14%;
  --sidebar-accent-foreground: 36 33% 92%;
  --sidebar-border: 20 10% 16%;
  --sidebar-ring: 38 92% 50%;

  --inverse-background: 20 14% 6%;
  --inverse-foreground: 39 71% 95%;
  --inverse-muted-foreground: 37 47% 80%;
  --inverse-border: 38 76% 66% / 0.34;
  --inverse-surface: 0 0% 0% / 0.34;
  --inverse-surface-hover: 0 0% 0% / 0.5;

  --surface-1: 20 10% 8%;
  --surface-2: 20 10% 10%;
  --surface-3: 20 9% 13%;
  --surface-hover: 20 10% 14%;
  --surface-active: 20 11% 17%;

  --text-strong: 36 33% 92%;
  --text-body: 36 20% 72%;
  --text-subtle: 36 13% 60%;
  --text-meta: 36 10% 50%;

  --interactive-border-hover: 38 76% 62%;
  --interactive-border-active: 38 88% 58%;
  --interactive-surface-hover: 20 11% 16%;
  --interactive-surface-active: 20 12% 18%;
  --overlay-scrim-soft: 0 0% 0% / 0.22;
  --overlay-scrim-medium: 0 0% 0% / 0.38;
  --overlay-scrim-strong: 0 0% 0% / 0.72;
  --overlay-brand-amber: 33 98% 56% / 0.24;
  --overlay-brand-indigo: 223 44% 16% / 0.36;
  --overlay-footer-amber-1: 31 100% 56% / 0.22;
  --overlay-footer-amber-2: 30 100% 54% / 0.16;
  --language-typescript: 38 92% 58%;
  --language-python: 210 66% 64%;
  --language-javascript: 50 94% 62%;
  --language-php: 250 58% 67%;
  --language-markdown: 160 64% 58%;
  --text-size-eyebrow: 0.625rem;
  --text-size-meta: 0.6875rem;
  --tracking-eyebrow: 0.08em;
  --motion-duration-fast: 160ms;
  --motion-duration-medium: 260ms;
  --motion-duration-slow: 420ms;
  --motion-duration-hover: var(--motion-duration-fast);
  --motion-duration-enter: var(--motion-duration-medium);
  --motion-duration-route: 220ms;
  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --gradient-surface-hero: linear-gradient(135deg, hsl(38 92% 50% / 0.08) 0%, transparent 50%);
  --gradient-surface-card: linear-gradient(145deg, hsl(20 10% 10%) 0%, hsl(20 10% 6%) 100%);
  --gradient-surface-emphasis: linear-gradient(135deg, hsl(38 92% 50%) 0%, hsl(28 85% 55%) 100%);
  --gradient-hero: var(--gradient-surface-hero);
  --gradient-card: var(--gradient-surface-card);
  --gradient-accent: var(--gradient-surface-emphasis);
  --shadow-surface-1: 0 4px 24px -4px hsl(0 0% 0% / 0.3);
  --shadow-surface-2: 0 12px 32px -14px hsl(0 0% 0% / 0.46);
  --shadow-overlay: 0 24px 48px -20px hsl(0 0% 0% / 0.72);
  --shadow-emphasis: 0 0 40px -10px hsl(38 92% 50% / 0.15);
  --shadow-surface-strong: 0 34px 54px -30px hsl(26 86% 28% / 0.56), inset 0 1px 0 hsl(34 86% 72% / 0.22);
  --shadow-card: var(--shadow-surface-1);
  --shadow-glow: var(--shadow-emphasis);
  --shadow-cta-hero: 0 18px 38px hsl(0 0% 0% / 0.52);
  --border-emphasis: 35 90% 52% / 0.34;
  --text-shadow-hero-title: 0 14px 28px hsl(0 0% 0% / 0.82);
  --text-shadow-hero-body: 0 8px 18px hsl(0 0% 0% / 0.78);
  --text-shadow-inverse-strong: 0 10px 18px hsl(0 0% 0% / 0.72);
  --text-shadow-avatar-monogram: 0 4px 12px hsl(0 0% 0% / 0.56);
  --gradient-avatar-monogram:
    radial-gradient(circle at 30% 30%, hsl(38 92% 50% / 0.28), transparent 60%),
    linear-gradient(135deg, hsl(22 16% 16%) 0%, hsl(20 10% 10%) 100%);

  color-scheme: dark;
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

.container {
  margin-inline: auto;
  padding-inline: 2rem;
  max-width: 1400px;
}

* {
  border-color: hsl(var(--border));
}

body,
.editor-styles-wrapper {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--motion-duration-hover) var(--motion-ease-standard),
    color var(--motion-duration-hover) var(--motion-ease-standard);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: hsl(var(--text-strong));
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
}

code,
pre {
  font-family: var(--font-mono);
}

::selection {
  background: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.text-gradient {
  background-image: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rounded-control { border-radius: var(--radius-control); }
.rounded-surface { border-radius: var(--radius-surface); }
.rounded-emphasis { border-radius: var(--radius-emphasis); }
.rounded-pill { border-radius: var(--radius-pill); }

.shadow-surface { box-shadow: var(--shadow-surface-1); }
.shadow-emphasis { box-shadow: var(--shadow-emphasis); }
.shadow-cta-hero { box-shadow: var(--shadow-cta-hero); }

.touch-target {
  min-width: var(--touch-target-size);
  min-height: var(--touch-target-size);
}

.z-layer-base { z-index: var(--layer-base); }
.z-layer-sticky { z-index: var(--layer-sticky); }
.z-layer-nav { z-index: var(--layer-nav); }
.z-layer-overlay { z-index: var(--layer-overlay); }
.z-layer-modal { z-index: var(--layer-modal); }
.z-layer-toast { z-index: var(--layer-toast); }

.text-eyebrow {
  font-size: var(--text-size-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.2;
}

.text-meta {
  font-size: var(--text-size-meta);
  line-height: 1.35;
}

.text-shadow-hero-title { text-shadow: var(--text-shadow-hero-title); }
.text-shadow-hero-body { text-shadow: var(--text-shadow-hero-body); }
.text-shadow-inverse-strong { text-shadow: var(--text-shadow-inverse-strong); }
.text-shadow-avatar { text-shadow: var(--text-shadow-avatar-monogram); }
.avatar-monogram-surface { background: var(--gradient-avatar-monogram); }
.hero-gradient-layer { background: var(--gradient-hero); }

.focus-ring:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-width) hsl(var(--ring)),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) hsl(var(--background));
}

.focus-ring-inverse:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-width) hsl(var(--ring)),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) hsl(var(--inverse-background));
}

.glass {
  backdrop-filter: blur(12px) saturate(1.2);
  background: hsl(var(--card) / 0.7);
}

.noise {
  position: relative;
}

.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.03;
  pointer-events: none;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.ember-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: hsl(var(--card));
}

.ember-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(154deg, hsl(0 0% 100% / 0.78) 0%, hsl(0 0% 100% / 0.66) 100%),
    url("../images/amber-pattern.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.ember-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.12;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ember-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ember-noise)'/%3E%3C/svg%3E");
}

.ember-surface > * {
  position: relative;
  z-index: 1;
}

.ember-surface-strong {
  border-color: hsl(var(--border-emphasis));
  box-shadow: var(--shadow-surface-strong);
}

body.dark .ember-surface::before,
body.is-dark-theme .ember-surface::before,
:root[data-theme="dark"] .ember-surface::before {
  background:
    linear-gradient(154deg, hsl(223 24% 12% / 0.7) 0%, hsl(20 10% 8% / 0.74) 100%),
    url("../images/amber-pattern.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body.dark .ember-surface::after,
body.is-dark-theme .ember-surface::after,
:root[data-theme="dark"] .ember-surface::after {
  opacity: 0.16;
  mix-blend-mode: screen;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background:
    linear-gradient(112deg, hsl(var(--overlay-scrim-medium)) 0%, hsl(var(--overlay-scrim-strong)) 100%),
    url("../images/hero-piano-ide.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-backdrop-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 64% at 24% 26%, hsl(var(--overlay-brand-amber)), transparent 62%),
    radial-gradient(68% 60% at 78% 36%, hsl(var(--overlay-brand-indigo)), transparent 66%),
    linear-gradient(180deg, hsl(var(--overlay-scrim-soft)) 0%, hsl(var(--overlay-scrim-medium)) 100%);
}

.footer-cinematic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid hsl(var(--inverse-border));
  background: hsl(var(--inverse-background));
}

.footer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(180deg, hsl(var(--overlay-scrim-medium)) 0%, hsl(var(--overlay-scrim-strong)) 100%),
    url("../images/amber-pattern.png"),
    url("../images/hero-piano-ide.png");
  background-size: cover, 180% 180%, cover;
  background-position: center center, center center, center 70%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, soft-light, normal;
}

.footer-backdrop-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 56% at 22% 24%, hsl(var(--overlay-footer-amber-1)), transparent 66%),
    radial-gradient(62% 52% at 84% 28%, hsl(var(--overlay-footer-amber-2)), transparent 70%);
}

.footer-cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='footer-noise-img'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23footer-noise-img)'/%3E%3C/svg%3E");
}

.prose-custom {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prose-custom h2 {
  margin: 3rem 0 1rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
}

.prose-custom p {
  margin: 0 0 1.5rem;
  color: hsl(var(--muted-foreground));
}

.prose-custom ul {
  margin: 1rem 0;
  list-style: disc;
  padding-left: 1.5rem;
  color: hsl(var(--muted-foreground));
}

.prose-custom ol {
  margin: 1rem 0;
  list-style: decimal;
  padding-left: 1.5rem;
  color: hsl(var(--muted-foreground));
}

.prose-custom li {
  margin: 0.25rem 0;
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
}

.prose-custom code {
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  background: hsl(var(--muted));
  color: hsl(var(--primary));
  font-size: 0.875rem;
}

.prose-custom pre {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 1rem;
  background: hsl(var(--card));
  font-size: 0.875rem;
}

.prose-custom blockquote {
  margin: 1.5rem 0;
  border-left: 3px solid hsl(var(--primary));
  padding-left: 1rem;
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

@media (max-width: 1024px) {
  .hero-backdrop {
    background-position: 40% center;
  }

  .footer-backdrop {
    background-position: 40% center, center center, 40% 68%;
  }
}

@media (max-width: 768px) {
  .hero-backdrop {
    background-position: 34% center;
  }

  .footer-backdrop {
    background-position: 34% center, center center, 34% 64%;
  }
}