@layer page {
    :root {
        --tour-accent: light-dark(var(--blue-600), var(--blue-400));
        --tour-header-height: 56px;
        --tour-header-color: var(--gray-200);
        --tour-focused-line-background: light-dark(#fff8c5, rgba(187, 128, 9, 0.2));
        --tour-border-color: light-dark(var(--gray-200), var(--gray-700));
    }

    .tour-body {
        background: var(--page-background);
        color: var(--text-color);
        display: flex;
        flex-direction: column;
        font-family: var(--font-family-base);
        height: 100dvh;
        overflow: hidden;
    }

    /* Header */

    .tour-header {
        align-items: center;
        background: light-dark(var(--gray-800), var(--gray-950));
        border-bottom: 1px solid var(--tour-border-color);
        display: flex;
        flex-shrink: 0;
        height: var(--tour-header-height);
        justify-content: space-between;
        padding: 0 var(--spacing-4);
    }
    .tour-header-logo {
        align-items: center;
        color: var(--text-color);
        display: flex;
        gap: var(--spacing-3);
        text-decoration: none;
    }
    .tour-header-logo svg {
        display: block;
        filter: invert(1);
        height: 24px;
        width: auto;
    }
    /* same trick used by the main site header (the logo SVG has hardcoded colors) */
    .dark-theme .tour-header-logo svg {
        filter: invert(1);
    }
    .tour-header-title {
        border-left: 1px solid var(--tour-border-color);
        color: var(--tour-header-color);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.03em;
        padding-left: var(--spacing-3);
        text-transform: uppercase;
    }
    .tour-header-back {
        align-items: center;
        color: var(--tour-header-color);
        display: flex;
        font-size: var(--font-size-sm);
        gap: var(--spacing-1);
        text-decoration: none;
    }
    .tour-header-back:hover {
        text-decoration: underline
    }
    .tour-header-back svg {
        height: 16px;
        width: 16px;
    }

    /* Split screen */

    .tour-split {
        display: grid;
        flex: 1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 0;
    }

    .tour-prose {
        overflow-y: auto;
        padding: var(--spacing-8) var(--spacing-10) calc(var(--spacing-16) + var(--spacing-10));
    }
    .tour-prose > * {
        margin-left: auto;
        margin-right: auto;
        max-width: 44rem;
    }
    .tour-prose h1 {
        font-size: var(--font-size-3xl);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-6);
    }
    .tour-lesson-meta {
        align-items: baseline;
        color: var(--ui-text-secondary-color);
        display: flex;
        font-size: var(--font-size-sm);
        gap: var(--spacing-4);
        justify-content: space-between;
        margin-bottom: var(--spacing-2);
    }
    .tour-lesson-meta p {
        margin-bottom: 0;
    }
    .tour-hint {
        text-align: right;
    }
    .tour-hint kbd {
        background: light-dark(var(--gray-100), var(--gray-800));
        border: 1px solid light-dark(var(--gray-300), var(--gray-600));
        border-bottom-width: 2px;
        border-radius: var(--radius-sm);
        /* app.css (Bootstrap) sets a white color on <kbd> */
        color: inherit;
        display: inline-block;
        font-family: var(--font-family-monospace);
        font-size: 0.85em;
        line-height: 1;
        padding: 2px 5px;
    }

    .tour-you-will-learn {
        border: 1px solid var(--tour-border-color);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-4) var(--spacing-5);
    }
    .tour-you-will-learn h2 {
        color: var(--ui-text-secondary-color);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.05em;
        margin-bottom: var(--spacing-2);
        text-transform: uppercase;
    }
    .tour-you-will-learn ul {
        margin: 0;
        padding-left: var(--spacing-5);
    }
    .tour-you-will-learn li {
        margin-bottom: var(--spacing-1);
    }

    .tour-step {
        border-left: 3px solid transparent;
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-2);
        margin-left: calc(-1 * var(--spacing-4));
        padding: var(--spacing-3) var(--spacing-4);
    }
    .tour-step[role='button'] {
        cursor: pointer;
    }
    .tour-step[role='button']:hover {
        background: light-dark(var(--gray-100), var(--gray-800));
    }
    .tour-step[role='button']:focus-visible {
        outline: 2px solid var(--tour-accent);
        outline-offset: 2px;
    }
    .tour-step.is-active {
        background: light-dark(var(--gray-100), var(--gray-800));
        border-left-color: var(--tour-accent);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .tour-step p:last-child {
        margin-bottom: 0;
    }
    .tour-step a,
    .tour-all-step a,
    .tour-landing-next a {
        color: var(--tour-accent);
        font-weight: var(--font-weight-semibold);
    }
    .tour-step a:hover,
    .tour-all-step a:hover,
    .tour-landing-next a:hover {
        text-decoration: underline;
    }

    .tour-whats-next {
        margin-top: var(--spacing-8);
        text-align: center;
    }
    /* Code pane */

    .tour-code {
        background: var(--doc-codeblock-background);
        border-left: 1px solid var(--tour-border-color);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .tour-file-tabs {
        border-bottom: 1px solid var(--tour-border-color);
        display: flex;
        flex-shrink: 0;
        gap: var(--spacing-1);
        overflow-x: auto;
        padding: var(--spacing-2) var(--spacing-3) 0;
    }
    .tour-file-tab {
        align-items: center;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        color: var(--ui-text-secondary-color);
        display: flex;
        font-family: var(--font-family-monospace);
        font-size: var(--font-size-xs);
        gap: var(--spacing-1);
        padding: var(--spacing-1) var(--spacing-2) var(--spacing-2);
        white-space: nowrap;
    }
    .tour-file-tab svg {
        height: 14px;
        width: 14px;
    }
    .tour-file-tab:hover {
        color: var(--text-color);
    }
    .tour-file-tab[aria-selected='true'] {
        border-bottom-color: var(--tour-accent);
        color: var(--text-color);
    }

    .tour-file-panel {
        display: none;
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-3) var(--spacing-3) calc(var(--spacing-16) + var(--spacing-10));
    }
    .tour-file-panel.is-active {
        display: block;
    }
    .tour-file-panel .codeblock:not(.codeblock-terminal) {
        background: transparent;
    }
    .tour-file-panel .codeblock {
        margin-bottom: 0;
    }

    /* Focusable code lines */

    /* needed because code.css styles bare <code> elements with the reddish color of inline code */
    .tour-codeblock pre.codeblock-code code {
        color: var(--text-color);
    }
    .tour-codeblock.codeblock-terminal pre.codeblock-code code {
        color: var(--gray-100);
    }

    /* the line numbers must use exactly the same font-size and line-height as
       the code: the fixed line-heights of code.css drift at small viewports */
    .tour-codeblock pre.codeblock-lines,
    .tour-codeblock pre.codeblock-code {
        font-size: var(--font-size-xs);
        line-height: 1.8;
    }
    @media (min-width: 768px) {
        .tour-codeblock pre.codeblock-lines {
            line-height: calc(1.8 * var(--font-size-sm));
        }
        .tour-codeblock pre.codeblock-code {
            font-size: var(--font-size-sm);
        }
    }

    /* block display (instead of inline) is needed to align these lines with the
       line numbers: inline-block boxes add extra height under the baseline;
       the negative margin extends the lines over the <pre> padding, so the
       focus border and background don't touch the first code character */
    .tour-line {
        display: block;
        margin-left: calc(-1 * var(--spacing-2));
        min-height: 1lh;
        padding-left: var(--spacing-2);
        transition:
            opacity 0.15s ease-in-out,
            background-color 0.15s ease-in-out;
    }
    .tour-codeblock.is-dimmed .tour-line:not(.is-focused) {
        opacity: 0.35;
    }
    .tour-codeblock .tour-line.is-focused {
        background: var(--tour-focused-line-background);
        box-shadow: inset 3px 0 0 var(--tour-accent);
    }
    /* the terminal is always dark, even in light mode, so the focused lines
       can't use the light yellow background of the regular code blocks;
       instead, use a gray slightly lighter than the terminal background and
       a bright yellow border to make the focus stand out */
    .tour-codeblock.codeblock-terminal .tour-line.is-focused {
        background: light-dark(var(--gray-700), var(--gray-800));
        box-shadow: inset 3px 0 0 var(--yellow-400);
    }

    /* Floating lesson navigator */

    .tour-nav {
        align-items: center;
        background: color-mix(in srgb, var(--page-background) 85%, transparent);
        backdrop-filter: blur(8px);
        border: 1px solid var(--tour-border-color);
        border-radius: var(--radius-full);
        bottom: var(--spacing-5);
        box-shadow: 0 4px 16px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
        display: flex;
        gap: var(--spacing-2);
        left: 50%;
        padding: var(--spacing-1) var(--spacing-2);
        position: fixed;
        transform: translateX(-50%);
        z-index: 10;
    }
    .tour-nav-arrow,
    .tour-nav-toc {
        align-items: center;
        border-radius: var(--radius-full);
        color: var(--text-color);
        display: flex;
        height: 36px;
        justify-content: center;
        position: relative;
        text-decoration: none;
        width: 36px;
    }
    /* custom tooltip (instead of the title attribute) to display a nicely
       styled <kbd> key that hints the keyboard shortcut */
    .tour-nav-tooltip {
        background: light-dark(var(--gray-900), var(--gray-700));
        border-radius: var(--radius-md);
        bottom: calc(100% + var(--spacing-3));
        color: var(--white);
        font-size: var(--font-size-sm);
        left: 50%;
        opacity: 0;
        padding: var(--spacing-2) var(--spacing-3);
        pointer-events: none;
        position: absolute;
        transform: translateX(-50%);
        transition: opacity 0.15s ease-in-out;
        white-space: nowrap;
    }
    [data-nav="prev"] .tour-nav-tooltip {
        text-align: right;
    }
    .tour-nav-tooltip-key {
        color: light-dark(var(--gray-400), var(--gray-300));
        display: block;
        font-size: var(--font-size-xs);
        margin-top: var(--spacing-1);
    }
    .tour-nav-arrow:hover .tour-nav-tooltip,
    .tour-nav-arrow:focus-visible .tour-nav-tooltip,
    .tour-nav-toc:hover .tour-nav-tooltip,
    .tour-nav-toc:focus-visible .tour-nav-tooltip {
        opacity: 1;
    }
    .tour-nav-tooltip kbd {
        /* app.css (Bootstrap) sets its own background on <kbd> */
        background: transparent;
        border: 1px solid var(--gray-500);
        border-bottom-width: 2px;
        border-radius: var(--radius-sm);
        color: inherit;
        display: inline-block;
        font-family: var(--font-family-monospace);
        font-size: 0.9em;
        line-height: 1;
        padding: 2px 5px;
    }
    .tour-nav-arrow:hover,
    .tour-nav-toc:hover {
        background: light-dark(var(--gray-100), var(--gray-700));
        color: var(--text-color);
    }
    .tour-nav-arrow.is-disabled {
        color: var(--ui-text-secondary-color);
        opacity: 0.4;
    }
    .tour-nav svg {
        height: 20px;
        width: 20px;
    }
    .tour-step-dots {
        align-items: center;
        display: flex;
        gap: var(--spacing-2);
        list-style: none;
        margin: 0;
        padding: 0 var(--spacing-1);
    }
    .tour-step-dot {
        background: light-dark(var(--gray-300), var(--gray-600));
        border: 0;
        border-radius: var(--radius-full);
        height: 8px;
        padding: 0;
        width: 8px;
    }
    .tour-step-dot.is-active {
        background: var(--tour-accent);
    }
    .tour-view-toggle {
        align-items: center;
        background: transparent;
        border: 1px solid var(--tour-border-color);
        border-radius: var(--radius-full);
        color: var(--text-color);
        display: none;
        font-size: var(--font-size-sm);
        gap: var(--spacing-1);
        padding: var(--spacing-1) var(--spacing-3);
    }
    .tour-view-toggle svg {
        height: 16px;
        width: 16px;
    }

    /* Landing page */

    .tour-landing,
    .tour-all {
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-10) var(--spacing-5) var(--spacing-16);
    }
    .tour-landing > section,
    .tour-all > * {
        margin-left: auto;
        margin-right: auto;
        max-width: 46rem;
    }
    .tour-landing-hero {
        padding: var(--spacing-10) 0;
        text-align: center;
    }
    .tour-landing-hero h1 {
        font-size: var(--font-size-4xl);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-5);
    }
    .tour-landing-hero p {
        color: var(--ui-text-secondary-color);
        font-size: var(--font-size-lg);
        margin: 0 auto var(--spacing-6);
        max-width: 38rem;
        text-wrap: balance;
    }
    .tour-landing-actions {
        align-items: center;
        display: flex;
        gap: var(--spacing-5);
        justify-content: center;
    }
    .tour-landing-track {
        margin-bottom: var(--spacing-12);
    }
    .tour-landing-track h2 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-1);
    }
    .tour-track-meta {
        color: var(--ui-text-secondary-color);
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-4);
    }
    .tour-lesson-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tour-lesson-list a {
        align-items: center;
        border: 1px solid var(--tour-border-color);
        border-radius: var(--radius-lg);
        color: var(--text-color);
        display: flex;
        gap: var(--spacing-4);
        padding: var(--spacing-3) var(--spacing-4);
        text-decoration: none;
    }
    .tour-lesson-list a:hover {
        background: light-dark(var(--gray-50), var(--gray-800));
        border-color: var(--tour-accent);
    }
    .tour-lesson-number {
        align-items: center;
        background: light-dark(var(--gray-100), var(--gray-800));
        border-radius: var(--radius-full);
        color: var(--ui-text-secondary-color);
        display: flex;
        flex-shrink: 0;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        height: 32px;
        justify-content: center;
        width: 32px;
    }
    .tour-lesson-number svg {
        height: 16px;
        width: 16px;
    }
    .tour-lesson-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }
    .tour-lesson-title {
        font-weight: var(--font-weight-semibold);
    }
    .tour-lesson-description {
        color: var(--ui-text-secondary-color);
        font-size: var(--font-size-sm);
    }
    .tour-lesson-minutes {
        color: var(--ui-text-secondary-color);
        flex-shrink: 0;
        font-size: var(--font-size-sm);
    }
    .tour-lesson-check {
        color: light-dark(var(--green-600), var(--green-400));
        flex-shrink: 0;
    }
    .tour-lesson-check svg {
        display: block;
        height: 20px;
        width: 20px;
    }

    .tour-landing-next h2 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-4);
    }
    .tour-landing-next li {
        margin-bottom: var(--spacing-2);
    }

    /* All-in-one-page version */

    .tour-all-header {
        margin-bottom: var(--spacing-10);
    }
    .tour-all-header h1 {
        font-size: var(--font-size-3xl);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-2);
    }
    .tour-all-header p {
        color: var(--ui-text-secondary-color);
    }
    .tour-all-lesson {
        margin-bottom: var(--spacing-12);
    }
    .tour-all-lesson h2 {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-4);
    }
    .tour-all-lesson h2 a {
        color: var(--text-color);
        text-decoration: none;
    }
    .tour-all-step {
        margin-bottom: var(--spacing-3);
    }
    .tour-file-name {
        color: var(--ui-text-secondary-color);
        font-family: var(--font-family-monospace);
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-1);
    }
    .tour-all-file {
        margin-bottom: var(--spacing-5);
    }

    /* Mobile layout: stacked panes with a Text/Code toggle in the navigator */

    @media (max-width: 767.98px) {
        .tour-split {
            display: flex;
            flex-direction: column;
        }
        .tour-prose {
            padding: var(--spacing-5) var(--spacing-4) calc(var(--spacing-16) + var(--spacing-8));
        }
        .tour-code {
            border-left: 0;
            display: none;
        }
        .tour-view-code .tour-code {
            display: flex;
        }
        .tour-view-code .tour-prose {
            display: none;
        }
        .tour-view-toggle {
            display: flex;
        }
        .tour-step-dots {
            display: none;
        }
        /* there are no arrow keys on touch devices, and the code pane is
           behind the Text/Code toggle, so the hint would only confuse */
        .tour-hint {
            display: none;
        }
        .tour-landing-actions {
            flex-direction: column;
            gap: var(--spacing-3);
        }
    }
}