/*
 * Blockread docs theme.
 *
 * Loaded after Slate's screen.css and overrides it. The token block below is a
 * verbatim copy of the explorer's src/app/[locale]/globals.css `:root` and
 * `html[data-theme='light']` sets, so the two surfaces stay identical: change a
 * colour there, mirror it here.
 *
 * Inter is self-hosted rather than pulled from the explorer's /_next/static/media,
 * because next/font content-hashes those filenames on every build.
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
        u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191,
        u+2193, u+2212, u+2215, u+feff, u+fffd;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7,
        u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f,
        u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f,
        u+a720-a7ff;
}

:root {
    --bg: #07080c;
    --bg-elev: #0e1016;
    --bg-card: #12141c;
    --bg-hover: #171a24;
    --line: #1e2433;
    --line-strong: #2a3144;
    --text: #eef0f6;
    --muted: #8b93a7;
    --accent: #f59e0b;
    --accent-2: #3b82f6;
    --accent-2-solid: #2563eb;
    --live: #34d399;
    --danger: #f87171;
    --warn: #f5c842;
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
        sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-lg: 18px;
    --text-xl: 28px;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 12px 32px rgba(0, 0, 0, 0.28);
    --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.45);
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
    --glow-1: rgba(245, 158, 11, 0.09);
    --glow-2: rgba(59, 130, 246, 0.07);
    --header-bg: color-mix(in srgb, var(--bg) 78%, transparent);
    --on-accent: #1a1204;
    --on-accent-2: #ffffff;
    --max-content: 1180px;
    color-scheme: dark;

    /* Docs-only additions. The code column stays a deep surface in both themes
       so one syntax palette reads correctly on either. */
    --code-bg: #0e1016;
    --code-line: #1e2433;
    --code-text: #e3e7f0;
    --header-h: 64px;
    --toc-w: 268px;
}

html[data-theme='light'] {
    --bg: #e7ebf3;
    --bg-elev: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #dce3ef;
    --line: #b4becf;
    --line-strong: #8d99ae;
    --text: #0c1018;
    --muted: #3a4456;
    --accent: #c2410c;
    --accent-2: #1d4ed8;
    --accent-2-solid: #1d4ed8;
    --live: #047857;
    --danger: #b91c1c;
    --warn: #b45309;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 24px rgba(12, 16, 24, 0.08);
    --shadow-pop: 0 18px 48px rgba(12, 16, 24, 0.14);
    --glow-1: rgba(194, 65, 12, 0.08);
    --glow-2: rgba(29, 78, 216, 0.07);
    --header-bg: color-mix(in srgb, var(--bg) 90%, transparent);
    --on-accent: #fff7ed;
    --on-accent-2: #ffffff;
    --code-bg: #12141c;
    --code-line: #2a3144;
    --code-text: #e3e7f0;
    color-scheme: light;
}

/* ---------------------------------------------------------------- page ---- */

html,
body {
    background-color: var(--bg);
}

body {
    font-family: var(--font);
    font-size: var(--text-md);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0;
    background-image: radial-gradient(
            ellipse 90% 55% at 50% -18%,
            var(--glow-1),
            transparent 58%
        ),
        radial-gradient(ellipse 45% 35% at 100% 0%, var(--glow-2), transparent 50%);
    background-attachment: fixed;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.br-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------- header ---- */

.br-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    min-height: var(--header-h);
    background: var(--header-bg);
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    border-bottom: 1px solid var(--line);
}

.br-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: var(--max-content);
    margin: 0 auto;
    min-height: var(--header-h);
}

.br-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 0;
}

.br-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity 0.15s ease;
}

.br-logo:hover {
    opacity: 0.88;
}

.br-logo img {
    display: block;
    width: 28px;
    height: 28px;
    max-width: 28px;
    object-fit: contain;
}

.br-logo span {
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.br-brand__divider {
    width: 1px;
    height: 22px;
    flex-shrink: 0;
    background: var(--line-strong);
}

.br-header__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.br-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.br-nav a {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.br-nav a:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.br-nav a.br-nav__active {
    color: var(--text);
    background: var(--bg-hover);
}

.br-nav a.br-cta {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    margin-left: 4px;
}

.br-nav a.br-cta:hover {
    background: color-mix(in srgb, var(--accent) 86%, var(--text));
    color: var(--on-accent);
}

.br-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.br-icon-btn:hover,
.br-icon-btn:focus-visible {
    color: var(--text);
    background: var(--bg-hover);
}

.br-icon-btn svg {
    display: block;
}

/* ------------------------------------------------------ chain switcher ---- */

.br-chain {
    position: relative;
    flex-shrink: 0;
}

.br-chain__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
}

.br-chain__trigger:hover {
    background: var(--bg-hover);
    border-color: var(--line-strong);
}

.br-chain__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.br-chain__caret {
    transition: transform 0.15s ease;
    color: var(--muted);
}

.br-chain__trigger[aria-expanded='true'] .br-chain__caret {
    transform: rotate(180deg);
}

.br-chain__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    z-index: 1100;
}

