/* Existing components become nodes in one generational system. */
html.site-theme body.app-page {
    background: var(--color-canvas) !important;
}

html.site-theme .app-shell {
    background: var(--color-paper);
}

html.site-theme .app-header {
    border-bottom: 4px solid var(--color-accent);
}

html.site-theme .home-chat-window__messages {
    --generation-axis-start: 0.9rem;
    --generation-axis-end: 1.1rem;
    position: relative;
}

html.site-theme .chat-room {
    --generation-axis-start: 1.9rem;
    --generation-axis-end: 2.15rem;
    position: relative;
    isolation: isolate;
}

html.site-theme .home-chat-window__messages::before,
html.site-theme .chat-room::before {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: var(--generation-axis-start);
    width: 1px;
    background: var(--color-primary);
    content: "";
    pointer-events: none;
}

html.site-theme .home-chat-window__messages:has(.message-user)::after,
html.site-theme .chat-room::after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: var(--generation-axis-end);
    bottom: 0;
    width: 1px;
    background: var(--color-coral);
    content: "";
    pointer-events: none;
}

html.site-theme .chat-room__messages,
html.site-theme .chat-room__choices {
    position: relative;
    z-index: 1;
    background: transparent;
}

html.site-theme .home-chat-window__messages .message,
html.site-theme .chat-room__messages .message {
    z-index: 1;
    border-radius: 8px;
    box-shadow: 4px 4px 0 var(--color-soft);
}

html.site-theme .home-chat-window__messages .message-bot,
html.site-theme .chat-room__messages .message-bot {
    border-left-color: var(--color-primary);
}

html.site-theme .home-chat-window__messages:has(.message-user) .message,
html.site-theme .chat-room__messages .message {
    max-width: min(calc(100% - 5.5rem), 34rem);
}

html.site-theme .home-chat-window__messages .message-bot + .message-bot,
html.site-theme .chat-room__messages .message-bot + .message-bot,
html.site-theme .home-chat-window__messages .message-user + .message-user,
html.site-theme .chat-room__messages .message-user + .message-user {
    margin-top: 0;
}

html.site-theme .message-avatar {
    border: 2px solid var(--color-paper);
    box-shadow: 0 0 0 1px var(--color-primary);
}

html.site-theme .message-bot > .message-avatar {
    background: var(--color-accent);
}

html.site-theme .message-user > .message-avatar {
    border-color: var(--color-paper);
    box-shadow: 0 0 0 1px var(--color-primary);
}

html.site-theme .home-chat-window__choices,
html.site-theme .page-conversation__choices {
    --generation-axis-start: 0.9rem;
    position: relative;
    grid-template-columns: 1fr;
    width: calc(100% - 1.65rem);
    padding-left: 2.35rem;
    border-left: 0;
}

html.site-theme .chat-room__choices {
    --generation-axis-start: 1.9rem;
    --generation-axis-end: 2.15rem;
    --choice-branch-length: calc((100cqw - min(100cqw, 34rem)) / 2 + 2rem);
    position: relative;
    grid-template-columns: 1fr;
    padding-left: calc(var(--generation-axis-start) + 1.25rem);
    padding-right: calc(var(--generation-axis-end) + 2rem);
    border-left: 0;
    container-type: inline-size;
}

html.site-theme .home-chat-window__choices::before,
html.site-theme .page-conversation__choices::before {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: var(--generation-axis-start);
    width: 1px;
    background: var(--color-primary);
    content: "";
}

html.site-theme .home-chat-window__choices > *,
html.site-theme .page-conversation__choices > *,
html.site-theme .chat-room__choices > * {
    position: relative;
    z-index: 1;
    border-radius: 8px;
}

html.site-theme .chat-room__choices > * {
    width: min(100%, 34rem);
    margin-inline: auto;
}

html.site-theme .home-chat-window__choices > *::before,
html.site-theme .page-conversation__choices > *::before {
    position: absolute;
    top: 50%;
    left: -1.45rem;
    width: 1.45rem;
    height: 1px;
    background: var(--color-primary);
    content: "";
}

html.site-theme .home-chat-window__choices > *::after,
html.site-theme .page-conversation__choices > *::after {
    position: absolute;
    z-index: 2;
    top: calc(50% - 0.23rem);
    left: calc(-1.45rem - 0.225rem);
    width: 0.45rem;
    height: 0.45rem;
    border: 1px solid var(--color-ink);
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

html.site-theme .chat-room__choices > *::before {
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--choice-branch-length));
    left: auto;
    width: var(--choice-branch-length);
    height: 1px;
    background: var(--color-coral);
    content: "";
}

