:root {
    --primary-500: #007AFF;
    --neutral-900: #111827;
    --neutral-600: #4B5563;
    --neutral-200: #E9ECEF;
    --neutral-100: #F8F9FA;
    --code-bg: #0A0A0A;
    --code-text: #E4E4E7;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--neutral-900);
    background-color: var(--neutral-100);
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px;
}

.intro h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.intro p {
    color: var(--neutral-600);
    font-size: 16px;
    line-height: 1.6;
}

.intro a {
    color: var(--primary-500);
}

#swagger-ui {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 16px;
}

.usage-section {
    margin-top: 48px;
}

.usage-section h2 {
    font-size: 22px;
    margin-bottom: 8px;
}

.usage-section p {
    color: var(--neutral-600);
    margin-bottom: 16px;
}

.code-block {
    background-color: var(--code-bg);
    color: var(--code-text);
    border-radius: 12px;
    padding: 24px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
}

.code-block .comment {
    color: #6A737D;
}

.code-block .keyword {
    color: #F97583;
}

.code-block .string {
    color: #9ECBFF;
}

.code-block .function {
    color: #B392F0;
}