@font-face {
    font-family: "VectorBold";
    src: url("../static/fonts/Vector-Bold.otf") format("opentype");
}

:root {
    --header-height: 64px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --shadow-popover: 0 24px 64px rgba(15, 18, 20, .14), 0 4px 16px rgba(15, 18, 20, .08);
}

* {
    box-sizing: border-box;
}

html {
    background: #f7f7f5;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .95), transparent 34rem),
        #f7f7f5;
    color: #101214;
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}

.glass-header {
    background: rgba(247, 247, 245, .82);
    border-bottom: 1px solid rgba(201, 202, 197, .7);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
}

.brand-mark img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.icon-button {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #595d61;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.icon-button:hover,
.icon-button[aria-expanded="true"] {
    border-color: #d8d9d4;
    background: rgba(255, 255, 255, .92);
    color: #101214;
}

.icon-button:active {
    transform: scale(.96);
}

.popover {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 80;
    border: 1px solid rgba(207, 208, 203, .9);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px) scale(.985);
    transform-origin: top right;
    pointer-events: none;
    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .24s var(--ease-out);
}

.popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.apps-popover {
    width: min(560px, calc(100vw - 24px));
    overflow: hidden;
}

.menu-kicker {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #85888b;
}

.section-button {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #62666a;
    text-align: left;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.section-button:hover {
    border-color: #e0e1dc;
    background: #f7f7f5;
    color: #101214;
}

.section-button.is-active {
    border-color: #cfd4e4;
    background: #f3f5fb;
    color: #172554;
}

.section-button:active {
    transform: scale(.98);
}

.section-button .menu-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #dcddd8;
    border-radius: 9px;
    background: #fff;
    color: #55595d;
}

.section-button.is-active .menu-icon {
    border-color: #c7cee3;
    color: #1d4ed8;
}

.section-button span:last-child {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-stage {
    min-height: 148px;
    border-top: 1px solid #e5e5e1;
    background: #fafaf8;
}

.detail-content {
    will-change: opacity, transform;
    transition: opacity .14s ease, transform .18s var(--ease-out);
}

.detail-content.is-changing {
    opacity: 0;
    transform: translateY(8px);
}

.detail-slider {
    display: flex;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.detail-slider::-webkit-scrollbar {
    display: none;
}

.detail-action {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid #d9dad5;
    border-radius: 999px;
    background: #fff;
    color: #34373a;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 1px rgba(16, 18, 20, .03);
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.detail-action:hover {
    border-color: #b9bcc0;
    background: #f5f5f2;
}

.detail-action:active {
    transform: translateY(1px);
}

.slider-arrow {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #dadbd6;
    border-radius: 50%;
    background: #fff;
    color: #666a6e;
    transition: background-color .18s ease, color .18s ease;
}

.slider-arrow:hover {
    background: #101214;
    color: #fff;
}

.profile-popover {
    width: min(370px, calc(100vw - 24px));
    overflow: hidden;
}

.account-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #373a3d;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: background-color .18s ease;
}

.account-link:hover {
    background: #f3f3f0;
}

.dot-grid-bg {
    background-image: radial-gradient(#d4d4cf 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: radial-gradient(ellipse 54% 50% at 50% 45%, #000 15%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 54% 50% at 50% 45%, #000 15%, transparent 72%);
}

.search-shell {
    width: min(100%, 672px);
}

.search-input {
    width: 100%;
    min-height: 58px;
    border: 1px solid #cfd0cb;
    border-radius: 15px;
    background: rgba(255, 255, 255, .94);
    color: #101214;
    box-shadow: 0 12px 30px rgba(16, 18, 20, .06), 0 1px 2px rgba(16, 18, 20, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.search-input:hover {
    border-color: #b7b9b5;
}

.search-input:focus {
    border-color: #8f96a8;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 18, 20, .09), 0 0 0 4px rgba(29, 78, 216, .08);
    outline: none;
}

.trending-shell {
    width: min(960px, calc(100vw - 48px));
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.trending-track {
    display: flex;
    width: max-content;
    animation: trending-marquee 38s linear infinite;
    will-change: transform;
}

.trending-shell:hover .trending-track,
.trending-shell:focus-within .trending-track {
    animation-play-state: paused;
}

.trending-group {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    padding-right: 12px;
}

.trend-card {
    position: relative;
    display: grid;
    width: 188px;
    height: 96px;
    flex: 0 0 auto;
    align-content: end;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 14px;
    background-color: #35383b;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 14px rgba(16, 18, 20, .08);
    color: #fff;
    text-align: left;
    transform: translateZ(0);
    transition: transform .22s var(--ease-out), box-shadow .22s ease;
}

.trend-card::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 8, 10, .04) 18%, rgba(6, 8, 10, .82) 100%);
    content: "";
}

.trend-card:hover {
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px rgba(16, 18, 20, .16);
    transform: translateY(-3px);
}

.trend-copy {
    position: relative;
    z-index: 1;
    padding: 11px 12px;
}

.trend-label {
    display: block;
    margin-bottom: 3px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: .1em;
    opacity: .72;
    text-transform: uppercase;
}

.trend-title {
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes trending-marquee {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.slim-footer {
    position: absolute;
    width: stretch;
    bottom: 0;
    z-index: 45;
    height: 36px;
    border-top: 1px solid #d9dad5;
    background: rgba(247, 247, 245, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .28s var(--ease-out);
}

.footer-reveal .slim-footer {
    transform: translateY(-48px);
}

.secondary-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 44;
    height: 48px;
    border-top: 1px solid #2b2d2f;
    background: #090a0b;
    color: #f5f5f4;
    opacity: 0;
    transform: translateY(100%);
    transition: transform .3s var(--ease-out), opacity .22s ease;
}

.footer-reveal .secondary-footer {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 760px) {
    .trending-shell {
        width: min(100%, 672px);
        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }

    .trend-card {
        width: 164px;
        height: 88px;
    }
}

@media (max-width: 540px) {
    .apps-popover {
        position: fixed;
        top: 58px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .profile-popover {
        position: fixed;
        top: 58px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .section-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .section-button {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 9px 6px;
        text-align: center;
    }

    .slim-footer .footer-brand,
    .slim-footer .footer-links {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Article template page */
body.article-page {
    background: #f7f7f5;
}

.article-layout {
    display: flex;
    width: 100%;
    max-width: 1600px;
    padding-top: calc(2 * 69px);
    height: calc(100vh - 32px)
}

.fine-border {
    border: 1px solid #deded9
}

.fine-border-l {
    border-left: 1px solid #deded9
}

.fine-border-r {
    border-right: 1px solid #deded9
}

.fine-border-t {
    border-top: 1px solid #deded9
}

.fine-border-b {
    border-bottom: 1px solid #deded9
}

.left-tree {
    left: 0;
    top: 64px;
    bottom: 32px;
    width: 256px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(247, 247, 245, .9);
    backdrop-filter: blur(16px);
    z-index: 20
}

.left-tree>nav {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c9cac5 transparent;
    border-bottom: 1px solid #deded9;
}

.tree-utilities {
    flex: 0 0 auto;
    margin-top: auto;
    border-top: 1px solid #deded9;
    background: rgba(247, 247, 245, .97);
    padding: 14px 28px 18px
}

.tree-utility-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font: 500 10px/1.4 "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #777a7d;
    transition: color .18s ease
}

.tree-utility-link:hover {
    color: #101214
}

.right-context {
    right: 0;
    top: 64px;
    bottom: 32px;
    width: 288px;
    overflow-y: auto;
    background: rgba(247, 247, 245, .9);
    backdrop-filter: blur(16px);
    z-index: 20
}

.article-main {
    flex: 1;
    padding: 40px 32px 72px;
    min-width: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    margin-bottom: 0.3rem;
}

.article-canvas {
    max-width: 860px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #d8d9d4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(16, 18, 20, .055)
}

.tree-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 8px;
    color: #565a5e;
    font-size: 12px;
    text-align: left;
    transition: .18s ease
}

.tree-toggle:hover {
    background: #eeeEEa;
    color: #101214
}

.tree-toggle.is-open {
    background: #efefeb;
    color: #101214;
    font-weight: 600
}

.tree-content {
    margin-left: 25px;
    padding: 4px 0 4px 16px;
    border-left: 1px solid #d8d9d4
}

.tree-content.hidden {
    display: none
}

.tree-link {
    display: block;
    padding: 7px 10px;
    font-size: 12px;
    color: #62666a;
    border-radius: 6px
}

.tree-link:hover {
    color: #101214;
    background: #f0f0ed
}

.tree-link.active {
    color: #101214;
    font-weight: 600;
    border-left: 2px solid #101214;
    border-radius: 0;
    margin-left: -17px;
    padding-left: 25px
}

.record-card {
    position: relative;
    background: transparent;
    padding: 40px 42px 36px
}

.bookmark-button {
    position: absolute;
    right: 22px;
    top: 22px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #d9dad5;
    border-radius: 11px;
    background: #fff;
    color: #696d70;
    transition: .2s ease
}

.bookmark-button:hover {
    border-color: #c8c9c4;
    color: #101214
}

.bookmark-button.is-saved {
    border-color: #fecaca;
    background: #fff1f2;
    color: #dc2626
}

.bookmark-button.is-saved .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #818487
}

.meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid #e0e0dc;
    border-radius: 8px;
    background: #e0e0dc;
}

.meta-cell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: #fafaf8;
    padding: 12px;
}

.meta-label {
    font: 500 9px/1.4 "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8a8d90;
}

.meta-value {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #34373a;
}

.content-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    border-top: 1px solid #e2e2dd;
    background: #fff
}

.content-block {
    position: relative;
    padding: 38px 42px;
    background: transparent
}

.content-block+.content-block {
    border-top: 1px solid #e5e5e0
}

.content-block.section-space {
    border-top: 0;
    padding-top: 58px
}

.content-block.section-space::before {
    content: "";
    position: absolute;
    top: 0;
    left: 42px;
    right: 42px;
    height: 20px;
    background: transparent
}

.content-block.section-tight {
    padding-top: 26px;
    padding-bottom: 26px
}

.block-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    font: 500 9px/1.4 "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #888b8e
}

.drag-handle {
    display: inline-flex;
    gap: 2px;
    color: #b0b2b4
}

.drag-handle i {
    width: 2px;
    height: 12px;
    background: currentColor;
    border-radius: 2px
}

.rich-text p {
    margin: 0 0 14px;
    color: #44484b;
    line-height: 1.8
}

.rich-text p:last-child {
    margin-bottom: 0
}

.rich-text h1 {
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0 0 36px
}

.rich-text h2 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0 0 12px
}

.rich-text h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 10px
}

.callout {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    border-left: 3px solid #1d4ed8
}

.warning {
    border-left-color: #b45309
}

.success {
    border-left-color: #15803d
}

.quote-block {
    padding-left: 26px;
    border-left: 4px solid #17191b
}

.quote-block blockquote {
    font-size: 21px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0
}

.quote-block cite {
    display: block;
    margin-top: 14px;
    font: 500 10px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #7b7e81
}

.media-placeholder {
    display: grid;
    min-height: 300px;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #e7e7e2, #f4f4f1);
    color: #72767a
}

.media-placeholder.tall {
    min-height: 430px
}

.caption {
    margin-top: 10px;
    font-size: 11px;
    color: #74787b
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px
}

.data-table th,
.data-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e4e4df;
    text-align: left
}

.data-table th {
    font: 500 9px "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #74787b;
    background: #fafaf8
}

.data-table tr:last-child td {
    border-bottom: 0
}

.code-block {
    overflow: auto;
    border-radius: 10px;
    background: #17191b;
    padding: 18px;
    color: #d8dadd;
    font: 12px/1.7 "JetBrains Mono", monospace
}

.chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d9dad5;
    border-radius: 999px;
    background: #fafaf8;
    padding: 6px 9px;
    font: 500 10px "JetBrains Mono", monospace;
    color: #55595d
}

.side-section {
    padding-bottom: 24px;
    border-bottom: 1px solid #deded9
}

.side-section:last-child {
    border-bottom: 0
}

.side-heading {
    margin-bottom: 12px;
    font: 500 9px "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #85888b
}

.side-action {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #deded9;
    border-radius: 9px;
    background: #fff;
    font-size: 11px;
    color: #34373a;
    transition: .18s ease
}

.side-action:hover {
    border-color: #bfc1bd;
    background: #fafaf8
}

.source-link {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid #e3e3df;
    font-size: 11px;
    color: #55595d
}

.source-link:last-child {
    border-bottom: 0
}

.source-link:hover {
    color: #101214
}

.split-prose {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(190px, .75fr);
    gap: 34px;
    align-items: start
}

.split-aside {
    border-left: 1px solid #deded9;
    padding-left: 22px;
    font-size: 12px;
    line-height: 1.7;
    color: #64686b
}

.summary-list {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #deded9
}

.summary-item {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 12px;
    background: #fafaf8;
    padding: 15px
}

.summary-index {
    font: 500 10px "JetBrains Mono", monospace;
    color: #777a7d
}

.definition-list {
    border-top: 1px solid #deded9
}

.definition-row {
    display: grid;
    grid-template-columns: minmax(130px, .55fr) minmax(0, 1.45fr);
    gap: 22px;
    padding: 15px 0;
    border-bottom: 1px solid #deded9
}

.definition-row dt {
    font-weight: 600
}

.definition-row dd {
    font-size: 13px;
    line-height: 1.7;
    color: #5c6063
}

.figure-inline {
    display: grid;
    grid-template-columns: minmax(240px, 1.1fr) minmax(0, .9fr);
    gap: 26px;
    align-items: center
}

.figure-inline .media-placeholder {
    min-height: 240px
}

.annotated-media {
    position: relative
}

.annotation-pin {
    position: absolute;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #101214;
    color: #fff;
    font: 600 10px "JetBrains Mono", monospace;
    box-shadow: 0 4px 12px rgba(16, 18, 20, .22)
}

.before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #deded9
}

.before-after>div {
    background: #fafaf8
}

.before-after .media-placeholder {
    min-height: 250px;
    border-radius: 0
}

.before-after-label {
    padding: 10px 13px;
    font: 500 9px "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #74787b
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #deded9
}

.stat-cell {
    background: #fafaf8;
    padding: 18px
}

.stat-value {
    display: block;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.04em
}

.stat-label {
    display: block;
    margin-top: 5px;
    font: 500 9px "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #7e8184
}

.source-excerpt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #fafaf8
}

.source-lines {
    padding: 16px 12px;
    border-right: 1px solid #deded9;
    background: #f1f1ed;
    text-align: right;
    font: 10px/1.9 "JetBrains Mono", monospace;
    color: #97999b
}

.source-copy {
    padding: 16px 18px;
    font: 12px/1.9 "JetBrains Mono", monospace;
    color: #3f4346
}

.equation {
    overflow-x: auto;
    padding: 24px;
    border-top: 1px solid #deded9;
    border-bottom: 1px solid #deded9;
    text-align: center;
    font: 500 18px/1.8 "JetBrains Mono", monospace;
    color: #24272a
}

.qa-list {
    border-top: 1px solid #deded9
}

.qa-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #deded9
}

.qa-mark {
    font: 600 13px "JetBrains Mono", monospace;
    color: #777a7d
}

.qa-answer {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: #5a5e61
}

.process-list {
    counter-reset: step;
    display: grid;
    gap: 0;
    border-top: 1px solid #deded9
}

.process-step {
    counter-increment: step;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid #deded9
}

.process-step::before {
    content: counter(step, decimal-leading-zero);
    font: 500 10px "JetBrains Mono", monospace;
    color: #7c7f82
}

.disclosure-list {
    border-top: 1px solid #deded9
}

.disclosure-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #deded9;
    font-size: 13px
}

.disclosure-row span:last-child {
    color: #8a8d90
}

.tabs-static {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid #deded9
}

.tab-pill {
    min-width: max-content;
    padding: 9px 12px;
    border-bottom: 2px solid transparent;
    font: 500 10px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #7a7d80
}

.tab-pill.is-active {
    border-bottom-color: #101214;
    color: #101214
}

.tab-panel-static {
    padding: 18px 0 0;
    font-size: 13px;
    line-height: 1.75;
    color: #55595d
}

.attachment-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #deded9
}

.attachment-row:last-child {
    border-bottom: 1px solid #deded9
}

.attachment-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #deded9;
    border-radius: 9px;
    background: #fafaf8
}

.reference-entry {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #deded9
}

.reference-entry:last-child {
    border-bottom: 1px solid #deded9
}

.reference-number {
    font: 500 10px "JetBrains Mono", monospace;
    color: #808386
}

.reference-copy {
    font-size: 12px;
    line-height: 1.7;
    color: #55595d
}

.object-record {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    gap: 26px
}

.object-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border: 1px solid #deded9;
    background: #deded9
}

.object-field {
    background: #fafaf8;
    padding: 12px
}