.br-chain__menu[hidden] {
    display: none;
}

.br-chain__menu li {
    margin: 0;
    padding: 0;
    line-height: normal;
}

.br-chain__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.br-chain__option:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.br-chain__option[aria-checked='true'] {
    color: var(--text);
    background: var(--bg-hover);
}

.br-chain__ticker {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
}

/* Inline chain badge used inside prose. */
.br-chain-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: baseline;
}

/* ------------------------------------------------------------ sidebar ---- */

.toc-wrapper {
    top: var(--header-h);
    width: var(--toc-w);
    padding: 16px 12px 32px;
    background-color: var(--bg-elev);
    border-right: 1px solid var(--line);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 500;
    box-sizing: border-box;
}

/* Slate's own logo block; the header carries the brand now. */
.toc-wrapper > .logo {
    display: none;
}

.toc-wrapper > .search {
    position: relative;
    margin: 0 0 14px;
}

.toc-wrapper > .search input {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 400;
}

.toc-wrapper > .search input::placeholder {
    color: var(--muted);
}

.toc-wrapper > .search input:focus {
    outline: none;
    border-color: var(--accent-2);
    background: var(--bg-hover);
}

.toc-wrapper > .search:before {
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
}

.toc-wrapper .search-results {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.toc-wrapper .search-results.visible {
    margin-bottom: 14px;
}

.toc-wrapper .search-results li {
    margin: 8px 12px;
}

.toc-wrapper .search-results a {
    color: var(--muted);
}

.toc-wrapper .search-results a:hover {
    color: var(--text);
    text-decoration: none;
}

.toc-wrapper li {
    color: var(--muted);
    line-height: normal;
}

.toc-wrapper .toc-link,
.toc-wrapper .toc-h1,
.toc-wrapper .toc-h2 {
    display: block;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.toc-wrapper .toc-h2 {
    padding-left: 22px;
    font-size: var(--text-xs);
    font-weight: 400;
}

.toc-wrapper .toc-link:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.toc-wrapper .toc-list-h2 {
    background-color: transparent;
    margin: 2px 0 8px;
    border-left: 1px solid var(--line);
    padding-left: 4px;
    font-weight: 400;
}

.toc-wrapper .toc-link.active,
.toc-wrapper .toc-link.active-parent {
    color: var(--text);
    background-color: var(--bg-hover);
    box-shadow: inset 2px 0 0 var(--accent);
}

.toc-wrapper .toc-footer {
    margin-top: 16px;
    padding: 14px 10px 0;
    border-top: 1px solid var(--line);
}

.toc-wrapper .toc-footer li,
.toc-wrapper .toc-footer a {
    color: var(--muted);
    font-size: var(--text-xs);
}

.toc-wrapper .toc-footer a:hover {
    color: var(--text);
    text-decoration: none;
}

#nav-button {
    display: none !important;
}

/* Mirrors the explorer's menu icon: hidden while the sidebar is docked. */
.br-menu-toggle {
    display: none;
}

.toc-wrapper {
    box-shadow: none;
}

.toc-wrapper.open {
    box-shadow: var(--shadow-pop);
}

/* ------------------------------------------------------------ content ---- */

.page-wrapper {
    margin-left: var(--toc-w);
    margin-top: var(--header-h);
    background-color: transparent;
}

.page-wrapper .dark-box {
    width: 50%;
    background-color: var(--code-bg);
    border-left: 1px solid var(--code-line);
}

.page-wrapper .lang-selector {
    top: var(--header-h);
    background-color: var(--bg-elev);
    border-bottom: 1px solid var(--line);
}

.lang-selector {
    background-color: var(--bg-elev);
}

.lang-selector a {
    color: var(--muted);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 34px;
    padding: 0 14px;
}

.lang-selector a:active,
.lang-selector a.active {
    background-color: var(--bg-hover);
    color: var(--text);
}

.content {
    font-family: var(--font);
    font-size: var(--text-md);
    color: var(--text);
}

.content > h1,
.content > h2,
.content > h3,
.content > h4,
.content > h5,
.content > h6,
.content > p,
.content > ul,
.content > ol,
.content > aside,
.content > dl {
    margin-right: 50%;
    padding: 0 32px;
    box-sizing: border-box;
    color: var(--text);
}

/* Sized rather than margin-right'd: a table needs a real width to fill the
   prose column, and padding on a table box insets the cells, not the box. */
.content > table {
    width: calc(50% - 64px);
    margin: 16px 32px 24px;
}

.content > ul,
.content > ol {
    padding-left: 58px;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    font-family: var(--font);
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.content h1 {
    font-size: var(--text-xl);
    line-height: 1.25;
    margin-top: 40px;
    margin-bottom: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    background-color: transparent;
}

.content h1:first-child,
.content h1.first {
    border-top: 0;
    padding-top: 24px;
    margin-top: 0;
}

.content h2 {
    font-size: 20px;
    line-height: 1.3;
    margin-top: 34px;
    margin-bottom: 12px;
    padding-top: 0;
    border-top: 0;
    background-image: none;
    background-color: transparent;
}

.content h3,
.content h4,
.content h5,
.content h6 {
    font-size: var(--text-lg);
    margin-top: 22px;
    margin-bottom: 10px;
    border-bottom: 0;
}

.content p,
.content li,
.content dd,
.content dt {
    line-height: 1.65;
    color: var(--text);
}

.content a {
    color: var(--accent-2);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
}

.content a:hover {
    color: var(--text);
    border-bottom-color: var(--text);
}

.content b,
.content strong {
    color: var(--text);
    font-weight: 700;
}

.content hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 32px 0;
}

/* Inline code inside prose. */
.content code {
    background-color: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--accent);
    font-family: var(--mono);
    font-size: var(--text-sm);
    padding: 2px 5px;
}

