.rules-topbar {
    color: #e4e7f0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.rules-scroll {
    --rules-scrollport-height: calc(100dvh - 56px);
    overscroll-behavior: contain;
}

.rules-main {
    padding: 0 90px;
}

.rules-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 49px 0 48px;
    color: #d6dce8;
    font-size: 15px;
    line-height: 1.8;
}

.rules-wrap :is(p, li, h1, h2, h3, a) {
    overflow-wrap: anywhere;
}

.rules-wrap strong {
    color: #e4e7f0;
    font-weight: 600;
}

.rules-wrap a {
    color: #93bbfa;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.rules-wrap a:hover {
    color: #c2d7fc;
}

.rules-wrap a:focus-visible,
.rules-doc-nav a:focus-visible,
.rules-mobile-toc summary:focus-visible {
    outline: 2px solid #78a9fa;
    outline-offset: 3px;
    border-radius: 4px;
}

.rules-hero {
    margin-bottom: 56px;
}

.rules-hero h1 {
    margin-bottom: 18px;
    color: #e4e7f0;
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.rules-hero .updated {
    margin-bottom: 26px;
    color: #969eb4;
    font-size: 14px;
}

.rules-hero p,
.rules-wrap section p {
    margin-bottom: 16px;
}

.rules-wrap section {
    margin-bottom: 74px;
    scroll-margin-top: 24px;
}

.rules-wrap > section:last-child {
    margin-bottom: 0;
}

.rules-wrap section h2 {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #1f2230;
    color: #e4e7f0;
    font-size: clamp(20px, 3.5vw, 27px);
    font-weight: 700;
}

.rules-wrap section h3 {
    margin: 28px 0 16px;
    color: #e4e7f0;
    font-size: 18px;
    font-weight: 700;
}

.rules-wrap ul {
    margin: 18px 0 22px;
    padding-left: 20px;
    list-style: disc outside;
}

.rules-wrap li {
    margin-bottom: 8px;
}

.rules-wrap .callout {
    margin: 28px 0;
    padding: 20px 22px;
    border: 1px solid #1f2230;
    border-radius: 16px;
    background: #10121b;
}

.rules-wrap .callout > strong {
    display: block;
    margin-bottom: 10px;
}

.rules-wrap .callout > :is(p, ul, ol):last-child {
    margin-bottom: 0;
}

.rules-wrap .callout.info { border-color: #29436f; }
.rules-wrap .callout.warning { border-color: #604047; }
.rules-wrap .callout.success { border-color: #315b49; }

/* Only this page's content rail; the canonical left/bottom navigation is untouched. */
.rules-scroll > .flex > aside {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 300px;
    height: var(--rules-scrollport-height);
    max-height: var(--rules-scrollport-height);
    padding: 30px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #263149 transparent;
}

.rules-docs .docs-label {
    margin-bottom: 16px;
    color: #78839b;
    font-size: 11px;
    line-height: 1.8;
    text-transform: uppercase;
    letter-spacing: .18em;
}

.rules-doc-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rules-doc-nav a {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 34px;
    padding: 5px 16px;
    border-radius: 8px;
    color: #969eb4;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background .18s ease, color .18s ease;
}

.rules-doc-nav a:hover,
.rules-doc-nav a.active {
    background: #10121b;
    color: #fff;
}

.rules-mobile-toc {
    display: none;
    margin: 0 0 32px;
    border: 1px solid #1f2230;
    border-radius: 14px;
    background: #0b0c12;
}

.rules-mobile-toc summary {
    padding: 14px 18px;
    color: #e4e7f0;
    font-weight: 600;
    cursor: pointer;
}

.rules-mobile-toc[open] summary {
    border-bottom: 1px solid #1f2230;
}

.rules-mobile-toc .rules-doc-nav {
    padding: 8px;
}

.rules-mobile-toc .rules-doc-nav a {
    min-height: 42px;
}

.rules-wrap .rules-cookie-status {
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid #29436f;
    border-radius: 12px;
    background: #10121b;
    color: #d6dce8;
    font-size: 14px;
}

.rules-wrap .rules-cookie-status :last-child {
    margin-bottom: 0;
}

.rules-wrap .rules-cookie-status:is(.pending, .is-pending) {
    border-style: dashed;
}

[data-theme="light"] .rules-topbar,
[data-theme="light"] .rules-wrap,
[data-theme="light"] .rules-wrap :is(strong, h1, h2, h3),
[data-theme="light"] .rules-mobile-toc summary {
    color: #283852;
}

[data-theme="light"] .rules-hero p { color: #526681; }
[data-theme="light"] .rules-hero .updated,
[data-theme="light"] .rules-docs .docs-label,
[data-theme="light"] .rules-doc-nav a { color: #627189; }
[data-theme="light"] .rules-wrap a { color: #2d65ba; }
[data-theme="light"] .rules-wrap a:hover { color: #174888; }
[data-theme="light"] .rules-wrap section h2 { border-color: #dce6f3; }
[data-theme="light"] .rules-wrap .callout { background: #f7faff; border-color: #dce6f3; }
[data-theme="light"] .rules-wrap .callout.info { border-color: #8fb7f7; }
[data-theme="light"] .rules-wrap .callout.warning { border-color: #e6afb5; }
[data-theme="light"] .rules-wrap .callout.success { border-color: #94cfae; }

[data-theme="light"] .rules-doc-nav a:hover,
[data-theme="light"] .rules-doc-nav a.active {
    color: #283852;
    background: #f1f6fd;
}

[data-theme="light"] .rules-mobile-toc,
[data-theme="light"] .rules-mobile-toc[open] summary {
    border-color: #dce6f3;
    background: #fbfdff;
}

[data-theme="light"] .rules-wrap .rules-cookie-status {
    color: #283852;
    border-color: #8fb7f7;
    background: #f7faff;
}

[data-theme="light"] .rules-scroll > .flex > aside {
    scrollbar-color: #a3b5cb transparent;
}

@media (max-width: 1280px) {
    .rules-main { padding: 0 50px; }
    .rules-scroll > .flex > aside { display: none; }
    .rules-mobile-toc { display: block; }
}

@media (max-width: 768px) {
    .rules-main { padding: 0 24px; }
    .rules-wrap { padding-top: 36px; }
    .rules-hero h1 { font-size: 30px; }
}

@media (max-width: 600px) {
    .rules-main { padding: 0 16px; }
    .rules-wrap { padding-top: 28px; padding-bottom: 40px; }
    .rules-wrap .callout { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .rules-doc-nav a { transition: none; }
}