.relation-map {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    border-top: 1px solid #deded9;
    border-bottom: 1px solid #deded9;
    background: radial-gradient(circle at 1px 1px, #d8d9d4 1px, transparent 1.5px);
    background-size: 18px 18px
}

.relation-map::before,
.relation-map::after {
    content: "";
    position: absolute;
    height: 1px;
    background: #aeb0ad;
    transform-origin: left center
}

.relation-map::before {
    left: 25%;
    top: 48%;
    width: 49%;
    transform: rotate(-8deg)
}

.relation-map::after {
    left: 29%;
    top: 38%;
    width: 39%;
    transform: rotate(19deg)
}

.relation-node {
    position: absolute;
    display: grid;
    min-width: 112px;
    min-height: 54px;
    place-items: center;
    border: 1px solid #cfd0cb;
    border-radius: 10px;
    background: #fff;
    padding: 9px;
    text-align: center;
    font: 500 10px/1.35 "JetBrains Mono", monospace;
    box-shadow: 0 6px 16px rgba(16, 18, 20, .06)
}

.map-placeholder {
    display: grid;
    min-height: 320px;
    place-items: center;
    border-top: 1px solid #deded9;
    border-bottom: 1px solid #deded9;
    background: linear-gradient(135deg, #f0f0ec 25%, transparent 25%) -8px 0/16px 16px, linear-gradient(225deg, #f0f0ec 25%, transparent 25%) -8px 0/16px 16px, linear-gradient(315deg, #f0f0ec 25%, transparent 25%) 0 0/16px 16px, linear-gradient(45deg, #f0f0ec 25%, #fafaf8 25%) 0 0/16px 16px;
    color: #74787b
}

.rights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid #deded9;
    background: #deded9
}

.rights-cell {
    background: #fafaf8;
    padding: 15px
}

.change-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid #deded9;
    font-size: 12px
}

.change-row:last-child {
    border-bottom: 1px solid #deded9
}

.change-date {
    font: 10px "JetBrains Mono", monospace;
    color: #7c7f82
}

.change-author {
    font-size: 10px;
    color: #7c7f82
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.related-card {
    min-width: 0;
    border: 1px solid #deded9;
    border-radius: 10px;
    padding: 16px;
    transition: border-color .18s ease, transform .18s ease
}

.related-card:hover {
    border-color: #bfc1bd;
    transform: translateY(-2px)
}

.closing-note {
    max-width: 660px;
    margin: 0 auto;
    text-align: center
}

.closing-note p {
    font-size: 18px;
    line-height: 1.8;
    color: #414548
}

@media(max-width:1279px) {
    .right-context {
        display: none
    }

    .article-main {
        margin-right: 0
    }
}

@media(max-width:1023px) {
    .left-tree {
        display: none
    }

    .article-main {
        margin-left: 0;
        padding: 28px 20px 64px
    }

    .split-prose,
    .figure-inline,
    .object-record {
        grid-template-columns: 1fr
    }

    .split-aside {
        border-left: 0;
        border-top: 1px solid #deded9;
        padding: 18px 0 0
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .related-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:639px) {
    .article-canvas {
        border-radius: 14px
    }

    .record-card,
    .content-block {
        padding: 24px 20px
    }

    .record-card {
        padding-top: 68px
    }

    .bookmark-button {
        top: 16px;
        right: 16px
    }

    .article-main {
        padding-inline: 12px
    }

    .rich-text h2 {
        font-size: 24px
    }

    .content-block.section-space {
        padding-top: 44px
    }

    .definition-row,
    .object-record,
    .figure-inline {
        grid-template-columns: 1fr
    }

    .before-after,
    .stat-grid,
    .rights-grid,
    .related-grid {
        grid-template-columns: 1fr
    }

    .object-fields {
        grid-template-columns: 1fr
    }

    .change-row {
        grid-template-columns: 1fr
    }

    .related-card {
        padding: 14px
    }
}

/* ================================================================
   RENAISSANCE ARCHIVE · BLOCKS 41–72
   Append after the existing article-template styles.
   ================================================================ */

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

/* 41 · Extension index */
.extension-index {
    background: linear-gradient(180deg, #fbfbf9 0%, #fff 100%);
}

.extension-intro {
    max-width: 690px;
}

.library-jump-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #deded9;
}

.library-jump {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 15px 13px;
    background: #fafaf8;
    color: #34373a;
    transition: background-color .18s ease, color .18s ease;
}

.library-jump:hover {
    background: #f1f3f8;
    color: #172554;
}

.library-jump-index {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #d7d8d3;
    border-radius: 8px;
    background: #fff;
    font: 600 10px "JetBrains Mono", monospace;
}

.library-jump strong,
.library-jump small {
    display: block;
}

.library-jump strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-jump small {
    margin-top: 3px;
    font: 9px "JetBrains Mono", monospace;
    color: #85888b;
}

/* 42–50 · Type and narrative */
.editorial-title-stack {
    max-width: 750px;
}

.display-title {
    max-width: 760px;
    margin: 16px 0 0;
    font-size: clamp(42px, 7vw, 74px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.058em;
    text-wrap: balance;
}

.display-deck {
    max-width: 670px;
    margin: 24px 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: #55595d;
}

.byline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    margin-top: 27px;
    padding-top: 18px;
    border-top: 1px solid #deded9;
}

.initial-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #d3d4cf;
    border-radius: 50%;
    background: #f5f5f2;
    font: 600 10px "JetBrains Mono", monospace;
}

.byline-row strong,
.byline-row small {
    display: block;
}

.byline-row strong {
    font-size: 12px;
}

.byline-row small,
.byline-meta {
    margin-top: 2px;
    font-size: 10px;
    color: #7b7e81;
}

.byline-divider {
    width: 1px;
    height: 25px;
    margin-inline: 5px;
    background: #deded9;
}

.chapter-opener {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    min-height: 220px;
}

.chapter-number {
    display: block;
    color: #e1e2dd;
    font-size: clamp(82px, 14vw, 132px);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.08em;
}

.question-heading {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.question-mark {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border: 1px solid #cfd4e4;
    border-radius: 18px;
    background: #f3f5fb;
    color: #1d4ed8;
    font: 600 28px "JetBrains Mono", monospace;
}

.question-heading h2 {
    max-width: 690px;
    margin: 0;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.08;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.question-answer {
    max-width: 640px;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.75;
    color: #5a5e61;
}

.structured-abstract {
    border-top: 1px solid #deded9;
}

.abstract-row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 22px;
    padding: 16px 0;
    border-bottom: 1px solid #deded9;
}

.abstract-row>span {
    padding-top: 2px;
    font: 500 9px "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #777a7d;
}

.abstract-row p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: #505457;
}

.keyword-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.keyword-row span {
    padding: 6px 9px;
    border-radius: 4px;
    background: #f1f1ed;
    font: 500 9px "JetBrains Mono", monospace;
    color: #5f6366;
}

.longform-copy {
    max-width: none;
}

.longform-copy>p,
.longform-copy>h3,
.longform-copy>.prose-kicker {
    max-width: 680px;
}

.prose-kicker {
    margin-bottom: 12px !important;
    font: 500 9px "JetBrains Mono", monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #838689 !important;
}

.drop-cap::first-letter {
    float: left;
    margin: .08em .12em 0 0;
    font-size: 4.85em;
    font-weight: 700;
    line-height: .72;
    letter-spacing: -.06em;
    color: #17191b;
}

.prose-subhead {
    margin-top: 30px !important;
    padding-top: 24px;
    border-top: 1px solid #deded9;
}

.addressed-prose {
    border-top: 1px solid #deded9;
}

.addressed-paragraph {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #deded9;
}

.addressed-paragraph>a {
    padding-top: 3px;
    font: 500 10px "JetBrains Mono", monospace;
    color: #8a8d90;
}

.addressed-paragraph>a:hover {
    color: #1d4ed8;
}

.addressed-paragraph p {
    max-width: 680px;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #515558;
}

.parallel-text {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 11px;
}

.parallel-head,
.parallel-row {
    display: grid;
    grid-template-columns: 44px 1fr 1fr;
}

.parallel-head {
    background: #f1f1ed;
    font: 500 9px "JetBrains Mono", monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #777a7d;
}

.parallel-head::before {
    content: "Ln";
    padding: 11px 12px;
    border-right: 1px solid #deded9;
}

.parallel-head>span {
    padding: 11px 15px;
}

.parallel-head>span+span {
    border-left: 1px solid #deded9;
}

.parallel-row+.parallel-row {
    border-top: 1px solid #deded9;
}

.parallel-line {
    padding: 15px 12px;
    border-right: 1px solid #deded9;
    background: #fafaf8;
    text-align: right;
    font: 10px "JetBrains Mono", monospace;
    color: #999b9d;
}

.parallel-row p {
    margin: 0;
    padding: 15px;
    font-size: 13px;
    line-height: 1.7;
    color: #4f5356;
}

.parallel-row p+p {
    border-left: 1px solid #deded9;
    background: #fdfdfc;
}

.performance-text {
    padding: 24px 0;
    border-top: 1px solid #deded9;
    border-bottom: 1px solid #deded9;
}

.speaker-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 24px;
    padding: 10px 0;
}

.speaker {
    padding-top: 4px;
    font: 500 9px "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #75787b;
}

.speaker-row p {
    max-width: 520px;
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: #35393c;
}

.stage-direction p {
    font-size: 13px;
    font-style: italic;
    color: #6d7073;
}

.edit-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #deded9;
}

.edit-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 9px "JetBrains Mono", monospace;
    color: #737679;
}

.edit-legend i {
    width: 20px;
    height: 7px;
    border-radius: 2px;
}

.legend-insert {
    background: #dcfce7;
    border-bottom: 2px solid #15803d;
}

.legend-delete {
    background: #fee2e2;
    text-decoration: line-through;
}

.legend-uncertain {
    background: #fef3c7;
    border-bottom: 1px dotted #92400e;
}

.legend-redact {
    background: #202326;
}

.edited-copy {
    margin-top: 22px;
}

.edited-copy del {
    padding: 1px 3px;
    background: #fff0f0;
    color: #8f4545;
}

.edited-copy ins {
    padding: 1px 3px;
    background: #ecfdf3;
    color: #176b3a;
    text-decoration: none;
    border-bottom: 1px solid #15803d;
}

.uncertain-reading {
    padding: 1px 3px;
    background: #fff8dc;
    border-bottom: 1px dotted #a16207;
}

.redacted-text {
    display: inline-block;
    min-width: 84px;
    border-radius: 2px;
    background: #202326;
    color: transparent;
    user-select: none;
}

.editorial-note {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    margin-top: 24px !important;
    padding-top: 16px;
    border-top: 1px solid #deded9;
    font-size: 11px !important;
    color: #707477 !important;
}

.editorial-note>span {
    font: 500 9px "JetBrains Mono", monospace;
    color: #86898c;
}

/* 51–58 · Evidence and analysis */
.reasoning-chain {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #deded9;
}

.reasoning-node {
    min-height: 214px;
    padding: 20px;
    background: #fafaf8;
}

.reasoning-index {
    display: block;
    font: 500 9px "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7c7f82;
}

.reasoning-node h3 {
    margin: 34px 0 10px;
    font-size: 17px;
    line-height: 1.35;
}

.reasoning-node p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: #62666a;
}

.evidence-ledger {
    border-top: 1px solid #deded9;
}

.evidence-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 54px;
    gap: 13px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #deded9;
}

.evidence-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #deded9;
    border-radius: 9px;
    background: #fafaf8;
    color: #62666a;
}

.evidence-icon .material-symbols-outlined {
    font-size: 18px;
}

.evidence-row strong,
.evidence-row p {
    display: block;
}

.evidence-row strong {
    font-size: 12px;
}

.evidence-row p {
    margin: 4px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: #787b7e;
}

.evidence-badge {
    padding: 5px 7px;
    border: 1px solid #d8d9d4;
    border-radius: 999px;
    background: #fafaf8;
    font: 500 8px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #686c6f;
}

.evidence-badge.is-primary {
    border-color: #b8c4e4;
    background: #f3f5fb;
    color: #1e3a8a;
}

.evidence-badge.is-technical {
    border-color: #bad9c5;
    background: #f0fdf4;
    color: #166534;
}

.evidence-score {
    font: 500 9px "JetBrains Mono", monospace;
    color: #5f6366;
    text-align: right;
}

.tension-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 11px 11px 0 0;
    background: #deded9;
}

.tension-grid article {
    flex: 1 1 calc(50% - 1px);
    padding: 22px;
    background: #fff;
}

.tension-grid article:nth-child(4n+2),
.tension-grid article:nth-child(4n+3) {
    background: #fafaf8;
}

.tension-grid h3 {
    margin: 13px 0 9px;
    font-size: 17px;
}

.tension-grid p:not(.menu-kicker) {
    margin: 0;
    font-size: 12px;
    line-height: 1.75;
    color: #5c6063;
}

.synthesis-strip {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 17px 20px;
    border: 1px solid #cfd4e4;
    border-top: 0;
    border-radius: 0 0 11px 11px;
    background: #f3f5fb;
    color: #343b52;
}

.synthesis-strip .material-symbols-outlined {
    color: #1d4ed8;
}

.synthesis-strip p {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
}

.quality-panel {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 28px;
    align-items: center;
    padding: 22px;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #fafaf8;
}

.quality-summary {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
}

.quality-score {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 6px solid #d6dce9;
    border-top-color: #1d4ed8;
    border-radius: 50%;
    background: #fff;
    font: 700 20px "JetBrains Mono", monospace;
}

.quality-summary strong {
    display: block;
    font-size: 13px;
}

.quality-summary p {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.55;
    color: #717477;
}

.quality-meters {
    display: grid;
    gap: 11px;
}

.quality-row {
    display: grid;
    grid-template-columns: 126px minmax(80px, 1fr) 38px;
    gap: 10px;
    align-items: center;
    font-size: 10px;
    color: #62666a;
}

.quality-row strong {
    font: 500 9px "JetBrains Mono", monospace;
    text-align: right;
}

.meter-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e6e1;
}

.meter-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #4b5563;
}

.matrix-table {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 11px;
    font-size: 11px;
}

.matrix-table th,
.matrix-table td {
    padding: 13px;
    border-bottom: 1px solid #deded9;
    border-right: 1px solid #e5e5e0;
    text-align: center;
}

.matrix-table th:first-child,
.matrix-table td:first-child {
    text-align: left;
}

.matrix-table th:last-child,
.matrix-table td:last-child {
    border-right: 0;
}

.matrix-table tbody tr:last-child th,
.matrix-table tbody tr:last-child td {
    border-bottom: 0;
}

.matrix-table thead th {
    background: #f1f1ed;
    font: 500 9px/1.5 "JetBrains Mono", monospace;
    letter-spacing: .04em;
    color: #65696c;
}

.matrix-table thead small {
    display: block;
    margin-top: 3px;
    color: #929497;
}

.matrix-table tbody th {
    background: #fafaf8;
    font-size: 11px;
    font-weight: 600;
}

.matrix-table tbody th span {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #dbeafe;
    font: 500 7px "JetBrains Mono", monospace;
    color: #1e40af;
    text-transform: uppercase;
}

.matrix-table .is-recommended {
    background: #f6f8fd;
}

.matrix-score {
    display: inline-grid;
    width: 32px;
    height: 24px;
    place-items: center;
    border: 1px solid #deded9;
    border-radius: 6px;
    background: #fff;
    font: 500 9px "JetBrains Mono", monospace;
}

.experiment-panel {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.experiment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #deded9;
    background: #fafaf8;
}

.experiment-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid #b7d5c2;
    border-radius: 999px;
    background: #f0fdf4;
    font: 500 8px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #166534;
}

.experiment-status::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.experiment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #deded9;
}

.experiment-grid article {
    min-height: 130px;
    padding: 18px;
    background: #fff;
}

.experiment-grid article>span {
    font: 500 9px "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7c7f82;
}

.experiment-grid p {
    margin: 22px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: #53575a;
}

.chart-shell {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #fafaf8;
}

.chart-copy {
    max-width: 610px;
    padding: 22px 22px 0;
}

.chart-copy h3 {
    font-size: 20px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 9px "JetBrains Mono", monospace;
    color: #737679;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #c6c8c4;
}

.legend-dot.is-current {
    background: #1d4ed8;
}

.chart-visual {
    padding: 8px 18px 16px;
}

.chart-visual svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart-grid line {
    stroke: #e0e1dc;
    stroke-width: 1;
}

.chart-labels text,
.chart-values text {
    fill: #74787b;
    font: 10px "JetBrains Mono", monospace;
}

.chart-values text {
    fill: #33373a;
    font-weight: 600;
}

.chart-bars.previous rect {
    fill: #c5c7c3;
}

.chart-bars.current rect {
    fill: #1d4ed8;
}

.chart-data-table {
    border-top: 1px solid #deded9;
}

.chart-data-table summary {
    padding: 12px 16px;
    cursor: pointer;
    font: 500 9px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #6f7376;
}

.chart-data-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.chart-data-table th,
.chart-data-table td {
    padding: 10px 16px;
    border-top: 1px solid #e4e4df;
    text-align: left;
}

.spark-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #deded9;
}

.spark-card {
    min-width: 0;
    padding: 16px;
    background: #fafaf8;
}

.spark-label {
    display: block;
    overflow: hidden;
    font: 500 8px "JetBrains Mono", monospace;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: #7b7e81;
}

.spark-card strong {
    display: inline-block;
    margin-top: 13px;
    font-size: 24px;
    letter-spacing: -.04em;
}

.spark-delta {
    display: inline-block;
    margin-left: 5px;
    font: 500 8px "JetBrains Mono", monospace;
    color: #15803d;
}

.spark-delta.is-down {
    color: #b45309;
}

.spark-delta.is-neutral {
    color: #777a7d;
}

.spark-card svg {
    display: block;
    width: 100%;
    height: 38px;
    margin-top: 10px;
}

