@layer pages {
    /* ================================================================
       Newsletter — agora herda o chrome do site via base.html
       (header/footer/tema globais). Este CSS só cuida do conteúdo
       editorial: listagem, leitura da edição, prose e TOC.
       Cores alinhadas aos tokens do design system (neon/roxo).
       ================================================================ */

    /* === Escopo da página + tokens editoriais === */
    .newsletter-page {
        --newsletter-link: var(--neon-blue-bright);

        /* Aikosplay = você (protagonista): gradiente roxo-azul da marca.
           Lazuli = ajudante: ciano = --highlight, apoio tecnológico. */
        --newsletter-aikosplay-bg: linear-gradient(135deg, color-mix(in srgb, var(--neon-purple-dark) 40%, var(--bg-deep)) 0%, color-mix(in srgb, var(--neon-blue-bright) 18%, var(--bg-deep)) 100%);
        --newsletter-aikosplay-text: #e1d3ff;
        --newsletter-lazuli-bg: linear-gradient(135deg,
            color-mix(in srgb, var(--neon-cyan-dark) 50%, var(--bg-deep)) 0%,
            color-mix(in srgb, var(--neon-cyan) 20%, var(--bg-deep)) 100%);
        --newsletter-lazuli-text: var(--neon-cyan-bright);
        --newsletter-creator-economy-bg: color-mix(in srgb, var(--neon-purple-dark) 18%, var(--bg-deep));
        --newsletter-creator-economy-border: var(--neon-purple);
        --newsletter-creator-economy-text: var(--text-secondary);
        --newsletter-history-border: var(--neon-pink);
        --newsletter-history-text: var(--text-secondary);
        --newsletter-market-bg: color-mix(in srgb, var(--neon-blue-bright) 12%, var(--bg-deep));
        --newsletter-market-border: var(--neon-blue-bright);
        --newsletter-market-text: var(--text-secondary);

        /* Offset do header global sticky (.global-header ≈ 68px de altura).
           Garante que o destino das âncoras do TOC (#slug em h2/h3) não
           fique escondido atrás do header ao clicar num tópico do sumário. */
        --newsletter-anchor-offset: 80px;

        padding: 0 0 var(--space-06);

        /* Metade do padding-top do page-shell (sem mexer no header/global).
           Desktop 48→24, tablet 32→16, mobile 24→12. */
        margin-top: calc(-1 * var(--space-05));
    }

    @media (width <= 1279px) {
        .newsletter-page {
            margin-top: calc(-1 * var(--space-04));
        }
    }

    @media (width <= 767px) {
        .newsletter-page {
            margin-top: calc(-1 * var(--space-03));
        }
    }

    /* === Index (listagem de edições) === */
    .newsletter-index-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-04);
        max-width: 720px;
        margin: var(--space-06) auto 0;
    }

    .newsletter-index-item {
        border-bottom: 1px solid var(--border-default);
        padding-bottom: var(--space-04);
        transition: border-color 0.15s ease;
    }

    .newsletter-index-item:hover {
        border-bottom-color: color-mix(in srgb, var(--neon-blue-bright) 40%, transparent);
    }

    .newsletter-index-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .newsletter-index-number {
        font-family: var(--font-mono);
        font-size: var(--font-size-sm);
        color: var(--neon-blue-bright);
        font-weight: 600;
    }

    .newsletter-index-date {
        display: block;
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        margin: var(--space-01) 0;
    }

    .newsletter-index-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin: var(--space-02) 0;
        line-height: 1.35;
    }

    .newsletter-index-item:hover .newsletter-index-title {
        color: var(--neon-blue-bright);
    }

    .newsletter-index-desc {
        color: var(--text-muted);
        margin-bottom: var(--space-02);
    }

    .newsletter-index-readmore {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--neon-blue-bright);
    }

    .newsletter-empty {
        text-align: center;
        color: var(--text-muted);
        padding: var(--space-08);
    }

    /* === Edition layout: artigo centrado + TOC na faixa direita ===
       3 colunas (1fr | 720 | 1fr) — o TOC mora no 1fr direito e não
       rouba largura do artigo. Mobile: 1 coluna, TOC abaixo. */
    .newsletter-edition-container {
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--space-04);
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-08);
    }

    @media (width >= 1024px) {
        .newsletter-edition-container {
            grid-template-columns: minmax(0, 1fr) min(720px, 100%) minmax(0, 1fr);
            gap: var(--space-06);
            align-items: start;
        }

        .newsletter-content {
            grid-column: 2;
        }

        .newsletter-sidebar {
            grid-column: 3;
            width: 280px;
            max-width: 100%;
            justify-self: start;
            margin-left: var(--space-04);
        }
    }

    .newsletter-content {
        min-width: 0;
    }

    .newsletter-article-header {
        margin-bottom: var(--space-08);
        padding-bottom: var(--space-06);
        border-bottom: 1px solid var(--border-default);
    }

    .newsletter-meta {
        display: flex;
        align-items: center;
        gap: var(--space-04);
        margin-bottom: var(--space-03);
        font-family: var(--font-mono);
        font-size: var(--font-size-sm);
        color: var(--text-muted);
    }

    .newsletter-number {
        color: var(--neon-blue-bright);
        font-weight: 600;
    }

    .newsletter-title {
        font-size: clamp(1.75rem, 4vw, 2.25rem);
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.2;
        margin-bottom: var(--space-03);
        letter-spacing: -0.02em;
    }

    .newsletter-title-center {
        text-align: center;
        font-size: clamp(2rem, 5vw, 2.75rem);
        margin-bottom: var(--space-05);
        border-bottom: none;
    }

    .newsletter-desc {
        font-size: var(--font-size-lg);
        color: var(--text-secondary);
        line-height: 1.5;
        margin-bottom: var(--space-05);
    }

    /* === Prose / corpo da edição === */
    .newsletter-prose {
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--text-secondary);
    }

    /* === Ancoragem do TOC — compensa o header global sticky ===
       Os links do sumário lateral apontam para #slug nos h2/h3. Sem
       scroll-margin-top o navegador cola o título no topo exato do
       viewport, escondendo-o atrás do header. */
    .newsletter-prose h2,
    .newsletter-prose h3 {
        scroll-margin-top: var(--newsletter-anchor-offset);
    }

    /* Rolagem suave ao saltar entre tópicos do sumário lateral,
       para o usuário perceber a viagem até o destino. */
    html {
        scroll-behavior: smooth;
    }

    /* Offset para a âncora #newsletter-top não ficar atrás do header fixo. */
    #newsletter-top {
        scroll-margin-top: 80px;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
    }

    .newsletter-prose h2 {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        margin-top: 2.5em;
        margin-bottom: var(--space-04);
        padding-bottom: var(--space-02);
        border-bottom: 1px solid var(--border-default);
        color: var(--text-primary);
        letter-spacing: -0.02em;
    }

    .newsletter-prose h3 {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        margin: 0 0 var(--space-03);
        color: var(--text-primary);
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .newsletter-prose p {
        margin-bottom: var(--space-04);
    }

    .newsletter-prose a {
        color: var(--neon-blue-bright);
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--neon-blue-bright) 35%, transparent);
    }

    .newsletter-prose strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    .newsletter-prose ul,
    .newsletter-prose ol {
        margin: var(--space-04) 0;
        padding-left: var(--space-06);
    }

    .newsletter-prose li {
        margin-bottom: var(--space-02);
    }

    .newsletter-prose hr {
        border: none;
        border-top: 1px solid var(--border-default);
        margin: var(--space-06) 0;
    }

    /* === Imagens (ordenadas por specificity) === */
    .newsletter-prose img {
        max-width: 100%;
        height: auto;
    }

    .market-news-box img {
        max-width: 100%;
        border-radius: var(--radius-md);
        margin: var(--space-04) auto;
    }

    /* === News story card === */
    .news-story {
        margin-bottom: var(--space-08);
        padding-bottom: var(--space-06);
        border-bottom: 1px solid var(--border-default);
    }

    .news-story:last-child {
        border-bottom: none;
    }

    .news-story > p:first-of-type img {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
        border-radius: var(--radius-lg);
        margin: var(--space-03) 0 var(--space-05);
        box-shadow: 0 4px 20px rgb(0 0 0 / 25%);
    }

    /* === Source line === */
    .source-line {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-02);
        margin: var(--space-04) 0 var(--space-05);
        font-size: var(--text-sm);
    }

    .source-favicon {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        margin: 0;
    }

    .source-readmore {
        font-weight: 600;
        color: var(--neon-blue-bright);
        text-decoration: none;
    }

    .source-readmore:hover {
        text-decoration: underline;
    }

    .source-name {
        color: var(--text-muted);
    }

    /* === Comment bubbles === */
    .aikosplay-comment {
        display: flex;
        align-items: flex-start;
        gap: var(--space-03);
        margin: 14px 0;
        max-width: 88%;
    }

    .lazuli-comment {
        display: flex;
        align-items: flex-start;
        gap: var(--space-03);
        margin: 14px 0;
    }

    .comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 9999px;
        flex-shrink: 0;
        margin: 0;
    }

    /* Avatar do protagonista (você/Aikosplay): anel roxo + glow pra máx. destaque.
       A Lazuli não recebe glow — assim o seu avatar se destaca por contraste. */
    .aikosplay-comment .comment-avatar {
        border: 2px solid var(--neon-purple-bright);
        box-shadow:
            0 0 0 3px rgb(179 136 255 / 20%),
            0 0 14px var(--neon-purple-glow);
    }

    .aikosplay-comment .avatar-wrapper {
        position: relative;
        display: inline-flex;
        flex-shrink: 0;
        z-index: 0;
    }

    .aikosplay-comment .avatar-wrapper::before,
    .aikosplay-comment .avatar-wrapper::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 9999px;
        border: 2px solid var(--neon-purple-bright);
        box-shadow: 0 0 12px var(--neon-purple-glow);
        animation: ring-pulse 2s ease-out infinite;
        pointer-events: none;
        z-index: -1;
    }

    .aikosplay-comment .avatar-wrapper::after {
        animation-delay: 1s;
    }

    @keyframes ring-pulse {
        0% {
            transform: scale(1);
            opacity: 0.6;
        }

        100% {
            transform: scale(1.5);
            opacity: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .aikosplay-comment .avatar-wrapper::before,
        .aikosplay-comment .avatar-wrapper::after {
            animation: none;
        }
    }

    .lazuli-comment .comment-avatar {
        margin-left: auto;
    }

    .aikosplay-comment-bubble {
        flex: 1;
        background: var(--newsletter-aikosplay-bg);
        color: var(--newsletter-aikosplay-text);
        border-radius: 18px;
        border-bottom-left-radius: 4px;
        padding: 14px 18px;
        font-size: var(--text-sm);
        line-height: 1.65;
    }

    .lazuli-comment-bubble {
        margin-left: calc(40px + var(--space-03));
        max-width: 88%;
        background: var(--newsletter-lazuli-bg);
        color: var(--newsletter-lazuli-text);
        border-radius: 18px;
        border-bottom-right-radius: 4px;
        padding: 14px 18px;
        font-size: var(--text-sm);
        line-height: 1.65;
        font-style: italic;
    }

    /* === Section boxes === */
    .section-box {
        margin: 2em 0;
        padding: 1.5em;
        border: 1px solid;
        border-top-width: 2px;
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 24px rgb(0 0 0 / 20%);
    }

    .section-label {
        font-size: 0.8em;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        margin-bottom: 0.75em;
    }

    .section-content {
        margin-top: 0.75em;
    }

    .creator-economy-box {
        background: var(--newsletter-creator-economy-bg);
        border-color: var(--newsletter-creator-economy-border);
        border-radius: var(--radius-sm);
        color: var(--newsletter-creator-economy-text);
    }

    .editorial-box {
        background: color-mix(in srgb, var(--neon-purple) 10%, var(--bg-deep));
        border-color: var(--neon-purple);
        color: var(--text-primary);
    }

    .editorial-box .section-label {
        color: var(--neon-pink);
    }

    .editorial-box .section-content p {
        margin: 0;
        white-space: pre-line;
    }

    .intro-announcement-text {
        font-size: var(--font-size-lg);
        color: var(--text-secondary);
        line-height: 1.6;
        margin: var(--space-04) 0 var(--space-06);
        padding: var(--space-03) var(--space-04);
        background: color-mix(in srgb, var(--neon-blue-bright) 6%, transparent);
        border-left: 3px solid var(--neon-blue-bright);
        border-radius: var(--radius-sm);
    }

    .outros-noticias-box {
        background: color-mix(in srgb, var(--text-secondary) 4%, var(--bg-deep));
        border-color: var(--border-default);
        color: inherit;
    }

    .history-timeline-box {
        background: linear-gradient(
            125deg,
            color-mix(in srgb, var(--neon-pink) 26%, var(--bg-deep)) 0%,
            color-mix(in srgb, var(--neon-purple) 8%, var(--bg-deep)) 45%,
            color-mix(in srgb, var(--neon-pink) 20%, var(--bg-deep)) 100%
        );
        background-size: 280% 280%;
        animation: history-bg-shift 8s ease-in-out infinite alternate;
        border-color: var(--newsletter-history-border);
        color: var(--newsletter-history-text);
        font-style: italic;
    }

    @keyframes history-bg-shift {
        0% {
            background-position: 0% 0%;
        }

        100% {
            background-position: 100% 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .history-timeline-box {
            animation: none;
            background-position: 50% 50%;
        }
    }

    .market-news-box {
        background: var(--newsletter-market-bg);
        border-color: var(--newsletter-market-border);
        color: var(--newsletter-market-text);
        text-align: center;
    }

    .creator-economy-box img[alt="creator-economy"] {
        width: 100%;
        max-height: 220px;
        object-fit: cover;
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-04);
    }

    .section-box ul {
        list-style: none;
        padding-left: 0;
    }

    .section-box li {
        margin-bottom: var(--space-02);
        font-size: var(--text-sm);
    }

    .section-box li img[src*="favicons"] {
        width: 16px;
        height: 16px;
        vertical-align: middle;
        margin-right: var(--space-02);
    }

    /* === Sidebar TOC ===
       sticky no ASIDE (não no inner) + align-self:start evitam o pulo do
       grid stretch. margin-top cancela o vão restante do page-shell (já
       pela metade via .newsletter-page) pra TOC nascer em top:68px. */
    .newsletter-sidebar {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 68px;
        max-height: calc(100vh - 68px);
        align-self: start;
    }

    @media (width >= 1024px) {
        .newsletter-sidebar {
            margin-top: calc(-1 * var(--space-04));
        }
    }

    @media (width >= 1280px) {
        .newsletter-sidebar {
            margin-top: calc(-1 * var(--space-05));
        }
    }

    .newsletter-sidebar-inner {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
        font-size: var(--font-size-base);
        scrollbar-width: thin;
        scrollbar-color: rgb(255 255 255 / 22%) transparent;
    }

    .newsletter-sidebar-inner::-webkit-scrollbar {
        width: 4px;
    }

    .newsletter-sidebar-inner::-webkit-scrollbar-track {
        background: transparent;
    }

    .newsletter-sidebar-inner::-webkit-scrollbar-thumb {
        background: rgb(255 255 255 / 22%);
        border-radius: 999px;
    }

    .toc-link--active {
        color: var(--neon-purple-bright);
        border-left: 2px solid var(--neon-purple-bright);
        padding-left: calc(var(--space-04) - 2px);
    }

    .toc-link-story.toc-link--active {
        color: var(--neon-purple-bright);
        border-left-color: var(--neon-purple-bright);
    }

    .sidebar-title {
        font-size: var(--font-size-sm);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        margin-bottom: var(--space-04);
    }

    .sidebar-cta {
        flex-shrink: 0;
        padding-top: var(--space-03);
    }

    .sidebar-cta-divider {
        border: none;
        border-top: 1px solid var(--border-default);
        margin: 0 0 var(--space-03);
    }

    .sidebar-cta-link {
        display: flex;
        align-items: center;
        gap: var(--space-02);
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--neon-blue-bright);
        text-decoration: none;
        padding: var(--space-01) 0;
        transition: opacity 0.15s;
    }

    .sidebar-cta-link:hover {
        opacity: 0.8;
        text-decoration: underline;
    }

    .sidebar-top-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-02);
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        padding: var(--space-01) 0;
        margin-top: var(--space-02);
        margin-bottom: var(--space-05);
        transition: color 0.15s, opacity 0.2s;
    }

    .sidebar-top-btn.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-top-btn:hover,
    .sidebar-top-btn:focus {
        color: var(--text-primary);
    }

    .sidebar-top-icon {
        width: 16px;
        height: 16px;
    }

    .toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .toc-list-nested {
        margin-top: var(--space-02);
        margin-bottom: var(--space-03);
        padding-left: var(--space-04);
        border-left: 1px solid var(--border-default);
    }

    .toc-link {
        display: block;
        padding: var(--space-01) 0;
        color: var(--text-muted);
        text-decoration: none;
        line-height: 1.4;
    }

    .toc-link:hover {
        color: var(--neon-purple-bright);
    }

    .toc-link-section {
        font-weight: 600;
        color: var(--text-secondary);
    }

    .toc-link-story {
        font-size: var(--font-size-sm);
    }

    /* === Edition footer === */
    .newsletter-edition-footer {
        margin-top: var(--space-06);
        padding-top: var(--space-04);
        border-top: 1px solid var(--border-default);
        text-align: center;
    }

    .newsletter-back-link {
        display: inline-block;
        margin-bottom: var(--space-04);
        font-weight: 600;
        color: var(--neon-blue-bright);
        text-decoration: none;
    }

    .newsletter-back-link:hover {
        text-decoration: underline;
    }

    .newsletter-disclaimer {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    /* === Preview banner (admin) === */
    .newsletter-preview-banner {
        max-width: 1100px;
        margin: 0 auto var(--space-04);
        background: #422006;
        color: #fef3c7;
        padding: var(--space-03) var(--space-04);
        text-align: center;
        font-size: var(--font-size-sm);
        border-radius: var(--radius-md);
    }

    .preview-back-link {
        margin-left: var(--space-04);
        font-weight: 600;
        color: inherit;
        text-decoration: underline;
    }

    /* === Book / Manga Cover Layout === */
    .book-cover-layout {
        display: flow-root;
        margin: var(--space-06) 0;
    }

    .book-cover-img {
        float: left;
        width: 170px;
        height: auto;
        border-radius: var(--radius-sm);
        margin: 0 var(--space-06) var(--space-03) 0;
        box-shadow: 0 4px 20px rgb(0 0 0 / 35%);
    }

    .book-cover-text {
        overflow: hidden;
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .book-cover-text p:first-child {
        margin-top: 0;
        padding-top: 0;
    }

    .book-cover-text p:last-child {
        margin-bottom: 0;
    }

    /* Botão de Compra - Ciano/Azul Neon correspondente ao estilo de /materials */
    .newsletter-page .btn-buy {
        background: linear-gradient(135deg, var(--neon-cyan-bright, #00d9ff), #00a8cc);
        color: #05040b;
        border: none;
        box-shadow: 0 4px 12px rgb(0 217 255 / 30%);
        transition: all 0.2s ease;
    }

    .newsletter-page .btn-buy:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgb(0 217 255 / 45%);
        filter: saturate(1.1);
        color: #05040b;
    }

    @media (width <= 600px) {
        .book-cover-img {
            float: none;
            display: block;
            margin: 0 auto var(--space-04);
            width: 140px;
        }
    }

    /* === Intro Highlight Box (Estilo Marvin) === */
    .intro-actions-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-03);
        margin: var(--space-06) auto;
        text-align: center;
    }

    .newsletter-page .intro-cta-btn {
        background: linear-gradient(135deg, var(--neon-red), var(--neon-red-dark));
        color: #fff;
        padding: var(--space-03) var(--space-06);
        font-size: var(--font-size-sm);
        font-weight: 700;
        border-radius: 50px;
        box-shadow: 0 4px 15px rgb(255 77 90 / 25%);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: none;
        transition: all 0.2s ease;
    }

    .newsletter-page .intro-cta-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 22px rgb(255 77 90 / 40%);
        color: #fff;
    }

    .intro-event-title {
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: var(--space-02);
    }

    .intro-comment-row {
        display: flex;
        align-items: flex-start;
        gap: var(--space-03);
        margin-top: var(--space-02);
    }

    .intro-comment-bubble {
        flex: 1;
        background: var(--newsletter-aikosplay-bg);
        color: var(--newsletter-aikosplay-text);
        border-radius: 18px;
        border-bottom-right-radius: 4px;
        padding: var(--space-03) var(--space-04);
        line-height: 1.6;
    }

    .intro-comment-bubble p:last-child {
        margin-bottom: 0;
    }

    .creator-economy-box .aikosplay-comment-bubble,
    .creator-economy-box .intro-comment-bubble {
        border: 1px solid rgb(179 136 255 / 35%);
        box-shadow: 0 2px 12px rgb(0 0 0 / 25%);
    }

    .intro-comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        border: 2px solid var(--neon-purple-bright);
        box-shadow:
            0 0 0 3px rgb(179 136 255 / 20%),
            0 0 12px var(--neon-purple-glow);
        flex-shrink: 0;
        margin: 0;
    }

    /* === Light mode — tokens editoriais (html.light-mode do base.html) ===
       Mesmo padrão de guides/bridge: redefinir só as custom props do escopo
       + ajustes pontuais de contraste. Fundo da página vem do core. */
    .light-mode .newsletter-page {
        --newsletter-link: var(--neon-blue-bright);
        --newsletter-aikosplay-bg: linear-gradient(
            135deg,
            color-mix(in srgb, var(--neon-purple) 28%, var(--bg-elevated)) 0%,
            color-mix(in srgb, var(--neon-blue-bright) 18%, var(--bg-surface)) 100%
        );
        --newsletter-aikosplay-text: var(--text-primary);
        --newsletter-lazuli-bg: linear-gradient(
            135deg,
            color-mix(in srgb, var(--neon-cyan) 18%, var(--bg-surface)) 0%,
            color-mix(in srgb, var(--neon-cyan) 12%, var(--bg-elevated)) 100%
        );
        --newsletter-lazuli-text: var(--neon-cyan);
        --newsletter-creator-economy-bg: color-mix(in srgb, var(--neon-purple) 16%, var(--bg-elevated));
        --newsletter-creator-economy-border: var(--neon-purple);
        --newsletter-creator-economy-text: var(--text-secondary);
        --newsletter-history-border: var(--neon-pink);
        --newsletter-history-text: var(--text-secondary);
        --newsletter-market-bg: color-mix(in srgb, var(--neon-blue-bright) 10%, var(--bg-elevated));
        --newsletter-market-border: var(--neon-blue-bright);
        --newsletter-market-text: var(--text-secondary);
    }

    .light-mode .section-box {
        box-shadow: 0 4px 24px rgb(17 24 39 / 8%);
    }

    .light-mode .history-timeline-box {
        background: linear-gradient(
            125deg,
            color-mix(in srgb, var(--neon-pink) 12%, var(--bg-elevated)) 0%,
            color-mix(in srgb, var(--neon-purple) 8%, var(--bg-surface)) 45%,
            color-mix(in srgb, var(--neon-pink) 10%, var(--bg-elevated)) 100%
        );
        background-size: 280% 280%;
    }

    .light-mode .aikosplay-comment-bubble,
    .light-mode .intro-comment-bubble {
        border: 1px solid color-mix(in srgb, var(--neon-purple) 35%, transparent);
        box-shadow: 0 2px 14px rgb(126 34 206 / 12%);
    }

    .light-mode .creator-economy-box .aikosplay-comment-bubble,
    .light-mode .creator-economy-box .intro-comment-bubble {
        border-color: color-mix(in srgb, var(--neon-purple) 40%, transparent);
        box-shadow: 0 2px 14px rgb(126 34 206 / 14%);
    }

    .light-mode .newsletter-sidebar-inner {
        scrollbar-color: rgb(17 24 39 / 22%) transparent;
    }

    .light-mode .newsletter-sidebar-inner::-webkit-scrollbar-thumb {
        background: rgb(17 24 39 / 22%);
    }

} /* @layer pages */