html.site-theme .chat-room__choices > *::after {
    position: absolute;
    z-index: 2;
    top: calc(50% - 0.23rem);
    right: calc(-1 * var(--choice-branch-length) - 0.225rem);
    left: auto;
    width: 0.45rem;
    height: 0.45rem;
    border: 1px solid var(--color-ink);
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

html.site-theme .home-chat-window__choices > :nth-child(2)::after,
html.site-theme .page-conversation__choices > :nth-child(2)::after,
html.site-theme .chat-room__choices > :nth-child(2)::after {
    background: var(--color-soft);
}

html.site-theme .home-chat-window__choices > :nth-child(3)::after,
html.site-theme .page-conversation__choices > :nth-child(3)::after,
html.site-theme .chat-room__choices > :nth-child(3)::after {
    background: var(--color-coral);
}

html.site-theme .page-tile-grid,
html.site-theme .role-grid,
html.site-theme .menu-links {
    --generation-axis-start: 0.9rem;
    position: relative;
    gap: 0.6rem;
    padding: 1rem 0 0 calc(var(--generation-axis-start) + 1rem);
    border: 0;
}

html.site-theme .page-tile-grid {
    width: calc(100% - 1.65rem);
    padding-left: 2.35rem;
}

html.site-theme .page-tile-grid::before,
html.site-theme .role-grid::before,
html.site-theme .menu-links::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--generation-axis-start);
    width: 1px;
    background: var(--color-primary);
    content: "";
}

html.site-theme .page-tile,
html.site-theme .role-grid article,
html.site-theme .menu-links a,
html.site-theme .menu-links button {
    position: relative;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
}

html.site-theme .page-tile::before,
html.site-theme .role-grid article::before,
html.site-theme .menu-links > *::before {
    position: absolute;
    top: 50%;
    left: -1rem;
    width: 1rem;
    height: 1px;
    background: var(--color-primary);
    content: "";
}

html.site-theme .page-tile::before {
    left: -1.45rem;
    width: 1.45rem;
}

html.site-theme .page-tile::after,
html.site-theme .role-grid article::after,
html.site-theme .menu-links > *::after {
    position: absolute;
    top: calc(50% - 0.22rem);
    left: calc(-1rem - 0.21rem);
    width: 0.42rem;
    height: 0.42rem;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

html.site-theme .page-tile::after {
    left: calc(-1.45rem - 0.225rem);
}

html.site-theme .page-tile:nth-child(2n)::after,
html.site-theme .role-grid article:nth-child(2n)::after,
html.site-theme .menu-links > :nth-child(2n)::after {
    background: var(--color-coral);
}

html.site-theme .page-tile:nth-child(3n)::after,
html.site-theme .role-grid article:nth-child(3n)::after,
html.site-theme .menu-links > :nth-child(3n)::after {
    background: var(--color-soft);
}

html.site-theme .home-pages {
    position: relative;
}

html.site-theme .home-pages::before {
    position: absolute;
    top: -1.4rem;
    bottom: 0;
    left: 0.9rem;
    width: 1px;
    background: var(--color-primary);
    content: "";
}

html.site-theme .contact-layout .role-grid::before {
    top: -2rem;
    bottom: -1.2rem;
}

html.site-theme .contact-layout .role-grid {
    grid-template-columns: 1fr;
    width: min(calc(100% - 1.65rem), calc(38rem + 2.35rem));
    padding-left: 2.35rem;
}

html.site-theme .contact-layout .role-grid article::before {
    left: -1.45rem;
    width: 1.45rem;
}

html.site-theme .contact-layout .role-grid article::after {
    left: calc(-1.45rem - 0.225rem);
}

html.site-theme .profile-actions,
html.site-theme .share-actions {
    --generation-axis-start: 0.9rem;
    position: relative;
    padding-left: 2.35rem;
}

html.site-theme .profile-actions {
    width: min(calc(100% - 1.65rem), 32rem);
}

html.site-theme .share-actions {
    width: min(calc(100% - 1.65rem), calc(32rem + 2.35rem));
}

html.site-theme .profile-actions::before,
html.site-theme .share-actions::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--generation-axis-start);
    width: 1px;
    background: var(--color-primary);
    content: "";
}

html.site-theme .profile-layout > .profile-actions::before {
    top: -1.2rem;
    bottom: -1.2rem;
}

html.site-theme .profile-actions > *,
html.site-theme .share-actions > * {
    position: relative;
}

html.site-theme .profile-actions > *::before,
html.site-theme .share-actions > *::before {
    position: absolute;
    top: 50%;
    left: -1.45rem;
    width: 1.45rem;
    height: 1px;
    background: var(--color-primary);
    content: "";
}

html.site-theme .profile-actions > *::after,
html.site-theme .share-actions > *::after {
    position: absolute;
    top: calc(50% - 0.225rem);
    left: calc(-1.45rem - 0.225rem);
    width: 0.45rem;
    height: 0.45rem;
    border: 1px solid var(--color-ink);
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

html.site-theme .profile-actions > :nth-child(2)::after,
html.site-theme .share-actions > :nth-child(2)::after {
    background: var(--color-coral);
}

@media (max-width: 900px) {
    html.site-theme .page-tile:nth-child(even)::before {
        left: -0.6rem;
        width: 0.6rem;
    }

    html.site-theme .page-tile:nth-child(even)::after {
        display: none;
    }
}

@media (min-width: 641px) {
    html.site-theme .profile-actions > :nth-child(2)::before {
        left: -0.65rem;
        width: 0.65rem;
    }

    html.site-theme .share-actions > :nth-child(2)::before {
        left: -0.55rem;
        width: 0.55rem;
    }

    html.site-theme .profile-actions > :nth-child(2)::after,
    html.site-theme .share-actions > :nth-child(2)::after {
        display: none;
    }

    html.site-theme .menu-links > :nth-child(even)::before {
        left: -0.6rem;
        width: 0.6rem;
    }

    html.site-theme .menu-links > :nth-child(even)::after {
        display: none;
    }
}

@media (min-width: 901px) {
    html.site-theme .page-tile:not(:nth-child(3n + 1))::before {
        left: -0.6rem;
        width: 0.6rem;
    }

    html.site-theme .page-tile:not(:nth-child(3n + 1))::after {
        display: none;
    }
}

html.site-theme .app-header,
html.site-theme .app-tabbar,
html.site-theme .app-view,
html.site-theme .standalone-main {
    position: relative;
    z-index: 1;
}

html.site-theme #view-home .home-focus-axis,
html.site-theme #view-home .home-focus-frame-axis {
    display: none;
}