.spark-card polyline {
    fill: none;
    stroke: #5c6063;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* 59–68 · Multimodal */
.audio-console {
    overflow: hidden;
    border-radius: 12px;
    background: #17191b;
    color: #f7f7f5;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.audio-topline {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px 20px 10px;
}

.round-media-button,
.video-play-button {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: transform .18s ease, background-color .18s ease;
}

.round-media-button {
    width: 46px;
    height: 46px;
}

.round-media-button:hover,
.video-play-button:hover {
    background: rgba(255, 255, 255, .16);
    transform: scale(1.04);
}

.audio-title span,
.audio-title strong {
    display: block;
}

.audio-title span {
    font: 500 8px "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9ca0a3;
}

.audio-title strong {
    margin-top: 5px;
    font-size: 13px;
}

.audio-time {
    font: 10px "JetBrains Mono", monospace;
    color: #afb2b4;
}

.waveform {
    display: flex;
    height: 86px;
    align-items: center;
    gap: 3px;
    padding: 8px 20px;
}

.waveform i {
    width: 100%;
    height: var(--h);
    min-height: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #e7e8e9, #73787c);
    opacity: .78;
}

.audio-progress-label {
    display: block;
    padding: 0 20px;
}

.audio-progress-label input {
    width: 100%;
    height: 3px;
    accent-color: #fff;
}

.audio-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 20px 16px;
    font: 8px "JetBrains Mono", monospace;
    color: #8f9498;
}

.transcript-disclosure {
    margin-top: 12px;
    border-top: 1px solid #deded9;
    border-bottom: 1px solid #deded9;
}

.transcript-disclosure summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    font-weight: 600;
}

.transcript-disclosure summary::-webkit-details-marker {
    display: none;
}

.transcript-copy {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px 18px;
    padding: 2px 0 18px;
}

.transcript-copy span {
    padding-top: 3px;
    font: 9px "JetBrains Mono", monospace;
    color: #85888b;
}

.transcript-copy p {
    max-width: 660px;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: #565a5e;
}

.video-story {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(240px, .72fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #deded9;
}

.video-poster {
    position: relative;
    display: grid;
    min-height: 390px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .16), transparent 23%),
        linear-gradient(145deg, #363b3f, #101214 72%);
    color: #fff;
}

.video-poster-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(135deg, transparent, #000 25%, #000 70%, transparent);
}

.video-poster::after {
    position: absolute;
    top: 18%;
    left: 23%;
    width: 54%;
    height: 48%;
    border: 1px solid rgba(255, 255, 255, .28);
    transform: perspective(500px) rotateY(-12deg) rotateX(5deg);
    content: "";
}

.video-play-button {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
}

.video-play-button .material-symbols-outlined {
    font-size: 30px;
}

.video-overlay-copy {
    position: absolute;
    right: 18px;
    bottom: 22px;
    left: 18px;
    z-index: 2;
}

.video-overlay-copy span,
.video-overlay-copy strong {
    display: block;
}

.video-overlay-copy span {
    font: 8px "JetBrains Mono", monospace;
    color: #b9bdc0;
}

.video-overlay-copy strong {
    margin-top: 5px;
    font-size: 14px;
}

.video-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, .16);
}

.video-progress i {
    display: block;
    height: 100%;
    background: #fff;
    transition: width .28s ease;
}

.video-chapters {
    display: grid;
    align-content: start;
    background: #fafaf8;
}

.video-chapter {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 2px 10px;
    padding: 15px 14px;
    border-bottom: 1px solid #deded9;
    text-align: left;
    transition: background-color .18s ease;
}

.video-chapter:hover,
.video-chapter.is-active {
    background: #f1f3f8;
}

.video-chapter>span {
    grid-row: 1 / span 2;
    font: 9px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.video-chapter strong {
    font-size: 11px;
}

.video-chapter small {
    font-size: 9px;
    color: #85888b;
}

.source-viewer {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.source-view-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px;
    border-bottom: 1px solid #deded9;
    background: #fafaf8;
}

.source-view-tabs button {
    min-width: max-content;
    padding: 8px 11px;
    border-radius: 7px;
    font: 500 9px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #74787b;
}

.source-view-tabs button:hover,
.source-view-tabs button.is-active {
    background: #fff;
    color: #101214;
    box-shadow: inset 0 0 0 1px #deded9;
}

.source-view-stage {
    min-height: 360px;
    background: #f4f1e8;
}

.source-view-panel {
    min-height: 360px;
    padding: 28px;
    background: #fff;
}

.source-view-panel[hidden] {
    display: none !important;
}

.source-view-panel.is-scan {
    display: grid;
    place-items: center;
    background: #efede5;
}

.source-view-panel.is-scan>p {
    margin: 12px 0 0;
    font: 8px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #7c766a;
}

.facsimile-sheet {
    position: relative;
    width: min(420px, 78%);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid #cfc7b8;
    background:
        radial-gradient(circle at 22% 18%, rgba(112, 92, 62, .1), transparent 18%),
        radial-gradient(circle at 77% 72%, rgba(112, 92, 62, .08), transparent 22%),
        #e8dfcb;
    box-shadow: 0 16px 30px rgba(80, 66, 45, .16);
    transform: rotate(-.6deg);
}

.facsimile-lines {
    position: absolute;
    inset: 13% 12%;
    background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(69, 58, 43, .48) 15px 16px, transparent 17px 23px);
    opacity: .62;
    transform: skewY(-1deg);
}

.facsimile-mark {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(94, 66, 37, .46);
}

.facsimile-mark.one {
    width: 38%;
    height: 24%;
    left: 17%;
    top: 26%;
    transform: rotate(8deg);
}

.facsimile-mark.two {
    width: 26%;
    height: 34%;
    right: 15%;
    top: 38%;
    border-radius: 50%;
}

.facsimile-mark.three {
    width: 48%;
    left: 25%;
    bottom: 18%;
    transform: rotate(-11deg);
}

.source-view-panel pre {
    margin: 0;
    white-space: pre-wrap;
    font: 12px/2 "JetBrains Mono", monospace;
    color: #3f4346;
}

.source-metadata {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border: 1px solid #deded9;
    background: #deded9;
}

.source-metadata div {
    padding: 16px;
    background: #fafaf8;
}

.source-metadata dt {
    font: 500 8px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #7c7f82;
}

.source-metadata dd {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

.image-story {
    display: grid;
    gap: 12px;
}

.story-stage {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #fafaf8;
}

.story-visual {
    position: relative;
    display: grid;
    min-height: 370px;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(125deg, transparent 0 36%, rgba(16, 18, 20, .07) 36.3% 36.6%, transparent 37%),
        linear-gradient(58deg, transparent 0 57%, rgba(16, 18, 20, .08) 57.3% 57.6%, transparent 58%),
        radial-gradient(circle at 50% 45%, #f8f8f5, #deded8);
    color: #55595d;
}

.story-visual::before {
    position: absolute;
    inset: 12% 16%;
    border: 1px solid rgba(16, 18, 20, .16);
    border-radius: 3px;
    content: "";
}

.story-visual .material-symbols-outlined {
    position: relative;
    z-index: 1;
    font-size: 62px;
}

.story-frame-number {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    font: 500 10px "JetBrains Mono", monospace;
    color: #717477;
}

.story-stage figcaption {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
    gap: 22px;
    padding: 16px 18px;
    border-top: 1px solid #deded9;
}

.story-stage figcaption strong {
    font-size: 12px;
}

.story-stage figcaption p {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: #6d7073;
}

.story-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.story-thumb {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 10px;
    align-items: center;
    padding: 9px;
    border: 1px solid #deded9;
    border-radius: 9px;
    background: #fafaf8;
    text-align: left;
    transition: border-color .18s ease, background-color .18s ease;
}

.story-thumb:hover,
.story-thumb.is-active {
    border-color: #aeb6cc;
    background: #f3f5fb;
}

.story-thumb>span {
    grid-row: 1 / span 2;
    font: 500 8px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.story-thumb i {
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, #deded9, #f5f5f2);
}

.story-thumb strong {
    font-size: 9px;
}

.deep-zoom {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.zoom-stage {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: #e8e7df;
}

.zoom-art {
    position: absolute;
    inset: -10%;
    background:
        repeating-radial-gradient(ellipse at 52% 46%, rgba(54, 49, 40, .12) 0 1px, transparent 1px 9px),
        linear-gradient(135deg, #e5dcc8, #cfc6b5);
    transform: scale(var(--zoom));
    transform-origin: 52% 46%;
    transition: transform .18s ease;
}

.zoom-line {
    position: absolute;
    height: 2px;
    background: rgba(54, 49, 40, .56);
    transform-origin: left center;
}

.zoom-line.one {
    width: 58%;
    left: 18%;
    top: 68%;
    transform: rotate(-31deg);
}

.zoom-line.two {
    width: 46%;
    left: 28%;
    top: 24%;
    transform: rotate(37deg);
}

.zoom-line.three {
    width: 36%;
    left: 48%;
    top: 58%;
    transform: rotate(-77deg);
}

.zoom-target {
    position: absolute;
    left: 45%;
    top: 38%;
    width: 18%;
    height: 22%;
    border: 2px solid rgba(255, 255, 255, .94);
    box-shadow: 0 0 0 1px rgba(16, 18, 20, .3);
}

.zoom-minimap {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 92px;
    height: 68px;
    border: 1px solid rgba(255, 255, 255, .8);
    background: rgba(16, 18, 20, .64);
    box-shadow: 0 4px 12px rgba(16, 18, 20, .18);
}

.zoom-minimap i {
    position: absolute;
    left: 28%;
    top: 22%;
    width: 38%;
    height: 42%;
    border: 1px solid #fff;
}

.zoom-caption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 8px;
    background: rgba(16, 18, 20, .74);
    color: #fff;
    backdrop-filter: blur(8px);
}

.zoom-caption span,
.zoom-caption strong {
    display: block;
}

.zoom-caption span {
    font: 8px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #b8bbbd;
}

.zoom-caption strong {
    margin-top: 4px;
    font-size: 11px;
}

.zoom-controls {
    display: grid;
    grid-template-columns: 34px minmax(100px, 1fr) 34px 54px;
    gap: 9px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid #deded9;
    background: #fafaf8;
}

.zoom-controls button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #deded9;
    border-radius: 8px;
    background: #fff;
}

.zoom-controls input {
    width: 100%;
    accent-color: #4b5563;
}

.zoom-controls output {
    font: 9px "JetBrains Mono", monospace;
    text-align: right;
    color: #686c6f;
}

.compare-reveal {
    --reveal: 52%;
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #d8d8d2;
}

.compare-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.compare-before {
    background:
        radial-gradient(circle at 42% 40%, rgba(255, 255, 255, .8), transparent 17%),
        linear-gradient(145deg, #e6ddd0, #b8a996);
    color: #584f45;
}

.compare-after {
    background:
        repeating-linear-gradient(23deg, transparent 0 15px, rgba(255, 255, 255, .07) 16px 17px),
        radial-gradient(circle at 58% 38%, #77868a, #1e282b 74%);
    color: #e7efef;
    clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}

.compare-label {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .78);
    font: 500 8px "JetBrains Mono", monospace;
    color: #3e4346;
    text-transform: uppercase;
}

.compare-after .compare-label {
    right: 14px;
    left: auto;
    background: rgba(16, 18, 20, .64);
    color: #fff;
}

.compare-glyph {
    display: grid;
    place-items: center;
    gap: 7px;
}

.compare-glyph .material-symbols-outlined {
    font-size: 58px;
}

.compare-glyph small {
    font: 8px "JetBrains Mono", monospace;
    text-transform: uppercase;
}

.compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--reveal);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(16, 18, 20, .15);
    transform: translateX(-1px);
    pointer-events: none;
}

.compare-divider i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #45494c;
    box-shadow: 0 5px 14px rgba(16, 18, 20, .2);
    transform: translate(-50%, -50%);
}

.compare-range {
    position: absolute;
    inset: 0;
}

.compare-range input {
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: ew-resize;
    opacity: 0;
}

.model-viewer {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.model-stage {
    position: relative;
    display: grid;
    min-height: 420px;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 45%, #f8f8f6, #e2e3de 68%);
    perspective: 800px;
}

.model-grid {
    position: absolute;
    right: -20%;
    bottom: -42%;
    left: -20%;
    height: 80%;
    background-image: linear-gradient(rgba(16, 18, 20, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 18, 20, .1) 1px, transparent 1px);
    background-size: 34px 34px;
    transform: rotateX(62deg);
    transform-origin: center bottom;
}

.model-cube {
    position: relative;
    width: 124px;
    height: 124px;
    transform: rotateX(-18deg) rotateY(var(--turn));
    transform-style: preserve-3d;
    transition: transform .12s linear;
}

.cube-face {
    position: absolute;
    display: grid;
    width: 124px;
    height: 124px;
    place-items: center;
    border: 1px solid rgba(16, 18, 20, .34);
    background: rgba(255, 255, 255, .72);
    font: 500 10px "JetBrains Mono", monospace;
    color: rgba(16, 18, 20, .5);
    backface-visibility: visible;
}

.cube-face.front {
    transform: translateZ(62px);
}

.cube-face.back {
    transform: rotateY(180deg) translateZ(62px);
}

.cube-face.right {
    transform: rotateY(90deg) translateZ(62px);
}

.cube-face.left {
    transform: rotateY(-90deg) translateZ(62px);
}

.cube-face.top {
    transform: rotateX(90deg) translateZ(62px);
}

.cube-face.bottom {
    transform: rotateX(-90deg) translateZ(62px);
}

.model-stage-label {
    position: absolute;
    bottom: 16px;
    left: 16px;
}

.model-stage-label span,
.model-stage-label strong {
    display: block;
}

.model-stage-label span {
    font: 8px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.model-stage-label strong {
    margin-top: 4px;
    font-size: 11px;
}

.model-toolbar {
    display: grid;
    grid-template-columns: 34px minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border-top: 1px solid #deded9;
    background: #fafaf8;
}

.model-toolbar button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #deded9;
    border-radius: 8px;
    background: #fff;
}

.model-toolbar label {
    display: grid;
    grid-template-columns: 48px minmax(80px, 1fr);
    gap: 9px;
    align-items: center;
    font: 9px "JetBrains Mono", monospace;
    color: #686c6f;
}

.model-toolbar input {
    width: 100%;
    accent-color: #4b5563;
}

.model-format {
    font: 8px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.model-fallback {
    margin: 0;
    padding: 10px 12px;
    border-top: 1px solid #deded9;
    font-size: 9px;
    line-height: 1.5;
    color: #74787b;
}

.story-map {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #deded9;
}

.story-map-canvas {
    display: grid;
    min-height: 390px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 1px 1px, #cfd0cb 1px, transparent 1.4px),
        #f2f2ee;
    background-size: 18px 18px;
}

.story-map-canvas svg {
    width: 100%;
    height: auto;
}

.map-river {
    fill: none;
    stroke: #cbd4d8;
    stroke-width: 22;
    opacity: .8;
}

.map-route {
    fill: none;
    stroke: #4b5563;
    stroke-dasharray: 7 6;
    stroke-linecap: round;
    stroke-width: 2;
}

.map-building rect {
    fill: #e1e1dc;
    stroke: #bfc1bd;
}

.map-stops circle {
    fill: #fff;
    stroke: #4b5563;
    stroke-width: 2;
    transition: fill .18s ease, stroke .18s ease;
}

.map-stops circle.is-active {
    fill: #1d4ed8;
    stroke: #1d4ed8;
}

.map-stops text {
    fill: #4b5563;
    font: 600 9px "JetBrains Mono", monospace;
    text-anchor: middle;
    pointer-events: none;
}

.map-stops text.is-active {
    fill: #fff;
}

.map-stop-list {
    display: grid;
    align-content: start;
    background: #fafaf8;
}

.map-stop {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 9px;
    padding: 12px 13px;
    border-bottom: 1px solid #deded9;
    text-align: left;
}

.map-stop:hover,
.map-stop.is-active {
    background: #f1f3f8;
}

.map-stop>span {
    grid-row: 1 / span 2;
    font: 500 8px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.map-stop strong {
    font-size: 10px;
}

.map-stop small {
    font-size: 8px;
    color: #85888b;
}

.map-stop-detail {
    padding: 16px 13px;
}

.map-stop-detail strong {
    display: block;
    margin-top: 8px;
    font-size: 12px;
}

.map-stop-detail p {
    margin: 7px 0 0;
    font-size: 10px;
    line-height: 1.6;
    color: #686c6f;
}

.annotation-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #deded9;
}

.annotation-stage {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: #edece6;
}

.annotation-image {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(16, 18, 20, .08) 50%, transparent 50.2%),
        linear-gradient(180deg, transparent 59.8%, rgba(16, 18, 20, .09) 60%, transparent 60.2%),
        radial-gradient(circle at 50% 35%, #fafaf7, #d8d6cb);
}

.perspective-line,
.horizon-line {
    position: absolute;
    height: 1px;
    background: rgba(16, 18, 20, .38);
    transform-origin: left center;
}

.perspective-line.a {
    width: 70%;
    left: 4%;
    top: 78%;
    transform: rotate(-32deg);
}

.perspective-line.b {
    width: 68%;
    right: 4%;
    top: 78%;
    transform-origin: right center;
    transform: rotate(32deg);
}

.perspective-line.c {
    width: 54%;
    left: 25%;
    top: 17%;
    transform: rotate(75deg);
}

.horizon-line {
    width: 82%;
    left: 9%;
    top: 34%;
    background: rgba(29, 78, 216, .45);
}

.workbench-pin {
    position: absolute;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #101214;
    color: #fff;
    font: 600 9px "JetBrains Mono", monospace;
    box-shadow: 0 5px 14px rgba(16, 18, 20, .22);
    transform: translate(-50%, -50%);
}

.workbench-pin.is-active {
    background: #1d4ed8;
    box-shadow: 0 0 0 5px rgba(29, 78, 216, .15), 0 5px 14px rgba(16, 18, 20, .22);
}

.annotation-list {
    display: grid;
    align-content: start;
    background: #fafaf8;
}

.annotation-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 13px;
    border-bottom: 1px solid #deded9;
    text-align: left;
}

.annotation-item:hover,
.annotation-item.is-active {
    background: #f1f3f8;
}

.annotation-item>span {
    font: 500 8px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.annotation-item strong {
    font-size: 11px;
}

.annotation-item p {
    margin: 5px 0 0;
    font-size: 9px;
    line-height: 1.55;
    color: #737679;
}

.dataset-shell {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.dataset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border-bottom: 1px solid #deded9;
    background: #fafaf8;
}

.dataset-head h3 {
    margin: 8px 0 0;
    font-size: 17px;
}

.dataset-head p {
    margin: 4px 0 0;
    font: 9px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.dataset-download {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border: 1px solid #d4d5d0;
    border-radius: 8px;
    background: #fff;
    font: 500 9px "JetBrains Mono", monospace;
}

.dataset-download .material-symbols-outlined {
    font-size: 16px;
}

.dataset-table-wrap {
    overflow-x: auto;
}

.dataset-table {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
    font: 10px "JetBrains Mono", monospace;
}

.dataset-table th,
.dataset-table td {
    padding: 11px 13px;
    border-bottom: 1px solid #e4e4df;
    text-align: left;
}

.dataset-table th {
    background: #f1f1ed;
    color: #686c6f;
}

.dataset-table td {
    color: #4f5356;
}

.schema-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 11px 13px;
    background: #fafaf8;
    font: 8px "JetBrains Mono", monospace;
    color: #777a7d;
}

.schema-row span {
    padding: 5px 7px;
    border: 1px solid #deded9;
    border-radius: 5px;
    background: #fff;
}

.schema-row a {
    margin-left: auto;
    color: #1d4ed8;
}

/* 69–72 · Workflow and trust */
.query-panel {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.query-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    background: #fafaf8;
}

.query-head h3 {
    margin: 0;
    font-size: 17px;
}

.query-head>strong {
    display: grid;
    min-width: 56px;
    height: 48px;
    place-items: center;
    border: 1px solid #d7d8d3;
    border-radius: 10px;
    background: #fff;
    font: 700 18px "JetBrains Mono", monospace;
}

.query-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #deded9;
    border-bottom: 1px solid #deded9;
}

.query-filter-group button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #d8d9d4;
    border-radius: 999px;
    background: #fff;
    font-size: 10px;
    color: #565a5e;
}

.query-filter-group button:hover,
.query-filter-group button[aria-pressed="true"] {
    border-color: #aeb6cc;
    background: #f3f5fb;
    color: #172554;
}

.query-filter-group .material-symbols-outlined {
    font-size: 15px;
}

.query-expression {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 11px 18px;
    border-bottom: 1px solid #deded9;
    background: #17191b;
    color: #f5f5f4;
}

.query-expression>span {
    font: 500 8px "JetBrains Mono", monospace;
    color: #92979a;
}

.query-expression code {
    overflow: hidden;
    font: 10px "JetBrains Mono", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.query-expression button {
    font: 8px "JetBrains Mono", monospace;
    color: #b9bdc0;
}

.query-samples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #deded9;
}

.query-samples article {
    min-width: 0;
    padding: 14px;
    background: #fafaf8;
}

.query-samples span,
.query-samples strong,
.query-samples small {
    display: block;
}

.query-samples span {
    font: 8px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.query-samples strong {
    margin-top: 10px;
    font-size: 10px;
}

.query-samples small {
    margin-top: 5px;
    font-size: 8px;
    line-height: 1.5;
    color: #85888b;
}

.workflow-panel {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.workflow-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: #fafaf8;
}

.workflow-step {
    position: relative;
    min-width: 0;
    padding: 18px 12px;
    border-right: 1px solid #deded9;
}

.workflow-step:last-child {
    border-right: 0;
}

.workflow-step>span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #d5d6d1;
    border-radius: 50%;
    background: #fff;
    font: 500 9px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.workflow-step>span .material-symbols-outlined {
    font-size: 15px;
}

.workflow-step strong,
.workflow-step small {
    display: block;
}

.workflow-step strong {
    margin-top: 16px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-step small {
    margin-top: 4px;
    font-size: 8px;
    color: #85888b;
}

.workflow-step.is-complete>span {
    border-color: #b7d5c2;
    background: #f0fdf4;
    color: #15803d;
}

.workflow-step.is-current {
    background: #f3f5fb;
}

.workflow-step.is-current>span {
    border-color: #9eacd0;
    background: #1d4ed8;
    color: #fff;
}

.workflow-note {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid #deded9;
    background: #fffaf0;
}

.workflow-note>.material-symbols-outlined {
    color: #b45309;
}

.workflow-note strong {
    display: block;
    font-size: 11px;
}

.workflow-note p {
    margin: 4px 0 0;
    font-size: 9px;
    line-height: 1.55;
    color: #756b5d;
}

.workflow-note button {
    padding: 8px 10px;
    border: 1px solid #dfc7a3;
    border-radius: 8px;
    background: #fff;
    font: 500 8px "JetBrains Mono", monospace;
    color: #92400e;
}

.ai-manifest {
    overflow: hidden;
    border: 1px solid #cfd4e4;
    border-radius: 12px;
    background: #f8f9fc;
}

.ai-manifest-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 17px 18px;
    border-bottom: 1px solid #d8ddea;
}

.ai-mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #bec8e2;
    border-radius: 10px;
    background: #fff;
    color: #1d4ed8;
}

.ai-mark .material-symbols-outlined {
    font-size: 19px;
}

.ai-manifest-head h3 {
    margin: 0;
    font-size: 15px;
}

.ai-state {
    padding: 6px 8px;
    border: 1px solid #b7d5c2;
    border-radius: 999px;
    background: #f0fdf4;
    font: 500 8px "JetBrains Mono", monospace;
    text-transform: uppercase;
    color: #166534;
}

.ai-manifest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #d8ddea;
}

