:root {
  --page-fill: #fff7ed;
  --page-accent-left: rgba(249, 115, 22, 0.15);
  --page-accent-right: rgba(251, 146, 60, 0.14);
  --surface-border: rgba(234, 88, 12, 0.22);
  --surface-fill: rgba(255, 247, 237, 0.84);
  --surface-shadow: 0 22px 52px rgba(124, 45, 18, 0.12);
  --hero-fill: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(249, 115, 22, 0.1));
  --title-color: #9a3412;
  --copy-color: #6b4f3f;
  --muted-copy-color: #78716c;
  --link-color: #c2410c;
  --example-button-fill: rgba(255, 247, 237, 0.92);
  --example-button-border: rgba(194, 65, 12, 0.18);
  --example-button-text: #7c2d12;
}

.gradio-container {
  color-scheme: light;
  background:
    radial-gradient(circle at top left, var(--page-accent-left), transparent 28%),
    radial-gradient(circle at top right, var(--page-accent-right), transparent 26%),
    var(--page-fill);
}

.app-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

.hero {
  padding: 1.75rem;
  border: 1px solid var(--surface-border);
  border-radius: 24px;
  background: var(--hero-fill);
  box-shadow: var(--surface-shadow);
}

.gradio-container .hero h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--title-color) !important;
}

.gradio-container .hero h1,
.gradio-container .hero p {
  margin: 0;
}

.hero p + p {
  margin-top: 0.85rem;
}

.gradio-container .hero p,
.gradio-container .hero a {
  color: var(--copy-color) !important;
}

.gradio-container .hero a {
  text-decoration-color: currentColor;
}

.panel {
  border: 1px solid var(--surface-border);
  border-radius: 22px;
  padding: 1rem;
  background: var(--surface-fill);
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(12px);
}

.gradio-container .panel .prose,
.gradio-container .panel .prose p,
.gradio-container .panel .prose h1,
.gradio-container .panel .prose h2,
.gradio-container .panel .prose h3,
.gradio-container .panel label,
.gradio-container h3 {
  color: var(--copy-color) !important;
}

.gradio-container h3 {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--title-color) !important;
}

.guide-panel button,
.guide-panel [role="button"],
.guide-panel summary {
  color: var(--title-color) !important;
  font-weight: 600;
}

.guide-panel .prose p {
  color: var(--copy-color) !important;
}

.status-banner {
  border: 1px solid rgba(194, 65, 12, 0.3);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  background: rgba(251, 146, 60, 0.14);
}

.section-copy p {
  margin-bottom: 0;
}

.example-heading {
  margin-bottom: 0.35rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--title-color) !important;
}

.example-source p {
  margin-top: 0.35rem;
  margin-bottom: 0.85rem;
  font-size: 0.82rem;
  color: var(--muted-copy-color) !important;
}

.compact-note {
  font-size: 0.92rem;
  color: var(--copy-color) !important;
}

.gradio-container .section-copy p {
  color: var(--copy-color) !important;
}

.gradio-container .prose code,
.gradio-container .section-copy code,
.gradio-container .example-source code,
.gradio-container code:not(pre code) {
  display: inline-block;
  border: 1px solid rgba(194, 65, 12, 0.18) !important;
  border-radius: 0.45rem !important;
  background: #fff1e6 !important;
  color: #9a3412 !important;
  padding: 0.08rem 0.35rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600;
}

.gradio-container .prose code::before,
.gradio-container .prose code::after,
.gradio-container .section-copy code::before,
.gradio-container .section-copy code::after,
.gradio-container .example-source code::before,
.gradio-container .example-source code::after,
.gradio-container code:not(pre code)::before,
.gradio-container code:not(pre code)::after {
  content: none !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select {
  color: var(--copy-color) !important;
}

.gradio-container input::placeholder,
.gradio-container textarea::placeholder {
  color: #a78b7a !important;
  opacity: 1;
}

.gradio-container .example-panel button,
.gradio-container .example-panel [role="button"] {
  background: var(--example-button-fill) !important;
  border: 1px solid var(--example-button-border) !important;
  color: var(--example-button-text) !important;
}

.gradio-container .example-panel button span,
.gradio-container .example-panel [role="button"] span,
.gradio-container .example-panel button * ,
.gradio-container .example-panel [role="button"] * {
  color: inherit !important;
}

.gradio-container .example-panel button:hover,
.gradio-container .example-panel [role="button"]:hover {
  background: rgba(255, 237, 213, 0.96) !important;
}

.gradio-container .gr-button-primary {
  box-shadow: 0 14px 28px rgba(194, 65, 12, 0.22);
}