:root {
    --felt-950: oklch(17% .025 165);
    --gold: oklch(79% .12 87);
    --gold-soft: oklch(89% .1 90);
    --background: oklch(17% .025 165);
    --foreground: oklch(96% .015 95);
    --card: oklch(24% .04 162);
    --muted-foreground: oklch(76% .03 160);
    --border: oklch(79% .12 87/.2);
    --font-display: "Raleway", system-ui, sans-serif;
    --font-sans: "Sora", system-ui, sans-serif;
    --site-width: 1240px
}

*,:before,:after {
    box-sizing: border-box;
    border-color: var(--border)
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    margin: 0
}

[id] {
    scroll-margin-top: 80px
}

a {
    color: inherit;
    text-decoration: none
}

h1,h2,h3,p {
    margin: 0
}

.container {
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 0 20px
}

.site {
    background: radial-gradient(1100px 520px at 12% -10%, color-mix(in oklab, var(--gold) 14%, transparent), transparent 60%), var(--felt-950);
    flex-direction: column;
    min-height: 100vh;
    display: flex
}

.site-main {
    flex: 1
}

.site-header {
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--background) 90%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0
}

.site-header__inner {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex
}

.logo {
    align-items: center;
    gap: 8px;
    display: flex
}

.logo__badge {
    background: var(--gold);
    width: 36px;
    height: 36px;
    color: var(--felt-950);
    font-family: var(--font-display);
    box-shadow: 0 6px 20px -6px color-mix(in oklab, var(--gold) 60%, transparent);
    border-radius: 50%;
    place-items: center;
    font-size: 1.05rem;
    font-weight: 800;
    display: grid
}

.logo__text {
    font-family: var(--font-display);
    color: var(--foreground);
    font-size: 1.25rem;
    font-weight: 800
}

.logo__text span {
    color: var(--gold)
}

.nav {
    flex-wrap: wrap;
    gap: 4px 20px;
    font-size: .875rem;
    display: flex
}

.nav a {
    color: var(--muted-foreground);
    transition: color .2s
}

.nav a:hover,.nav a.is-active {
    color: var(--gold)
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--background)
}

.site-footer__inner {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex
}

.site-footer .nav {
    justify-content: center;
    gap: 8px 24px
}

.footer-note {
    max-width: 42rem;
    color: var(--muted-foreground);
    font-size: .75rem
}

.footer-note a {
    color: var(--gold);
    text-decoration: underline
}

.hero {
    --hero-overlay: radial-gradient(ellipse at center, color-mix(in oklab, var(--felt-950) 82%, transparent) 0%, color-mix(in oklab, var(--felt-950) 55%, transparent) 60%, color-mix(in oklab, var(--felt-950) 85%, transparent) 100%);
    background-position: 50%;
    background-size: cover;
    padding: 32px 20px
}

.hero__inner {
    max-width: var(--site-width);
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    display: flex
}

.hero__eyebrow {
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--gold-soft);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 11px
}

.hero__title {
    max-width: 48rem;
    font-family: var(--font-display);
    margin-top: 12px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25
}

.hero__summary {
    max-width: 42rem;
    color: var(--muted-foreground);
    margin-top: 12px;
    font-size: .875rem
}

@media (width>=768px) {
    .hero__title {
        font-size: 2.25rem
    }
}

.toc {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 12px;
    width: 100%;
    max-width: 36rem;
    margin-top: 16px
}

.toc__toggle {
    cursor: pointer;
    width: 100%;
    font: inherit;
    color: var(--gold);
    background: 0 0;
    border: 0;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    font-weight: 600;
    display: flex
}

.toc__icon {
    width: 20px;
    height: 20px;
    transition: transform .2s
}

.toc__icon.is-open {
    transform: rotate(180deg)
}

.toc__list {
    border-top: 1px solid var(--border);
    text-align: left;
    margin: 0;
    padding: 16px 40px;
    font-size: .875rem
}

.toc__list li {
    margin: 4px 0
}

.toc__list a {
    color: var(--muted-foreground)
}

.toc__list a:hover {
    color: var(--gold)
}

.article {
    padding-top: 48px;
    padding-bottom: 48px
}

.simple-page {
    max-width: 48rem;
    margin: 0 auto;
    padding: 56px 20px
}

.simple-page__title {
    text-align: center;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800
}

.simple-page .prose-article {
    margin-top: 32px
}

.prose-article {
    color: var(--muted-foreground);
    line-height: 1.75
}

.prose-article h2 {
    font-family: var(--font-display);
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
    margin: 2.5rem 0 1rem;
    padding-bottom: .5rem;
    font-size: 1.9rem;
    font-weight: 800
}

.prose-article h3 {
    color: var(--gold);
    margin: 1.75rem 0 .6rem;
    font-size: 1.2rem;
    font-weight: 600
}

.prose-article p {
    margin: 0 0 1rem
}

.prose-article ul {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    list-style: outside
}

.prose-article li {
    margin: .3rem 0
}

.prose-article li::marker {
    color: var(--gold)
}

.prose-article a {
    color: var(--gold);
    text-decoration: underline
}

.status-page {
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0 16px;
    display: flex
}

.status-page h1 {
    font-size: 4.5rem;
    font-weight: 800;
    font-family: var(--font-display)
}

.status-page p {
    color: var(--muted-foreground);
    margin-top: 8px;
    font-size: .875rem
}

.status-page__actions {
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    display: flex
}

.btn {
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 500;
    display: inline-flex
}

.btn--primary {
    background: var(--gold);
    color: var(--felt-950);
    border-color: var(--gold)
}

.atl-357317d5 .ct-shell {
    max-width: 1240px
}