.ai-manifest-grid>div {
    min-height: 118px;
    padding: 16px 18px;
    background: #fff;
}

.ai-manifest-grid span {
    font: 500 8px "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6f7480;
}

.ai-manifest-grid p {
    margin: 17px 0 0;
    font-size: 11px;
    line-height: 1.65;
    color: #555b67;
}

.ai-details {
    border-top: 1px solid #d8ddea;
}

.ai-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
    font: 500 9px "JetBrains Mono", monospace;
    color: #5e6574;
}

.ai-details summary::-webkit-details-marker {
    display: none;
}

.ai-details pre {
    margin: 0;
    overflow: auto;
    border-top: 1px solid #d8ddea;
    background: #17191b;
    padding: 16px 18px;
    color: #d9dcdf;
    font: 10px/1.7 "JetBrains Mono", monospace;
}

.access-manifest {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.access-summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 17px 18px;
    background: #f0fdf4;
}

.access-summary>.material-symbols-outlined {
    color: #15803d;
}

.access-summary strong {
    display: block;
    font-size: 13px;
}

.access-summary p {
    margin: 4px 0 0;
    font-size: 9px;
    line-height: 1.5;
    color: #5e6f63;
}

.access-grade {
    display: grid;
    width: 40px;
    height: 32px;
    place-items: center;
    border: 1px solid #b7d5c2;
    border-radius: 7px;
    background: #fff;
    font: 600 9px "JetBrains Mono", monospace;
    color: #166534;
}

.access-list {
    border-top: 1px solid #deded9;
}

.access-list>div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid #deded9;
}

.access-status {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #d5d6d1;
    border-radius: 50%;
    background: #fff;
}

.access-status .material-symbols-outlined {
    font-size: 15px;
}

.access-status.is-complete {
    border-color: #b7d5c2;
    color: #15803d;
}

.access-status.is-progress {
    border-color: #dfc7a3;
    color: #b45309;
}

/* Release History */
.access-status.is-release-history {
    border-color: #bfdbfe;
    color: #2563eb;
}

/* License */
.access-status.is-license {
    border-color: #bbf7d0;
    color: #15803d;
}

/* Security Policy */
.access-status.is-security-policy {
    border-color: #fecaca;
    color: #b91c1c;
}

/* Governance */
.access-status.is-governance {
    border-color: #ddd6fe;
    color: #7c3aed;
}

/* Source Repository */
.access-status.is-source-repository {
    border-color: #d1d5db;
    color: #374151;
}

.access-list p {
    margin: 0;
}

.access-list strong,
.access-list small {
    display: block;
}

.access-list strong {
    font-size: 11px;
}

.access-list small {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.5;
    color: #777a7d;
}

.access-list button {
    padding: 7px 9px;
    border: 1px solid #d8d9d4;
    border-radius: 7px;
    background: #fafaf8;
    font: 500 8px "JetBrains Mono", monospace;
    color: #565a5e;
}

.extension-close {
    padding: 30px 18px;
    background: #17191b;
    color: #f5f5f4;
    text-align: center;
}

.extension-close strong {
    display: block;
    margin-top: 10px;
    font-size: 18px;
    letter-spacing: -.02em;
}

.extension-close p:last-child {
    max-width: 560px;
    margin: 10px auto 0;
    font-size: 11px;
    line-height: 1.6;
    color: #aeb2b5;
}

/* Standalone merged preview only. Does not affect the drop-in fragment. */
.preview-header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(201, 202, 197, .85);
    background: rgba(247, 247, 245, .88);
    backdrop-filter: blur(16px) saturate(140%);
}

.preview-header strong {
    font-size: 12px;
}

.preview-header span {
    font: 9px "JetBrains Mono", monospace;
    color: #7b7e81;
}

body.standalone-preview .article-layout {
    max-width: none;
    padding-top: 26px;
}

body.standalone-preview .article-main {
    width: 100%;
    margin: 0;
    padding: 0 24px 72px;
}

body.standalone-preview .article-canvas {
    max-width: 940px;
}

/* Responsive behavior */
@media (max-width: 900px) {

    .library-jump-grid,
    .spark-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reasoning-chain {
        grid-template-columns: 1fr;
    }

    .reasoning-node {
        min-height: 0;
    }

    .reasoning-node h3 {
        margin-top: 18px;
    }

    .video-story,
    .story-map,
    .annotation-workbench {
        grid-template-columns: 1fr;
    }

    .video-chapters,
    .map-stop-list,
    .annotation-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-stop-detail {
        grid-column: 1 / -1;
    }

    .workflow-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .workflow-step:nth-child(3) {
        border-right: 0;
    }

    .workflow-step:nth-child(n+4) {
        border-top: 1px solid #deded9;
    }
}