.content pre code,
.content blockquote code {
    background-color: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: var(--text-sm);
}

/* Tables — mirrors the explorer's data tables. */
.content table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: var(--text-sm);
}

.content table th {
    background: var(--bg-elev);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.content table td {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    color: var(--text);
    vertical-align: top;
}

.content table tr:first-child td {
    border-top: 0;
}

.content table tr:nth-child(odd) td,
.content table tr:nth-child(even) td {
    background: transparent;
}

.content table tr:hover td {
    background: var(--bg-hover);
}

/* Asides. */
.content aside {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 12px 16px 12px 44px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.6;
    text-shadow: none;
}

.content aside.warning {
    border-left-color: var(--danger);
}

.content aside.success {
    border-left-color: var(--live);
}

.content aside:before {
    color: var(--muted);
    margin-left: -28px;
}

.content aside a {
    color: var(--accent-2);
}

/* -------------------------------------------------------- code column ---- */

.content pre,
.content blockquote {
    width: 50%;
    background-color: var(--code-bg);
    color: var(--code-text);
    border-left: 1px solid var(--code-line);
}

.content pre {
    font-family: var(--mono);
    font-size: var(--text-sm);
    line-height: 1.65;
    padding: 20px 24px;
    overflow-x: auto;
}

.content blockquote {
    padding: 0;
}

.content blockquote > p {
    background-color: color-mix(in srgb, var(--code-bg) 82%, #ffffff 4%);
    border-bottom: 1px solid var(--code-line);
    color: var(--muted);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 10px 24px;
}

.content pre a,
.content blockquote a {
    color: var(--accent);
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
}

.content pre::-webkit-scrollbar-thumb {
    background: var(--line-strong);
}

/* ------------------------------------------------------------- footer ---- */

.br-footer {
    margin-left: var(--toc-w);
    background: var(--bg-elev);
    border-top: 1px solid var(--line);
    width: auto;
    padding: 40px 20px 28px;
    position: relative;
    z-index: 40;
}

.br-footer__grid {
    max-width: var(--max-content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px 24px;
}

.br-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.br-footer__tagline {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.55;
    max-width: 28ch;
}

.br-footer__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.br-footer__heading {
    margin: 0 0 4px;
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.br-footer__col a {
    color: var(--muted);
    font-size: var(--text-sm);
    text-decoration: none;
    min-height: 24px;
}

.br-footer__col a:hover {
    color: var(--text);
}

.br-footer__social {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.br-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--bg-card);
}

.br-footer__social a:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.br-footer__copy {
    max-width: var(--max-content);
    margin: 28px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--text-xs);
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1023px) {
    .br-nav {
        display: none;
    }
}

@media (max-width: 930px) {
    .toc-wrapper {
        left: calc(-1 * var(--toc-w));
    }

    .toc-wrapper.open {
        left: 0;
    }

    .page-wrapper,
    .br-footer {
        margin-left: 0;
    }

    .br-menu-toggle {
        display: inline-flex;
    }
}

@media (max-width: 800px) {
    .br-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .br-footer__brand {
        grid-column: 1 / -1;
    }
}

/* "Try it out" buttons, restyled as the explorer's primary action. */
.content .button-3 {
    appearance: none;
    background-color: var(--accent);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--on-accent);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 20px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.content .button-3:hover {
    background-color: color-mix(in srgb, var(--accent) 86%, var(--text));
    color: var(--on-accent);
}

.content .button-3:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.content .button-3:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .content > h1,
    .content > h2,
    .content > h3,
    .content > h4,
    .content > h5,
    .content > h6,
    .content > p,
    .content > table,
    .content > ul,
    .content > ol,
    .content > aside,
    .content > dl {
        margin-right: 0;
        padding: 0 20px;
    }

    .content > ul,
    .content > ol {
        padding-left: 40px;
    }

    .content > table,
    .content table {
        width: calc(100% - 40px);
        margin: 16px 20px 24px;
        display: block;
        overflow-x: auto;
    }

    .content pre,
    .content blockquote {
        width: auto;
        float: none;
        border-left: 0;
        border-top: 1px solid var(--code-line);
        border-bottom: 1px solid var(--code-line);
        margin: 16px 0;
    }

    .br-chain__trigger span.br-chain__name {
        display: none;
    }
}

@media (max-width: 380px) {
    .br-logo span {
        display: none;
    }
}

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

/* ------------------------------------------------------------- syntax ---- */

/*
 * Replaces Slate's Monokai block (inlined at the top of index.html) with a
 * palette built from the explorer's accents. Fixed hex rather than tokens:
 * the code column is a deep surface in both themes, so one palette serves both.
 */

.content .highlight,
.content pre.highlight {
    background: transparent;
}

.content .highlight .w {
    background-color: transparent;
}

.content .highlight,
.content .highlight .w,
.content .highlight .n,
.content .highlight .nx,
.content .highlight .nn,
.content .highlight .py,
.content .highlight .nl,
.content .highlight .ni,
.content .highlight .no,
.content .highlight .nv,
.content .highlight .vc,
.content .highlight .vg,
.content .highlight .vi {
    color: var(--code-text);
}

/* Comments */
.content .highlight .c,
.content .highlight .ch,
.content .highlight .cd,
.content .highlight .cm,
.content .highlight .cp,
.content .highlight .cpf,
.content .highlight .c1,
.content .highlight .cs {
    color: #7d859b;
    font-style: normal;
}

/* Keywords and tags */
.content .highlight .k,
.content .highlight .kc,
.content .highlight .kd,
.content .highlight .kn,
.content .highlight .kp,
.content .highlight .kr,
.content .highlight .kt,
.content .highlight .kv,
.content .highlight .nt,
.content .highlight .ow {
    color: #7cb0ff;
}

/* Strings — the amber that carries the brand in the explorer. */
.content .highlight .s,
.content .highlight .sa,
.content .highlight .sb,
.content .highlight .sc,
.content .highlight .dl,
.content .highlight .sd,
.content .highlight .s1,
.content .highlight .s2,
.content .highlight .se,
.content .highlight .sh,
.content .highlight .si,
.content .highlight .sr,
.content .highlight .ss,
.content .highlight .sx {
    color: #f0b355;
}

/* Numbers */
.content .highlight .m,
.content .highlight .mb,
.content .highlight .mf,
.content .highlight .mh,
.content .highlight .mi,
.content .highlight .mo,
.content .highlight .mx,
.content .highlight .il {
    color: #c4a2ff;
}

/* Functions, builtins and attributes */
.content .highlight .nf,
.content .highlight .fm,
.content .highlight .nb,
.content .highlight .bp,
.content .highlight .nc,
.content .highlight .nd,
.content .highlight .ne,
.content .highlight .na {
    color: #6fd39b;
}

/* Operators and punctuation */
.content .highlight .o,
.content .highlight .p {
    color: #aab3c5;
}

.content .highlight .err {
    color: #f87171;
    background-color: transparent;
}

.content .highlight .gd {
    color: #f87171;
}

.content .highlight .gi {
    color: #34d399;
}

.content .search-highlight {
    padding: 2px;
    margin: -3px;
    border-radius: 4px;
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 26%, transparent);
    color: inherit;
}