html.site-theme #view-home .home-opening {
    background: rgb(246 239 229 / 72%);
}

html.site-theme #view-home .home-pages::before,
html.site-theme #view-home .page-tile-grid::before,
html.site-theme #view-home .page-tile::before,
html.site-theme #view-home .page-tile::after,
html.site-theme #view-contact .home-chat-window__messages::before,
html.site-theme #view-contact .home-chat-window__messages::after,
html.site-theme #view-contact .role-grid::before,
html.site-theme #view-contact .role-grid article::before,
html.site-theme #view-contact .role-grid article::after,
html.site-theme #view-contact .share-actions::before,
html.site-theme #view-contact .share-actions > *::before,
html.site-theme #view-contact .share-actions > *::after,
html.site-theme #view-profile .home-chat-window__messages::before,
html.site-theme #view-profile .home-chat-window__messages::after,
html.site-theme #view-profile .profile-actions::before,
html.site-theme #view-profile .profile-actions > *::before,
html.site-theme #view-profile .profile-actions > *::after,
html.site-theme #view-profile .share-actions::before,
html.site-theme #view-profile .share-actions > *::before,
html.site-theme #view-profile .share-actions > *::after {
    content: none;
}

html.site-theme #view-home .home-pages {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: rgb(246 239 229 / 72%);
}

html.site-theme #view-home .home-pages > * {
    position: relative;
    z-index: 1;
}

html.site-theme #view-home .page-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: auto;
    margin: 0;
    padding: 1rem;
    border: 0;
}

html.site-theme #view-home .page-tile {
    min-height: 6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
}

html.site-theme #view-contact .role-grid,
html.site-theme #view-profile .profile-actions,
html.site-theme #view-contact .share-actions,
html.site-theme #view-profile .share-actions {
    width: auto;
    padding-left: 0;
}

html.site-theme #view-contact .role-grid {
    grid-template-columns: 1fr;
}

html.site-theme #view-profile .profile-actions {
    width: auto;
}

@media (min-width: 641px) {
    html.site-theme #view-home .page-tile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

html.site-theme .app-tabbar button.is-active {
    box-shadow: inset 0 4px 0 var(--color-primary);
}

html.site-theme .standalone-tabbar a.is-active {
    box-shadow: inset 0 4px 0 var(--color-primary);
}

html.site-theme .result-cards,
html.site-theme .generation-list {
    position: relative;
    padding-left: 0.8rem;
    border-left: 1px solid var(--color-primary);
}

html.site-theme .result-cards article,
html.site-theme .generation-list article {
    position: relative;
    border-radius: 8px;
}

html.site-theme .result-cards article::before,
html.site-theme .generation-list article::before {
    position: absolute;
    top: 50%;
    left: -0.86rem;
    width: 0.75rem;
    height: 1px;
    background: var(--color-primary);
    content: "";
}

html.site-theme .result-cards article::after {
    position: absolute;
    z-index: 2;
    top: calc(50% - 0.225rem);
    left: calc(-0.8rem - 0.225rem);
    box-sizing: border-box;
    width: 0.45rem;
    height: 0.45rem;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

html.site-theme .result-cards article:nth-child(2)::after {
    background: var(--color-coral);
}

html.site-theme .result-cards article:nth-child(3)::after {
    background: var(--color-soft);
}

@media (min-width: 561px) {
    html.site-theme .simulator-metrics {
        width: 100%;
        margin-left: 0;
        padding: 0.8rem 0 0;
        border-left: 0;
    }

    html.site-theme .simulator-metrics::before {
        position: absolute;
        top: 0;
        right: calc((100% - 1rem) / 6);
        left: calc((100% - 1rem) / 6);
        height: 1px;
        background: var(--color-primary);
        content: "";
    }

    html.site-theme .simulator-metrics article::before {
        top: -0.8rem;
        left: 50%;
        width: 1px;
        height: 0.8rem;
    }

    html.site-theme .simulator-metrics article::after {
        top: calc(-0.8rem - 0.225rem);
        left: calc(50% - 0.225rem);
    }
}

@media (min-width: 901px) {
    html.site-theme body.app-page {
        background: var(--color-canvas) !important;
    }
}