@media (max-width: 720px) {
    .display-title {
        font-size: 46px;
    }

    .chapter-opener,
    .quality-panel {
        grid-template-columns: 1fr;
    }

    .chapter-number {
        font-size: 82px;
    }

    .question-heading {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 15px;
    }

    .question-mark {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 22px;
    }

    .abstract-row {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .parallel-head,
    .parallel-row {
        grid-template-columns: 36px 1fr 1fr;
    }

    .evidence-row {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .evidence-score {
        display: none;
    }

    .tension-grid,
    .experiment-grid,
    .ai-manifest-grid {
        grid-template-columns: 1fr;
    }

    .quality-row {
        grid-template-columns: 104px minmax(70px, 1fr) 34px;
    }

    .story-stage figcaption {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .story-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .query-samples {
        grid-template-columns: 1fr;
    }

    .workflow-rail {
        grid-template-columns: 1fr 1fr;
    }

    .workflow-step,
    .workflow-step:nth-child(3) {
        border-right: 1px solid #deded9;
        border-top: 1px solid #deded9;
    }

    .workflow-step:nth-child(1),
    .workflow-step:nth-child(2) {
        border-top: 0;
    }

    .workflow-step:nth-child(even) {
        border-right: 0;
    }

    .workflow-note {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .workflow-note button {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 520px) {

    .library-jump-grid,
    .spark-grid,
    .video-chapters,
    .map-stop-list,
    .annotation-list {
        grid-template-columns: 1fr;
    }

    .display-title {
        font-size: 39px;
    }

    .byline-divider,
    .byline-meta {
        display: none;
    }

    .question-heading {
        grid-template-columns: 1fr;
    }

    .abstract-row,
    .addressed-paragraph,
    .speaker-row,
    .editorial-note {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .parallel-text {
        overflow-x: auto;
    }

    .parallel-head,
    .parallel-row {
        min-width: 620px;
    }

    .evidence-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .evidence-badge {
        grid-column: 2;
        justify-self: start;
    }

    .quality-summary {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .quality-score {
        width: 56px;
        height: 56px;
        font-size: 17px;
    }

    .quality-row {
        grid-template-columns: 1fr auto;
    }

    .quality-row .meter-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .audio-topline {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .audio-time {
        grid-column: 2;
    }

    .audio-meta {
        display: grid;
    }

    .video-poster,
    .zoom-stage,
    .model-stage,
    .annotation-stage {
        min-height: 310px;
    }

    .source-view-panel {
        min-height: 300px;
        padding: 18px;
    }

    .source-metadata,
    .story-thumbs {
        grid-template-columns: 1fr;
    }

    .model-toolbar {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .model-format {
        grid-column: 2;
    }

    .query-expression {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .query-expression button {
        grid-column: 2;
        justify-self: start;
    }

    .workflow-rail {
        grid-template-columns: 1fr;
    }

    .workflow-step,
    .workflow-step:nth-child(even),
    .workflow-step:nth-child(3) {
        border-right: 0;
        border-top: 1px solid #deded9;
    }

    .workflow-step:first-child {
        border-top: 0;
    }

    .ai-manifest-head,
    .access-summary {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .ai-state,
    .access-grade {
        grid-column: 2;
        justify-self: start;
    }

    .access-list>div {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .access-list button {
        grid-column: 2;
        justify-self: start;
    }

    .preview-header span {
        display: none;
    }

    body.standalone-preview .article-main {
        padding-inline: 10px;
    }
}

/* ================================================================
           RENAISSANCE ARCHIVE · EXPANSION BLOCKS 73–112
           Main-canvas additions only. Header, footer, and side navigation
           retain their original selectors and markup.
           ================================================================ */

.ra-expansion {
    --ra-neutral: #4b5563;
    --ra-info: #1d4ed8;
    --ra-success: #15803d;
    --ra-warning: #b45309;
    --ra-danger: #b42318;
    --ra-violet: #6d28d9;
    --ra-cyan: #0e7490;
    background: linear-gradient(180deg, #f8f8f5, #fff);
}

.ra-expansion-head {
    max-width: 720px;
}

.ra-expansion-head h2 {
    margin: 12px 0 0;
    font-size: clamp(34px, 6vw, 56px);
    line-height: 1.02;
    letter-spacing: -.052em;
}

.ra-expansion-head p:last-child {
    max-width: 670px;
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: #55595d;
}

.ra-index-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #deded9;
}

.ra-index-link {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
    padding: 15px;
    background: #fafaf8;
    color: #34373a;
    transition: background-color .18s ease, color .18s ease;
}

.ra-index-link:hover {
    background: #f1f3f8;
    color: #172554;
}

.ra-index-link>span:first-child {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #d4d5d0;
    border-radius: 8px;
    background: #fff;
    color: #5e6266;
}

.ra-index-link .material-symbols-outlined {
    font-size: 17px;
}

.ra-index-link strong,
.ra-index-link small {
    display: block;
}

.ra-index-link strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ra-index-link small {
    margin-top: 4px;
    font: 9px "JetBrains Mono", monospace;
    color: #85888b;
}

/* 74–80 · Complete text hierarchy and positioning */
.ra-type-ladder {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #deded9;
}

.ra-type-row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 22px;
    align-items: baseline;
    padding: 18px 20px;
    background: #fff;
}

.ra-type-row>span:first-child {
    font: 500 9px/1.4 "JetBrains Mono", monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7b7e81;
}

.ra-type-display {
    font-size: clamp(38px, 6vw, 62px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.055em;
}

.ra-type-page {
    font-size: clamp(31px, 5vw, 46px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -.045em;
}

.ra-type-section {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.03em;
}

.ra-type-subsection {
    font-size: 20px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.ra-type-card-title {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
}

.ra-type-lead {
    max-width: 650px;
    font-size: 17px;
    line-height: 1.72;
    color: #4f5356;
}

.ra-type-body {
    max-width: 650px;
    font-size: 14px;
    line-height: 1.78;
    color: #55595d;
}

.ra-type-supporting {
    max-width: 620px;
    font-size: 12px;
    line-height: 1.65;
    color: #737679;
}

.ra-type-caption {
    font-size: 10px;
    line-height: 1.6;
    color: #7c7f82;
}

.ra-title-position-grid,
.ra-reading-grid,
.ra-microcopy-grid,
.ra-inline-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ra-title-position,
.ra-reading-sample,
.ra-microcopy-card,
.ra-inline-card {
    min-width: 0;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #fafaf8;
    padding: 18px;
}

.ra-title-position.center {
    text-align: center;
}

.ra-title-position.right {
    text-align: right;
}

.ra-title-position .material-symbols-outlined {
    color: #6b7074;
    font-size: 21px;
}

.ra-title-position h3 {
    margin: 16px 0 8px;
    font-size: 18px;
    line-height: 1.25;
}

.ra-title-position p {
    margin: 0;
    font-size: 11px;
    line-height: 1.65;
    color: #6c7073;
}

.ra-control-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.ra-segment-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid #d7d8d3;
    border-radius: 8px;
    background: #fff;
    color: #64686b;
    font: 500 9px "JetBrains Mono", monospace;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.ra-segment-button:hover,
.ra-segment-button[aria-pressed="true"],
.ra-segment-button[aria-selected="true"] {
    border-color: #aeb6cc;
    background: #f3f5fb;
    color: #172554;
}

.ra-segment-button .material-symbols-outlined {
    font-size: 16px;
}

.ra-align-preview {
    min-height: 270px;
    padding: 32px;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: linear-gradient(180deg, #fafaf8, #fff);
    transition: text-align .18s ease;
}

.ra-align-preview[data-align="left"] {
    text-align: left;
}

.ra-align-preview[data-align="center"] {
    text-align: center;
}

.ra-align-preview[data-align="right"] {
    text-align: right;
}

.ra-align-preview[data-align="justify"] {
    text-align: justify;
}

.ra-align-preview .ra-preview-inner {
    width: min(100%, 650px);
    margin-inline: auto;
}

.ra-align-preview[data-align="left"] .ra-preview-inner {
    margin-left: 0;
}

.ra-align-preview[data-align="right"] .ra-preview-inner {
    margin-right: 0;
}

.ra-align-preview h3 {
    margin: 8px 0 10px;
    font-size: 30px;
    line-height: 1.14;
    letter-spacing: -.035em;
}

.ra-align-preview p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: #5b5f63;
}

.ra-position-module {
    display: grid;
    gap: 18px;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #fafaf8;
    padding: 20px;
}

.ra-position-module[data-position="top"] {
    grid-template-columns: 1fr;
}

.ra-position-module[data-position="right"] {
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    align-items: center;
}

.ra-position-module[data-position="right"] .ra-position-copy {
    order: -1;
}

.ra-position-module[data-position="bottom"] {
    grid-template-columns: 1fr;
}

.ra-position-module[data-position="bottom"] .ra-position-copy {
    order: 2;
}

.ra-position-module[data-position="left"] {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    align-items: center;
}

.ra-position-module[data-position="overlay"] {
    position: relative;
    display: block;
    min-height: 390px;
    padding: 0;
    background: #202326;
}

.ra-position-media {
    position: relative;
    display: grid;
    min-height: 220px;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .12), transparent 42%),
        radial-gradient(circle at 38% 36%, #f8f8f5, #d8d8d1 72%);
    color: #5d6265;
}

.ra-position-media::after {
    position: absolute;
    inset: 15%;
    border: 1px solid rgba(16, 18, 20, .15);
    content: "";
}

.ra-position-media .material-symbols-outlined {
    position: relative;
    z-index: 1;
    font-size: 44px;
}

.ra-position-copy {
    padding: 4px 2px;
}

.ra-position-copy h3 {
    margin: 10px 0 10px;
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: -.03em;
}

.ra-position-copy p:last-child {
    margin: 0;
    font-size: 13px;
    line-height: 1.72;
    color: #606467;
}

.ra-position-module[data-position="overlay"] .ra-position-media {
    position: absolute;
    inset: 0;
    min-height: 100%;
    border-radius: 0;
    background:
        linear-gradient(180deg, transparent 20%, rgba(10, 12, 14, .84) 100%),
        radial-gradient(circle at 38% 30%, #6e7c80, #20292c 72%);
    color: #fff;
}

.ra-position-module[data-position="overlay"] .ra-position-copy {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    z-index: 2;
    max-width: 580px;
    color: #fff;
}

.ra-position-module[data-position="overlay"] .ra-position-copy p:last-child,
.ra-position-module[data-position="overlay"] .menu-kicker {
    color: #cdd1d3;
}

.ra-reading-sample h3,
.ra-microcopy-card h3,
.ra-inline-card h3 {
    margin: 0 0 10px;
    font-size: 14px;
}

.ra-reading-sample p,
.ra-microcopy-card p,
.ra-inline-card p {
    margin: 0;
    font-size: 11px;
    line-height: 1.7;
    color: #62666a;
}

.ra-reading-sample.is-narrow p {
    max-width: 28ch;
}

.ra-reading-sample.is-wide p {
    max-width: 68ch;
}

.ra-reading-sample.is-columns p {
    column-count: 2;
    column-gap: 24px;
}

.ra-microcopy-stack {
    display: grid;
    gap: 8px;
}

.ra-micro-kicker,
.ra-micro-label,
.ra-micro-meta,
.ra-micro-caption,
.ra-micro-helper,
.ra-micro-validation,
.ra-micro-legal,
.ra-micro-code {
    display: block;
}

.ra-micro-kicker,
.ra-micro-label,
.ra-micro-meta,
.ra-micro-code {
    font-family: "JetBrains Mono", monospace;
}

.ra-micro-kicker {
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #85888b;
}

.ra-micro-label {
    font-size: 10px;
    font-weight: 600;
    color: #424649;
}

.ra-micro-meta,
.ra-micro-caption,
.ra-micro-helper,
.ra-micro-legal,
.ra-micro-code {
    font-size: 9px;
    line-height: 1.55;
    color: #777a7d;
}

.ra-micro-validation {
    font-size: 10px;
    font-weight: 600;
    color: #15803d;
}

.ra-micro-validation.is-error {
    color: #b42318;
}

.ra-inline-card mark,
.ra-inline-card code,
.ra-inline-card kbd {
    padding: 2px 5px;
    border-radius: 4px;
}

.ra-inline-card mark {
    background: #fef3c7;
}

.ra-inline-card code {
    background: #ecece8;
    font: 10px "JetBrains Mono", monospace;
}

.ra-inline-card kbd {
    border: 1px solid #d2d3ce;
    background: #fff;
    box-shadow: 0 1px 0 #c9cac5;
    font: 9px "JetBrains Mono", monospace;
}

/* 81–95 · Card system */
.ra-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ra-card-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ra-card-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ra-card {
    --ra-card-accent: #4b5563;
    --ra-card-soft: #f3f4f6;
    --ra-card-ink: #34373a;
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
    border: 1px solid #deded9;
    border-radius: 12px;
    background: #fff;
    color: var(--ra-card-ink);
    transition: border-color .18s ease, box-shadow .2s ease, transform .2s var(--ease-out), background-color .18s ease;
}

.ra-card:hover {
    border-color: #c5c7c3;
}

.ra-card.is-interactive:hover {
    box-shadow: 0 12px 28px rgba(16, 18, 20, .08);
    transform: translateY(-2px);
}

.ra-card.is-outline {
    background: #fff;
}

.ra-card.is-elevated {
    border-color: rgba(222, 222, 217, .7);
    box-shadow: 0 12px 30px rgba(16, 18, 20, .09), 0 1px 2px rgba(16, 18, 20, .05);
}

.ra-card.is-filled {
    background: #f3f3f0;
}

.ra-card.is-ghost {
    border-color: transparent;
    background: transparent;
}

.ra-card.is-dashed {
    border-style: dashed;
}

.ra-card[data-intent="info"] {
    --ra-card-accent: #1d4ed8;
    --ra-card-soft: #eff6ff;
    --ra-card-ink: #172554;
    border-color: #bfcced;
}

.ra-card[data-intent="success"] {
    --ra-card-accent: #15803d;
    --ra-card-soft: #f0fdf4;
    --ra-card-ink: #14532d;
    border-color: #bad9c5;
}

.ra-card[data-intent="warning"] {
    --ra-card-accent: #b45309;
    --ra-card-soft: #fff7ed;
    --ra-card-ink: #78350f;
    border-color: #e6c8a6;
}

.ra-card[data-intent="danger"] {
    --ra-card-accent: #b42318;
    --ra-card-soft: #fff1f2;
    --ra-card-ink: #7f1d1d;
    border-color: #efc0bd;
}

.ra-card[data-intent="violet"] {
    --ra-card-accent: #6d28d9;
    --ra-card-soft: #f5f3ff;
    --ra-card-ink: #4c1d95;
    border-color: #d5c8f5;
}

.ra-card[data-intent="cyan"] {
    --ra-card-accent: #0e7490;
    --ra-card-soft: #ecfeff;
    --ra-card-ink: #164e63;
    border-color: #b8dfe6;
}

.ra-card[data-intent] {
    background: linear-gradient(180deg, var(--ra-card-soft), #fff 76%);
}

.ra-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ra-card-body {
    padding-top: 0;
    flex: 1;
}

.ra-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(222, 222, 217, .8);
    background: rgba(250, 250, 248, .65);
}

.ra-card-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--ra-card-accent) 25%, #deded9);
    border-radius: 10px;
    background: #fff;
    color: var(--ra-card-accent);
}

.ra-card-icon .material-symbols-outlined {
    font-size: 20px;
}

.ra-card-kicker {
    font: 500 8px "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7b7e81;
}

.ra-card-title {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
}

.ra-card-copy {
    margin: 9px 0 0;
    font-size: 11px;
    line-height: 1.65;
    color: #666a6e;
}

.ra-card-meta {
    font: 9px "JetBrains Mono", monospace;
    color: #7c7f82;
}

.ra-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 7px 9px;
    border: 1px solid #d7d8d3;
    border-radius: 8px;
    background: #fff;
    color: #474b4e;
    font-size: 10px;
    font-weight: 600;
    transition: border-color .18s ease, background-color .18s ease;
}

.ra-card-action:hover {
    border-color: #b8bab6;
    background: #f7f7f5;
}

.ra-card-action.is-primary {
    border-color: var(--ra-card-accent);
    background: var(--ra-card-accent);
    color: #fff;
}

.ra-card-action .material-symbols-outlined {
    font-size: 15px;
}

.ra-card-menu {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    color: #6f7376;
}

.ra-card-menu:hover {
    background: rgba(255, 255, 255, .78);
    color: #101214;
}

.ra-card-menu .material-symbols-outlined {
    font-size: 18px;
}

.ra-media-card-visual {
    position: relative;
    display: grid;
    min-height: 170px;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .25), transparent 45%),
        radial-gradient(circle at 38% 28%, #fafaf7, #d5d5cf 72%);
    color: #5d6265;
}

.ra-media-card-visual.dark {
    background:
        linear-gradient(180deg, transparent 30%, rgba(10, 12, 14, .7)),
        radial-gradient(circle at 68% 28%, #64757a, #1f292c 76%);
    color: #fff;
}

.ra-media-card-visual .material-symbols-outlined {
    font-size: 40px;
}

.ra-media-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 6px;
    background: rgba(255, 255, 255, .8);
    font: 500 8px "JetBrains Mono", monospace;
    color: #424649;
    backdrop-filter: blur(8px);
}

.ra-entity-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 15px;
}

.ra-entity-avatar {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d5d6d1;
    border-radius: 12px;
    background: #f2f2ee;
    color: #565a5e;
    font: 600 10px "JetBrains Mono", monospace;
}

.ra-entity-avatar.is-round {
    border-radius: 50%;
}

.ra-entity-row strong,
.ra-entity-row small {
    display: block;
}

.ra-entity-row strong {
    font-size: 12px;
}

.ra-entity-row small {
    margin-top: 4px;
    font-size: 9px;
    color: #7b7e81;
}

.ra-horizontal-card {
    display: grid;
    grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr);
    min-height: 190px;
}

.ra-horizontal-card .ra-media-card-visual {
    min-height: 100%;
}

.ra-stat-card {
    padding: 17px;
}

.ra-stat-card .ra-card-icon {
    width: 34px;
    height: 34px;
}

.ra-stat-value {
    display: block;
    margin-top: 28px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.05em;
}

.ra-stat-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    font: 500 9px "JetBrains Mono", monospace;
    color: #15803d;
}

.ra-stat-delta.is-down {
    color: #b42318;
}

.ra-progress-mini {
    height: 5px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3e4df;
}

.ra-progress-mini i {
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: var(--ra-card-accent);
}

.ra-task-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 16px;
}

.ra-task-state {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #d5d6d1;
    border-radius: 10px;
    background: #fff;
    color: var(--ra-card-accent);
}

.ra-task-state .material-symbols-outlined {
    font-size: 18px;
}

.ra-task-card strong,
.ra-task-card small {
    display: block;
}

.ra-task-card strong {
    font-size: 11px;
}

.ra-task-card small {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.55;
    color: #7b7e81;
}

.ra-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ra-select-card {
    position: relative;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d9dad5;
    border-radius: 11px;
    background: #fff;
    text-align: left;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.ra-select-card:hover {
    border-color: #b8bab6;
}

.ra-select-card[aria-pressed="true"] {
    border-color: #8fa3d8;
    background: #f3f5fb;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
}

.ra-select-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #d5d6d1;
    border-radius: 50%;
    background: #fff;
    color: transparent;
}

.ra-select-card[aria-pressed="true"] .ra-select-check {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.ra-select-check .material-symbols-outlined {
    font-size: 14px;
}

.ra-select-card .material-symbols-outlined.ra-select-icon {
    font-size: 24px;
    color: #5f6467;
}

.ra-select-card strong,
.ra-select-card small {
    display: block;
}

.ra-select-card strong {
    margin-top: 18px;
    font-size: 11px;
}

.ra-select-card small {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.55;
    color: #7b7e81;
}

.ra-expand-card .ra-card-head {
    cursor: pointer;
}

.ra-expand-card .ra-expand-icon {
    transition: transform .2s ease;
}

.ra-expand-card[open] .ra-expand-icon {
    transform: rotate(180deg);
}

.ra-expand-card summary {
    list-style: none;
}

.ra-expand-card summary::-webkit-details-marker {
    display: none;
}

.ra-expand-content {
    padding: 0 16px 16px;
    font-size: 11px;
    line-height: 1.7;
    color: #62666a;
}

.ra-overlay-card {
    position: relative;
    min-height: 270px;
    overflow: hidden;
    border-radius: 12px;
    background:
        linear-gradient(180deg, transparent 22%, rgba(9, 11, 12, .88) 100%),
        radial-gradient(circle at 65% 28%, #7d898c, #1e282b 74%);
    color: #fff;
}

.ra-overlay-card::before {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, .22);
    content: "";
}

.ra-overlay-card-copy {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    z-index: 1;
}

.ra-overlay-card-copy h3 {
    margin: 8px 0 6px;
    font-size: 17px;
}

.ra-overlay-card-copy p {
    margin: 0;
    font-size: 10px;
    line-height: 1.6;
    color: #d1d5d6;
}

.ra-plan-price {
    display: block;
    margin-top: 26px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.045em;
}

.ra-plan-price small {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    color: #777a7d;
}

.ra-plan-list {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ra-plan-list li {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    font-size: 10px;
    line-height: 1.45;
    color: #62666a;
}

.ra-plan-list .material-symbols-outlined {
    font-size: 15px;
    color: var(--ra-card-accent);
}

.ra-file-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 14px;
}

.ra-file-card .ra-card-icon {
    width: 40px;
    height: 40px;
}

.ra-file-card strong,
.ra-file-card small {
    display: block;
}

.ra-file-card strong {
    font-size: 11px;
}

.ra-file-card small {
    margin-top: 4px;
    font-size: 9px;
    color: #7b7e81;
}

.ra-state-card {
    display: grid;
    min-height: 225px;
    place-items: center;
    padding: 22px;
    text-align: center;
}

.ra-state-card .ra-card-icon {
    margin-inline: auto;
}

.ra-state-card h3 {
    margin: 16px 0 7px;
    font-size: 13px;
}

.ra-state-card p {
    max-width: 260px;
    margin: 0 auto;
    font-size: 10px;
    line-height: 1.65;
    color: #707477;
}

.ra-skeleton-line {
    height: 8px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7e7e2;
}

.ra-skeleton-line::after,
.ra-skeleton-box::after {
    display: block;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: ra-shimmer 1.6s infinite;
    content: "";
}

.ra-skeleton-box {
    height: 82px;
    overflow: hidden;
    border-radius: 9px;
    background: #e7e7e2;
}

@keyframes ra-shimmer {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(260%);
    }
}

.ra-card-browser {
    overflow: hidden;
    border: 1px solid #deded9;
    border-radius: 12px;
}

.ra-card-browser-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #deded9;
    background: #fafaf8;
}

.ra-card-browser-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    transition: grid-template-columns .18s ease;
}

.ra-card-browser[data-layout="list"] .ra-card-browser-track {
    grid-template-columns: 1fr;
}

.ra-card-browser[data-layout="list"] .ra-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
}

.ra-card-browser[data-layout="list"] .ra-card-head,
.ra-card-browser[data-layout="list"] .ra-card-body,
.ra-card-browser[data-layout="list"] .ra-card-foot {
    border: 0;
    padding: 12px;
}

.ra-card-browser[data-layout="compact"] .ra-card-browser-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ra-card-browser[data-layout="compact"] .ra-card-copy,
.ra-card-browser[data-layout="compact"] .ra-card-foot {
    display: none;
}

.ra-card-browser[data-layout="carousel"] .ra-card-browser-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ra-card-browser[data-layout="carousel"] .ra-card-browser-track::-webkit-scrollbar {
    display: none;
}

.ra-card-browser[data-layout="carousel"] .ra-card {
    width: 230px;
    flex: 0 0 auto;
}

/* 96–105 · Popovers, tooltips, dialogs, sheets, and toasts */
#ra-overlay-root {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}

#ra-overlay-root>* {
    pointer-events: auto;
}

.ra-overlay-demo-grid,
.ra-tooltip-grid,
.ra-modal-grid,
.ra-toast-grid,
.ra-drawer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ra-overlay-trigger,
.ra-toast-trigger,
.ra-modal-trigger,
.ra-drawer-trigger {
    display: grid;
    min-height: 104px;
    place-items: center;
    gap: 7px;
    padding: 14px;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #fafaf8;
    color: #45494c;
    text-align: center;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.ra-overlay-trigger:hover,
.ra-toast-trigger:hover,
.ra-modal-trigger:hover,
.ra-drawer-trigger:hover {
    border-color: #b8bab6;
    background: #fff;
    transform: translateY(-1px);
}

.ra-overlay-trigger .material-symbols-outlined,
.ra-toast-trigger .material-symbols-outlined,
.ra-modal-trigger .material-symbols-outlined,
.ra-drawer-trigger .material-symbols-outlined {
    font-size: 24px;
}

.ra-overlay-trigger strong,
.ra-overlay-trigger small,
.ra-toast-trigger strong,
.ra-toast-trigger small,
.ra-modal-trigger strong,
.ra-modal-trigger small,
.ra-drawer-trigger strong,
.ra-drawer-trigger small {
    display: block;
}

.ra-overlay-trigger strong,
.ra-toast-trigger strong,
.ra-modal-trigger strong,
.ra-drawer-trigger strong {
    font-size: 10px;
}

.ra-overlay-trigger small,
.ra-toast-trigger small,
.ra-modal-trigger small,
.ra-drawer-trigger small {
    font-size: 8px;
    line-height: 1.45;
    color: #7b7e81;
}

.ra-popover-live {
    position: fixed;
    width: min(320px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 24px));
    overflow: auto;
    border: 1px solid #d1d2cd;
    border-radius: 13px;
    background: rgba(255, 255, 255, .98);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transform: translateY(-5px) scale(.985);
    transform-origin: top center;
    transition: opacity .16s ease, transform .2s var(--ease-out);
}

.ra-popover-live.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ra-popover-live[data-intent="info"] {
    border-color: #b8c4e4;
}

.ra-popover-live[data-intent="success"] {
    border-color: #bad9c5;
}

.ra-popover-live[data-intent="warning"] {
    border-color: #e2c39d;
}

.ra-popover-live[data-intent="danger"] {
    border-color: #efc0bd;
}

.ra-popover-live[data-intent="violet"] {
    border-color: #d5c8f5;
}

.ra-popover-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 13px;
    border-bottom: 1px solid #e5e5e1;
    background: #fafaf8;
}

.ra-popover-head .ra-card-icon {
    width: 32px;
    height: 32px;
}

.ra-popover-head strong,
.ra-popover-head small {
    display: block;
}

.ra-popover-head strong {
    font-size: 11px;
}

.ra-popover-head small {
    margin-top: 3px;
    font-size: 8px;
    color: #7b7e81;
}

.ra-popover-body {
    padding: 12px;
}

.ra-popover-copy {
    margin: 0;
    font-size: 10px;
    line-height: 1.65;
    color: #62666a;
}

.ra-popover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.ra-menu-list {
    display: grid;
    gap: 3px;
}

.ra-menu-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    color: #45494c;
    text-align: left;
}

.ra-menu-item:hover,
.ra-menu-item:focus-visible {
    background: #f1f1ed;
}

.ra-menu-item>.material-symbols-outlined {
    font-size: 17px;
    color: #6e7275;
}

.ra-menu-item strong,
.ra-menu-item small {
    display: block;
}

.ra-menu-item strong {
    font-size: 10px;
}

.ra-menu-item small {
    margin-top: 3px;
    font-size: 8px;
    color: #85888b;
}

.ra-menu-item>kbd {
    font: 8px "JetBrains Mono", monospace;
    color: #85888b;
}

.ra-filter-popover-grid,
.ra-color-grid,
.ra-date-grid {
    display: grid;
    gap: 8px;
}

.ra-filter-popover-grid label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #ecece8;
    font-size: 10px;
}

.ra-color-grid {
    grid-template-columns: repeat(6, 1fr);
}

.ra-color-swatch {
    aspect-ratio: 1;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px #d1d2cd;
}

.ra-color-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px #101214;
}

.ra-date-grid {
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.ra-date-grid span,
.ra-date-grid button {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 7px;
    font: 9px "JetBrains Mono", monospace;
}

.ra-date-grid span {
    color: #8a8d90;
}

.ra-date-grid button:hover,
.ra-date-grid button[aria-pressed="true"] {
    background: #1d4ed8;
    color: #fff;
}

.ra-tooltip-demo {
    position: relative;
    display: grid;
    min-height: 96px;
    place-items: center;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #fafaf8;
}

.ra-tooltip-target {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #d5d6d1;
    border-radius: 10px;
    background: #fff;
    color: #55595d;
}

.ra-tooltip-target .material-symbols-outlined {
    font-size: 20px;
}

.ra-tooltip-live {
    position: fixed;
    z-index: 220;
    max-width: 240px;
    padding: 7px 9px;
    border-radius: 7px;
    background: #101214;
    color: #fff;
    font-size: 9px;
    line-height: 1.45;
    box-shadow: 0 5px 16px rgba(16, 18, 20, .2);
    opacity: 0;
    transform: translateY(2px) scale(.98);
    transition: opacity .12s ease, transform .14s ease;
    pointer-events: none;
}

.ra-tooltip-live.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ra-tooltip-live[data-intent="info"] {
    background: #1d4ed8;
}

.ra-tooltip-live[data-intent="success"] {
    background: #15803d;
}

.ra-tooltip-live[data-intent="warning"] {
    background: #92400e;
}

.ra-tooltip-live[data-intent="danger"] {
    background: #b42318;
}

.ra-tooltip-live[data-intent="violet"] {
    background: #6d28d9;
}

.ra-tooltip-live[data-intent="cyan"] {
    background: #0e7490;
}

.ra-overlay-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(10, 12, 14, .52);
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(5px);
}

.ra-overlay-backdrop.is-open {
    opacity: 1;
}

.ra-dialog {
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .25);
    transform: translateY(10px) scale(.98);
    transition: transform .24s var(--ease-out);
}

.ra-overlay-backdrop.is-open .ra-dialog {
    transform: translateY(0) scale(1);
}

.ra-dialog[data-size="small"] {
    width: min(400px, calc(100vw - 24px));
}

.ra-dialog[data-size="medium"] {
    width: min(560px, calc(100vw - 24px));
}

.ra-dialog[data-size="large"] {
    width: min(820px, calc(100vw - 24px));
}

.ra-dialog[data-size="full"] {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    max-height: none;
}

.ra-dialog[data-intent="info"] {
    border-top: 4px solid #1d4ed8;
}

.ra-dialog[data-intent="success"] {
    border-top: 4px solid #15803d;
}

.ra-dialog[data-intent="warning"] {
    border-top: 4px solid #b45309;
}

.ra-dialog[data-intent="danger"] {
    border-top: 4px solid #b42318;
}

.ra-dialog[data-intent="violet"] {
    border-top: 4px solid #6d28d9;
}

.ra-dialog[data-intent="cyan"] {
    border-top: 4px solid #0e7490;
}

.ra-dialog-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: start;
    padding: 18px;
    border-bottom: 1px solid #e5e5e1;
}

.ra-dialog-head .ra-card-icon {
    width: 38px;
    height: 38px;
}

.ra-dialog-head h3 {
    margin: 0;
    font-size: 15px;
}

.ra-dialog-head p {
    margin: 5px 0 0;
    font-size: 10px;
    line-height: 1.55;
    color: #737679;
}

.ra-dialog-close {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    color: #6c7073;
}

.ra-dialog-close:hover {
    background: #f1f1ed;
    color: #101214;
}

.ra-dialog-close .material-symbols-outlined {
    font-size: 18px;
}

.ra-dialog-body {
    padding: 18px;
}

.ra-dialog-body p {
    margin: 0;
    font-size: 11px;
    line-height: 1.7;
    color: #5f6366;
}

.ra-dialog-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #e5e5e1;
    background: #fafaf8;
}

.ra-command-search {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    border: 1px solid #d7d8d3;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

.ra-command-search input {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 12px;
}

.ra-command-search input:focus {
    box-shadow: none;
    outline: 0;
}

.ra-command-results {
    display: grid;
    gap: 3px;
    margin-top: 10px;
}

.ra-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 14, .48);
    opacity: 0;
    transition: opacity .18s ease;
}

.ra-drawer-backdrop.is-open {
    opacity: 1;
}

.ra-drawer {
    position: absolute;
    display: flex;
    flex-direction: column;
    border: 1px solid #deded9;
    background: #fff;
    box-shadow: 0 24px 64px rgba(10, 12, 14, .24);
    transition: transform .26s var(--ease-out);
}

.ra-drawer[data-side="right"] {
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, calc(100vw - 24px));
    transform: translateX(100%);
}

.ra-drawer[data-side="left"] {
    top: 0;
    bottom: 0;
    left: 0;
    width: min(420px, calc(100vw - 24px));
    transform: translateX(-100%);
}

.ra-drawer[data-side="bottom"] {
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(70vh, 640px);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
}

.ra-drawer[data-side="full"] {
    inset: 12px;
    border-radius: 16px;
    transform: translateY(18px) scale(.98);
    opacity: 0;
}

.ra-drawer-backdrop.is-open .ra-drawer {
    transform: translate(0) scale(1);
    opacity: 1;
}

.ra-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #e5e5e1;
}

.ra-drawer-head h3 {
    margin: 0;
    font-size: 15px;
}

.ra-drawer-head p {
    margin: 5px 0 0;
    font-size: 9px;
    line-height: 1.55;
    color: #737679;
}

.ra-drawer-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.ra-drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #e5e5e1;
    background: #fafaf8;
}

.ra-toast-region {
    position: fixed;
    z-index: 230;
    display: flex;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
    pointer-events: none !important;
}

.ra-toast-region[data-position="top-left"] {
    top: 12px;
    left: 12px;
}

.ra-toast-region[data-position="top-center"] {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.ra-toast-region[data-position="top-right"] {
    top: 12px;
    right: 12px;
}

.ra-toast-region[data-position="bottom-left"] {
    bottom: 12px;
    left: 12px;
    flex-direction: column-reverse;
}

.ra-toast-region[data-position="bottom-center"] {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
}

.ra-toast-region[data-position="bottom-right"] {
    right: 12px;
    bottom: 12px;
    flex-direction: column-reverse;
}

.ra-toast {
    --ra-toast-accent: #4b5563;
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    overflow: hidden;
    border: 1px solid #d5d6d1;
    border-left: 4px solid var(--ra-toast-accent);
    border-radius: 11px;
    background: rgba(255, 255, 255, .98);
    padding: 12px;
    box-shadow: 0 14px 38px rgba(16, 18, 20, .16);
    opacity: 0;
    transform: translateY(-8px) scale(.985);
    transition: opacity .18s ease, transform .22s var(--ease-out);
    pointer-events: auto;
}

.ra-toast.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ra-toast.is-leaving {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
}

.ra-toast[data-intent="info"] {
    --ra-toast-accent: #1d4ed8;
}

.ra-toast[data-intent="success"] {
    --ra-toast-accent: #15803d;
}

.ra-toast[data-intent="warning"] {
    --ra-toast-accent: #b45309;
}

.ra-toast[data-intent="danger"] {
    --ra-toast-accent: #b42318;
}

.ra-toast[data-intent="violet"] {
    --ra-toast-accent: #6d28d9;
}

.ra-toast[data-intent="cyan"] {
    --ra-toast-accent: #0e7490;
}

.ra-toast-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ra-toast-accent) 10%, #fff);
    color: var(--ra-toast-accent);
}

.ra-toast-icon .material-symbols-outlined {
    font-size: 18px;
}

.ra-toast strong,
.ra-toast p {
    display: block;
}

.ra-toast strong {
    font-size: 10px;
}

.ra-toast p {
    margin: 4px 0 0;
    font-size: 9px;
    line-height: 1.5;
    color: #6c7073;
}

.ra-toast-action {
    margin-top: 7px;
    font-size: 9px;
    font-weight: 600;
    color: var(--ra-toast-accent);
}

.ra-toast-close {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 7px;
    color: #777a7d;
}

.ra-toast-close:hover {
    background: #f1f1ed;
}

.ra-toast-close .material-symbols-outlined {
    font-size: 15px;
}

.ra-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #ecece8;
}

.ra-toast-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--ra-toast-accent);
    transform-origin: left;
    animation: ra-toast-life var(--duration, 5s) linear forwards;
}

@keyframes ra-toast-life {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* 106–112 · Controls and system states */
.ra-button-grid,
.ra-form-grid,
.ra-badge-grid,
.ra-avatar-grid,
.ra-navigation-grid,
.ra-loading-grid,
.ra-system-state-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ra-demo-panel {
    min-width: 0;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #fafaf8;
    padding: 16px;
}

.ra-demo-panel h3 {
    margin: 0 0 13px;
    font-size: 12px;
}

.ra-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ra-button {
    --ra-button-accent: #101214;
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #d4d5d0;
    border-radius: 9px;
    background: #fff;
    color: #34373a;
    font-size: 10px;
    font-weight: 600;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.ra-button:hover {
    border-color: #b5b8b4;
    background: #f7f7f5;
}

.ra-button:active {
    transform: translateY(1px);
}

.ra-button.is-primary {
    border-color: var(--ra-button-accent);
    background: var(--ra-button-accent);
    color: #fff;
}

.ra-button.is-tonal {
    border-color: color-mix(in srgb, var(--ra-button-accent) 22%, #d4d5d0);
    background: color-mix(in srgb, var(--ra-button-accent) 9%, #fff);
    color: var(--ra-button-accent);
}

.ra-button.is-text {
    border-color: transparent;
    background: transparent;
    color: var(--ra-button-accent);
}

.ra-button.is-icon {
    width: 36px;
    padding: 0;
}

.ra-button.is-small {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 9px;
}

.ra-button.is-large {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 11px;
}

.ra-button[data-intent="info"] {
    --ra-button-accent: #1d4ed8;
}

.ra-button[data-intent="success"] {
    --ra-button-accent: #15803d;
}

.ra-button[data-intent="warning"] {
    --ra-button-accent: #b45309;
}

.ra-button[data-intent="danger"] {
    --ra-button-accent: #b42318;
}

.ra-button[data-intent="violet"] {
    --ra-button-accent: #6d28d9;
}

.ra-button[data-intent="cyan"] {
    --ra-button-accent: #0e7490;
}

.ra-button[disabled],
.ra-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .46;
    transform: none;
}

.ra-button .material-symbols-outlined {
    font-size: 17px;
}

.ra-field {
    display: grid;
    gap: 6px;
}

.ra-field+.ra-field {
    margin-top: 12px;
}

.ra-field label,
.ra-field legend {
    font-size: 10px;
    font-weight: 600;
    color: #45494c;
}

.ra-field input,
.ra-field select,
.ra-field textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d4d5d0;
    border-radius: 9px;
    background: #fff;
    padding: 9px 11px;
    font-size: 11px;
    color: #34373a;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ra-field textarea {
    min-height: 86px;
    resize: vertical;
}

.ra-field input:focus,
.ra-field select:focus,
.ra-field textarea:focus {
    border-color: #8fa3d8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
    outline: 0;
}

.ra-field[data-state="success"] input,
.ra-field[data-state="success"] select,
.ra-field[data-state="success"] textarea {
    border-color: #70b78a;
}

.ra-field[data-state="warning"] input,
.ra-field[data-state="warning"] select,
.ra-field[data-state="warning"] textarea {
    border-color: #d8a564;
}

.ra-field[data-state="error"] input,
.ra-field[data-state="error"] select,
.ra-field[data-state="error"] textarea {
    border-color: #d77973;
}

.ra-field-help {
    font-size: 9px;
    line-height: 1.5;
    color: #7b7e81;
}

.ra-field[data-state="success"] .ra-field-help {
    color: #15803d;
}

.ra-field[data-state="warning"] .ra-field-help {
    color: #b45309;
}

.ra-field[data-state="error"] .ra-field-help {
    color: #b42318;
}

.ra-input-with-action {
    position: relative;
}

.ra-input-with-action input {
    padding-right: 42px;
}

.ra-input-action {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 7px;
    color: #6e7275;
}

.ra-input-action:hover {
    background: #f1f1ed;
}

.ra-input-action .material-symbols-outlined {
    font-size: 17px;
}

.ra-choice-list {
    display: grid;
    gap: 9px;
}

.ra-choice-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #55595d;
}

.ra-switch {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
}

.ra-switch input {
    position: absolute;
    opacity: 0;
}

.ra-switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cfd0cb;
    transition: background-color .18s ease;
}

.ra-switch i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 18, 20, .2);
    content: "";
    transition: transform .18s ease;
}

.ra-switch input:checked+i {
    background: #1d4ed8;
}

.ra-switch input:checked+i::after {
    transform: translateX(16px);
}

.ra-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ra-badge {
    --ra-badge-accent: #4b5563;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--ra-badge-accent) 24%, #d6d7d2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ra-badge-accent) 7%, #fff);
    color: var(--ra-badge-accent);
    font: 500 8px "JetBrains Mono", monospace;
}

.ra-badge.is-square {
    border-radius: 6px;
}

.ra-badge.is-solid {
    border-color: var(--ra-badge-accent);
    background: var(--ra-badge-accent);
    color: #fff;
}

.ra-badge[data-intent="info"] {
    --ra-badge-accent: #1d4ed8;
}

.ra-badge[data-intent="success"] {
    --ra-badge-accent: #15803d;
}

.ra-badge[data-intent="warning"] {
    --ra-badge-accent: #b45309;
}

.ra-badge[data-intent="danger"] {
    --ra-badge-accent: #b42318;
}

.ra-badge[data-intent="violet"] {
    --ra-badge-accent: #6d28d9;
}

.ra-badge[data-intent="cyan"] {
    --ra-badge-accent: #0e7490;
}

.ra-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ra-avatar-stack {
    display: flex;
    align-items: center;
    padding-left: 8px;
}

.ra-avatar {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    overflow: hidden;
    margin-left: -8px;
    border: 2px solid #fafaf8;
    border-radius: 50%;
    background: #e9e9e4;
    color: #44484b;
    font: 600 9px "JetBrains Mono", monospace;
}

.ra-avatar.is-square {
    border-radius: 11px;
}

.ra-avatar-status {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid #fafaf8;
    border-radius: 50%;
    background: #15803d;
}

.ra-page-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.ra-page-button {
    display: grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #d7d8d3;
    border-radius: 8px;
    background: #fff;
    color: #5d6164;
    font: 500 9px "JetBrains Mono", monospace;
}

.ra-page-button:hover,
.ra-page-button[aria-current="page"] {
    border-color: #101214;
    background: #101214;
    color: #fff;
}

.ra-page-button .material-symbols-outlined {
    font-size: 16px;
}

.ra-mini-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid #deded9;
}

.ra-mini-tab {
    min-width: max-content;
    padding: 9px 10px;
    border-bottom: 2px solid transparent;
    font: 500 9px "JetBrains Mono", monospace;
    color: #777a7d;
}

.ra-mini-tab[aria-selected="true"] {
    border-bottom-color: #101214;
    color: #101214;
}

.ra-mini-panel {
    min-height: 76px;
    padding-top: 14px;
    font-size: 10px;
    line-height: 1.65;
    color: #62666a;
}

.ra-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.ra-stepper-step {
    position: relative;
    padding-top: 32px;
    text-align: center;
    font-size: 9px;
    color: #777a7d;
}

.ra-stepper-step::before {
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    height: 1px;
    background: #d5d6d1;
    content: "";
}

.ra-stepper-step:first-child::before {
    left: 50%;
}

.ra-stepper-step:last-child::before {
    right: 50%;
}

.ra-stepper-step span {
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #d5d6d1;
    border-radius: 50%;
    background: #fff;
    font: 500 8px "JetBrains Mono", monospace;
    transform: translateX(-50%);
}

.ra-stepper-step.is-complete span {
    border-color: #15803d;
    background: #15803d;
    color: #fff;
}

.ra-stepper-step.is-current span {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.ra-loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dfe0dc;
    border-top-color: #1d4ed8;
    border-radius: 50%;
    animation: ra-spin .8s linear infinite;
}

@keyframes ra-spin {
    to {
        transform: rotate(360deg);
    }
}

.ra-progress-stack {
    display: grid;
    gap: 10px;
}

.ra-progress-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: center;
    font-size: 9px;
    color: #686c6f;
}

.ra-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4e5e0;
}

.ra-progress-track i {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: var(--progress-color, #4b5563);
    transition: width .3s ease;
}

.ra-system-state {
    display: grid;
    min-height: 240px;
    place-items: center;
    padding: 20px;
    border: 1px solid #deded9;
    border-radius: 11px;
    background: #fafaf8;
    text-align: center;
}

.ra-system-state .ra-card-icon {
    margin-inline: auto;
}

.ra-system-state h3 {
    margin: 16px 0 7px;
    font-size: 13px;
}

.ra-system-state p {
    max-width: 270px;
    margin: 0 auto;
    font-size: 10px;
    line-height: 1.65;
    color: #707477;
}

.ra-system-state .ra-button-row {
    justify-content: center;
    margin-top: 14px;
}

.ra-extension-close {
    margin: 0 -42px -38px;
    padding: 34px 24px;
    background: #101214;
    color: #fff;
    text-align: center;
}

.ra-extension-close .material-symbols-outlined {
    font-size: 28px;
    color: #cdd1d3;
}

.ra-extension-close strong {
    display: block;
    margin-top: 11px;
    font-size: 19px;
    letter-spacing: -.025em;
}

.ra-extension-close p {
    max-width: 620px;
    margin: 9px auto 0;
    font-size: 11px;
    line-height: 1.65;
    color: #aeb2b5;
}

/* Legacy block interaction affordances added by the unified controller. */
.legacy-disclosure-answer {
    display: none;
    padding: 16px 0;
    border-bottom: 1px solid #deded9;
    font-size: 11px;
    line-height: 1.7;
    color: #62666a;
}

.disclosure-row[aria-expanded="true"]+.legacy-disclosure-answer {
    display: block;
}

.legacy-annotation-note {
    position: absolute;
    z-index: 4;
    width: min(250px, calc(100% - 24px));
    padding: 11px;
    border: 1px solid #d3d4cf;
    border-radius: 9px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 28px rgba(16, 18, 20, .14);
    font-size: 10px;
    line-height: 1.55;
    color: #55595d;
}

.legacy-annotation-note strong {
    display: block;
    margin-bottom: 5px;
    color: #2f3336;
}

.tab-panel-static.is-changing {
    opacity: 0;
    transform: translateY(4px);
}

.tab-panel-static {
    transition: opacity .14s ease, transform .18s ease;
}

[data-audio-player].is-playing .round-media-button,
[data-video-story].is-playing .video-play-button {
    background: rgba(255, 255, 255, .2);
}

@media (max-width: 920px) {

    .ra-index-grid,
    .ra-title-position-grid,
    .ra-reading-grid,
    .ra-microcopy-grid,
    .ra-inline-grid,
    .ra-card-grid,
    .ra-overlay-demo-grid,
    .ra-tooltip-grid,
    .ra-modal-grid,
    .ra-toast-grid,
    .ra-drawer-grid,
    .ra-button-grid,
    .ra-form-grid,
    .ra-badge-grid,
    .ra-avatar-grid,
    .ra-navigation-grid,
    .ra-loading-grid,
    .ra-system-state-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ra-card-browser-track,
    .ra-card-browser[data-layout="compact"] .ra-card-browser-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ra-type-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ra-position-module[data-position="right"],
    .ra-position-module[data-position="left"] {
        grid-template-columns: 1fr;
    }

    .ra-position-module[data-position="right"] .ra-position-copy {
        order: 0;
    }

    .ra-horizontal-card {
        grid-template-columns: 1fr;
    }

    .ra-selection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ra-card-grid.is-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .ra-index-grid,
    .ra-title-position-grid,
    .ra-reading-grid,
    .ra-microcopy-grid,
    .ra-inline-grid,
    .ra-card-grid,
    .ra-selection-grid,
    .ra-overlay-demo-grid,
    .ra-tooltip-grid,
    .ra-modal-grid,
    .ra-toast-grid,
    .ra-drawer-grid,
    .ra-button-grid,
    .ra-form-grid,
    .ra-badge-grid,
    .ra-avatar-grid,
    .ra-navigation-grid,
    .ra-loading-grid,
    .ra-system-state-grid,
    .ra-card-browser-track,
    .ra-card-browser[data-layout="compact"] .ra-card-browser-track {
        grid-template-columns: 1fr;
    }

    .ra-align-preview {
        padding: 22px 18px;
    }

    .ra-align-preview h3 {
        font-size: 25px;
    }

    .ra-reading-sample.is-columns p {
        column-count: 1;
    }

    .ra-task-card,
    .ra-file-card {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .ra-task-card> :last-child,
    .ra-file-card> :last-child {
        grid-column: 2;
        justify-self: start;
    }

    .ra-overlay-backdrop {
        padding: 8px;
    }

    .ra-dialog,
    .ra-dialog[data-size="small"],
    .ra-dialog[data-size="medium"],
    .ra-dialog[data-size="large"] {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .ra-dialog-head {
        grid-template-columns: 36px minmax(0, 1fr) 30px;
        padding: 15px;
    }

    .ra-dialog-body,
    .ra-dialog-foot {
        padding: 15px;
    }

    .ra-toast-region {
        right: 8px !important;
        left: 8px !important;
        width: auto;
        transform: none !important;
    }

    .ra-extension-close {
        margin-right: -20px;
        margin-bottom: -24px;
        margin-left: -20px;
    }
}

/* Intent propagation for overlay demos and non-card state surfaces. */
.ra-overlay-trigger,
.ra-modal-trigger,
.ra-toast-trigger {
    --ra-demo-accent: #4b5563;
}

.ra-overlay-trigger[data-popover-intent="info"],
.ra-modal-trigger[data-modal-intent="info"],
.ra-toast-trigger[data-toast-intent="info"] {
    --ra-demo-accent: #1d4ed8;
}

.ra-overlay-trigger[data-popover-intent="success"],
.ra-modal-trigger[data-modal-intent="success"],
.ra-toast-trigger[data-toast-intent="success"] {
    --ra-demo-accent: #15803d;
}

.ra-overlay-trigger[data-popover-intent="warning"],
.ra-modal-trigger[data-modal-intent="warning"],
.ra-toast-trigger[data-toast-intent="warning"] {
    --ra-demo-accent: #b45309;
}

.ra-overlay-trigger[data-popover-intent="danger"],
.ra-modal-trigger[data-modal-intent="danger"],
.ra-toast-trigger[data-toast-intent="danger"] {
    --ra-demo-accent: #b42318;
}

.ra-overlay-trigger[data-popover-intent="violet"],
.ra-modal-trigger[data-modal-intent="violet"],
.ra-toast-trigger[data-toast-intent="violet"] {
    --ra-demo-accent: #6d28d9;
}

.ra-overlay-trigger[data-popover-intent="cyan"],
.ra-modal-trigger[data-modal-intent="cyan"],
.ra-toast-trigger[data-toast-intent="cyan"] {
    --ra-demo-accent: #0e7490;
}

.ra-overlay-trigger>.material-symbols-outlined,
.ra-modal-trigger>.material-symbols-outlined,
.ra-toast-trigger>.material-symbols-outlined {
    color: var(--ra-demo-accent);
}

.ra-popover-live {
    --ra-card-accent: #4b5563;
    --ra-overlay-soft: #f7f7f5;
}

.ra-popover-live[data-intent="info"] {
    --ra-card-accent: #1d4ed8;
    --ra-overlay-soft: #eff6ff;
}

.ra-popover-live[data-intent="success"] {
    --ra-card-accent: #15803d;
    --ra-overlay-soft: #f0fdf4;
}

.ra-popover-live[data-intent="warning"] {
    --ra-card-accent: #b45309;
    --ra-overlay-soft: #fff7ed;
}

.ra-popover-live[data-intent="danger"] {
    --ra-card-accent: #b42318;
    --ra-overlay-soft: #fff1f2;
}

.ra-popover-live[data-intent="violet"] {
    --ra-card-accent: #6d28d9;
    --ra-overlay-soft: #f5f3ff;
}

.ra-popover-live[data-intent="cyan"] {
    --ra-card-accent: #0e7490;
    --ra-overlay-soft: #ecfeff;
}

.ra-popover-live[data-intent] .ra-popover-head {
    background: linear-gradient(180deg, var(--ra-overlay-soft), #fafaf8);
}

.ra-dialog {
    --ra-card-accent: #4b5563;
    --ra-dialog-soft: #f7f7f5;
}

.ra-dialog[data-intent="info"] {
    --ra-card-accent: #1d4ed8;
    --ra-dialog-soft: #eff6ff;
}

.ra-dialog[data-intent="success"] {
    --ra-card-accent: #15803d;
    --ra-dialog-soft: #f0fdf4;
}

.ra-dialog[data-intent="warning"] {
    --ra-card-accent: #b45309;
    --ra-dialog-soft: #fff7ed;
}

.ra-dialog[data-intent="danger"] {
    --ra-card-accent: #b42318;
    --ra-dialog-soft: #fff1f2;
}

.ra-dialog[data-intent="violet"] {
    --ra-card-accent: #6d28d9;
    --ra-dialog-soft: #f5f3ff;
}

.ra-dialog[data-intent="cyan"] {
    --ra-card-accent: #0e7490;
    --ra-dialog-soft: #ecfeff;
}

.ra-dialog[data-intent] .ra-dialog-head {
    background: linear-gradient(180deg, var(--ra-dialog-soft), #fff);
}

.ra-system-state {
    --ra-card-accent: #4b5563;
    --ra-system-soft: #fafaf8;
}

.ra-system-state[data-intent="info"] {
    --ra-card-accent: #1d4ed8;
    --ra-system-soft: #eff6ff;
    border-color: #bfcced;
}

.ra-system-state[data-intent="success"] {
    --ra-card-accent: #15803d;
    --ra-system-soft: #f0fdf4;
    border-color: #bad9c5;
}

.ra-system-state[data-intent="warning"] {
    --ra-card-accent: #b45309;
    --ra-system-soft: #fff7ed;
    border-color: #e6c8a6;
}

.ra-system-state[data-intent="danger"] {
    --ra-card-accent: #b42318;
    --ra-system-soft: #fff1f2;
    border-color: #efc0bd;
}

.ra-system-state[data-intent="violet"] {
    --ra-card-accent: #6d28d9;
    --ra-system-soft: #f5f3ff;
    border-color: #d5c8f5;
}

.ra-system-state[data-intent="cyan"] {
    --ra-card-accent: #0e7490;
    --ra-system-soft: #ecfeff;
    border-color: #b8dfe6;
}

.ra-system-state[data-intent] {
    background: linear-gradient(180deg, var(--ra-system-soft), #fff 82%);
}

.max-w-\[1600px\] {
    max-width: 1600px;
}

.break-line {
    margin: 36px;
}

/* Trending discovery page */
.discovery-page {
    min-height: 100vh;
    padding-top: var(--header-height);
}

.discovery-subnav {
    position: sticky;
    top: var(--header-height);
    z-index: 40;
    border-bottom: 1px solid rgba(207, 208, 203, .84);
    background: rgba(247, 247, 245, .9);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);

    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: #e5e7eb;
    justify-items: center;
}

.discovery-subnav-inner {
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 72px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px 1rem;
}

.compact-search {
    position: relative;
    min-width: 0;
}

.compact-search input {
    width: 100%;
    height: 44px;
    border: 1px solid #d2d3ce;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    padding: 0 78px 0 42px;
    color: #101214;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(16, 18, 20, .03);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.compact-search input:focus {
    border-color: #9ea4b3;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, .07);
    outline: 0;
}

.compact-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #777b7e;
    transform: translateY(-50%);
    pointer-events: none;
}

.compact-search-kbd {
    position: absolute;
    top: 50%;
    right: 10px;
    border: 1px solid #dddeda;
    border-radius: 6px;
    background: #f4f4f1;
    padding: 3px 6px;
    color: #777b7e;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    transform: translateY(-50%);
    pointer-events: none;
}

.stream-tabs {
    display: flex;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.stream-tabs::-webkit-scrollbar {
    display: none;
}

.stream-tab {
    min-width: max-content;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 11px;
    color: #666a6e;
    font-size: 11px;
    font-weight: 600;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.stream-tab:hover {
    border-color: #dbdcd7;
    background: rgba(255, 255, 255, .75);
    color: #101214;
}

.stream-tab.is-active {
    border-color: #101214;
    background: #101214;
    color: #fff;
}

.stream-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stream-control {
    display: inline-flex;
    height: 36px;
    min-width: max-content;
    align-items: center;
    gap: 6px;
    border: 1px solid #d9dad5;
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    padding: 0 10px;
    color: #55595d;
    font-size: 10px;
    font-weight: 600;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.stream-control:hover,
.stream-control.is-active {
    border-color: #bcbfba;
    background: #fff;
    color: #101214;
}

.discover-shell {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 30px 28px 104px;
}

.discover-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin: 4px 0 18px;
}

.discover-heading h1,
.section-heading h2 {
    letter-spacing: -.035em;
}

.signal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 14px;
    color: #777a7d;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.signal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8463b;
    box-shadow: 0 0 0 4px rgba(216, 70, 59, .09);
}

.story-mosaic {
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: 112px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
}

.story-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(215, 216, 211, .9);
    border-radius: 14px;
    background: #26292c;
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 18, 20, .05);
    isolation: isolate;
}

.story-card>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform .7s var(--ease-out), filter .35s ease;
}

.story-card::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(7, 9, 11, .03) 18%, rgba(7, 9, 11, .22) 52%, rgba(7, 9, 11, .88) 100%);
    content: "";
}

.story-card:hover>img {
    filter: saturate(1.07) contrast(1.03);
    transform: scale(1.035);
}

.story-card:focus-within {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.story-card.hero-card {
    grid-column: span 7;
    grid-row: span 4;
}

.story-card.large-card {
    grid-column: span 5;
    grid-row: span 2;
}

.story-card.medium-card {
    grid-column: span 4;
    grid-row: span 2;
}

.story-card.wide-card {
    grid-column: span 6;
    grid-row: span 2;
}

.story-card.tall-card {
    grid-column: span 3;
    grid-row: span 3;
}

.story-card.small-card {
    grid-column: span 3;
    grid-row: span 2;
}

.story-card.light-card {
    background: #fff;
    color: #101214;
}

.story-card.light-card::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .06) 48%, rgba(247, 247, 245, .96) 100%);
}

.story-card.light-card .story-description,
.story-card.light-card .story-source,
.story-card.light-card .story-kicker {
    color: #5f6367;
}

.story-card.light-card .story-save {
    border-color: rgba(16, 18, 20, .14);
    background: rgba(255, 255, 255, .72);
    color: #101214;
}

.story-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.story-save {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 9px;
    background: rgba(12, 14, 16, .28);
    color: #fff;
    opacity: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .2s var(--ease-out), background-color .18s ease, color .18s ease;
}

.story-card:hover .story-save,
.story-save:focus-visible,
.story-save.is-saved {
    opacity: 1;
    transform: translateY(0);
}

.story-save.is-saved {
    border-color: rgba(255, 255, 255, .72);
    background: #fff;
    color: #c43d34;
}

.story-save.is-saved .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 520, "GRAD" 0, "opsz" 24;
}

.story-copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 18px;
    pointer-events: none;
}

.story-card.hero-card .story-copy {
    padding: clamp(22px, 4vw, 40px);
}

.story-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .74);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.story-kicker::before {
    width: 18px;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: .72;
}

.story-title {
    max-width: 92%;
    font-size: clamp(15px, 1.4vw, 21px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.hero-card .story-title {
    max-width: 720px;
    font-size: clamp(26px, 3.5vw, 48px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.story-description {
    display: -webkit-box;
    max-width: 680px;
    margin-top: 10px;
    overflow: hidden;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.story-source {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
}

.story-source-avatar {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    background: rgba(255, 255, 255, .14);
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    font-weight: 600;
}

.story-card:not(.hero-card) .story-description {
    display: none;
}

.trend-signal-band {
    position: relative;
    display: flex;
    min-height: 58px;
    align-items: center;
    margin: 34px 0;
    overflow: hidden;
    border-radius: 13px;
    background: #0c0e10;
    color: #f5f5f3;
    box-shadow: 0 8px 24px rgba(16, 18, 20, .09);
}

.trend-signal-label {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 58px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    border-right: 1px solid #2a2d30;
    background: #0c0e10;
    padding: 0 20px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.trend-signal-label::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f05a4f;
    box-shadow: 0 0 0 5px rgba(240, 90, 79, .1);
    content: "";
}

.trend-signal-viewport {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.trend-signal-track {
    display: flex;
    width: max-content;
    animation: signal-run 34s linear infinite;
    will-change: transform;
}

.trend-signal-band:hover .trend-signal-track {
    animation-play-state: paused;
}

.trend-signal-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.trend-signal-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    color: #d9d9d6;
    font-size: 11px;
    white-space: nowrap;
}

.trend-signal-item span {
    color: #85898d;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
}

.trend-signal-item::after {
    width: 3px;
    height: 3px;
    margin-left: 18px;
    border-radius: 50%;
    background: #4a4e52;
    content: "";
}

@keyframes signal-run {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

main section h2 {
    padding-bottom: 1.5rem;
}

.logo-mxi span {
    font-family: "VectorBold" !important;
    font-size: xx-large;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.badges {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5em;
    padding: 8px 0;
    font-size: smaller;

    img {
        width: 0.5cm;
        height: auto;
    }
}

.badge {
    width: fit-content;
    padding: .25rem;
    border-radius: .2rem;
    background-color: rgba(63, 128, 234, .175);
    color: #3f80ea;
    font-size: 11px;
}

*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
*,
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

::after,
::before {
    --tw-content: ''
}

:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: Inter, sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

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

b,
strong {
    font-weight: bolder
}

code,
kbd,
pre,
samp {
    font-family: JetBrains Mono, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

[type='text'],
input:where(:not([type])),
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
}

[type='text']:focus,
input:where(:not([type])):focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: #2563eb
}

input::placeholder,
textarea::placeholder {
    color: #6b7280;
    opacity: 1
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0
}

::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit
}

::-webkit-datetime-edit {
    display: inline-flex
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    print-color-adjust: exact
}

[multiple],
[size]:where(select:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    print-color-adjust: unset
}

[type='checkbox'],
[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000
}

[type='checkbox'] {
    border-radius: 0px
}

[type='radio'] {
    border-radius: 100%
}

[type='checkbox']:focus,
[type='radio']:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

[type='checkbox']:checked,
[type='radio']:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat
}

[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active) {
    [type='checkbox']:checked {
        -webkit-appearance: auto;
        appearance: auto
    }
}

[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active) {
    [type='radio']:checked {
        -webkit-appearance: auto;
        appearance: auto
    }
}

[type='checkbox']:checked:hover,
[type='checkbox']:checked:focus,
[type='radio']:checked:hover,
[type='radio']:checked:focus {
    border-color: transparent;
    background-color: currentColor
}

[type='checkbox']:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (forced-colors: active) {
    [type='checkbox']:indeterminate {
        -webkit-appearance: auto;
        appearance: auto
    }
}

[type='checkbox']:indeterminate:hover,
[type='checkbox']:indeterminate:focus {
    border-color: transparent;
    background-color: currentColor
}

[type='file'] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit
}

[type='file']:focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color
}

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

.fixed {
    position: fixed
}

.relative {
    position: relative
}

.top-0 {
    top: 0px
}

.z-50 {
    z-index: 50
}

.\!m-0 {
    margin: 0px !important
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mb-1 {
    margin-bottom: 0.25rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.ml-1 {
    margin-left: 0.25rem
}

.mt-0\.5 {
    margin-top: 0.125rem
}

.mt-1 {
    margin-top: 0.25rem
}

.mt-1\.5 {
    margin-top: 0.375rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-3 {
    margin-top: 0.75rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-7 {
    margin-top: 1.75rem
}

.mt-8 {
    margin-top: 2rem
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.size-4 {
    width: 1rem;
    height: 1rem
}

.h-12 {
    height: 3rem
}

.h-16 {
    height: 4rem
}

.h-4 {
    height: 1rem
}

.h-44 {
    height: 11rem
}

.h-56 {
    height: 14rem
}

.h-7 {
    height: 1.75rem
}

.h-9 {
    height: 2.25rem
}

.h-\[38px\] {
    height: 38px
}

.h-full {
    height: 100%
}

.min-h-\[108px\] {
    min-height: 108px
}

.min-h-screen {
    min-height: 100vh
}

.w-12 {
    width: 3rem
}

.w-4 {
    width: 1rem
}

.w-7 {
    width: 1.75rem
}

.w-9 {
    width: 2.25rem
}

.w-\[60\%\] {
    width: 60%
}

.w-full {
    width: 100%
}

.min-w-0 {
    min-width: 0px
}

.max-w-3xl {
    max-width: 48rem
}

.max-w-\[1600px\] {
    max-width: 1600px
}

.max-w-\[340px\] {
    max-width: 340px
}

.max-w-\[650px\] {
    max-width: 650px
}

.flex-1 {
    flex: 1 1 0%
}

.flex-auto {
    flex: 1 1 auto
}

.shrink-0 {
    flex-shrink: 0
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.flex-col {
    flex-direction: column
}

.place-items-center {
    place-items: center
}

.content-center {
    align-content: center
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-1\.5 {
    gap: 0.375rem
}

.gap-12 {
    gap: 3rem
}

.gap-2 {
    gap: 0.5rem
}

.gap-3 {
    gap: 0.75rem
}

.gap-4 {
    gap: 1rem
}

.gap-8 {
    gap: 2rem
}

.space-y-2> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}

.space-y-4> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.space-y-7> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.75rem * var(--tw-space-y-reverse))
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-y-auto {
    overflow-y: auto
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.whitespace-nowrap {
    white-space: nowrap
}

.rounded {
    border-radius: 0.25rem
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: 0.5rem
}

.rounded-md {
    border-radius: 0.375rem
}

.rounded-xl {
    border-radius: 0.75rem
}

.border {
    border-width: 1px
}

.border-b {
    border-bottom-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-\[\#343638\] {
    --tw-border-opacity: 1;
    border-color: rgb(52 54 56 / var(--tw-border-opacity, 1))
}

.border-\[\#d7d8d3\] {
    --tw-border-opacity: 1;
    border-color: rgb(215 216 211 / var(--tw-border-opacity, 1))
}

.border-\[\#d7d9df\] {
    --tw-border-opacity: 1;
    border-color: rgb(215 217 223 / var(--tw-border-opacity, 1))
}

.border-\[\#d8d9d4\] {
    --tw-border-opacity: 1;
    border-color: rgb(216 217 212 / var(--tw-border-opacity, 1))
}

.border-\[\#d9dad5\] {
    --tw-border-opacity: 1;
    border-color: rgb(217 218 213 / var(--tw-border-opacity, 1))
}

.border-\[\#dcddd8\] {
    --tw-border-opacity: 1;
    border-color: rgb(220 221 216 / var(--tw-border-opacity, 1))
}

.border-\[\#e5e5e1\] {
    --tw-border-opacity: 1;
    border-color: rgb(229 229 225 / var(--tw-border-opacity, 1))
}

.border-amber-200 {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1))
}

.border-slate-200 {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1))
}

.border-transparent {
    border-color: transparent
}

.bg-\[\#111315\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 19 21 / var(--tw-bg-opacity, 1))
}

.bg-\[\#ecece8\] {
    --tw-bg-opacity: 1;
    background-color: rgb(236 236 232 / var(--tw-bg-opacity, 1))
}

.bg-\[\#efefeb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(239 239 235 / var(--tw-bg-opacity, 1))
}

.bg-\[\#f4f5f8\] {
    --tw-bg-opacity: 1;
    background-color: rgb(244 245 248 / var(--tw-bg-opacity, 1))
}

.bg-\[\#f8f8f6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 246 / var(--tw-bg-opacity, 1))
}

.bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1))
}

.bg-amber-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1))
}

.bg-ink {
    --tw-bg-opacity: 1;
    background-color: rgb(16 18 20 / var(--tw-bg-opacity, 1))
}

.bg-slate-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.bg-white\/70 {
    background-color: rgb(255 255 255 / 0.7)
}

.object-contain {
    object-fit: contain
}

.p-0 {
    padding: 0px
}

.p-2 {
    padding: 0.5rem
}

.p-4 {
    padding: 1rem
}

.p-5 {
    padding: 1.25rem
}

.p-6 {
    padding: 1.5rem
}

.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}

.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem
}

.pb-20 {
    padding-bottom: 5rem
}

.pb-3 {
    padding-bottom: 0.75rem
}

.pb-4 {
    padding-bottom: 1rem
}

.pt-0\.5 {
    padding-top: 0.125rem
}

.pt-16 {
    padding-top: 4rem
}

.pt-4 {
    padding-top: 1rem
}

.pt-7 {
    padding-top: 1.75rem
}

.pt-8 {
    padding-top: 2rem
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.font-mono {
    font-family: JetBrains Mono, monospace
}

.font-sans {
    font-family: Inter, sans-serif
}

.text-\[10px\] {
    font-size: 10px
}

.text-\[11px\] {
    font-size: 11px
}

.text-\[12px\] {
    font-size: 12px
}

.text-\[13px\] {
    font-size: 13px
}

.text-\[14px\] {
    font-size: 14px
}

.text-\[15px\] {
    font-size: 15px
}

.text-\[16px\] {
    font-size: 16px
}

.text-\[17px\] {
    font-size: 17px
}

.text-\[18px\] {
    font-size: 18px
}

.text-\[19px\] {
    font-size: 19px
}

.text-\[20px\] {
    font-size: 20px
}

.text-\[21px\] {
    font-size: 21px
}

.text-\[26px\] {
    font-size: 26px
}

.text-\[42px\] {
    font-size: 42px
}

.text-\[9px\] {
    font-size: 9px
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}

.font-bold {
    font-weight: 700
}

.font-extrabold {
    font-weight: 800
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.uppercase {
    text-transform: uppercase
}

.leading-5 {
    line-height: 1.25rem
}

.leading-6 {
    line-height: 1.5rem
}

.leading-7 {
    line-height: 1.75rem
}

.leading-\[1\.08\] {
    line-height: 1.08
}

.leading-loose {
    line-height: 2
}

.leading-relaxed {
    line-height: 1.625
}

.tracking-\[-\.045em\] {
    letter-spacing: -.045em
}

.tracking-\[-0\.01em\] {
    letter-spacing: -0.01em
}

.tracking-\[\.08em\] {
    letter-spacing: .08em
}

.tracking-\[\.15em\] {
    letter-spacing: .15em
}

.text-\[\#34373a\] {
    --tw-text-opacity: 1;
    color: rgb(52 55 58 / var(--tw-text-opacity, 1))
}

.text-\[\#444\] {
    --tw-text-opacity: 1;
    color: rgb(68 68 68 / var(--tw-text-opacity, 1))
}

.text-\[\#4a5265\] {
    --tw-text-opacity: 1;
    color: rgb(74 82 101 / var(--tw-text-opacity, 1))
}

.text-\[\#555\] {
    --tw-text-opacity: 1;
    color: rgb(85 85 85 / var(--tw-text-opacity, 1))
}

.text-\[\#62666a\] {
    --tw-text-opacity: 1;
    color: rgb(98 102 106 / var(--tw-text-opacity, 1))
}

.text-\[\#6b6f73\] {
    --tw-text-opacity: 1;
    color: rgb(107 111 115 / var(--tw-text-opacity, 1))
}

.text-\[\#6e7275\] {
    --tw-text-opacity: 1;
    color: rgb(110 114 117 / var(--tw-text-opacity, 1))
}

.text-\[\#6f7376\] {
    --tw-text-opacity: 1;
    color: rgb(111 115 118 / var(--tw-text-opacity, 1))
}

.text-\[\#777a7d\] {
    --tw-text-opacity: 1;
    color: rgb(119 122 125 / var(--tw-text-opacity, 1))
}

.text-\[\#777b7e\] {
    --tw-text-opacity: 1;
    color: rgb(119 123 126 / var(--tw-text-opacity, 1))
}

.text-\[\#7b7e81\] {
    --tw-text-opacity: 1;
    color: rgb(123 126 129 / var(--tw-text-opacity, 1))
}

.text-\[\#9a9d9f\] {
    --tw-text-opacity: 1;
    color: rgb(154 157 159 / var(--tw-text-opacity, 1))
}

.text-\[\#a0a2a4\] {
    --tw-text-opacity: 1;
    color: rgb(160 162 164 / var(--tw-text-opacity, 1))
}

.text-\[\#b8babb\] {
    --tw-text-opacity: 1;
    color: rgb(184 186 187 / var(--tw-text-opacity, 1))
}

.text-\[\#e5e5e3\] {
    --tw-text-opacity: 1;
    color: rgb(229 229 227 / var(--tw-text-opacity, 1))
}

.text-amber-900 {
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity, 1))
}

.text-amber-950 {
    --tw-text-opacity: 1;
    color: rgb(69 26 3 / var(--tw-text-opacity, 1))
}

.text-indigo-600 {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1))
}

.text-ink {
    --tw-text-opacity: 1;
    color: rgb(16 18 20 / var(--tw-text-opacity, 1))
}

.text-muted {
    --tw-text-opacity: 1;
    color: rgb(119 122 125 / var(--tw-text-opacity, 1))
}

.text-sky-800 {
    --tw-text-opacity: 1;
    color: rgb(7 89 133 / var(--tw-text-opacity, 1))
}

.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1))
}

.text-slate-600 {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1))
}

.text-slate-800 {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1))
}

.text-slate-900 {
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.underline {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.decoration-sky-200 {
    -webkit-text-decoration-color: #bae6fd;
    text-decoration-color: #bae6fd
}

.underline-offset-4 {
    text-underline-offset: 4px
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.ring-\[\#d1d2cd\] {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 210 205 / var(--tw-ring-opacity, 1))
}

.transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.duration-200 {
    transition-duration: 200ms
}

.duration-300 {
    transition-duration: 300ms
}

.\[scrollbar-width\:none\] {
    scrollbar-width: none
}

.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:border-\[\#65686a\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(101 104 106 / var(--tw-border-opacity, 1))
}

.hover\:border-\[\#d8d9d4\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(216 217 212 / var(--tw-border-opacity, 1))
}

.hover\:bg-\[\#292c2f\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(41 44 47 / var(--tw-bg-opacity, 1))
}

.hover\:bg-\[\#f8f8f6\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 246 / var(--tw-bg-opacity, 1))
}

.hover\:bg-amber-900:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1))
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.hover\:text-indigo-800:hover {
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity, 1))
}

.hover\:text-ink:hover {
    --tw-text-opacity: 1;
    color: rgb(16 18 20 / var(--tw-text-opacity, 1))
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.hover\:underline:hover {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.focus\:border-transparent:focus {
    border-color: transparent
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-indigo-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))
}

@media (min-width: 640px) {
    .sm\:block {
        display: block
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:p-8 {
        padding: 2rem
    }
}

@media (min-width: 768px) {
    .md\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem
    }
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none
}